diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 4f314ca0..6bebae66 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -159,6 +159,16 @@ {{ $t('settings.show_page_backgrounds') }} +
  • + + {{ $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..fdedafa7 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -117,6 +117,11 @@ export default { shouldConfirmMute () { return this.mergedConfig.modalOnMute }, + compactUserInfo () { + return this.$store.getters.mergedConfig.compactUserInfo + && (this.$store.state.interface.layoutType !== 'mobile') + && this.switcher + }, ...mapGetters(['mergedConfig']) }, components: { diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 0a5e744e..c5dc8d88 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -21,6 +21,13 @@ position: relative; } + .user-buttons { + grid-area: edit; + display: flex; + padding: .5em 0 .5em 0; + justify-self: end; + } + .panel-body { word-wrap: break-word; border-bottom-right-radius: inherit; @@ -53,7 +60,6 @@ } &-bio { - text-align: center; display: block; line-height: 1.3; padding: 1em; @@ -100,15 +106,14 @@ padding: 0 26px; .container { - min-width: 0; padding: 16px 0 6px; - display: flex; - align-items: flex-start; - max-height: 56px; - - > * { - min-width: 0; - } + display: grid; + grid-template-areas: + "pfp name edit" + "pfp summary summary" + "stats stats stats"; + grid-template-columns: auto 1fr auto; + align-items: start; .Avatar { --_avatarShadowBox: var(--avatarShadow); @@ -123,6 +128,7 @@ } &-avatar-link { + grid-area: pfp; position: relative; cursor: pointer; @@ -153,8 +159,8 @@ .external-link-button, .edit-profile-button { cursor: pointer; - width: 2.5em; - text-align: center; + width: 2.3em; + text-align: right; margin: -0.5em 0; padding: 0.5em 0; @@ -165,12 +171,16 @@ } .user-summary { - display: block; + grid-area: summary; + 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,56 +188,82 @@ --emoji-size: 1.7em; - .top-line, - .bottom-line { - display: flex; - } - } - - .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 { + .user-locked { margin-left: 0.5em; + grid-area: lock; } .user-screen-name { min-width: 1px; - flex: 0 1 auto; + max-width: 100%; text-overflow: ellipsis; overflow: hidden; color: $fallback--lightText; color: var(--lightText, $fallback--lightText); + grid-area: hand; } .dailyAvg { min-width: 1px; - flex: 0 0 auto; margin-left: 1em; font-size: 0.7em; color: $fallback--text; color: var(--text, $fallback--text); + grid-area: avg; } - .user-role { - flex: none; - color: $fallback--text; - color: var(--alertNeutralText, $fallback--text); - background-color: $fallback--fg; - background-color: var(--alertNeutral, $fallback--fg); + .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 { + grid-area: stats; + display: flex; + line-height:16px; + padding-top: 0.5em; + text-align: center; + justify-content: space-around; + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + align-self: center; + + .user-count { + 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-align: start; + text-overflow: ellipsis; + overflow: hidden; + margin-left: 0.6em; + font-size: 1.1em; + grid-area: name; + align-self: center; + white-space: nowrap; + max-width: 100%; + z-index: 1; // so shadow from user avatar doesn't overlap it + } + .user-meta { margin-bottom: .15em; display: flex; @@ -290,34 +326,21 @@ margin: 0; } } + + &.-compact { + .container { + grid-template-areas: + "pfp name stats edit" + "pfp summary stats edit"; + grid-template-columns: auto auto 1fr auto; + } + .user-counts { + padding-top: 0; + justify-content: space-evenly; + } + } } .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..9b1b85e8 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -9,7 +9,10 @@ class="background-image" />
    -