diff options
| -rw-r--r-- | src/App.js | 2 | ||||
| -rw-r--r-- | src/App.scss | 27 | ||||
| -rw-r--r-- | src/App.vue | 6 | ||||
| -rw-r--r-- | src/components/settings_modal/tabs/general_tab.vue | 10 | ||||
| -rw-r--r-- | src/components/timeline/timeline.js | 2 | ||||
| -rw-r--r-- | src/modules/config.js | 2 | ||||
| -rw-r--r-- | src/panel.scss | 3 |
7 files changed, 42 insertions, 10 deletions
@@ -82,6 +82,8 @@ export default { layoutType () { return this.$store.state.interface.layoutType }, privateMode () { return this.$store.state.instance.private }, reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight }, + noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders }, + showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars }, ...mapGetters(['mergedConfig']) }, methods: { diff --git a/src/App.scss b/src/App.scss index 1867a54d..ac6cf3f4 100644 --- a/src/App.scss +++ b/src/App.scss @@ -59,6 +59,7 @@ nav { #content { overscroll-behavior-y: none; overflow-y: auto; + overflow-x: hidden; position: sticky; } @@ -136,6 +137,19 @@ nav { max-height: calc(100vh - var(--navbar-height)); overflow-y: auto; overflow-x: hidden; + margin-left: -2em; + padding-left: 2.5em; + + &:not(.-show-scrollbar) { + scrollbar-width: none; + margin-right: -2em; + padding-right: 2.5em; + + &::-webkit-scrollbar { + display: block; + width: 0; + } + } .panel-heading.-sticky { top: -10px; @@ -143,6 +157,15 @@ nav { } } + &.-no-sticky-headers { + .column { + .panel-heading.-sticky { + position: relative; + top: 0; + } + } + } + .column-inner { display: grid; grid-template-columns: 100%; @@ -186,10 +209,6 @@ nav { #content, .column.-scrollable { - &::-webkit-scrollbar { - display: block; - width: 0; - } } .text-center { diff --git a/src/App.vue b/src/App.vue index 70084538..243a3314 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,10 +13,10 @@ <div id="content" class="app-layout container" - :class="[{ '-reverse': reverseLayout }, '-' + layoutType]" + :class="[{ '-reverse': reverseLayout, '-no-sticky-headers': noSticky }, '-' + layoutType]" > <div class="underlay"/> - <div id="sidebar" class="column -scrollable"> + <div id="sidebar" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"> <user-panel /> <template v-if="layoutType !== 'mobile'"> <nav-panel /> @@ -40,7 +40,7 @@ </div> <router-view /> </div> - <div id="notifs-column" class="column -scrollable"/> + <div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/> <media-modal /> </div> <shout-panel diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index a2c6bffa..e29bc7cf 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -61,6 +61,16 @@ </BooleanSetting> </li> <li> + <BooleanSetting path="disableStickyHeaders"> + {{ $t('settings.disable_sticky_headers') }} + </BooleanSetting> + </li> + <li> + <BooleanSetting path="showScrollbars"> + {{ $t('settings.show_scrollbars') }} + </BooleanSetting> + </li> + <li> <BooleanSetting path="alwaysShowNewPostButton" expert="1" diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 4b2c1e81..bfee2382 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -91,7 +91,7 @@ const Timeline = { const credentials = store.state.users.currentUser.credentials const showImmediately = this.timeline.visibleStatuses.length === 0 - scroller().addEventListener('scroll', this.handleScroll) + scroller() && scroller().addEventListener('scroll', this.handleScroll) if (store.state.api.fetchers[this.timelineName]) { return false } diff --git a/src/modules/config.js b/src/modules/config.js index ff5ef270..6d2e6ce0 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -73,6 +73,8 @@ export const defaultState = { playVideosInModal: false, useOneClickNsfw: false, useContainFit: true, + disableStickyHeaders: false, + showScrollbars: false, greentext: undefined, // instance default useAtIcon: undefined, // instance default mentionLinkDisplay: undefined, // instance default diff --git a/src/panel.scss b/src/panel.scss index bb7af43a..bd56858f 100644 --- a/src/panel.scss +++ b/src/panel.scss @@ -28,8 +28,7 @@ .panel-body:empty::before { content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations - display: block; - margin: 1em; + display: block; margin: 1em; text-align: center; } |