Fix sidebar and tabs on settings on small screens in admin UI (#19533)

app/javascript/packs/public.js

@@ -247,8 +247,31 @@ function main() {
     input.readonly = oldReadOnly;
   });
 
+  const toggleSidebar = () => {
+    const sidebar = document.querySelector('.sidebar ul');
+    const toggleButton = document.querySelector('.sidebar__toggle__icon');
+
+    if (sidebar.classList.contains('visible')) {
+      document.body.style.overflow = null;
+      toggleButton.setAttribute('aria-expanded', false);
+    } else {
+      document.body.style.overflow = 'hidden';
+      toggleButton.setAttribute('aria-expanded', true);
+    }
+
+    toggleButton.classList.toggle('active');
+    sidebar.classList.toggle('visible');
+  };
+
   delegate(document, '.sidebar__toggle__icon', 'click', () => {
-    document.querySelector('.sidebar ul').classList.toggle('visible');
+    toggleSidebar();
+  });
+
+  delegate(document, '.sidebar__toggle__icon', 'keydown', e => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      toggleSidebar();
+    }
   });
 
   // Empty the honeypot fields in JS in case something like an extension

app/javascript/styles/mastodon/admin.scss

@@ -31,23 +31,17 @@ $content-width: 840px;
 
     &__toggle {
       display: none;
-      background: lighten($ui-base-color, 8%);
+      background: darken($ui-base-color, 4%);
-      height: 48px;
+      border-bottom: 1px solid lighten($ui-base-color, 4%);
+      align-items: center;
 
       &__logo {
         flex: 1 1 auto;
 
         a {
-          display: inline-block;
+          display: block;
           padding: 15px;
         }
-
-        svg {
-          fill: $primary-text-color;
-          height: 20px;
-          position: relative;
-          bottom: -2px;
-        }
       }
 
       &__icon {
@@ -55,15 +49,27 @@ $content-width: 840px;
         color: $darker-text-color;
         text-decoration: none;
         flex: 0 0 auto;
-        font-size: 20px;
+        font-size: 18px;
-        padding: 15px;
+        padding: 10px;
-      }
+        margin: 5px 10px;
+        border-radius: 4px;
 
-      a {
+        &:focus {
-        &:hover,
+          background: $ui-base-color;
-        &:focus,
+        }
-        &:active {
+
-          background: lighten($ui-base-color, 12%);
+        .fa-times {
+          display: none;
+        }
+
+        &.active {
+          .fa-times {
+            display: block;
+          }
+
+          .fa-bars {
+            display: none;
+          }
         }
       }
     }
@@ -79,7 +85,7 @@ $content-width: 840px;
       display: inherit;
       margin: inherit;
       width: inherit;
-      height: 20px;
+      height: 25px;
     }
 
     @media screen and (max-width: $no-columns-breakpoint) {
@@ -189,9 +195,7 @@ $content-width: 840px;
     }
 
     &__heading {
-      padding-bottom: 36px;
+      margin-bottom: 45px;
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
-      margin-bottom: 40px;
 
       &__row {
         display: flex;
@@ -208,46 +212,43 @@ $content-width: 840px;
 
       &__tabs {
         margin-top: 30px;
-        margin-bottom: -31px;
+        width: 100%;
 
         & > div {
           display: flex;
-          gap: 10px;
+          flex-wrap: wrap;
+          gap: 5px;
         }
 
         a {
           font-size: 14px;
           display: inline-flex;
           align-items: center;
-          padding: 7px 15px;
+          padding: 7px 10px;
           border-radius: 4px;
           color: $darker-text-color;
           text-decoration: none;
-          position: relative;
           font-weight: 500;
           gap: 5px;
           white-space: nowrap;
 
-          &.selected {
-            font-weight: 700;
-            color: $primary-text-color;
-
-            &::after {
-              content: "";
-              display: block;
-              width: 100%;
-              border-bottom: 1px solid $ui-highlight-color;
-              position: absolute;
-              bottom: -5px;
-              left: 0;
-            }
-          }
-
           &:hover,
           &:focus,
           &:active {
             background: lighten($ui-base-color, 4%);
           }
+
+          &.selected {
+            font-weight: 700;
+            color: $primary-text-color;
+            background: $ui-highlight-color;
+
+            &:hover,
+            &:focus,
+            &:active {
+              background: lighten($ui-highlight-color, 4%);
+            }
+          }
         }
       }
 
@@ -382,6 +383,14 @@ $content-width: 840px;
 
         &.visible {
           display: block;
+          position: fixed;
+          z-index: 10;
+          width: 100%;
+          height: calc(100vh - 56px);
+          left: 0;
+          bottom: 0;
+          overflow-y: auto;
+          background: $ui-base-color;
         }
       }
 

app/views/layouts/admin.html.haml

@@ -15,8 +15,9 @@
               = link_to root_path do
                 = logo_as_symbol(:wordmark)
 
-            = link_to '#', class: 'sidebar__toggle__icon' do
+            = link_to '#', class: 'sidebar__toggle__icon', 'aria-label': t('navigation.toggle_menu'), 'aria-expanded': 'false' do
               = fa_icon 'bars'
+              = fa_icon 'times'
 
           = render_navigation
 

config/locales/en.yml

@@ -1249,6 +1249,8 @@ en:
     carry_blocks_over_text: This user moved from %{acct}, which you had blocked.
     carry_mutes_over_text: This user moved from %{acct}, which you had muted.
     copy_account_note_text: 'This user moved from %{acct}, here were your previous notes about them:'
+  navigation:
+    toggle_menu: Toggle menu
   notification_mailer:
     admin:
       report: