natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

User Page redesign

This commit is contained in:
cutestnekoaqua 2022-12-15 19:13:36 +01:00
parent 58fa02059d
commit 8705cb8251
No known key found for this signature in database
GPG Key ID: 6BF0964A5069C1E0
1 changed files with 40 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/client/src/pages/user/home.vue
View File

@ -15,8 +15,10 @@
<div ref="bannerEl" class="banner" :style="style"></div> <div ref="bannerEl" class="banner" :style="style"></div>
<div class="fade"></div> <div class="fade"></div>
<div class="title"> <div class="title">
<div class="nameCollumn">
<MkUserName class="name" :user="user" :nowrap="true"/> <MkUserName class="name" :user="user" :nowrap="true"/>
<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span> <span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
</div>
<div class="bottom"> <div class="bottom">
<span class="username"><MkAcct :user="user" :detail="true"/></span> <span class="username"><MkAcct :user="user" :detail="true"/></span>
<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ph-bookmark-simple-fill ph-lg"></i></span> <span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ph-bookmark-simple-fill ph-lg"></i></span>
@ -28,8 +30,10 @@
</div> </div>
<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/> <MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
<div class="title"> <div class="title">
<MkUserName :user="user" :nowrap="false" class="name"/> <div class="nameCollumn">
<span v-if="$i && $i.id != user.id && user.isFollowed" class="followedWindow">{{ i18n.ts.followsYou }}</span> <MkUserName class="name" :user="user" :nowrap="true"/>
<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
</div>
<div class="bottom"> <div class="bottom">
<span class="username"><MkAcct :user="user" :detail="true"/></span> <span class="username"><MkAcct :user="user" :detail="true"/></span>
<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ph-bookmark-simple-fill ph-lg"></i></span> <span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ph-bookmark-simple-fill ph-lg"></i></span>
@ -291,8 +295,9 @@ onUnmounted(() => {
box-sizing: border-box; box-sizing: border-box;
color: #fff; color: #fff;
> .name { > .nameCollumn {
display: block; display: block;
> .name {
margin: 0; margin: 0;
line-height: 32px; line-height: 32px;
font-weight: bold; font-weight: bold;
@ -301,9 +306,9 @@ onUnmounted(() => {
} }
> .followed { > .followed {
position: absolute; position: relative;
top: 8px; top: -4px;
left: 220px; left: 4px;
padding: 4px 8px; padding: 4px 8px;
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
@ -311,6 +316,8 @@ onUnmounted(() => {
border-radius: 24px; border-radius: 24px;
} }
}
> .bottom { > .bottom {
> * { > * {
display: inline-block; display: inline-block;
@ -403,18 +410,21 @@ onUnmounted(() => {
font-weight: bold; font-weight: bold;
border-bottom: solid 0.5px var(--divider); border-bottom: solid 0.5px var(--divider);
> .name { > .nameCollumn {
display: block; display: block;
> .name {
margin: 0; margin: 0;
align-content: center;
line-height: 32px; line-height: 32px;
font-weight: bold; font-weight: bold;
font-size: 1.8em; font-size: 1.8em;
text-shadow: 0 0 8px #000;
} }
> .followed { > .followed {
position: absolute; position: relative;
top: 8px; top: -4px;
left: 220px; left: 4px;
padding: 4px 8px; padding: 4px 8px;
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
@ -422,6 +432,8 @@ onUnmounted(() => {
border-radius: 24px; border-radius: 24px;
} }
}
> .followedWindow { > .followedWindow {
position: relative; position: relative;
top: -25px; top: -25px;
@ -456,6 +468,9 @@ onUnmounted(() => {
> .description { > .description {
padding: 24px 24px 24px 154px; padding: 24px 24px 24px 154px;
font-size: 0.95em; font-size: 0.95em;
top: -65px;
position: relative;
max-width: 400px;
> .empty { > .empty {
margin: 0; margin: 0;
@ -577,6 +592,19 @@ onUnmounted(() => {
> .status { > .status {
padding: 16px; padding: 16px;
} }
> .description {
top: -55px;
position: relative;
}
> .follow-container {
overflow: visible !important;
> .actions {
top: -110px;
right: 0px;
}
}
} }
> .contents { > .contents {