From 21fe7d76d33f65708ad68cfb919dbb931b5622de Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Fri, 26 Apr 2024 21:39:20 +0200 Subject: [PATCH 1/8] 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; -- 2.43.0 From 74b651a3a2bda93a503933436951a824a98adaca Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Mon, 20 May 2024 18:17:39 +0200 Subject: [PATCH 2/8] 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; -- 2.43.0 From dd32a33d598a16fc2d1dc0b437098d07da40107e Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Sat, 1 Jun 2024 21:12:47 +0200 Subject: [PATCH 3/8] 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) { -- 2.43.0 From 45fe334cd7447d29913ba15c60671acbfaaa6f63 Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Sat, 1 Jun 2024 21:16:34 +0200 Subject: [PATCH 4/8] 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; -- 2.43.0 From 1b4df9e79db20b544f8e3fc8335df8d8e733f0c4 Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Sun, 16 Jun 2024 11:45:15 +0200 Subject: [PATCH 5/8] 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; } -- 2.43.0 From 4abddf5e6a3ec5d7cc0d7095197f863ba8d3918e Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Sun, 16 Jun 2024 15:20:16 +0200 Subject: [PATCH 6/8] 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: Wed, 26 Jun 2024 16:39:04 +0200 Subject: [PATCH 7/8] 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)); -- 2.43.0 From 2e2e87db75f991624efafcbdc99855d8b22e3e79 Mon Sep 17 00:00:00 2001 From: RiedleroD Date: Wed, 26 Jun 2024 16:43:32 +0200 Subject: [PATCH 8/8] 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 { -- 2.43.0