diff options
| -rw-r--r-- | src/App.js | 7 | ||||
| -rw-r--r-- | src/App.scss | 15 | ||||
| -rw-r--r-- | src/App.vue | 5 | ||||
| -rw-r--r-- | src/components/desktop_nav/desktop_nav.scss | 20 | ||||
| -rw-r--r-- | src/components/settings_modal/tabs/general_tab.vue | 5 | ||||
| -rw-r--r-- | src/i18n/en.json | 1 | ||||
| -rw-r--r-- | src/modules/config.js | 1 |
7 files changed, 46 insertions, 8 deletions
@@ -60,6 +60,13 @@ export default { '-' + this.layoutType ] }, + navClasses () { + const { navbarColumnStretch } = this.$store.getters.mergedConfig + return [ + '-' + this.layoutType, + ...(navbarColumnStretch ? ['-column-stretch'] : []) + ] + }, currentUser () { return this.$store.state.users.currentUser }, userBackground () { return this.currentUser.background_image }, instanceBackground () { diff --git a/src/App.scss b/src/App.scss index 3c16007e..02f5e049 100644 --- a/src/App.scss +++ b/src/App.scss @@ -185,13 +185,14 @@ nav { --maxiColumn: 45rem; --columnGap: 1em; --status-margin: 0.75em; - + --effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))); + --effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn))); --effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn))); position: relative; display: grid; grid-template-columns: - minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))) + var(--effectiveSidebarColumnWidth) var(--effectiveContentColumnWidth); grid-template-areas: "sidebar content"; grid-template-rows: 1fr; @@ -288,22 +289,22 @@ nav { &.-reverse:not(.-wide):not(.-mobile) { grid-template-columns: var(--effectiveContentColumnWidth) - minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))); + var(--effectiveSidebarColumnWidth); grid-template-areas: "content sidebar"; } &.-wide { grid-template-columns: - minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))) + var(--effectiveSidebarColumnWidth) var(--effectiveContentColumnWidth) - minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn))); + var(--effectiveNotifsColumnWidth); grid-template-areas: "sidebar content notifs"; &.-reverse { grid-template-columns: - minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn))) + var(--effectiveNotifsColumnWidth) var(--effectiveContentColumnWidth) - minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn))); + var(--effectiveSidebarColumnWidth); grid-template-areas: "notifs content sidebar"; } } diff --git a/src/App.vue b/src/App.vue index c741aa70..1f96efe8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,7 +8,10 @@ class="app-bg-wrapper" /> <MobileNav v-if="layoutType === 'mobile'" /> - <DesktopNav v-else /> + <DesktopNav + v-else + :class="navClasses" + /> <Notifications v-if="currentUser" /> <div id="content" diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss index 71202244..f6c7c43d 100644 --- a/src/components/desktop_nav/desktop_nav.scss +++ b/src/components/desktop_nav/desktop_nav.scss @@ -23,6 +23,26 @@ max-width: 980px; } + &.-column-stretch .inner-nav { + --miniColumn: 25rem; + --maxiColumn: 45rem; + --columnGap: 1em; + max-width: calc( + var(--sidebarColumnWidth, var(--miniColumn)) + + var(--contentColumnWidth, var(--maxiColumn)) + + var(--columnGap) + ); + } + + &.-column-stretch.-wide .inner-nav { + max-width: calc( + var(--sidebarColumnWidth, var(--miniColumn)) + + var(--contentColumnWidth, var(--maxiColumn)) + + var(--notifsColumnWidth, var(--miniColumn)) + + var(--columnGap) + ); + } + &.-logoLeft .inner-nav { grid-template-columns: auto 2fr 2fr; grid-template-areas: "logo sitename actions"; diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index db321363..333b5493 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -123,6 +123,11 @@ </BooleanSetting> </li> <li> + <BooleanSetting path="navbarColumnStretch"> + {{ $t('settings.navbar_column_stretch') }} + </BooleanSetting> + </li> + <li> <ChoiceSetting v-if="user" id="thirdColumnMode" diff --git a/src/i18n/en.json b/src/i18n/en.json index 7e957ffd..a5d3cec6 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -412,6 +412,7 @@ "hide_isp": "Hide instance-specific panel", "hide_shoutbox": "Hide instance shoutbox", "right_sidebar": "Reverse order of columns", + "navbar_column_stretch": "Stretch navbar to columns width", "always_show_post_button": "Always show floating New Post button", "hide_wallpaper": "Hide instance wallpaper", "preload_images": "Preload images", diff --git a/src/modules/config.js b/src/modules/config.js index 2918f865..1c2a45c2 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -87,6 +87,7 @@ export const defaultState = { sidebarColumnWidth: '25rem', contentColumnWidth: '45rem', notifsColumnWidth: '25rem', + navbarColumnStretch: false, listsNavigation: false, greentext: undefined, // instance default useAtIcon: undefined, // instance default |