From a24fff5d5ba40ec1914e155911c0b9af5197829d Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Fri, 26 Apr 2024 23:23:21 +0200 Subject: [PATCH 01/14] 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 @@ />
-
- + + @{{ user.screen_name_ui }} + + + + {{ $t('user_card.deactivated') }} + + + {{ $t(`general.role.${visibleRole}`) }} + + + {{ $t('user_card.bot') }} + + + + -
+
+
+
{{ $t('user_card.statuses') }}
+ {{ user.statuses_count }}
+
+
+
{{ $t('user_card.followees') }}
+ {{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }} +
+
+
{{ $t('user_card.followers') }}
+ {{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }} +
+
+
+
-
- - @{{ user.screen_name_ui }} - - - - - - {{ dailyAvg }} {{ $t('user_card.per_day') }} -
@@ -269,32 +293,6 @@ v-if="!hideBio" class="panel-body" > -
-
-
{{ $t('user_card.statuses') }}
- {{ user.statuses_count }}
-
-
-
{{ $t('user_card.followees') }}
- {{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }} -
-
-
{{ $t('user_card.followers') }}
- {{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }} -
-
Date: Fri, 26 Apr 2024 23:24:19 +0200 Subject: [PATCH 02/14] left-aligned bio text why the fuck was it centered in the first place?!? --- src/components/user_card/user_card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 004e601d..72f33e85 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -58,7 +58,7 @@ } &-bio { - text-align: center; + text-align: start; display: block; line-height: 1.3; padding: 1em; From 88aae1706a196723db2716fa0ca6af583c41fa9d Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Fri, 26 Apr 2024 23:27:16 +0200 Subject: [PATCH 03/14] oops, removed unneeded spacing --- src/components/user_card/user_card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 72f33e85..d47970ac 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -23,7 +23,7 @@ .user-buttons { display: flex; - padding: .5em 0 .5em 1em; + padding: .5em 0 .5em 0; } .panel-body { From 918b0e3770609a87e82b578757bf103f39c1ed8f Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Mon, 20 May 2024 16:20:50 +0200 Subject: [PATCH 04/14] =?UTF-8?q?stopped=20username=20from=20wrapping?= =?UTF-8?q?=E2=80=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/user_card/user_card.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index d47970ac..1d516339 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -255,6 +255,8 @@ margin-right: 1em; font-size: 1.1em; grid-area: name; + white-space: nowrap; + max-width: 100%; } .user-meta { From 31055fb4f2286a82c7a1029b68a76b55a5dfa0a8 Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Mon, 20 May 2024 17:08:30 +0200 Subject: [PATCH 05/14] removed min-width statements that were messing up my layouts --- src/components/user_card/user_card.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 1d516339..36eebaeb 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -105,16 +105,11 @@ padding: 0 26px; .container { - min-width: 0; padding: 16px 0 6px; display: flex; align-items: flex-start; max-height: 56px; - > * { - min-width: 0; - } - .Avatar { --_avatarShadowBox: var(--avatarShadow); --_avatarShadowFilter: var(--avatarShadowFilter); From 754cd2fa5786d10c4fcb7e4b21d0bdc20016768b Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Mon, 20 May 2024 17:53:17 +0200 Subject: [PATCH 06/14] slightly adjusted edit button spacing --- src/components/user_card/user_card.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 36eebaeb..92b27037 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -153,8 +153,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; From c902219997a6cf62d4215b46654b1a59ba0d9879 Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Wed, 26 Jun 2024 17:20:50 +0200 Subject: [PATCH 07/14] added setting to switch between center and left-aligned user bio --- src/components/settings_modal/tabs/general_tab.vue | 5 +++++ src/components/user_card/user_card.scss | 1 - src/components/user_card/user_card.vue | 1 + src/i18n/de.json | 1 + src/i18n/en.json | 1 + src/modules/config.js | 1 + 6 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 4f314ca0..70fcaef8 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -159,6 +159,11 @@ {{ $t('settings.show_page_backgrounds') }} +
  • + + {{ $t('settings.center_align_bio') }} + +
  • {{ $t('settings.stop_gifs') }} diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 92b27037..854c4117 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -58,7 +58,6 @@ } &-bio { - text-align: start; display: block; line-height: 1.3; padding: 1em; diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 57f922d7..406f329d 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -299,6 +299,7 @@ :html="user.description_html" :emoji="user.emoji" :handle-links="true" + :style='{"text-align": this.$store.getters.mergedConfig.centerAlignBio ? "center" : "start"}' />
    • diff --git a/src/i18n/de.json b/src/i18n/de.json index d5a7b1c0..ed68bfbf 100644 --- a/src/i18n/de.json +++ b/src/i18n/de.json @@ -482,6 +482,7 @@ "blocks_tab": "Blocks", "bot": "Dies ist ein Bot Account", "btnRadius": "Knöpfe", + "center_align_bio": "Zentrale Textausrichtung in der Bio", "cBlue": "Blau (Antworten, folgt dir)", "cGreen": "Grün (Retweet)", "cOrange": "Orange (Favorisieren)", diff --git a/src/i18n/en.json b/src/i18n/en.json index 44971a51..6318e9f5 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -488,6 +488,7 @@ "blocks_tab": "Blocks", "bot": "This is a bot account", "btnRadius": "Buttons", + "center_align_bio": "Center text in user bio", "cBlue": "Blue (Reply, follow)", "cGreen": "Green (Retweet)", "cOrange": "Orange (Favorite)", diff --git a/src/modules/config.js b/src/modules/config.js index 038bb24e..a4d69096 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -56,6 +56,7 @@ export const defaultState = { autohideFloatingPostButton: false, pauseOnUnfocused: true, displayPageBackgrounds: true, + centerAlignBio: false, stopGifs: undefined, replyVisibility: 'all', thirdColumnMode: 'notifications', From 85001814a257e3b278965bbf868ccd43cadf8b02 Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Wed, 26 Jun 2024 18:09:13 +0200 Subject: [PATCH 08/14] 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') }} +
  • + + {{ $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" />
    -
  • - + {{ $t('settings.compact_user_info') }}
    • From a74a6317932f1e521183c3a7f1c44a4c852689e0 Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Wed, 3 Jul 2024 17:45:40 +0200 Subject: [PATCH 11/14] stopped user handle from overflowing from its boundaries in user card --- src/components/user_card/user_card.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 9d43c0bf..dcbc4678 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -194,6 +194,7 @@ .user-screen-name { min-width: 1px; + max-width: 100%; text-overflow: ellipsis; overflow: hidden; color: $fallback--lightText; From c39d9fa64b70546113d2b5b490d8fcdac671791e Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Wed, 3 Jul 2024 18:30:51 +0200 Subject: [PATCH 12/14] fixed stuff overflowing in user popup e.g. in notifs --- src/components/user_card/user_card.js | 1 + src/components/user_card/user_card.scss | 11 ++++++++--- src/components/user_card/user_card.vue | 13 +++++++------ 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index bdae3cd6..fdedafa7 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -120,6 +120,7 @@ export default { compactUserInfo () { return this.$store.getters.mergedConfig.compactUserInfo && (this.$store.state.interface.layoutType !== 'mobile') + && this.switcher }, ...mapGetters(['mergedConfig']) }, diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index dcbc4678..912e50c6 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -109,7 +109,8 @@ padding: 16px 0 6px; display: grid; grid-template-areas: - "pfp summary edit" + "pfp name edit" + "pfp summary summary" "stats stats stats"; grid-template-columns: auto 1fr auto; align-items: start; @@ -251,13 +252,15 @@ } .user-name { + text-align: start; text-overflow: ellipsis; overflow: hidden; - margin-right: 1em; + margin-left: 0.6em; font-size: 1.1em; grid-area: name; white-space: nowrap; max-width: 100%; + z-index: 1; // so shadow from user avatar doesn't overlap it } .user-meta { @@ -325,7 +328,9 @@ &.-compact { .container { - grid-template-areas: "pfp summary stats edit"; + grid-template-areas: + "pfp name stats edit" + "pfp summary stats edit"; grid-template-columns: auto auto 1fr auto; } .user-counts { diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 39d2c63d..9b1b85e8 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -32,6 +32,7 @@     +
    - Date: Wed, 3 Jul 2024 18:58:50 +0200 Subject: [PATCH 13/14] oops, unfucked username placement --- src/components/user_card/user_card.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 912e50c6..c5dc8d88 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -258,6 +258,7 @@ 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 From 94ed0991bc201119fa39e2a212738f7c2235e62c Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Sat, 6 Jul 2024 14:54:24 +0200 Subject: [PATCH 14/14] reverted 2e83ccefdc and clarified that compact user info is only used with enough room --- src/components/settings_modal/tabs/general_tab.vue | 5 +---- src/i18n/de.json | 2 +- src/i18n/en.json | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 5a27814e..6bebae66 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -165,10 +165,7 @@
  • - + {{ $t('settings.compact_user_info') }}
    • diff --git a/src/i18n/de.json b/src/i18n/de.json index 11683317..f0a9e972 100644 --- a/src/i18n/de.json +++ b/src/i18n/de.json @@ -497,7 +497,7 @@ "checkboxRadius": "Auswahlfelder", "collapse_subject": "Beiträge mit Inhaltswarnungen einklappen", "columns": "Spalten", - "compact_user_info": "Kompakte Benutzerinfos", + "compact_user_info": "Kompakte Benutzerinfos wenn genug Platz", "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 8aac6834..0bf0c1de 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -503,7 +503,7 @@ "checkboxRadius": "Checkboxes", "collapse_subject": "Collapse posts with content warnings", "columns": "Columns", - "compact_user_info": "Compact user info", + "compact_user_info": "Compact user info when enough space", "composing": "Composing", "confirm_dialogs": "Require confirmation for:", "confirm_dialogs_approve_follow": "Accepting a follow request",