diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index 19727cef8..d3d7c1bb8 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -17,6 +17,7 @@ "notch-bottom notch-bottom notch-bottom"; grid-template-columns: 48px minmax(0, 1120px) 48px; inline-size: fit-content; + margin-block-start: 2rem; max-inline-size: 100%; margin-inline: auto; @@ -105,18 +106,6 @@ } } - .card-perma__collection-header { - margin-block-end: var(--block-space); - - #main:has(.card-perma__notch--top) & { - margin-block-end: 4ch; - - @media (max-width: 639px) { - margin-block-end: 2ch; - } - } - } - /* Child items /* ------------------------------------------------------------------------ */ diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css index ea4fa119d..8342b10e8 100644 --- a/app/assets/stylesheets/events.css +++ b/app/assets/stylesheets/events.css @@ -2,9 +2,9 @@ /* Events header /* ------------------------------------------------------------------------ */ - .header.events-header { + .header--events { @media (min-width: 640px) { - --header-actions-width: 7rem; + --header-actions-width: 7rem !important; } } @@ -28,7 +28,7 @@ text-align: start; z-index: 2; - .events section:first-of-type & { + .events section:first-of-type & { border-radius: 0.5em 0.5em 0 0; } diff --git a/app/assets/stylesheets/header.css b/app/assets/stylesheets/header.css index 32db849a5..deb98906f 100644 --- a/app/assets/stylesheets/header.css +++ b/app/assets/stylesheets/header.css @@ -7,14 +7,28 @@ --header-button-count: 0; --header-actions-width: calc((var(--header-btn-size) + var(--header-gap)) * var(--header-button-count)); - align-items: center; - display: flex; + display: grid; + grid-template-columns: var(--header-actions-width) 1fr var(--header-actions-width); + grid-template-areas: + "menu menu menu" + "actions-start title actions-end"; + max-inline-size: 100dvw; padding: calc(var(--block-space-half) + env(safe-area-inset-top)) var(--inline-space); + view-transition-name: header; /* Change the grid size depending on how many buttons are present */ &:has(.header__actions > *:nth-child(1)) { --header-button-count: 1; } &:has(.header__actions > *:nth-child(2)) { --header-button-count: 2; } &:has(.header__actions > *:nth-child(3)) { --header-button-count: 3; } + + &:has(nav) { + row-gap: var(--block-space-half); + } + + nav { + grid-area: menu; + margin-inline: auto; + } } .header__actions { @@ -26,20 +40,37 @@ } .header__actions--start { + grid-area: actions-start; margin-inline-end: auto; } .header__actions--end { - margin-inline-start: auto; + grid-area: actions-end; justify-content: flex-end; + margin-inline-start: auto; } .header__title { color: inherit; font-size: var(--text-large); font-weight: 900; + grid-area: title; margin: 0 auto; min-inline-size: 0; text-align: center; } + + .header__skip-navigation { + --left-offset: -999em; + + inset-block-start: 4rem; + inset-inline-start: var(--left-offset); + position: absolute; + white-space: nowrap; + z-index: 11; + + &:focus { + --left-offset: var(--inline-space); + } + } } diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index ab65b2f10..1833c3950 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -32,61 +32,6 @@ :where(#footer) { max-inline-size: 100dvw; - - > nav { - padding-inline: var(--inline-space); - } - } - - :where(#header) { - max-inline-size: 100dvw; - view-transition-name: header; - - > nav { - view-transition-name: nav; - - header { - h1 { - font-weight: 800; - margin-block-start: 0.2em; - text-align: center; - - a:not([class]) { - background-color: transparent; - font-weight: inherit; - text-decoration: underline; - } - } - - a:not([class]) { - background-color: var(--color-ink-lightest); - border-radius: 2em; - color: var(--color-ink); - font-weight: 500; - padding: 0.2em 0.8em; - text-decoration: none; - - @media (hover: hover) { - &:hover { - background-color: var(--color-ink-lighter); - text-decoration: none; - } - } - } - } - } - - > * { - align-items: center; - display: flex; - gap: 1ch; - justify-content: center; - padding: var(--block-space-half) var(--inline-space); - } - - .btn { - flex-shrink: 0; - } } :is(#header, #footer) { @@ -95,19 +40,3 @@ } } } - -@layer components { - .skip-navigation { - --left-offset: -999em; - - inset-block-start: 4rem; - inset-inline-start: var(--left-offset); - position: absolute; - white-space: nowrap; - z-index: 11; - - &:focus { - --left-offset: var(--inline-space); - } - } -} diff --git a/app/controllers/accounts/settings_controller.rb b/app/controllers/accounts/settings_controller.rb index 60e60ceaf..af8b47105 100644 --- a/app/controllers/accounts/settings_controller.rb +++ b/app/controllers/accounts/settings_controller.rb @@ -1,4 +1,8 @@ class Accounts::SettingsController < ApplicationController + include FilterScoped + + enable_collection_filtering only: :show + def show @account = Account.sole @users = User.active diff --git a/app/views/accounts/settings/show.html.erb b/app/views/accounts/settings/show.html.erb index 3d1b34514..d8c03a265 100644 --- a/app/views/accounts/settings/show.html.erb +++ b/app/views/accounts/settings/show.html.erb @@ -1,20 +1,18 @@ <% @page_title = "Account Settings" %> <% content_for :header do %> - +