From 85001814a257e3b278965bbf868ccd43cadf8b02 Mon Sep 17 00:00:00 2001
From: RiedleroD <github@riedler.wien>
Date: Wed, 26 Jun 2024 18:09:13 +0200
Subject: [PATCH] added setting for user info compactness

---
 .../settings_modal/tabs/general_tab.vue       |  5 +++
 src/components/user_card/user_card.js         |  3 ++
 src/components/user_card/user_card.scss       | 31 ++++++++++++++-----
 src/components/user_card/user_card.vue        |  5 ++-
 src/i18n/de.json                              |  1 +
 src/i18n/en.json                              |  1 +
 src/modules/config.js                         |  1 +
 7 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 70fcaef8..6bebae66 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -164,6 +164,11 @@
             {{ $t('settings.center_align_bio') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="compactUserInfo">
+            {{ $t('settings.compact_user_info') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index cda142b9..f896391e 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -117,6 +117,9 @@ export default {
     shouldConfirmMute () {
       return this.mergedConfig.modalOnMute
     },
+    compactUserInfo () {
+      return this.$store.getters.mergedConfig.compactUserInfo
+    },
     ...mapGetters(['mergedConfig'])
   },
   components: {
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 854c4117..9d43c0bf 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -22,8 +22,10 @@
   }
 
   .user-buttons {
+    grid-area: edit;
     display: flex;
     padding: .5em 0 .5em 0;
+    justify-self: end;
   }
 
   .panel-body {
@@ -105,9 +107,12 @@
 
   .container {
     padding: 16px 0 6px;
-    display: flex;
-    align-items: flex-start;
-    max-height: 56px;
+    display: grid;
+    grid-template-areas:
+      "pfp summary edit"
+      "stats stats stats";
+    grid-template-columns: auto 1fr auto;
+    align-items: start;
 
     .Avatar {
       --_avatarShadowBox: var(--avatarShadow);
@@ -122,6 +127,7 @@
   }
 
   &-avatar-link {
+    grid-area: pfp;
     position: relative;
     cursor: pointer;
 
@@ -164,6 +170,7 @@
   }
 
   .user-summary {
+    grid-area: summary;
     display: grid;
     grid-template-areas:
       "name name name name name"
@@ -217,18 +224,17 @@
   }
 
   .user-counts {
+    grid-area: stats;
     display: flex;
     line-height:16px;
-    padding: 0 1.5em 0 1.5em;
-    margin: 0 auto;
+    padding-top: 0.5em;
     text-align: center;
-    justify-content: space-between;
+    justify-content: space-around;
     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;
 
@@ -315,6 +321,17 @@
       margin: 0;
     }
   }
+
+  &.-compact {
+    .container {
+      grid-template-areas: "pfp summary stats edit";
+      grid-template-columns: auto auto 1fr auto;
+    }
+    .user-counts {
+      padding-top: 0;
+      justify-content: space-evenly;
+    }
+  }
 }
 
 .sidebar .edit-profile-button {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 406f329d..39d2c63d 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -9,7 +9,10 @@
       class="background-image"
     />
     <div class="panel-heading -flexible-height">
-      <div class="user-info">
+      <div
+        class="user-info"
+        :class="{ '-compact': this.compactUserInfo }"
+      >
         <div class="container">
           <a
             v-if="allowZoomingAvatar"
diff --git a/src/i18n/de.json b/src/i18n/de.json
index ed68bfbf..11683317 100644
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@@ -497,6 +497,7 @@
         "checkboxRadius": "Auswahlfelder",
         "collapse_subject": "Beiträge mit Inhaltswarnungen einklappen",
         "columns": "Spalten",
+        "compact_user_info": "Kompakte Benutzerinfos",
         "composing": "Verfassen",
         "confirm_dialogs": "Bestätigung erforderlich für:",
         "confirm_dialogs_approve_follow": "Annehmen einer Followanfrage",
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 6318e9f5..8aac6834 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -503,6 +503,7 @@
         "checkboxRadius": "Checkboxes",
         "collapse_subject": "Collapse posts with content warnings",
         "columns": "Columns",
+        "compact_user_info": "Compact user info",
         "composing": "Composing",
         "confirm_dialogs": "Require confirmation for:",
         "confirm_dialogs_approve_follow": "Accepting a follow request",
diff --git a/src/modules/config.js b/src/modules/config.js
index a4d69096..09267864 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -57,6 +57,7 @@ export const defaultState = {
   pauseOnUnfocused: true,
   displayPageBackgrounds: true,
   centerAlignBio: false,
+  compactUserInfo: true,
   stopGifs: undefined,
   replyVisibility: 'all',
   thirdColumnMode: 'notifications',