From 8705cb8251ecaab9364d9a8ffa59e4ac81a9ccb8 Mon Sep 17 00:00:00 2001
From: cutestnekoaqua <waterdev@galaxycrow.de>
Date: Thu, 15 Dec 2022 19:13:36 +0100
Subject: [PATCH] User Page redesign

---
 packages/client/src/pages/user/home.vue | 52 +++++++++++++++++++------
 1 file changed, 40 insertions(+), 12 deletions(-)

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