diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/fizzy-menu.css index 29e2c5631..8e68174bb 100644 --- a/app/assets/stylesheets/fizzy-menu.css +++ b/app/assets/stylesheets/fizzy-menu.css @@ -6,6 +6,7 @@ 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%); + z-index: 5; } .fizzy-menu { diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index cbd65028e..d450a46a2 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -1,13 +1,15 @@ @layer components { .popup { --panel-border-radius: 0.5em; - --panel-padding: var(--block-space); + --panel-padding: var(--block-space) var(--block-space) 0 var(--block-space); --panel-size: auto; inline-size: auto; inset: 0 auto auto 50%; + max-block-size: 80vh; min-inline-size: min(25ch, 90vw); - max-inline-size: min(50ch, 90vw); + max-inline-size: min(55ch, 90vw); + overflow: auto; position: absolute; transform: translateX(-50%); z-index: var(--z-popup); @@ -33,6 +35,14 @@ } } + .popup__footer { + background-color: var(--color-canvas); + inset: auto 0 0 0; + padding: var(--block-space); + position: sticky; + z-index: 1; + } + .popup__group { background: var(--color-ink-lightest); max-inline-size: 100%; @@ -104,8 +114,6 @@ } .popup__list { - max-block-size: 40dvh; - overflow: auto; row-gap: 2px; } diff --git a/app/views/cards/index/_header.html.erb b/app/views/cards/index/_header.html.erb index 9d7d0a4de..73b61eed3 100644 --- a/app/views/cards/index/_header.html.erb +++ b/app/views/cards/index/_header.html.erb @@ -28,12 +28,26 @@ <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true, type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> <%= render "events/filter/header" %> - - <%= render "cards/index/collections_filter", filter: filter %> - -

+ <% if Current.user.collections.many? %> + Collections +

+ <%= render "cards/index/collections_filter", filter: filter %> + + <% end %> + + Tags +
+ <%= render partial: "events/filter/tag", collection: Tag.all.alphabetically, as: :tag %> +
+ + People +
+ <%= render partial: "events/filter/user", collection: User.active.alphabetically, as: :user %> +
+ + <% end %> diff --git a/app/views/cards/show/_collections.html.erb b/app/views/cards/show/_collections.html.erb index 581ed1c10..1c8f3aa2d 100644 --- a/app/views/cards/show/_collections.html.erb +++ b/app/views/cards/show/_collections.html.erb @@ -1,3 +1,4 @@ +Collections <%= form_with url: cards_path, method: :get, class: "flex flex-column max-width popup__list full-width", data: { controller: "form" } do |form| %> <% if Current.user.collections.one? %> diff --git a/app/views/cards/show/_header.html.erb b/app/views/cards/show/_header.html.erb index e3cfaec0a..b0765c7c8 100644 --- a/app/views/cards/show/_header.html.erb +++ b/app/views/cards/show/_header.html.erb @@ -24,12 +24,24 @@ <%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true, type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> <%= render "events/filter/header" %> - - <%= render "cards/show/collections" %> - -

+ <% if Current.user.collections.many? %> +

+ <%= render "cards/show/collections" %> + + <% end %> + Tags +
+ <%= render partial: "events/filter/tag", collection: Tag.all.alphabetically, as: :tag %> +
+ + People +
+ <%= render partial: "events/filter/user", collection: User.active.alphabetically, as: :user %> +
+ + <% end %> diff --git a/app/views/events/_filter.html.erb b/app/views/events/_filter.html.erb index 361b90c82..74785e63e 100644 --- a/app/views/events/_filter.html.erb +++ b/app/views/events/_filter.html.erb @@ -14,7 +14,6 @@ <% end %> <%= tag.dialog class: "fizzy-dialog filter events__popup popup popup--animated panel flex-column align-start fill-white", - style: "z-index: 5;", data: { action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset toggle->filter#filter", controller: "filter navigable-list", @@ -25,19 +24,31 @@ type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %> <%= render "events/filter/header" %> - <%= render "events/filter/custom_collections" %> + + Collections <%= form_with url: events_path, method: :get, class: "flex flex-column max-width popup__list full-width", data: { controller: "form" } do |form| %> <% if Current.user.collections.many? %> -
+ + <%= render "events/filter/custom_collections" %> <%= render "events/filter/all_collections_option", form: form, filter: filter %> <%= render partial: "events/filter/collection_option", collection: Current.user.collections.alphabetically, as: :collection, locals: { form: form, filter: filter } %> -
+ <% end %> <% end %> -

+ Tags +

+ <%= render partial: "events/filter/tag", collection: Tag.all.alphabetically, as: :tag %> +
+ + People +
+ <%= render partial: "events/filter/user", collection: User.active.alphabetically, as: :user %> +
+ + <% end %> diff --git a/app/views/events/filter/_tag.html.erb b/app/views/events/filter/_tag.html.erb new file mode 100644 index 000000000..894fbb2b7 --- /dev/null +++ b/app/views/events/filter/_tag.html.erb @@ -0,0 +1,7 @@ +
  • + <%= icon_tag "tag" %> + <%= link_to cards_path(tag_ids: [ tag ]), class: "btn popup__item min-width flex-item-grow" do %> + <%= tag.title %> + › + <% end %> +
    • \ No newline at end of file diff --git a/app/views/events/filter/_user.html.erb b/app/views/events/filter/_user.html.erb new file mode 100644 index 000000000..37ce11a7f --- /dev/null +++ b/app/views/events/filter/_user.html.erb @@ -0,0 +1,7 @@ +
  • + <%= icon_tag "person" %> + <%= link_to user, class: "btn popup__item min-width flex-item-grow" do %> + <%= user.name %> + › + <% end %> +
    • \ No newline at end of file