From a24fff5d5ba40ec1914e155911c0b9af5197829d Mon Sep 17 00:00:00 2001
From: RiedleroD <github@riedler.wien>
Date: Fri, 26 Apr 2024 23:23:21 +0200
Subject: [PATCH] moved user stats to between user info and user actions

---
 src/components/user_card/user_card.scss | 141 ++++++++++++-----------
 src/components/user_card/user_card.vue  | 146 ++++++++++++------------
 2 files changed, 144 insertions(+), 143 deletions(-)

diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 0a5e744e..004e601d 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -21,6 +21,11 @@
     position: relative;
   }
 
+  .user-buttons {
+    display: flex;
+    padding: .5em 0 .5em 1em;
+  }
+
   .panel-body {
     word-wrap: break-word;
     border-bottom-right-radius: inherit;
@@ -165,12 +170,15 @@
   }
 
   .user-summary {
-    display: block;
+    display: grid;
+    grid-template-areas:
+      "name name name name name"
+      "hand role lock avg _";
+    grid-template-columns:
+       auto auto auto auto 1fr;
+    justify-items: start;
     margin-left: 0.6em;
-    text-align: left;
     text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1 1 0;
     // This is so that text doesn't get overlapped by avatar's shadow if it has
     // big one
     z-index: 1;
@@ -178,54 +186,75 @@
 
     --emoji-size: 1.7em;
 
-    .top-line,
-    .bottom-line {
+    .user-locked {
+      margin-left: 0.5em;
+      grid-area: lock;
+    }
+
+    .user-screen-name {
+      min-width: 1px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+      grid-area: hand;
+    }
+
+    .dailyAvg {
+      min-width: 1px;
+      margin-left: 1em;
+      font-size: 0.7em;
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+      grid-area: avg;
+    }
+
+    .user-roles {
       display: flex;
+      grid-area: role;
+
+      .user-role {
+        color: $fallback--text;
+        color: var(--alertNeutralText, $fallback--text);
+        background-color: $fallback--fg;
+        background-color: var(--alertNeutral, $fallback--fg);
+      }
+    }
+  }
+
+  .user-counts {
+    display: flex;
+    line-height:16px;
+    padding: 0 1.5em 0 1.5em;
+    margin: 0 auto;
+    text-align: center;
+    justify-content: space-between;
+    color: $fallback--lightText;
+    color: var(--lightText, $fallback--lightText);
+    align-self: center;
+
+    .user-count {
+      flex: 1 0 auto;
+      padding: .5em 0 .5em 0;
+      margin: 0 .5em;
+
+      h5 {
+        font-size:1em;
+        font-weight: bolder;
+        margin: 0 0 0.25em;
+      }
+      a {
+        text-decoration: none;
+      }
     }
   }
 
   .user-name {
     text-overflow: ellipsis;
     overflow: hidden;
-    flex: 1 1 auto;
     margin-right: 1em;
     font-size: 1.1em;
-  }
-
-  .bottom-line {
-    font-weight: light;
-    font-size: 1.1em;
-    align-items: baseline;
-
-    .lock-icon {
-      margin-left: 0.5em;
-    }
-
-    .user-screen-name {
-      min-width: 1px;
-      flex: 0 1 auto;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
-
-    .dailyAvg {
-      min-width: 1px;
-      flex: 0 0 auto;
-      margin-left: 1em;
-      font-size: 0.7em;
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
-    .user-role {
-      flex: none;
-      color: $fallback--text;
-      color: var(--alertNeutralText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--alertNeutral, $fallback--fg);
-    }
+    grid-area: name;
   }
 
   .user-meta {
@@ -295,29 +324,3 @@
 .sidebar .edit-profile-button {
   display: none;
 }
-
-.user-counts {
-  display: flex;
-  line-height:16px;
-  padding: .5em 1.5em 0em 1.5em;
-  text-align: center;
-  justify-content: space-between;
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
-  flex-wrap: wrap;
-}
-
-.user-count {
-  flex: 1 0 auto;
-  padding: .5em 0 .5em 0;
-  margin: 0 .5em;
-
-  h5 {
-    font-size:1em;
-    font-weight: bolder;
-    margin: 0 0 0.25em;
-  }
-  a {
-    text-decoration: none;
-  }
-}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 289db15b..57f922d7 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -37,14 +37,79 @@
             />
           </router-link>
           <div class="user-summary">
-            <div class="top-line">
-              <RichContent
-                :title="user.name"
-                class="user-name"
-                :html="user.name"
-                :emoji="user.emoji"
+            <RichContent
+              :title="user.name"
+              class="user-name"
+              :html="user.name"
+              :emoji="user.emoji"
+            />
+            <router-link
+              class="user-screen-name"
+              :title="user.screen_name_ui"
+              :to="userProfileLink(user)"
+            >
+              @{{ user.screen_name_ui }}
+            </router-link>
+            <span class="user-roles" v-if="!hideBio && (user.deactivated || !!visibleRole || user.bot)">
+              <span
+                v-if="user.deactivated"
+                class="alert user-role"
+              >
+                {{ $t('user_card.deactivated') }}
+              </span>
+              <span
+                v-if="!!visibleRole"
+                class="alert user-role"
+              >
+                {{ $t(`general.role.${visibleRole}`) }}
+              </span>
+              <span
+                v-if="user.bot"
+                class="alert user-role"
+              >
+                {{ $t('user_card.bot') }}
+              </span>
+            </span>
+            <span class="user-locked" v-if="user.locked">
+              <FAIcon
+                class="lock-icon"
+                icon="lock"
+                size="sm"
               />
-              <button
+            </span>
+            <span
+              v-if="!mergedConfig.hideUserStats && !hideBio"
+              class="dailyAvg"
+            >{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
+          </div>
+          <div
+            v-if="!mergedConfig.hideUserStats && switcher"
+            class="user-counts"
+          >
+            <div
+              class="user-count"
+              @click.prevent="setProfileView('statuses')"
+            >
+              <h5>{{ $t('user_card.statuses') }}</h5>
+              <span>{{ user.statuses_count }} <br></span>
+            </div>
+            <div
+              class="user-count"
+              @click.prevent="setProfileView('friends')"
+            >
+              <h5>{{ $t('user_card.followees') }}</h5>
+              <span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
+            </div>
+            <div
+              class="user-count"
+              @click.prevent="setProfileView('followers')"
+            >
+              <h5>{{ $t('user_card.followers') }}</h5>
+              <span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
+            </div>
+          </div>
+          <div class="user-buttons">
+            <button
                 v-if="!isOtherUser && user.is_local"
                 class="button-unstyled edit-profile-button"
                 @click.stop="openProfileTab"
@@ -83,47 +148,6 @@
                 :user="user"
                 :relationship="relationship"
               />
-            </div>
-            <div class="bottom-line">
-              <router-link
-                class="user-screen-name"
-                :title="user.screen_name_ui"
-                :to="userProfileLink(user)"
-              >
-                @{{ user.screen_name_ui }}
-              </router-link>
-              <template v-if="!hideBio">
-                <span
-                  v-if="user.deactivated"
-                  class="alert user-role"
-                >
-                  {{ $t('user_card.deactivated') }}
-                </span>
-                <span
-                  v-if="!!visibleRole"
-                  class="alert user-role"
-                >
-                  {{ $t(`general.role.${visibleRole}`) }}
-                </span>
-                <span
-                  v-if="user.bot"
-                  class="alert user-role"
-                >
-                  {{ $t('user_card.bot') }}
-                </span>
-              </template>
-              <span v-if="user.locked">
-                <FAIcon
-                  class="lock-icon"
-                  icon="lock"
-                  size="sm"
-                />
-              </span>
-              <span
-                v-if="!mergedConfig.hideUserStats && !hideBio"
-                class="dailyAvg"
-              >{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
-            </div>
           </div>
         </div>
         <div class="user-meta">
@@ -269,32 +293,6 @@
       v-if="!hideBio"
       class="panel-body"
     >
-      <div
-        v-if="!mergedConfig.hideUserStats && switcher"
-        class="user-counts"
-      >
-        <div
-          class="user-count"
-          @click.prevent="setProfileView('statuses')"
-        >
-          <h5>{{ $t('user_card.statuses') }}</h5>
-          <span>{{ user.statuses_count }} <br></span>
-        </div>
-        <div
-          class="user-count"
-          @click.prevent="setProfileView('friends')"
-        >
-          <h5>{{ $t('user_card.followees') }}</h5>
-          <span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
-        </div>
-        <div
-          class="user-count"
-          @click.prevent="setProfileView('followers')"
-        >
-          <h5>{{ $t('user_card.followers') }}</h5>
-          <span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
-        </div>
-      </div>
       <RichContent
         v-if="!hideBio"
         class="user-card-bio"