feat(ui): bottom nav (#2205)

Co-authored-by: Benny Powers <[email protected]>

src/build/template.html

@@ -32,6 +32,15 @@
 
   <!-- inline CSS -->
 
+  <style id="theBottomNavStyle" media="only x">
+    :root {
+      --nav-top: calc(100vh - var(--nav-total-height));
+      --nav-bottom: 0px;
+      --main-content-pad-top: 0px;
+      --main-content-pad-bottom: var(--main-content-pad-vertical);
+    }
+  </style>
+
   <style id="theGrayscaleStyle" media="only x">
     /* Firefox doesn't seem to like applying filter: grayscale() to
      * the entire body, so we apply individually.

src/inline-script/inline-script.js

@@ -16,6 +16,7 @@ const {
   currentInstance,
   instanceThemes,
   disableCustomScrollbars,
+  bottomNav,
   enableGrayscale,
   pushSubscription,
   loggedInInstancesInOrder,
@@ -53,6 +54,11 @@ if (disableCustomScrollbars) {
     .setAttribute('media', 'only x') // disables the style
 }
 
+if (bottomNav) {
+  document.getElementById('theBottomNavStyle')
+    .setAttribute('media', 'all') // enables the style
+}
+
 if (centerNav) {
   document.getElementById('theCenterNavStyle')
     .setAttribute('media', 'all') // enables the style

src/intl/en-US.js

@@ -382,7 +382,8 @@ export default {
   theme: 'Theme',
   themeForInstance: 'Theme for {instance}',
   disableCustomScrollbars: 'Disable custom scrollbars',
-  centerNav: 'Center the navigation header',
+  bottomNav: 'Place the navigation bar at the bottom of the screen',
+  centerNav: 'Center the navigation bar',
   preferences: 'Preferences',
   hotkeySettings: 'Hotkey settings',
   disableHotkeys: 'Disable all hotkeys',

src/routes/_components/Nav.html

@@ -25,7 +25,8 @@
 		position: fixed;
 		left: 0;
 		right: 0;
-		top: 0;
+		top: var(--nav-top);
+    bottom: var(--nav-bottom);
 		z-index: 100;
     contain: content; /* see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content */
 	}

src/routes/_pages/settings/general.html

@@ -62,6 +62,11 @@ <h2>UI</h2>
              bind:checked="$centerNav" on:change="onChange(event)">
       {intl.centerNav}
     </label>
+    <label class="setting-group">
+      <input type="checkbox" id="choice-bottom-nav"
+             bind:checked="$bottomNav" on:change="onChange(event)">
+      {intl.bottomNav}
+    </label>
   </form>
 
   <h2>{intl.accessibility}</h2>

src/routes/_store/observers/bottomNavObservers.js

@@ -0,0 +1,12 @@
+const style = process.browser && document.getElementById('theBottomNavStyle')
+
+export function bottomNavObservers (store) {
+  if (!process.browser) {
+    return
+  }
+
+  store.observe('bottomNav', bottomNav => {
+    // disables or enables the style
+    style.setAttribute('media', bottomNav ? 'all' : 'only x') // disable or enable the style
+  }, { init: false }) // init: false because the inline script takes care of it
+}

src/routes/_store/observers/observers.js

@@ -9,6 +9,7 @@ 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)
@@ -21,5 +22,6 @@ export function observers (store) {
   focusRingObservers(store)
   grayscaleObservers(store)
   leftRightFocusObservers(store)
+  bottomNavObservers(store)
   setupLoggedInObservers(store)
 }

src/routes/_store/store.js

@@ -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: false,
   centerNav: false,
   disableFavCounts: false,
   disableFollowerCounts: false,

src/scss/global.scss

@@ -21,6 +21,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-bottom: var(--main-content-pad-bottom);
 
   @supports not (contain: content) {
     // For browsers which don't support the "contain" CSS property,

src/scss/variables.scss

@@ -35,10 +35,12 @@
   );
 
   --main-content-gap-top: 20px;
-  --main-content-pad-top: calc(
+  --main-content-pad-vertical: calc(
     var(--nav-total-height) +
     var(--main-content-gap-top)
   );
+  --main-content-pad-top: var(--main-content-pad-vertical);
+  --main-content-pad-bottom: 0px;
 
   --main-margin-bottom: 15px;
   --main-border-size: 1px;
@@ -60,6 +62,11 @@
     --nav-icon-pad-h: 0px;
   }
 
+  // Used for moving the nav bar to the bottom
+  --nav-top: 0px;
+  --nav-bottom: initial;
+
+
   //
   // focus outline
   //