diff --git a/app/assets/stylesheets/nav.css b/app/assets/stylesheets/nav.css index 8d0ecef2d..43ba34a14 100644 --- a/app/assets/stylesheets/nav.css +++ b/app/assets/stylesheets/nav.css @@ -1,4 +1,7 @@ @layer components { + /* Trigger + /* ------------------------------------------------------------------------ */ + .nav__trigger { --input-background: var(--color-canvas); --input-border-color: transparent; @@ -46,22 +49,34 @@ } } + /* Dialog + /* ------------------------------------------------------------------------ */ + .nav__menu.popup { --panel-border-color: var(--color-selected-dark); --panel-border-radius: 1.4em; --panel-padding: var(--block-space) var(--block-space) 0 var(--block-space); --panel-size: 45ch; + --popup-display: grid; align-items: stretch; box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%), 0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%), 0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%), 0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%); - flex-direction: column; + display: grid; + grid-template-rows: auto 1fr auto; gap: 2px; + overflow: hidden; scrollbar-gutter: stable both-edges; } + .nav__scroll-container { + margin-inline: -1ch; + overflow: auto; + padding-inline: 1ch; /* room for scrollbar */ + } + .nav__close { @media (any-hover: hover) { display: none; @@ -133,27 +148,14 @@ } } - /* Safari doesn't position the sticky footer properly during the - * transition, so we need to delay the footer entrance. */ .nav__footer { - animation: safari-sticky-footer-hack 0s; - animation-delay: var(--dialog-duration); - animation-fill-mode: both; background-color: var(--color-canvas); border-block-start: 1px solid var(--color-ink-lighter); font-size: var(--text-small); - inset: auto 0 0; - inset-inline: var(--block-space); line-height: 1.6; margin-block-start: var(--block-space-half); padding: 1.5ch; - position: sticky; text-align: center; z-index: 1; } - - @keyframes safari-sticky-footer-hack { - 0% { position: absolute; } - 100% { position: sticky; } - } } diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index 84c17c193..c0803326d 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -6,6 +6,7 @@ --panel-size: auto; --popup-icon-size: 24px; --popup-item-padding-inline: 0.5rem; + --popup-display: flex; inset: 0 auto auto 50%; min-inline-size: min(25ch, calc(100dvw - var(--block-space-double))); @@ -16,7 +17,7 @@ z-index: var(--z-popup); &[open] { - display: flex; + display: var(--popup-display); } &.orient-left { @@ -52,11 +53,11 @@ background: var(--color-canvas); font-size: var(--text-small); font-weight: bold; + inset-block-start: 0; list-style: none; padding: var(--block-space-half) var(--inline-space-half); position: sticky; text-transform: uppercase; - top: calc(-1 * var(--block-space)); z-index: 1; &:is(summary) { diff --git a/app/views/my/_menu.html.erb b/app/views/my/_menu.html.erb index 37d5fff4e..005547db9 100644 --- a/app/views/my/_menu.html.erb +++ b/app/views/my/_menu.html.erb @@ -14,7 +14,7 @@ navigable_list_focus_on_selection_value: false, navigable_list_actionable_items_value: true } do %> <%= turbo_frame_tag "my_menu", src: my_menu_path, loading: :lazy, target: "_top" do %> - <%= render "my/menus/navigation" %> + <%= render "my/menus/jump" %> <% end %> <% end %> diff --git a/app/views/my/menus/_jump.html.erb b/app/views/my/menus/_jump.html.erb new file mode 100644 index 000000000..d3a76e7c4 --- /dev/null +++ b/app/views/my/menus/_jump.html.erb @@ -0,0 +1,8 @@ +