fix: improve nav height on tiny screens, use variables (#1503)

src/routes/_components/NavItem.html

@@ -25,7 +25,7 @@
   }
 
   .nav-icon-and-label {
-    padding: 15px 20px;
+    padding: var(--nav-icon-pad-v) var(--nav-icon-pad-h);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -94,9 +94,6 @@
     .main-nav-link .nav-link-label {
       display: none;
     }
-    .nav-icon-and-label {
-      padding: 20px 0;
-    }
   }
 </style>
 <script>

src/routes/_components/NavItemIcon.html

@@ -15,8 +15,8 @@
   }
 
   :global(.nav-link-svg-wrapper, .nav-link-svg) {
-    width: 20px;
-    height: 20px;
+    width: var(--nav-icon-width);
+    height: var(--nav-icon-height);
   }
 
   .nav-link-badge {
@@ -57,10 +57,6 @@
   }
 
   @media (max-width: 991px) {
-    :global(.nav-link-svg-wrapper, .nav-link-svg) {
-      width: 25px;
-      height: 25px;
-    }
     .nav-link-badge {
       transform: translate(15px, 7px);
       margin: 2px 1px 4px;

src/routes/_components/compose/ComposeStickyButton.html

@@ -25,19 +25,9 @@
 
   :global(.compose-box-button-sticky, .compose-box-button-fixed) {
     z-index: 5000;
-    top: 52px; /* padding-top for .main-content plus 10px */
+    top: calc(var(--main-content-pad-top) + var(--sticky-pad-top));
   }
 
-  @media (max-width: 767px) {
-    :global(.compose-box-button-sticky, .compose-box-button-fixed) {
-      top: 57px; /* padding-top for .main-content plus 5px */
-    }
-  }
-  @media (max-width: 991px) {
-    :global(.compose-box-button-sticky, .compose-box-button-fixed) {
-      top: 62px; /* padding-top for .main-content plus 10px */
-    }
-  }
   @supports (-webkit-overflow-scrolling: touch) {
     .compose-box-button-sticky {
       /* disable sticky positioning on iOS due to

src/routes/_components/list/List.html

@@ -19,7 +19,12 @@
   import ListLazyItem from './ListLazyItem.html'
   import { listStore } from './listStore'
   import { getScrollContainer } from '../../_utils/scrollContainer'
-  import { getMainTopMargin } from '../../_utils/getMainTopMargin'
+
+  function getScrollTopOffset () {
+    const style = getComputedStyle(document.documentElement)
+    return parseInt(style.getPropertyValue('--main-content-pad-top'), 10) +
+      parseInt(style.getPropertyValue('--status-pad-v'), 10)
+  }
 
   export default {
     oncreate () {
@@ -44,9 +49,9 @@
           const element = document.getElementById(`list-item-${scrollToItem}`)
           requestAnimationFrame(() => {
             console.log('scrolling element into view')
-            // TODO: this is hacky
             element.scrollIntoView(true)
-            getScrollContainer().scrollTop -= (getMainTopMargin() + 10) // 10 is the status-article padding top
+            const scrollTopOffset = getScrollTopOffset()
+            getScrollContainer().scrollTop -= scrollTopOffset
             this.fire('initialized')
           })
         } else {

src/routes/_components/status/Notification.html

@@ -20,14 +20,13 @@
 {/if}
 <style>
   .notification-article {
+    padding: var(--status-pad-v) var(--status-pad-h);
     width: 560px;
     max-width: calc(100vw - 40px);
-    padding: 10px 20px;
     border-bottom: 1px solid var(--main-border);
   }
   @media (max-width: 767px) {
     .notification-article {
-      padding: 10px 10px;
       max-width: calc(100vw - 20px);
       width: 580px;
     }

src/routes/_components/status/Status.html

@@ -49,7 +49,7 @@
 
 <style>
   .status-article {
-    padding: 10px 20px;
+    padding: var(--status-pad-v) var(--status-pad-h);
     display: grid;
     grid-template-areas:
         "header  header       header        header"
@@ -98,12 +98,6 @@
     grid-template-columns: min-content 1fr;
     grid-template-rows: repeat(7, max-content);
   }
-
-  @media (max-width: 767px) {
-    .status-article {
-      padding: 10px 10px;
-    }
-  }
 </style>
 <script>
   import StatusSidebar from './StatusSidebar.html'

src/routes/_utils/getMainTopMargin.js

@@ -1,10 +0,0 @@
-// should be kept in sync with global.scss
-export function getMainTopMargin () {
-  if (matchMedia('(max-width: 767px)').matches) {
-    return 62
-  } else if (matchMedia('(max-width: 991px').matches) {
-    return 52
-  } else {
-    return 42
-  }
-}

src/scss/fonts.scss

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: PinaforeRegular;
+  src: local("BlinkMacSystemFont"),
+  local("Segoe UI"),
+  local("Roboto"),
+  local("Oxygen-Sans"),
+  local("Ubuntu"),
+  local("Cantarell"),
+  local("Fira Sans"),
+  local("Droid Sans"),
+  local("Helvetica Neue");
+}
+
+@font-face {
+  font-family: PinaforeEmoji;
+  src: local("Apple Color Emoji"),
+  local("Segoe UI Emoji"),
+  local("Segoe UI Symbol"),
+  local("Twemoji Mozilla"),
+  local("Noto Color Emoji"),
+  local("EmojiOne Color"),
+  local("Android Emoji");
+}

src/scss/global.scss

@@ -1,26 +1,5 @@
-@font-face {
-  font-family: PinaforeRegular;
-  src: local("BlinkMacSystemFont"),
-    local("Segoe UI"),
-    local("Roboto"),
-    local("Oxygen-Sans"),
-    local("Ubuntu"),
-    local("Cantarell"),
-    local("Fira Sans"),
-    local("Droid Sans"),
-    local("Helvetica Neue");
-}
-
-@font-face {
-  font-family: PinaforeEmoji;
-  src: local("Apple Color Emoji"),
-    local("Segoe UI Emoji"),
-    local("Segoe UI Symbol"),
-    local("Twemoji Mozilla"),
-    local("Noto Color Emoji"),
-    local("EmojiOne Color"),
-    local("Android Emoji");
-}
+@import './fonts.scss';
+@import './variables.scss';
 
 body {
   margin: 0;
@@ -40,13 +19,7 @@ body {
     // fixes iOS Safari horizontal scrolling (see https://github.com/nolanlawson/pinafore/issues/667)
     overflow-x: hidden;
   }
-  padding-top: 42px;
-  @media (max-width: 991px) {
-    padding-top: 52px;
-  }
-  @media (max-width: 767px) {
-    padding-top: 62px;
-  }
+  padding-top: var(--main-content-pad-top);
 }
 
 main {

src/scss/variables.scss

@@ -0,0 +1,45 @@
+:root {
+
+  //
+  // Vertical and horizontal padding for the status-article element (Status.html, Notification.html)
+  //
+  --status-pad-v: 10px;
+  --status-pad-h: 20px;
+
+  @media (max-width: 767px) {
+    --status-pad-h: 10px;
+  }
+
+  //
+  // Nav and .main-content offset. This is important for things like the sticky header (ComposeStickyButton.html)
+  // as well as deciding how to scroll to the nth item in a list (List.html).
+  //
+
+  --nav-icon-pad-v: 15px;
+  --nav-icon-pad-h: 20px;
+  --nav-icon-width: 20px;
+  --nav-icon-height: 20px;
+  --main-content-pad-top: 42px;
+  --sticky-pad-top: 10px;
+
+  @media (max-width: 991px) {
+    --nav-icon-pad-v: 20px;
+    --nav-icon-pad-h: 10px;
+    --nav-icon-width: 25px;
+    --nav-icon-height: 25px;
+    --main-content-pad-top: 52px;
+  }
+
+  @media (max-width: 767px) {
+    --main-content-pad-top: 62px;
+    --sticky-pad-top: 0px;
+  }
+
+  @media (max-width: 240px) {
+    --nav-icon-pad-v: 10px;
+    --nav-icon-pad-h: 0px;
+    --main-content-pad-top: 42px;
+    --sticky-pad-top: 0px;
+  }
+
+}