diff --git a/CHANGELOG.md b/CHANGELOG.md index 9124d17..9f5a7d8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 * [PR-22](https://github.com/itk-dev/itk-project-database/pull/22) Use the ITK logo in the nav and login, tidy the dashboard header, and refresh the login screen. +* [PR-20](https://github.com/itk-dev/itk-project-database/pull/20) + Minor improvements to the user menu styling. * [PR-19](https://github.com/itk-dev/itk-project-database/pull/19) Auto-upload files with a progress bar and image preview, view images in an in-page lightbox, and refresh the media field styling. diff --git a/assets/styles/app.css b/assets/styles/app.css index 599c076..7404bb7 100644 --- a/assets/styles/app.css +++ b/assets/styles/app.css @@ -236,9 +236,7 @@ h3 { } .user-menu__header { - padding: var(--itk-space-3); - border-bottom: 1px solid var(--itk-slate-100); - margin-bottom: var(--itk-space-2); + padding: var(--itk-space-2) var(--itk-space-3); } .user-menu__eyebrow { @@ -257,6 +255,22 @@ h3 { color: var(--itk-slate-500); } +.user-menu__divider { + height: 1px; + margin: var(--itk-space-2) 0; + background-color: var(--itk-slate-100); +} + +.user-menu__group { + display: flex; + flex-direction: column; + gap: var(--itk-space-1); +} + +.user-menu__group-label { + padding: var(--itk-space-1) var(--itk-space-3); +} + .user-menu__link, .user-menu__logout, .user-menu__button { @@ -287,10 +301,14 @@ h3 { cursor: pointer; } -.user-menu__toggle { +.user-menu__pref { display: flex; align-items: center; - gap: var(--itk-space-2); + justify-content: space-between; + gap: var(--itk-space-3); + padding: var(--itk-space-2) var(--itk-space-3); + font-size: var(--itk-text-sm); + color: var(--itk-slate-700); } .toggle-switch { @@ -315,11 +333,11 @@ h3 { transition: transform 0.15s; } -.user-menu__toggle[aria-checked="true"] .toggle-switch { +.user-menu__pref[aria-checked="true"] .toggle-switch { background-color: var(--itk-blue); } -.user-menu__toggle[aria-checked="true"] .toggle-switch__knob { +.user-menu__pref[aria-checked="true"] .toggle-switch__knob { transform: translateX(14px); } @@ -327,10 +345,6 @@ h3 { color: var(--itk-danger); } -.user-menu__section { - padding: var(--itk-space-2) var(--itk-space-3); -} - .lang-toggle { display: inline-flex; border: 1px solid var(--itk-slate-200); @@ -355,10 +369,6 @@ h3 { color: #fff; } -.user-menu__section .lang-toggle { - margin-top: 6px; -} - .page { max-width: var(--itk-container); margin: 0 auto; diff --git a/templates/base.html.twig b/templates/base.html.twig index 6678a4f..bfbbad7 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -38,30 +38,44 @@
{{ app.user.name }}
{{ app.user.email }}
-
-
{{ 'nav.language'|trans }}
-
- DA - EN + +
+ + + +
+ +
+
{{ 'nav.preferences'|trans }}
+
+ {{ 'nav.language'|trans }} +
+ DA + EN +
+
+ + + +
+
+ + + +
- {{ 'nav.admin'|trans }} -
- - - -
-
- - - -
+ +
+ {{ 'nav.logout'|trans }}
diff --git a/translations/messages.da.yaml b/translations/messages.da.yaml index 13c7bc4..9daa837 100644 --- a/translations/messages.da.yaml +++ b/translations/messages.da.yaml @@ -73,11 +73,12 @@ nav: areas: Områder users: Brugere admin: Administration + preferences: Indstillinger language: Sprog signed_in_as: Logget ind som logout: Log ud - show_mascot: Din ven Glimt - show_stars: Flyvende stjerner + show_mascot: Din ven Glimt ⭐ + show_stars: Flyvende stjerner 💫 action: new: Opret diff --git a/translations/messages.en.yaml b/translations/messages.en.yaml index b856903..80ccdac 100644 --- a/translations/messages.en.yaml +++ b/translations/messages.en.yaml @@ -73,11 +73,12 @@ nav: areas: Areas users: Users admin: Administration + preferences: Preferences language: Language signed_in_as: Signed in as logout: Sign out - show_mascot: Show mascot - show_stars: Show flying stars + show_mascot: Show Glimt ⭐ + show_stars: Show flying stars 💫x action: new: New