oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues 1 Pull Requests Packages Releases 2 Activity

user page 🎨

Browse Source
This commit is contained in:
syuilo 2021-08-07 19:19:43 +09:00
parent f565c5f730
commit fe8334931f
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/client/pages/user/index.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div class="ftskorzw wide" v-if="user && narrow === false"> <div class="ftskorzw wide" v-if="user && narrow === false">
<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_gap"/> <MkRemoteCaution v-if="user.host != null" :href="user.url"/>
<div class="banner-container _gap" :style="style"> <div class="banner-container" :style="style">
<div class="banner" ref="banner" :style="style"></div> <div class="banner" ref="banner" :style="style"></div>
</div> </div>
<div class="contents"> <div class="contents">
@ -276,6 +276,7 @@ export default defineComponent({
return { return {
[symbols.PAGE_INFO]: computed(() => this.user ? { [symbols.PAGE_INFO]: computed(() => this.user ? {
title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`, title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`,
subtitle: `@${getAcct(this.user)}`,
userName: this.user, userName: this.user,
avatar: this.user, avatar: this.user,
path: `/@${this.user.username}`, path: `/@${this.user.username}`,
@ -313,7 +314,7 @@ export default defineComponent({
mounted() { mounted() {
window.requestAnimationFrame(this.parallaxLoop); window.requestAnimationFrame(this.parallaxLoop);
this.narrow = true; //this.$el.clientWidth < 1000; this.narrow = this.$el.clientWidth < 1000;
}, },
beforeUnmount() { beforeUnmount() {
@ -381,13 +382,10 @@ export default defineComponent({
} }
.ftskorzw.wide { .ftskorzw.wide {
max-width: 1150px;
margin: 0 auto;
> .banner-container { > .banner-container {
position: relative; position: relative;
height: 450px; height: 300px;
border-radius: 16px;
overflow: hidden; overflow: hidden;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -404,6 +402,7 @@ export default defineComponent({
> .contents { > .contents {
display: flex; display: flex;
padding: 16px;
> .side { > .side {
width: 360px; width: 360px;
@ -561,6 +560,7 @@ export default defineComponent({
.ftskorzw.narrow { .ftskorzw.narrow {
box-sizing: border-box; box-sizing: border-box;
overflow: clip; overflow: clip;
background: var(--bg);
> .punished { > .punished {
font-size: 0.8em; font-size: 0.8em;