kopia lustrzana https://github.com/nolanlawson/pinafore
feat(ui): bottom nav
rodzic
b152359428
commit
86a63ca7b8
|
@ -16,6 +16,7 @@ const {
|
|||
currentInstance,
|
||||
instanceThemes,
|
||||
disableCustomScrollbars,
|
||||
bottomNav,
|
||||
enableGrayscale,
|
||||
pushSubscription,
|
||||
loggedInInstancesInOrder,
|
||||
|
@ -53,6 +54,8 @@ if (disableCustomScrollbars) {
|
|||
.setAttribute('media', 'only x') // disables the style
|
||||
}
|
||||
|
||||
document.body.classList.toggle('bottom-nav', bottomNav);
|
||||
|
||||
if (centerNav) {
|
||||
document.getElementById('theCenterNavStyle')
|
||||
.setAttribute('media', 'all') // enables the style
|
||||
|
|
|
@ -382,6 +382,7 @@ export default {
|
|||
theme: 'Theme',
|
||||
themeForInstance: 'Theme for {instance}',
|
||||
disableCustomScrollbars: 'Disable custom scrollbars',
|
||||
bottomNav: 'Place the navigation bar at the bottom of the screen',
|
||||
centerNav: 'Center the navigation header',
|
||||
preferences: 'Preferences',
|
||||
hotkeySettings: 'Hotkey settings',
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<nav id="main-nav" class="main-nav">
|
||||
<nav id="main-nav" class="main-nav{bottomNav ? ' bottom-nav' : ''}">
|
||||
<ul class="main-nav-ul">
|
||||
{#each $navPages as navPage (navPage.href)}
|
||||
<li class="main-nav-li">
|
||||
|
@ -30,6 +30,11 @@
|
|||
contain: content; /* see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content */
|
||||
}
|
||||
|
||||
.main-nav.bottom-nav {
|
||||
top: calc(100vh - 52px);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.main-nav-ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<Nav {page} />
|
||||
|
||||
<div class="main-content">
|
||||
<div class="main-content {bottomNav ? 'bottom-nav' : ''}">
|
||||
<main class="{infiniteScrollPage ? 'infinite-scroll-page' : ''}">
|
||||
<svelte:component this={child.component} {...child.props} />
|
||||
</main>
|
||||
|
@ -13,6 +13,12 @@
|
|||
.infinite-scroll-page {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.bottom-nav.main-content,
|
||||
.bottom-nav .main-content {
|
||||
padding-block-start: 0;
|
||||
padding-block-end: var(--main-content-pad-top);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import { store } from './_store/store.js'
|
||||
|
|
|
@ -32,6 +32,11 @@
|
|||
|
||||
<h2>UI</h2>
|
||||
<form class="ui-settings">
|
||||
<label class="setting-group">
|
||||
<input type="checkbox" id="choice-bottom-nav"
|
||||
bind:checked="$bottomNav" on:change="onChange(event)">
|
||||
{intl.bottomNav}
|
||||
</label>
|
||||
<label class="setting-group">
|
||||
<input type="checkbox" id="choice-disable-custom-scrollbars"
|
||||
bind:checked="$disableCustomScrollbars" on:change="onChange(event)">
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
export function bottomNavObservers (store) {
|
||||
store.observe('bottomNav', bottomNav => {
|
||||
// disables or enables the style
|
||||
document.body.classList.toggle('bottom-nav', bottomNav);
|
||||
document.querySelector('.main-content').classList.toggle('bottom-nav', bottomNav);
|
||||
document.getElementById('main-nav').classList.toggle('bottom-nav', bottomNav);
|
||||
}, { init: false })
|
||||
}
|
|
@ -11,6 +11,7 @@ import { showComposeDialogObservers } from './showComposeDialogObservers.js'
|
|||
import { badgeObservers } from './badgeObservers.js'
|
||||
import { countryFlagEmojiPolyfill } from './countryFlagEmojiPolyfill.js'
|
||||
import { centerNavObservers } from './centerNavObservers.js'
|
||||
import { bottomNavObservers } from './bottomNavObservers.js'
|
||||
|
||||
// These observers can be lazy-loaded when the user is actually logged in.
|
||||
// Prevents circular dependencies and reduces the size of main.js
|
||||
|
@ -23,6 +24,7 @@ export function loggedInObservers () {
|
|||
notificationPermissionObservers()
|
||||
customScrollbarObservers()
|
||||
centerNavObservers()
|
||||
bottomNavObservers()
|
||||
customEmojiObservers()
|
||||
showComposeDialogObservers()
|
||||
badgeObservers()
|
||||
|
|
|
@ -9,11 +9,13 @@ import { touchObservers } from './touchObservers.js'
|
|||
import { grayscaleObservers } from './grayscaleObservers.js'
|
||||
import { focusRingObservers } from './focusRingObservers.js'
|
||||
import { leftRightFocusObservers } from './leftRightFocusObservers.js'
|
||||
import { bottomNavObservers } from './bottomNavObservers.js'
|
||||
|
||||
export function observers (store) {
|
||||
onlineObservers(store)
|
||||
nowObservers(store)
|
||||
navObservers(store)
|
||||
bottomNavObservers(store);
|
||||
pageVisibilityObservers(store)
|
||||
resizeObservers(store)
|
||||
touchObservers(store)
|
||||
|
|
|
@ -14,6 +14,7 @@ const persistedState = {
|
|||
currentRegisteredInstance: undefined,
|
||||
// we disable scrollbars by default on iOS
|
||||
disableCustomScrollbars: process.browser && /iP(?:hone|ad|od)/.test(navigator.userAgent),
|
||||
bottomNav: true,
|
||||
centerNav: false,
|
||||
disableFavCounts: false,
|
||||
disableFollowerCounts: false,
|
||||
|
|
|
@ -20,7 +20,7 @@ body {
|
|||
|
||||
.main-content {
|
||||
contain: content; // see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content
|
||||
padding-top: var(--main-content-pad-top);
|
||||
padding-block-start: var(--main-content-pad-top);
|
||||
|
||||
@supports not (contain: content) {
|
||||
// For browsers which don't support the "contain" CSS property,
|
||||
|
|
Ładowanie…
Reference in New Issue