From 38b16c91d1a2279f40d1231686b0c28ed6c25e35 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 21 Sep 2019 13:45:48 -0700
Subject: [PATCH] fix: improve style on very small mobile screens (#1505)

---
 src/routes/_components/FreeTextLayout.html    | 11 ++++-
 src/routes/_components/NotLoggedInHome.html   |  6 +++
 .../_components/community/PageListItem.html   | 13 ++++++
 .../_components/compose/ComposeAuthor.html    |  5 +-
 .../_components/compose/ComposeBox.html       |  6 +++
 .../_components/compose/ComposeToolbar.html   |  6 +++
 .../dialog/components/EmojiDialog.html        | 33 ++++++++-----
 .../settings/SettingsListButton.html          |  7 ++-
 .../_components/settings/SettingsListRow.html |  6 +++
 .../_components/status/StatusHeader.html      |  9 ++++
 .../_components/status/StatusSidebar.html     |  7 ++-
 .../_components/status/StatusToolbar.html     |  6 +++
 src/routes/_pages/settings/general.html       |  6 +++
 src/routes/_pages/settings/hotkeys.html       |  6 +++
 src/routes/_pages/settings/wellness.html      |  6 +++
 .../_store/observers/resizeObservers.js       |  3 +-
 src/scss/focus.scss                           | 46 +++++++++++++++++++
 src/scss/global.scss                          | 37 +++------------
 src/scss/themes/_base.scss                    |  2 +
 src/scss/themes/_dark.scss                    |  2 +
 src/scss/variables.scss                       |  4 ++
 21 files changed, 179 insertions(+), 48 deletions(-)
 create mode 100644 src/scss/focus.scss

diff --git a/src/routes/_components/FreeTextLayout.html b/src/routes/_components/FreeTextLayout.html
index 3c8cd8b7..51cc2bdb 100644
--- a/src/routes/_components/FreeTextLayout.html
+++ b/src/routes/_components/FreeTextLayout.html
@@ -11,4 +11,13 @@
   :global(.free-text) {
     overflow-y: auto; /* fixes weird iOS Safari bug where scrolling gets stuck */
   }
-</style>
\ No newline at end of file
+
+  @media (max-width: 240px) {
+    :global(.free-text) {
+      margin: 10px;
+    }
+    :global(.free-text p) {
+      margin: 15px 0;
+    }
+  }
+</style>
diff --git a/src/routes/_components/NotLoggedInHome.html b/src/routes/_components/NotLoggedInHome.html
index c932b0cc..03624975 100644
--- a/src/routes/_components/NotLoggedInHome.html
+++ b/src/routes/_components/NotLoggedInHome.html
@@ -40,6 +40,12 @@
       font-size: 2.7em;
     }
   }
+
+  @media (max-width: 240px) {
+    .not-logged-in-home h1 {
+      font-size: 2.5em;
+    }
+  }
 </style>
 <script>
   import FreeTextLayout from './FreeTextLayout.html'
diff --git a/src/routes/_components/community/PageListItem.html b/src/routes/_components/community/PageListItem.html
index 04754ba8..2c439429 100644
--- a/src/routes/_components/community/PageListItem.html
+++ b/src/routes/_components/community/PageListItem.html
@@ -60,6 +60,19 @@
     }
   }
 
+  @media (max-width: 240px) {
+    .page-list-item a {
+      padding: 10px 5px;
+      font-size: 0.9em;
+    }
+    :global(.page-list-item-svg) {
+      margin-right: 5px;
+    }
+    :global(.page-list-item a button.icon-button) {
+      padding: 6px 5px;
+    }
+  }
+
 </style>
 <script>
   import { store } from '../../_store/store'
diff --git a/src/routes/_components/compose/ComposeAuthor.html b/src/routes/_components/compose/ComposeAuthor.html
index 0e69bf6a..ad8c1a65 100644
--- a/src/routes/_components/compose/ComposeAuthor.html
+++ b/src/routes/_components/compose/ComposeAuthor.html
@@ -6,7 +6,7 @@
    on:click="onClick(event)"
 >
   <!-- the avatar is duplicated information, so hide from tab order and screenreaders -->
-  <Avatar account={verifyCredentials} size="small"/>
+  <Avatar account={verifyCredentials} size={avatarSize} />
 </a>
 <a class="compose-box-display-name {loaded ? 'loaded' : 'not-loaded'}"
    {href}
@@ -96,7 +96,8 @@
         }
       },
       id: ({ verifyCredentials }) => (verifyCredentials && verifyCredentials.id),
-      href: ({ id }) => (id ? `/accounts/${id}` : '#')
+      href: ({ id }) => (id ? `/accounts/${id}` : '#'),
+      avatarSize: ({ $isVeryTinyMobileSize }) => $isVeryTinyMobileSize ? 'extra-small' : 'small'
     },
     methods: {
       onClick (e) {
diff --git a/src/routes/_components/compose/ComposeBox.html b/src/routes/_components/compose/ComposeBox.html
index 7517b932..0a54df21 100644
--- a/src/routes/_components/compose/ComposeBox.html
+++ b/src/routes/_components/compose/ComposeBox.html
@@ -84,6 +84,12 @@
       overflow-x: hidden;
     }
   }
+
+  @media (max-width: 240px) {
+    .compose-box {
+      padding: 10px 5px 0 5px;
+    }
+  }
 </style>
 <script>
   import ComposeToolbar from './ComposeToolbar.html'
diff --git a/src/routes/_components/compose/ComposeToolbar.html b/src/routes/_components/compose/ComposeToolbar.html
index c3279e53..6838ed00 100644
--- a/src/routes/_components/compose/ComposeToolbar.html
+++ b/src/routes/_components/compose/ComposeToolbar.html
@@ -60,6 +60,12 @@
       padding-right: 5px;
     }
   }
+  @media (max-width: 240px) {
+    :global(button.icon-button.compose-toolbar-button .icon-button-svg) {
+      width: 20px;
+      height: 20px;
+    }
+  }
 </style>
 <script>
   import IconButton from '../IconButton.html'
diff --git a/src/routes/_components/dialog/components/EmojiDialog.html b/src/routes/_components/dialog/components/EmojiDialog.html
index 125c0a3f..62e3c789 100644
--- a/src/routes/_components/dialog/components/EmojiDialog.html
+++ b/src/routes/_components/dialog/components/EmojiDialog.html
@@ -5,6 +5,7 @@
   shrinkWidthToFit={true}
   background="var(--main-bg)"
   on:show="onShow()"
+  className="emoji-dialog"
 >
   <div class="emoji-container" {style} ref:container >
     {#if loaded}
@@ -63,6 +64,13 @@
   }
 
   @media (max-width: 320px) {
+    :global(.modal-dialog .modal-dialog-contents.emoji-dialog) {
+      max-width: 100%;
+      max-height: 100%;
+    }
+    .emoji-container {
+      max-width: calc(100vw - 10px);
+    }
     :global(.emoji-container .emoji-mart-preview) {
       height: 60px;
     }
@@ -121,9 +129,10 @@
     }),
     computed: {
       // try to estimate size of emoji-mart based on mobile vs desktop
-      style: ({ $isSmallMobileSize }) => (`
-        min-width: ${$isSmallMobileSize ? 250 : 300}px;
-        min-height: ${$isSmallMobileSize ? 300 : 400}px;
+      style: ({ $isVeryTinyMobileSize, $isSmallMobileSize }) => (`
+        min-width: ${$isVeryTinyMobileSize ? 200 : $isSmallMobileSize ? 250 : 300}px;
+        min-height: ${$isVeryTinyMobileSize ? 0 : $isSmallMobileSize ? 300 : 400}px;
+        ${$isVeryTinyMobileSize ? 'overflow-y: auto; overflow-x: hidden;' : ''}
       `),
       emojiMartPropsJson: ({ emojiMartProps }) => JSON.stringify(emojiMartProps),
       emojiMartProps: ({ perLine, custom }) => ({
@@ -135,14 +144,16 @@
         include: categoriesSort,
         showPreview: true
       }),
-      perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize }) => (
-        $isTinyMobileSize
-          ? 7
-          : $isSmallMobileSize
-            ? 8
-            : $isMobileSize
-              ? 9
-              : 10
+      perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize, $isVeryTinyMobileSize }) => (
+        $isVeryTinyMobileSize
+          ? 6
+          : $isTinyMobileSize
+            ? 7
+            : $isSmallMobileSize
+              ? 8
+              : $isMobileSize
+                ? 9
+                : 10
       ),
       custom: ({ $currentCustomEmoji, $autoplayGifs }) => {
         if (!$currentCustomEmoji) {
diff --git a/src/routes/_components/settings/SettingsListButton.html b/src/routes/_components/settings/SettingsListButton.html
index 1fff688b..a23ccca1 100644
--- a/src/routes/_components/settings/SettingsListButton.html
+++ b/src/routes/_components/settings/SettingsListButton.html
@@ -1,4 +1,9 @@
-<a {href} on:click="fire('click', event)" rel="prefetch" aria-label={ariaLabel || label} class="settings-list-button {className ? className : ''}">
+<a {href}
+   on:click="fire('click', event)"
+   rel="prefetch"
+   aria-label={ariaLabel || label}
+   class="settings-list-button focus-after {className ? className : ''}"
+>
   <span>
     {label}
   </span>
diff --git a/src/routes/_components/settings/SettingsListRow.html b/src/routes/_components/settings/SettingsListRow.html
index 997d561b..2a2027a2 100644
--- a/src/routes/_components/settings/SettingsListRow.html
+++ b/src/routes/_components/settings/SettingsListRow.html
@@ -33,6 +33,12 @@
       padding: 20px 10px;
     }
   }
+
+  @media (max-width: 240px) {
+    .settings-list-item > :global(*) {
+      padding: 10px 10px;
+    }
+  }
 </style>
 <script>
   export default {
diff --git a/src/routes/_components/status/StatusHeader.html b/src/routes/_components/status/StatusHeader.html
index 2708556a..af323dc8 100644
--- a/src/routes/_components/status/StatusHeader.html
+++ b/src/routes/_components/status/StatusHeader.html
@@ -90,6 +90,15 @@
       margin-left: 10px;
     }
   }
+
+  @media (max-width: 240px) {
+    .status-header {
+      margin-left: 0;
+    }
+    .status-header-avatar {
+      margin-left: 0;
+    }
+  }
 </style>
 <script>
   import Avatar from '../Avatar.html'
diff --git a/src/routes/_components/status/StatusSidebar.html b/src/routes/_components/status/StatusSidebar.html
index 44b55d6a..fd44be7d 100644
--- a/src/routes/_components/status/StatusSidebar.html
+++ b/src/routes/_components/status/StatusSidebar.html
@@ -40,7 +40,12 @@
     },
     computed: {
       elementId: ({ uuid }) => `status-author-avatar-${uuid}`,
-      size: ({ isStatusInOwnThread }) => isStatusInOwnThread ? 'medium' : 'small'
+      size: ({ isStatusInOwnThread, $isVeryTinyMobileSize }) => {
+        if ($isVeryTinyMobileSize) {
+          return isStatusInOwnThread ? 'small' : 'extra-small'
+        }
+        return isStatusInOwnThread ? 'medium' : 'small'
+      }
     }
   }
 </script>
diff --git a/src/routes/_components/status/StatusToolbar.html b/src/routes/_components/status/StatusToolbar.html
index d2370400..a763b1c7 100644
--- a/src/routes/_components/status/StatusToolbar.html
+++ b/src/routes/_components/status/StatusToolbar.html
@@ -55,6 +55,12 @@
     }
   }
 
+  @media (max-width: 240px) {
+    :global(.status-toolbar .icon-button-svg) {
+      width: 20px;
+      height: 20px;
+    }
+  }
 </style>
 <script>
   import IconButton from '../IconButton.html'
diff --git a/src/routes/_pages/settings/general.html b/src/routes/_pages/settings/general.html
index c28dbdfc..11b60915 100644
--- a/src/routes/_pages/settings/general.html
+++ b/src/routes/_pages/settings/general.html
@@ -102,6 +102,12 @@
     display: block;
     padding: 5px 0;
   }
+
+  @media (max-width: 240px) {
+    .ui-settings {
+      padding: 20px 10px;
+    }
+  }
 </style>
 <script>
   import SettingsLayout from '../../_components/settings/SettingsLayout.html'
diff --git a/src/routes/_pages/settings/hotkeys.html b/src/routes/_pages/settings/hotkeys.html
index ae1863ee..5c6c46a7 100644
--- a/src/routes/_pages/settings/hotkeys.html
+++ b/src/routes/_pages/settings/hotkeys.html
@@ -27,6 +27,12 @@
     display: block;
     padding: 5px 0;
   }
+
+  @media (max-width: 240px) {
+    .ui-settings {
+      padding: 20px 10px;
+    }
+  }
 </style>
 <script>
   import SettingsLayout from '../../_components/settings/SettingsLayout.html'
diff --git a/src/routes/_pages/settings/wellness.html b/src/routes/_pages/settings/wellness.html
index 5b262381..78be0072 100644
--- a/src/routes/_pages/settings/wellness.html
+++ b/src/routes/_pages/settings/wellness.html
@@ -99,6 +99,12 @@
     margin: 0 10px 0 5px;
     min-width: 18px;
   }
+
+  @media (max-width: 240px) {
+    .ui-settings {
+      padding: 20px 10px;
+    }
+  }
 </style>
 <script>
   import SettingsLayout from '../../_components/settings/SettingsLayout.html'
diff --git a/src/routes/_store/observers/resizeObservers.js b/src/routes/_store/observers/resizeObservers.js
index 0d6970f0..b54fa470 100644
--- a/src/routes/_store/observers/resizeObservers.js
+++ b/src/routes/_store/observers/resizeObservers.js
@@ -9,7 +9,8 @@ export function resizeObservers (store) {
     store.set({
       isMobileSize: matchMedia('(max-width: 767px)').matches, //  e.g. iPhone Plus
       isSmallMobileSize: matchMedia('(max-width: 479px)').matches, // e.g. Galaxy S5
-      isTinyMobileSize: matchMedia('(max-width: 320px)').matches // e.g. iPhone 4
+      isTinyMobileSize: matchMedia('(max-width: 320px)').matches, // e.g. iPhone 4
+      isVeryTinyMobileSize: matchMedia('(max-width: 240px)').matches // e.g. Nokia 8110 (KaiOS)
     })
   }
 
diff --git a/src/scss/focus.scss b/src/scss/focus.scss
new file mode 100644
index 00000000..8197620f
--- /dev/null
+++ b/src/scss/focus.scss
@@ -0,0 +1,46 @@
+*:focus, .focus {
+  outline: 2px solid var(--focus-outline);
+}
+
+.container:focus {
+  // the outline causes choppy rendering on Edge and isn't visible or necessary anyway
+  // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17343598/
+  outline: none;
+}
+
+/* Special class to make focus outlines easier to see in some odd
+ * cases where the outline would be clipped. */
+.focus-after {
+  position: relative;
+}
+
+.focus-after:focus {
+  outline: none;
+}
+
+.focus-after:focus::after {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  content: '';
+  border: 2px solid var(--focus-outline);
+  pointer-events: none;
+}
+
+// For KaiOS, do some additional things to improve the focus styles, which don't show up well
+// for some reason
+@media (max-width: 320px) {
+  *:focus, .focus {
+    outline: 3px solid var(--focus-outline);
+  }
+
+  a:focus, span:focus {
+    background: var(--focus-bg) !important;
+  }
+
+  button:focus {
+    opacity: 0.7;
+  }
+}
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 451dd92b..8441b226 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -1,5 +1,6 @@
 @import './fonts.scss';
 @import './variables.scss';
+@import './focus.scss';
 
 body {
   margin: 0;
@@ -10,6 +11,11 @@ body {
   background: var(--body-bg);
   -webkit-tap-highlight-color: transparent; // fix for blue background on spoiler tap on Chrome for Android
   overflow-x: hidden; // Prevent horizontal scrolling on mobile Firefox on small screens
+
+  @media (max-width: 240px) {
+    font-size: 0.75em; /* tiny text for tiny screens */
+  }
+
 }
 
 .main-content {
@@ -148,16 +154,6 @@ ul, li, p {
   opacity: 0;
 }
 
-*:focus, .focus {
-  outline: 2px solid var(--focus-outline);
-}
-
-.container:focus {
-  // the outline causes choppy rendering on Edge and isn't visible or necessary anyway
-  // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17343598/
-  outline: none;
-}
-
 button::-moz-focus-inner {
   border: 0;
 }
@@ -215,24 +211,3 @@ textarea {
 .inline-emoji {
   font-family: PinaforeEmoji, sans-serif;
 }
-
-/* Special class to make focus outlines easier to see in some odd
- * cases where the outline would be clipped. */
-.focus-after {
-  position: relative;
-}
-
-.focus-after:focus {
-  outline: none;
-}
-
-.focus-after:focus::after {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  content: '';
-  border: 2px solid var(--focus-outline);
-  pointer-events: none;
-}
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index 453b40a4..d1bc4f95 100644
--- a/src/scss/themes/_base.scss
+++ b/src/scss/themes/_base.scss
@@ -129,4 +129,6 @@
   --focal-color: #{$secondary-text-color};
 
   --blurhash-sensitive-text-color: #{lighten($deemphasized-color, 40%)};
+
+  --focus-bg: #{rgba(0, 0, 0, 0.1)};
 }
diff --git a/src/scss/themes/_dark.scss b/src/scss/themes/_dark.scss
index 850b7051..4e2d0f4b 100644
--- a/src/scss/themes/_dark.scss
+++ b/src/scss/themes/_dark.scss
@@ -50,4 +50,6 @@
   --length-indicator-color: var(--action-button-fill-color);
 
   --blurhash-sensitive-text-color: #{lighten($deemphasized-color, 15%)};
+
+  --focus-bg: #{rgba(255, 255, 255, 0.1)};
 }
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index a1f7efd7..90328c06 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -10,6 +10,10 @@
     --status-pad-h: 10px;
   }
 
+  @media (max-width: 240px) {
+    --status-pad-h: 5px;
+  }
+
   //
   // 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).