From 21fe7d76d33f65708ad68cfb919dbb931b5622de Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Fri, 26 Apr 2024 21:39:20 +0200 Subject: [PATCH 01/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] =?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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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/48] 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 e274adf47dc1475b3f94da5814ee784435ec7862 Mon Sep 17 00:00:00 2001 From: Oneric Date: Sat, 6 Jul 2024 01:55:53 +0200 Subject: [PATCH 22/48] Fix setting restore from file MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously restoring from file would also restore the old version value breaking upload of the new settings to the server. Additionallly it didn’t even attempt to sync settings after restore and was insufferably slow due to individually updating every single setting with a dispatch. Instead only update changed settings like on server syncs which usually speeds the process up considerably. Fixes: https://akkoma.dev/AkkomaGang/akkoma-fe/issues/405 --- src/modules/config.js | 44 +++++++++++++++++++++++++------------------ 1 file changed, 26 insertions(+), 18 deletions(-) diff --git a/src/modules/config.js b/src/modules/config.js index 038bb24e..c3363a5e 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -22,7 +22,7 @@ export const multiChoiceProperties = [ export const defaultState = { profile: 'default', - profileVersion: 0, + profileVersion: 0, // internal fe copy of server-side version expertLevel: 0, // used to track which settings to show and hide colors: {}, theme: undefined, @@ -127,6 +127,21 @@ export const instanceDefaultProperties = Object.entries(defaultState) .filter(([key, value]) => value === undefined) .map(([key, value]) => key) +function updateLocalSettings(store, settingEntries, version = null) { + if (version == null) + version = store.state.profileVersion + + settingEntries.forEach(([name, value]) => { + if (store.state[name] !== value) { + store.dispatch('setOption', { name, value }) + } + }) + + // Set this at the end to override any potentially stored profileVersion + store.commit('setOption', { name: 'profileVersion', value: version }) +} + + const config = { state: { ...defaultState }, getters: { @@ -198,19 +213,17 @@ const config = { store.dispatch('listSettingsProfiles') }) }, - loadSettings ({ dispatch }, data) { + loadSettings (store, data) { const knownKeys = new Set(Object.keys(defaultState)) - const presentKeys = new Set(Object.keys(data)) - const intersection = new Set() - for (let elem of presentKeys) { - if (knownKeys.has(elem)) { - intersection.add(elem) - } - } - intersection.forEach( - name => dispatch('setOption', { name, value: data[name] }) - ) + // Limit to supported properties + const newSettingEntries = + Object.entries(data) + .filter(([key, value]) => knownKeys.has(key)) + + // disregard stored profileVersion; sync afterwards increases previous version + updateLocalSettings(store, newSettingEntries, null) + store.dispatch('syncSettings') }, setHighlight ({ commit, dispatch }, { user, color, type }) { commit('setHighlight', { user, color, type }) @@ -244,12 +257,7 @@ const config = { .then(({ settings, version }) => { console.log('found settings version', version) if (forceUpdate || (version > store.state.profileVersion)) { - store.commit('setOption', { name: 'profileVersion', value: version }) - Object.entries(settings).forEach(([name, value]) => { - if (store.state[name] !== value) { - store.dispatch('setOption', { name, value }) - } - }) + updateLocalSettings(store, Object.entries(settings), version) } else { console.log('settings are up to date') } From 94ed0991bc201119fa39e2a212738f7c2235e62c Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Sat, 6 Jul 2024 14:54:24 +0200 Subject: [PATCH 23/48] 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 3349fe6ff2a0384c6d83c654b610162b403b2d4f Mon Sep 17 00:00:00 2001 From: ilja Date: Sat, 3 Aug 2024 09:54:14 +0200 Subject: [PATCH 24/48] Add line to install Node.js For someone who isn't used to building fe things like this, it's not always clear to install Node.js or what version. A line has been added to the installation instructions pointing to resources where to get it and what version to use. For version I point to the woodpecker config because that is what the CI uses and therefor always "tested". There was a file .node-version who contained a node version, but this was seriously outdated and removing it didn't seem to break anything. Assuming it indeed doesn't do anything any more, it seems better to remove to avoid confusion. --- .node-version | 1 - README.md | 2 ++ 2 files changed, 2 insertions(+), 1 deletion(-) delete mode 100644 .node-version diff --git a/.node-version b/.node-version deleted file mode 100644 index b26a34e4..00000000 --- a/.node-version +++ /dev/null @@ -1 +0,0 @@ -7.2.1 diff --git a/README.md b/README.md index fc8db83c..e7ebc45a 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,8 @@ To use Akkoma-FE in Akkoma, use the [frontend](https://docs.akkoma.dev/stable/ad ## Build Setup +Make sure you have [Node.js](https://nodejs.org/) installed. You can check `/.woodpecker.yml` for which node version the Akkoma CI currently uses. + ``` bash # install dependencies corepack enable From 92e278d406165242f31b532dba014e8154204d0f Mon Sep 17 00:00:00 2001 From: ilja Date: Sun, 4 Aug 2024 17:44:21 +0200 Subject: [PATCH 25/48] 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 @@ +