From 839f893168ab221b08fa439012189e6c29a2721a Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 20 Oct 2022 14:35:29 +0200 Subject: Change public accounts pages to mount the web UI (#19319) * Change public accounts pages to mount the web UI * Fix handling of remote usernames in routes - When logged in, serve web app - When logged out, redirect to permalink - Fix `app-body` class not being set sometimes due to name conflict * Fix missing `multiColumn` prop * Fix failing test * Use `discoverable` attribute to control indexing directives * Fix `` not using `multiColumn` * Add `noindex` to accounts in REST API * Change noindex directive to not be rendered by default before a route is mounted * Add loading indicator for detailed status in web UI * Fix missing indicator appearing while account is loading in web UI --- app/javascript/packs/public.js | 29 ----------------------------- 1 file changed, 29 deletions(-) (limited to 'app/javascript/packs/public.js') diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index e42468e0c..5ff45fa55 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/packs/public.js @@ -33,7 +33,6 @@ function main() { const { messages } = getLocale(); const React = require('react'); const ReactDOM = require('react-dom'); - const Rellax = require('rellax'); const { createBrowserHistory } = require('history'); const scrollToDetailedStatus = () => { @@ -112,12 +111,6 @@ function main() { scrollToDetailedStatus(); } - const parallaxComponents = document.querySelectorAll('.parallax'); - - if (parallaxComponents.length > 0 ) { - new Rellax('.parallax', { speed: -1 }); - } - delegate(document, '#registration_user_password_confirmation,#registration_user_password', 'input', () => { const password = document.getElementById('registration_user_password'); const confirmation = document.getElementById('registration_user_password_confirmation'); @@ -168,28 +161,6 @@ function main() { }); }); - delegate(document, '.webapp-btn', 'click', ({ target, button }) => { - if (button !== 0) { - return true; - } - window.location.href = target.href; - return false; - }); - - delegate(document, '.modal-button', 'click', e => { - e.preventDefault(); - - let href; - - if (e.target.nodeName !== 'A') { - href = e.target.parentNode.href; - } else { - href = e.target.href; - } - - window.open(href, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes'); - }); - delegate(document, '#account_display_name', 'input', ({ target }) => { const name = document.querySelector('.card .display-name strong'); if (name) { -- cgit From ad83e64795361dc9d5990a9dae4f91a3642109a0 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 30 Oct 2022 02:43:15 +0200 Subject: Fix sidebar and tabs on settings on small screens in admin UI (#19533) --- app/javascript/packs/public.js | 25 ++++++++- app/javascript/styles/mastodon/admin.scss | 89 +++++++++++++++++-------------- app/views/layouts/admin.html.haml | 3 +- config/locales/en.yml | 2 + 4 files changed, 77 insertions(+), 42 deletions(-) (limited to 'app/javascript/packs/public.js') 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: -- cgit