From bb6875dd37a904e779ea9fde558a6107a6e83587 Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Mon, 6 Nov 2023 15:52:35 +1300 Subject: [PATCH 1/7] Improve drop-downs --- semantic/src/site/globals/site.overrides | 4 ++++ src/containers/User/UserArea.tsx | 8 +++++++- src/utils/defaultLanguageStrings.ts | 2 +- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/semantic/src/site/globals/site.overrides b/semantic/src/site/globals/site.overrides index 0fe89b7f6..39f0b5e19 100644 --- a/semantic/src/site/globals/site.overrides +++ b/semantic/src/site/globals/site.overrides @@ -2658,6 +2658,10 @@ h6:first-child { #user-area { height: @mobileHeaderHeight; padding-left: 10px; + .visible.menu .item { + font-size: 12px; + padding: 0.6em !important; + } } #user-area-left { diff --git a/src/containers/User/UserArea.tsx b/src/containers/User/UserArea.tsx index 29c709866..d99cacefb 100644 --- a/src/containers/User/UserArea.tsx +++ b/src/containers/User/UserArea.tsx @@ -409,7 +409,13 @@ const OrgSelector: React.FC<{ user: User; orgs: OrganisationSimple[]; onLogin: F if (!orgs.some(({ isSystemOrg }) => isSystemOrg)) dropdownOptions.push({ key: LOGIN_AS_NO_ORG, - text: `> ${t('LABEL_NO_ORG_SELECT')}`, + text: ( + + {t('LABEL_NO_ORG')} +
+ {t('LABEL_USER_ONLY')} + + ) as any, value: LOGIN_AS_NO_ORG, }) return ( diff --git a/src/utils/defaultLanguageStrings.ts b/src/utils/defaultLanguageStrings.ts index fd80af8c7..ca2199585 100644 --- a/src/utils/defaultLanguageStrings.ts +++ b/src/utils/defaultLanguageStrings.ts @@ -236,7 +236,7 @@ export default { LABEL_FILE_UPLOAD_PLACEHOLDER: 'Use the above bar to browse your file system', LABEL_FILE_DOWNLOAD_ERROR: 'Error trying to download', LABEL_NO_ORG: 'No organisation', - LABEL_NO_ORG_SELECT: 'No organisation (act as user only)', + LABEL_USER_ONLY: '(Act as user only)', LABEL_NO_ORG_OPTION: 'Log in without organisation', LABEL_PROCESSING: 'Processing...', LABEL_PREVIOUS_REVIEW: 'Previous review', From 01d3156c54a74e3f9cd55ba0b86fe42dc4b15774 Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Mon, 6 Nov 2023 16:46:18 +1300 Subject: [PATCH 2/7] Better dropdown positioning --- semantic/src/site/globals/site.overrides | 5 ++++- semantic/src/site/modules/dropdown.overrides | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/semantic/src/site/globals/site.overrides b/semantic/src/site/globals/site.overrides index 39f0b5e19..436d797b5 100644 --- a/semantic/src/site/globals/site.overrides +++ b/semantic/src/site/globals/site.overrides @@ -2660,7 +2660,10 @@ h6:first-child { padding-left: 10px; .visible.menu .item { font-size: 12px; - padding: 0.6em !important; + padding: 0.8em !important; + .dropdown { + padding: 0 !important; + } } } diff --git a/semantic/src/site/modules/dropdown.overrides b/semantic/src/site/modules/dropdown.overrides index d0cfebb33..d6a7e77d2 100644 --- a/semantic/src/site/modules/dropdown.overrides +++ b/semantic/src/site/modules/dropdown.overrides @@ -5,8 +5,8 @@ @media only screen and (max-width: @largestMobileScreen) { // So that the sub menus show properly in mobile for Header menu .ui.dropdown .menu .menu { - top: 350% !important; - left: 0%; + top: 150% !important; + left: 40%; } // To give drop-downs a bit more vertical height in mobile From 3db08eb932d32a18f2c3d782ec7e1cb183076cef Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Mon, 6 Nov 2023 16:48:31 +1300 Subject: [PATCH 3/7] Update site.overrides --- semantic/src/site/globals/site.overrides | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/semantic/src/site/globals/site.overrides b/semantic/src/site/globals/site.overrides index 436d797b5..5cccdaa01 100644 --- a/semantic/src/site/globals/site.overrides +++ b/semantic/src/site/globals/site.overrides @@ -2659,7 +2659,7 @@ h6:first-child { height: @mobileHeaderHeight; padding-left: 10px; .visible.menu .item { - font-size: 12px; + font-size: 0.9rem; padding: 0.8em !important; .dropdown { padding: 0 !important; From bcf121f95169e99153f6527e423ac71815f3a2a0 Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Mon, 6 Nov 2023 18:28:50 +1300 Subject: [PATCH 4/7] Menu transition slide in --- semantic/src/site/globals/site.overrides | 22 +-- src/containers/User/UserArea.tsx | 221 ++++++++++++----------- 2 files changed, 128 insertions(+), 115 deletions(-) diff --git a/semantic/src/site/globals/site.overrides b/semantic/src/site/globals/site.overrides index 5cccdaa01..423805ff7 100644 --- a/semantic/src/site/globals/site.overrides +++ b/semantic/src/site/globals/site.overrides @@ -2688,14 +2688,18 @@ h6:first-child { #menu-bar { font-size: inherit; + position: absolute; + top: @mobileHeaderHeight; + left: 0px; + width: 100%; .list { z-index: 2000; - position: absolute; - top: @mobileHeaderHeight; - left: 0px; background: @darkGrey; - width: 95%; - padding: 5px 30px 20px 25px; + padding: 5px 30px 10px 25px; + } + .list .item { + padding-top: 0.3em; + padding-bottom: 0.3em; } .ui .dropdown { display: flex; @@ -2723,6 +2727,7 @@ h6:first-child { height: 3px; background: @userAreaText; margin: 0 0 3px; + transition-duration: 0.1s; } .hamburger:hover { -moz-opacity: 1; @@ -2762,11 +2767,4 @@ h6:first-child { .hamburger.active .hamburger-patty { display: none; } - #menu-bar:not(.open) { - display: none; - - //.open { - // display:block; - //} - } } diff --git a/src/containers/User/UserArea.tsx b/src/containers/User/UserArea.tsx index d99cacefb..2657dc8da 100644 --- a/src/containers/User/UserArea.tsx +++ b/src/containers/User/UserArea.tsx @@ -1,5 +1,15 @@ import React, { SyntheticEvent, useEffect, useState } from 'react' -import { Button, Container, Image, List, Dropdown, Modal, Header, Form } from 'semantic-ui-react' +import { + Button, + Container, + Image, + List, + Dropdown, + Modal, + Header, + Form, + Transition, +} from 'semantic-ui-react' import { useUserState } from '../../contexts/UserState' import { useLanguageProvider } from '../../contexts/Localisation' import { attemptLoginOrg } from '../../utils/helpers/attemptLogin' @@ -249,110 +259,115 @@ const MainMenuBar: React.FC = ({ } return ( - + ) } From ae0c2f047c0d627ded45ddfd95f7880cecef1223 Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Mon, 6 Nov 2023 18:48:50 +1300 Subject: [PATCH 5/7] Slightly better mobile layout for Prefs and Data views. Hide config/manage menu on mob --- semantic/src/site/globals/site.overrides | 4 ++++ src/components/Admin/AdminPreferences.tsx | 3 +++ src/containers/User/UserArea.tsx | 6 +++--- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/semantic/src/site/globals/site.overrides b/semantic/src/site/globals/site.overrides index 423805ff7..02656855d 100644 --- a/semantic/src/site/globals/site.overrides +++ b/semantic/src/site/globals/site.overrides @@ -1835,6 +1835,10 @@ a:hover { #data-view-config-panel { padding-top: 20px; width: 50%; + @media only screen and (max-width: @largestMobileScreen) { + width: unset; + max-width: 100%; + } h2.ui.header { padding: 0; diff --git a/src/components/Admin/AdminPreferences.tsx b/src/components/Admin/AdminPreferences.tsx index 9cb020c56..1eb887516 100644 --- a/src/components/Admin/AdminPreferences.tsx +++ b/src/components/Admin/AdminPreferences.tsx @@ -8,10 +8,12 @@ import useConfirmationModal from '../../utils/hooks/useConfirmationModal' import getServerUrl from '../../utils/helpers/endpoints/endpointUrlBuilder' import { JsonEditor } from './JsonEditor' import Loading from '../Loading' +import { useViewport } from '../../contexts/ViewportState' export const AdminPreferences: React.FC = () => { const { t, tFormat } = useLanguageProvider() usePageTitle(t('PAGE_TITLE_PREFS')) + const { isMobile } = useViewport() const showToast = useToast({ position: topLeft }) const { ConfirmModal: WarningModal, showModal: showWarningModal } = useConfirmationModal({ @@ -66,6 +68,7 @@ export const AdminPreferences: React.FC = () => { maxWidth={650} restrictDelete={({ level }) => level === 1} restrictAdd={({ level }) => level === 0} + indent={isMobile ? 2 : 4} /> ) : ( diff --git a/src/containers/User/UserArea.tsx b/src/containers/User/UserArea.tsx index 2657dc8da..71c1b5e90 100644 --- a/src/containers/User/UserArea.tsx +++ b/src/containers/User/UserArea.tsx @@ -259,7 +259,7 @@ const MainMenuBar: React.FC = ({ } return ( - +