From 21fe7d76d33f65708ad68cfb919dbb931b5622de Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Fri, 26 Apr 2024 21:39:20 +0200 Subject: [PATCH 01/45] made columns use more space, fixed minor bug --- src/App.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/App.scss b/src/App.scss index 1d338d15..fe95eacd 100644 --- a/src/App.scss +++ b/src/App.scss @@ -164,10 +164,11 @@ nav { } .underlay { - grid-column-start: 1; - grid-column-end: span 3; - grid-row-start: 1; - grid-row-end: 1; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; pointer-events: none; background-color: rgba(0, 0, 0, 0.15); background-color: var(--underlay, rgba(0, 0, 0, 0.15)); @@ -176,7 +177,7 @@ nav { .app-layout { --miniColumn: 25rem; - --maxiColumn: minmax(var(--miniColumn), 45rem); + --maxiColumn: minmax(var(--miniColumn), 1fr); --columnGap: 1em; --status-margin: 0.75em; @@ -187,6 +188,7 @@ nav { grid-template-rows: 1fr; box-sizing: border-box; margin: 0 auto; + padding: 0 calc(var(--columnGap) / 2); align-content: flex-start; flex-wrap: wrap; justify-content: center; From 74b651a3a2bda93a503933436951a824a98adaca Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Mon, 20 May 2024 18:17:39 +0200 Subject: [PATCH 02/45] made attached images max size scale with font size meta-comment: eliminated corner-case weirdness by replaced cursed CSS with slightly less cursed CSS --- src/components/gallery/gallery.js | 4 ++-- src/components/gallery/gallery.vue | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index 4e1bda55..8c8b7289 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -89,9 +89,9 @@ const Gallery = { }, rowStyle (row) { if (row.audio) { - return { 'padding-bottom': '25%' } // fixed reduced height for audio + return { 'aspect-ratio': '1/4' } // fixed reduced height for audio } else if (!row.minimal && !row.grid) { - return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` } + return { 'aspect-ratio': `${(1 / (row.items.length + 0.6))}/1` } } }, itemStyle (id, row) { diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index d5500334..8418ea84 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -96,7 +96,7 @@ .gallery-row { position: relative; - height: 0; + max-height: 30em; width: 100%; flex-grow: 1; From dd32a33d598a16fc2d1dc0b437098d07da40107e Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Sat, 1 Jun 2024 21:12:47 +0200 Subject: [PATCH 03/45] fixed media attachment heights --- src/components/gallery/gallery.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index 8c8b7289..6a847c79 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -89,9 +89,9 @@ const Gallery = { }, rowStyle (row) { if (row.audio) { - return { 'aspect-ratio': '1/4' } // fixed reduced height for audio + return { 'height': '10em' } // fixed reduced height for audio } else if (!row.minimal && !row.grid) { - return { 'aspect-ratio': `${(1 / (row.items.length + 0.6))}/1` } + return { 'aspect-ratio': `1/${(1 / (row.items.length + 0.6))}` } } }, itemStyle (id, row) { From 45fe334cd7447d29913ba15c60671acbfaaa6f63 Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Sat, 1 Jun 2024 21:16:34 +0200 Subject: [PATCH 04/45] fixed sizing issues with attachments in some non-status containers --- src/components/gallery/gallery.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index 8418ea84..0bbbb3f6 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -96,9 +96,11 @@ .gallery-row { position: relative; - max-height: 30em; width: 100%; flex-grow: 1; + .Status & { + max-height: 30em; + } &:not(:first-child) { margin-top: 0.5em; From 1b4df9e79db20b544f8e3fc8335df8d8e733f0c4 Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Sun, 16 Jun 2024 11:45:15 +0200 Subject: [PATCH 05/45] reverted audio attachments to 4:1 aspect ratio --- src/components/gallery/gallery.js | 4 +--- src/components/gallery/gallery.vue | 4 ++++ 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index 6a847c79..fa3ec72f 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -88,9 +88,7 @@ const Gallery = { set(this.sizes, id, { width, height }) }, rowStyle (row) { - if (row.audio) { - return { 'height': '10em' } // fixed reduced height for audio - } else if (!row.minimal && !row.grid) { + if (!row.audio && !row.minimal && !row.grid) { return { 'aspect-ratio': `1/${(1 / (row.items.length + 0.6))}` } } }, diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index 0bbbb3f6..d41eccd0 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -102,6 +102,10 @@ max-height: 30em; } + &.-audio { + aspect-ratio: 4/1; // this is terrible, but it's how it was before so I'm not changing it >:( + } + &:not(:first-child) { margin-top: 0.5em; } From 4abddf5e6a3ec5d7cc0d7095197f863ba8d3918e Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Sun, 16 Jun 2024 15:20:16 +0200 Subject: [PATCH 06/45] made wide column layout optional --- src/App.js | 6 +++++- src/App.scss | 6 +++++- src/components/settings_modal/tabs/general_tab.vue | 5 +++++ src/i18n/de.json | 1 + src/i18n/en.json | 1 + src/modules/config.js | 1 + src/modules/instance.js | 1 + 7 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 3e0d0d6f..77b40b62 100644 --- a/src/App.js +++ b/src/App.js @@ -59,7 +59,8 @@ export default { { '-reverse': this.reverseLayout, '-no-sticky-headers': this.noSticky, - '-has-new-post-button': this.newPostButtonShown + '-has-new-post-button': this.newPostButtonShown, + '-wide-timeline': this.widenTimeline }, '-' + this.layoutType ] @@ -93,6 +94,9 @@ export default { newPostButtonShown () { return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile' }, + widenTimeline () { + return this.$store.getters.mergedConfig.widenTimeline + }, showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, editingAvailable () { return this.$store.state.instance.editingAvailable }, layoutType () { return this.$store.state.interface.layoutType }, diff --git a/src/App.scss b/src/App.scss index fe95eacd..5071cc2e 100644 --- a/src/App.scss +++ b/src/App.scss @@ -177,7 +177,7 @@ nav { .app-layout { --miniColumn: 25rem; - --maxiColumn: minmax(var(--miniColumn), 1fr); + --maxiColumn: minmax(var(--miniColumn), 45rem); --columnGap: 1em; --status-margin: 0.75em; @@ -195,6 +195,10 @@ nav { min-height: 100vh; overflow-x: clip; + &.-wide-timeline { + --maxiColumn: minmax(var(--miniColumn), 1fr); + } + .column { --___columnMargin: var(--columnGap); diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 4f314ca0..fa4cf64f 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -269,6 +269,11 @@ {{ $t('settings.right_sidebar') }} +
  • + + {{ $t('settings.widen_timeline') }} + +
  • Date: Fri, 26 Apr 2024 23:23:21 +0200 Subject: [PATCH 07/45] 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 08/45] 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 09/45] 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 10/45] =?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 11/45] 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 12/45] 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 b2af067fd3744e9f7c7434121f751042dad6ea84 Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Wed, 26 Jun 2024 16:39:04 +0200 Subject: [PATCH 13/45] reverted visual changes to underlay --- src/App.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/App.scss b/src/App.scss index 5071cc2e..e4d19132 100644 --- a/src/App.scss +++ b/src/App.scss @@ -164,11 +164,10 @@ nav { } .underlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + grid-column-start: 1; + grid-column-end: span 3; + grid-row-start: 1; + grid-row-end: 1; pointer-events: none; background-color: rgba(0, 0, 0, 0.15); background-color: var(--underlay, rgba(0, 0, 0, 0.15)); From 2e2e87db75f991624efafcbdc99855d8b22e3e79 Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Wed, 26 Jun 2024 16:43:32 +0200 Subject: [PATCH 14/45] expand underlay to screen edges when TL is widened --- src/App.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/App.scss b/src/App.scss index e4d19132..11d808d6 100644 --- a/src/App.scss +++ b/src/App.scss @@ -172,6 +172,10 @@ nav { background-color: rgba(0, 0, 0, 0.15); background-color: var(--underlay, rgba(0, 0, 0, 0.15)); z-index: -1000; + + .-wide-timeline & { + margin:0 calc(var(--columnGap) / -2); + } } .app-layout { From c902219997a6cf62d4215b46654b1a59ba0d9879 Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Wed, 26 Jun 2024 17:20:50 +0200 Subject: [PATCH 15/45] 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 16/45] 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 19/45] 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 20/45] 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 21/45] 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 22/45] 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", From 92e278d406165242f31b532dba014e8154204d0f Mon Sep 17 00:00:00 2001 From: ilja Date: Sun, 4 Aug 2024 17:44:21 +0200 Subject: [PATCH 23/45] Move MFM SCSS to separate SCSS MFM was defined in three places. There was ./src/components/status_body/status_body.scss => I moved this to ./src/components/status_content/mfm.scss There was ./src/components/status_content/status_content.vue => I moved this to ./src/components/status_content/mfm.scss There's ./static/mfm.css => I kept this as-is ./src/components/status_content/mfm.scss is now being loaded in ./src/components/status_content/status_content.vue I added a comment in both ./src/components/status_content/mfm.scss and ./static/mfm.css referencing each other Note that this is just a first step in an overhoal of how MFM is handled. It seemed easier to do this as a first step and then build further on that. --- src/components/status_body/status_body.scss | 18 --------- src/components/status_content/mfm.scss | 37 +++++++++++++++++++ .../status_content/status_content.vue | 18 +-------- static/mfm.css | 1 + 4 files changed, 39 insertions(+), 35 deletions(-) create mode 100644 src/components/status_content/mfm.scss diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 434cb482..b9e328c8 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -23,24 +23,6 @@ transition: 0.05s; } - ._mfm_x2_ { - .emoji { - height: 100px; - } - } - - ._mfm_x3_ { - .emoji { - height: 150px; - } - } - - ._mfm_x4_ { - .emoji { - height: 200px; - } - } - .attachments { margin-top: 0.5em; } diff --git a/src/components/status_content/mfm.scss b/src/components/status_content/mfm.scss new file mode 100644 index 00000000..45d32d4e --- /dev/null +++ b/src/components/status_content/mfm.scss @@ -0,0 +1,37 @@ +/* Some MFM CSS is also defined in ./static/mfm.css */ +.StatusContent { + ._mfm_x2_ { + .emoji { + height: 100px; + } + } + + ._mfm_x3_ { + .emoji { + height: 150px; + } + } + + ._mfm_x4_ { + .emoji { + height: 200px; + } + } + + &.mfm-hover:not(:hover) { + .mfm { + animation: none !important; + } + } + &.mfm-disabled { + span { + font-size: 100% !important; + } + .mfm { + animation: none !important; + } + .emoji { + height: 32px !important; + } + } +} diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index 15f629d1..0803be5c 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -64,6 +64,7 @@ +