options to enable scrollbars and disable sticky headers

This commit is contained in:
Henry Jameson 2022-04-07 15:11:23 +03:00
parent d3d219f15d
commit b5ded67c06
7 changed files with 42 additions and 10 deletions

View File

@ -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: {

View File

@ -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 {

View File

@ -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

View File

@ -60,6 +60,16 @@
{{ $t('settings.virtual_scrolling') }}
</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"

View File

@ -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 }

View File

@ -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

View File

@ -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;
}