diff options
| -rw-r--r-- | app/javascript/packs/public.js | 25 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/admin.scss | 89 | ||||
| -rw-r--r-- | app/views/layouts/admin.html.haml | 3 | ||||
| -rw-r--r-- | config/locales/en.yml | 2 |
4 files changed, 77 insertions, 42 deletions
diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index 5ff45fa55..786fc8ede 100644 --- a/app/javascript/packs/public.js +++ b/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 diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index f86778399..7a50a89bb 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -31,23 +31,17 @@ $content-width: 840px; &__toggle { display: none; - background: lighten($ui-base-color, 8%); - height: 48px; + background: darken($ui-base-color, 4%); + 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; - padding: 15px; - } + font-size: 18px; + padding: 10px; + margin: 5px 10px; + border-radius: 4px; - a { - &:hover, - &:focus, - &:active { - background: lighten($ui-base-color, 12%); + &:focus { + background: $ui-base-color; + } + + .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; - border-bottom: 1px solid lighten($ui-base-color, 8%); - margin-bottom: 40px; + margin-bottom: 45px; &__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; + &:hover, + &:focus, + &:active { + background: lighten($ui-base-color, 4%); + } + &.selected { font-weight: 700; color: $primary-text-color; + background: $ui-highlight-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-highlight-color, 4%); } } - - &:hover, - &:focus, - &:active { - background: lighten($ui-base-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; } } diff --git a/app/views/layouts/admin.html.haml b/app/views/layouts/admin.html.haml index 59021ad88..e7a163c92 100644 --- a/app/views/layouts/admin.html.haml +++ b/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 diff --git a/config/locales/en.yml b/config/locales/en.yml index fd845c3c2..547b19f07 100644 --- a/config/locales/en.yml +++ b/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: |