From 0b536bd83118a507ed4d5165c3d4eee3317712f4 Mon Sep 17 00:00:00 2001
From: Robin Appelman <robin@icewind.nl>
Date: Mon, 12 Oct 2020 17:22:47 +0200
Subject: show profile numbers inline instead of next to the name and avatar

Signed-off-by: Robin Appelman <robin@icewind.nl>
---
 src/components/ProfileInfo.vue | 36 +++++++++++++++++-------------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/ProfileInfo.vue b/src/components/ProfileInfo.vue
index 899494a2..53a1e8b9 100644
--- a/src/components/ProfileInfo.vue
+++ b/src/components/ProfileInfo.vue
@@ -22,23 +22,11 @@
 
 <template>
 	<div v-if="profileAccount && accountInfo" class="user-profile">
-		<div>
-			<avatar v-if="accountInfo.local" :user="localUid" :disable-tooltip="true"
-				:size="128" />
-			<avatar v-else :url="avatarUrl" :disable-tooltip="true"
-				:size="128" />
-			<h2>{{ displayName }}</h2>
-			<p>@{{ accountInfo.account }}</p>
-			<p v-if="accountInfo.website">
-				Website: <a :href="accountInfo.website.value">
-					{{ accountInfo.website.value }}
-				</a>
-			</p>
-			<follow-button :account="accountInfo.account" :uid="uid" />
-			<button v-if="serverData.public" class="primary" @click="followRemote">
-				{{ t('social', 'Follow') }}
-			</button>
-		</div>
+		<avatar v-if="accountInfo.local" :user="localUid" :disable-tooltip="true"
+			:size="128" />
+		<avatar v-else :url="avatarUrl" :disable-tooltip="true"
+			:size="128" />
+		<h2>{{ displayName }}</h2>
 		<!-- TODO: we have no details, timeline and follower list for non-local accounts for now -->
 		<ul v-if="accountInfo.details && accountInfo.local" class="user-profile--sections">
 			<li>
@@ -57,17 +45,28 @@
 				</router-link>
 			</li>
 		</ul>
+		<p>@{{ accountInfo.account }}</p>
+		<p v-if="accountInfo.website">
+			Website: <a :href="accountInfo.website.value">
+				{{ accountInfo.website.value }}
+			</a>
+		</p>
+		<follow-button :account="accountInfo.account" :uid="uid" />
+		<button v-if="serverData.public" class="primary" @click="followRemote">
+			{{ t('social', 'Follow') }}
+		</button>
 	</div>
 </template>
 <style scoped>
 	.user-profile {
 		display: flex;
 		flex-wrap: wrap;
+    flex-direction: column;
 		justify-content: space-between;
 		width: 100%;
 		text-align: center;
 		padding-top: 20px;
-		align-items: flex-end;
+		align-items: center;
 		margin-bottom: 20px;
 	}
 	h2 {
@@ -76,7 +75,6 @@
 
 	.user-profile--sections {
 		display: flex;
-		margin-bottom: 30px;
 	}
 	.user-profile--sections li {
 		flex-grow: 1;
-- 
cgit v1.2.3