diff --git a/app/assets/stylesheets/card-filters.css b/app/assets/stylesheets/card-filters.css index 9f3f0338c..f7ea3605c 100644 --- a/app/assets/stylesheets/card-filters.css +++ b/app/assets/stylesheets/card-filters.css @@ -1,14 +1,4 @@ @layer components { - .card-filter--collection { - > button { - --hover-size: 0; - --input-padding: 0.25em 1em 0.25em 0.8em; - - inline-size: auto; - background-position: center right 0.3em; - } - } - .card-filter--column { > button { --hover-size: 0; diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css index d2cc8db94..5a7539e00 100644 --- a/app/assets/stylesheets/events.css +++ b/app/assets/stylesheets/events.css @@ -114,14 +114,8 @@ text-align: center; } - .events__filter-btn { - font-weight: 500; - inline-size: auto; - margin: auto; - } - .events__popup { - margin-block-start: var(--block-space-double); + margin-block-start: var(--block-space-half); } /* Event diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/fizzy-menu.css new file mode 100644 index 000000000..77a5d95f3 --- /dev/null +++ b/app/assets/stylesheets/fizzy-menu.css @@ -0,0 +1,17 @@ +.fizzy-menu { + --input-border-color: var(--color-selected-dark); + --input-padding: 0.2em 2em 0.2em 0.9em; + + 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%); + margin-block-start: 0.1em; + + svg { + block-size: auto; + inline-size: 1.3em; + margin-block-end: 0.2em; + margin-inline-end: 0.8ch; + } +} \ No newline at end of file diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb index fbc5528f4..eba0049da 100644 --- a/app/views/cards/index.html.erb +++ b/app/views/cards/index.html.erb @@ -6,6 +6,13 @@ <%= render "cards/index/header", filter: @filter %> <% end %> +
+

+ <%= filter_title @filter %> +

+ <%= render "filters/settings", filter: @filter %> +
+
<%= render "cards/index/engagement/considering", **@considering.to_h %> <%= render "cards/index/engagement/doing", **@doing.to_h %> diff --git a/app/views/cards/index/_header.html.erb b/app/views/cards/index/_header.html.erb index 8120d3ea4..8b39f39a4 100644 --- a/app/views/cards/index/_header.html.erb +++ b/app/views/cards/index/_header.html.erb @@ -5,18 +5,20 @@
- <%= tag.button class: "txt-align-center input input--select borderless txt-medium", + <%= tag.button class: "fizzy-menu input input--select flex align-center txt-normal shadow", data: { action: "click->dialog#open:stop keydown.meta+j@document->hotkey#click keydown.ctrl+j@document->hotkey#click", controller: "hotkey" } do %> -

- <%= filter_title filter %> -

+ + + + + + + Fizzy <% end %> - <%= render "filters/settings", filter: filter %> - - <%= tag.dialog class:"popup popup--animated panel flex-column align-start gap-half fill-white shadow", + <%= tag.dialog class:"filter popup popup--animated panel flex-column align-start gap-half fill-white shadow", data: { action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset", controller: "filter navigable-list", diff --git a/app/views/events/_filter.html.erb b/app/views/events/_filter.html.erb index 7486754a4..4f1a6f06a 100644 --- a/app/views/events/_filter.html.erb +++ b/app/views/events/_filter.html.erb @@ -1,12 +1,16 @@ -
- <%= tag.button class:"events__filter-btn input input--select flex-inline center min-width max-width txt-small", + <%= tag.button class:"events__filter-btn fizzy-menu input input--select center flex-inline align-center txt-normal shadow", data: { action: "click->dialog#open:stop keydown.meta+j@document->hotkey#click keydown.ctrl+j@document->hotkey#click", controller: "hotkey" } do %> - - <%= filter_selected_collections_label(filter) %> - + + + + + + + Fizzy <% end %> <%= tag.dialog class: "filter events__popup popup popup--animated panel flex-column align-start gap-half fill-white shadow", diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb index 13b73ddda..5515b730d 100644 --- a/app/views/events/index.html.erb +++ b/app/views/events/index.html.erb @@ -4,23 +4,9 @@
<%= link_to account_settings_path, class: "btn flex-item-justify-end" do %> <%= icon_tag "settings" %> @@ -29,6 +15,26 @@ <% end %> +
+

+
+ <% if @filter.collections.any? %> + <%= filter_selected_collections_label(@filter) %> + <% else %> + <%= Account.sole.name %> / Latest activity + <% if @filter.creators.any? %> + by <%= @filter.creators.each_with_object([]) { |creator, names| names << creator.familiar_name }.to_sentence %> + <% end %> + <% end %> +
+ <% if @filter.creators.any? %> + <%= link_to events_path(@filter.as_params.except(:creator_ids)), class: "btn btn--remove txt-xx-small margin-inline-start" do %> + <%= icon_tag "close" %> + Clear all + <% end %> + <% end %> +

+
<%= render "events/day", day_timeline: @day_timeline %> <%= event_next_page_link(@day_timeline.next_day) %> diff --git a/app/views/filters/_settings.html.erb b/app/views/filters/_settings.html.erb index 9d2d9e392..ecc39e45d 100644 --- a/app/views/filters/_settings.html.erb +++ b/app/views/filters/_settings.html.erb @@ -1,4 +1,4 @@ -
+
<%= render "filters/tags", filter: filter %> <%= render "filters/assignees", filter: filter %>