diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index 19138c0de..e589d4333 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -221,7 +221,7 @@ z-index: 1; } - .btn:not(.popup__item, .btn--plain, .btn--reversed) { + .btn:not(.popup__btn, .btn--plain, .btn--reversed) { --btn-background: var(--card-color); --btn-color: var(--color-ink-inverted); } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 1f2c4b84b..7a427a6d2 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -27,6 +27,10 @@ @media (prefers-color-scheme: dark) { box-shadow: 0 0 0 1px var(--color-ink-lighter); } + + .popup { + inline-size: 260px; + } } /* Header diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/fizzy-menu.css index 050a4fd9c..7eb992d1c 100644 --- a/app/assets/stylesheets/fizzy-menu.css +++ b/app/assets/stylesheets/fizzy-menu.css @@ -63,7 +63,7 @@ max-inline-size: 100%; /* When all its children are hidden, hide this as well so it doesn't take up space */ - &:has(.popup__group[hidden]):not(:has(.popup__group:not([hidden]))) { + &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) { display: none; } diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index 634e306ec..f4157a270 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -20,6 +20,11 @@ max-inline-size: 100dvw; } + :where(#header) { + position: relative; + z-index: var(--z-nav); + } + :is(#header, #footer) { @media print { display: none; diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index 4deab9f7e..a0db67496 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -3,6 +3,7 @@ --panel-border-radius: 0.5em; --panel-padding: var(--block-space); --panel-size: auto; + --btn-background: transparent; inset: 0 auto auto 50%; max-block-size: 80vh; @@ -31,13 +32,8 @@ --panel-padding: var(--block-space) var(--block-space) 0 var(--block-space); } - #header:has(&) { - position: relative; - z-index: var(--z-nav); - } - - .card & { - inline-size: 260px; + form { + display: contents; } } @@ -46,40 +42,9 @@ white-space: nowrap; } - .popup__group { - align-items: center; - background: transparent; - border-radius: 0.3em; - display: flex; - inline-size: 100%; - max-inline-size: 100%; + .popup__section {} - .popup__list &:has(*:first-child:not(.popup__item)) { - padding-inline-start: var(--inline-space-half); - } - - .btn { - --btn-background: transparent; - } - - @media (any-hover: hover) { - &:hover { - background: var(--color-ink-lightest); - } - } - - &[aria-selected] { - background-color: var(--color-selected); - - @media (any-hover: hover) { - &:hover { - background-color: var(--color-selected); - } - } - } - } - - .popup__group-title { + .popup__section-title { background: var(--color-canvas); font-size: var(--text-small); font-weight: bold; @@ -106,13 +71,43 @@ row-gap: 2px; /* Hide lists when all the items within are hidden */ - &:has(.popup__group-title:only-child), - &:has(.popup__group[hidden]):not(:has(.popup__group:not([hidden]))) { + &:has(.popup__section-title:only-child), + &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) { display: none; } } .popup__item { + align-items: center; + background: transparent; + border-radius: 0.3em; + display: flex; + inline-size: 100%; + max-inline-size: 100%; + + /* .popup__list &:has(*:first-child:not(.popup__btn)) { + padding-inline-start: var(--inline-space-half); + } */ + + @media (any-hover: hover) { + &:hover { + background: var(--color-ink-lightest); + } + } + + &[aria-selected] { + background-color: var(--color-selected); + + @media (any-hover: hover) { + &:hover { + background-color: var(--color-selected); + } + } + } + } + + /* The actionable thing with padding within popup__item */ + .popup__btn { --btn-background: transparent; --btn-border-radius: 0.3em; --btn-border-size: 0; @@ -126,12 +121,6 @@ max-inline-size: 100%; text-align: start; - @media (any-hover: hover) { - &:where(:not(:active):hover) { - --btn-background: var(--color-selected); - } - } - .icon { --icon-size: 1em; } @@ -152,16 +141,6 @@ } } - .popup__new { - --btn-icon-size: 1em; - - padding-inline-start: var(--inline-space-half); - - .icon { - margin-inline-end: 0.5em; - } - } - .popup__footer { background-color: var(--color-canvas); border-block-start: 1px solid var(--color-ink-lighter); diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb index b6b95418b..1d7646ab3 100644 --- a/app/helpers/filters_helper.rb +++ b/app/helpers/filters_helper.rb @@ -16,9 +16,9 @@ module FiltersHelper end def filter_place_menu_item(path, label, icon) - tag.li class: "popup__group", id: "filter-place-#{label.parameterize}", data: { filter_target: "item", navigable_list_target: "item" } do + tag.li class: "popup__item", id: "filter-place-#{label.parameterize}", data: { filter_target: "item", navigable_list_target: "item" } do concat icon_tag(icon) - concat(link_to(path, class: "popup__item btn") do + concat(link_to(path, class: "popup__btn btn") do concat tag.span(label, class: "overflow-ellipsis") concat tag.span(" ›", class: "translucent flex-item-no-shrink flex-item-justify-end") end) @@ -37,7 +37,7 @@ module FiltersHelper end def filter_hotkey_link(title, path, key, icon) - link_to path, class: "popup__group btn borderless", id: "filter-hotkey-#{key}", role: "listitem", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.#{key}@document->hotkey#click keydown.shift+#{key}@document->hotkey#click" } do + link_to path, class: "popup__item btn borderless", id: "filter-hotkey-#{key}", role: "listitem", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.#{key}@document->hotkey#click keydown.shift+#{key}@document->hotkey#click" } do concat icon_tag(icon) concat tag.span(title.html_safe) concat tag.kbd(key) diff --git a/app/views/cards/assignments/new.html.erb b/app/views/cards/assignments/new.html.erb index 27eaf3a91..0c16aa94d 100644 --- a/app/views/cards/assignments/new.html.erb +++ b/app/views/cards/assignments/new.html.erb @@ -14,9 +14,9 @@