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') }}
+
+
+ {{ $t('settings.compact_user_info') }}
+
+
{{ $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"
/>