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 @@ +
+ <%= jump_field_tag %> + + +
diff --git a/app/views/my/menus/_navigation.html.erb b/app/views/my/menus/_navigation.html.erb deleted file mode 100644 index 1b49577d4..000000000 --- a/app/views/my/menus/_navigation.html.erb +++ /dev/null @@ -1,17 +0,0 @@ -
- <%= jump_field_tag %> - - -
- - diff --git a/app/views/my/menus/show.html.erb b/app/views/my/menus/show.html.erb index 1abeb2ca4..e59877b6e 100644 --- a/app/views/my/menus/show.html.erb +++ b/app/views/my/menus/show.html.erb @@ -1,68 +1,79 @@ <%= turbo_frame_tag "my_menu", target: "_top" do %> - <%= render "my/menus/navigation" %> + <%= render "my/menus/jump" %> - <%= collapsible_nav_section "Saved filters", id: "my-filters" do %> - <%= form_with url: cards_path, method: :get, data: { controller: "form" } do |form| %> - + + <% @filters.each do |filter| %> + <%= my_menu_filter_item(filter) %> + <% end %> + <% end %> + <% end %> + + <%= collapsible_nav_section "Boards" do %> + - <% @filters.each do |filter| %> - <%= my_menu_filter_item(filter) %> + <% @boards.each do |board| %> + <%= my_menu_board_item(board) %> <% end %> <% end %> - <% end %> - <%= collapsible_nav_section "Boards" do %> - - - <% @boards.each do |board| %> - <%= my_menu_board_item(board) %> - <% end %> - <% end %> - - <%= collapsible_nav_section "Tags" do %> - <% @tags.each do |tag| %> - <%= my_menu_tag_item(tag) %> - <% end %> - <% end %> - - <%= collapsible_nav_section "People" do %> - - - <% @users.each do |user| %> - <%= my_menu_user_item(user) %> - <% end %> - <% end %> - - <%= collapsible_nav_section "Jump to…" do %> - <%= filter_place_menu_item account_settings_path, "Account Settings", "settings" %> - <%= filter_place_menu_item user_path(Current.user), "My Profile", "person" %> - <%= filter_place_menu_item notifications_path, "Notifications", "bell" %> - <%= filter_place_menu_item notifications_settings_path, "Notification Settings", "settings" %> - - <%= tag.li class: "popup__item", data: { filter_target: "item", navigable_list_target: "item" } do %> - <%= icon_tag "logout", class: "popup__icon" %> - <%= button_to session_url(script_name: nil), method: :delete, class: "popup__btn btn", data: { turbo: false } do %> - Sign out + <%= collapsible_nav_section "Tags" do %> + <% @tags.each do |tag| %> + <%= my_menu_tag_item(tag) %> <% end %> <% end %> - <% end %> - <%= turbo_frame_tag Current.identity, :account_menu, src: session_menu_url(script_name: nil, menu_section: true, without: ApplicationRecord.current_tenant) %> + <%= collapsible_nav_section "People" do %> + + + <% @users.each do |user| %> + <%= my_menu_user_item(user) %> + <% end %> + <% end %> + + <%= collapsible_nav_section "Jump to…" do %> + <%= filter_place_menu_item account_settings_path, "Account Settings", "settings" %> + <%= filter_place_menu_item user_path(Current.user), "My Profile", "person" %> + <%= filter_place_menu_item notifications_path, "Notifications", "bell" %> + <%= filter_place_menu_item notifications_settings_path, "Notification Settings", "settings" %> + + <%= tag.li class: "popup__item", data: { filter_target: "item", navigable_list_target: "item" } do %> + <%= icon_tag "logout", class: "popup__icon" %> + <%= button_to session_url(script_name: nil), method: :delete, class: "popup__btn btn", data: { turbo: false } do %> + Sign out + <% end %> + <% end %> + <% end %> + + <%= turbo_frame_tag Current.identity, :account_menu, src: session_menu_url(script_name: nil, menu_section: true, without: ApplicationRecord.current_tenant) %> +