Fix markup in other filter locations

This commit is contained in:
Andy Smith
2025-08-05 10:29:43 -05:00
parent 7211d7f953
commit e616b68fbe
5 changed files with 52 additions and 47 deletions
+1
View File
@@ -8,6 +8,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%);
gap: 2px;
}
.input:is(.fizzy-menu) {
+16 -14
View File
@@ -1,5 +1,5 @@
<strong class="popup__group-title">Collections</strong>
<%= form_with url: cards_path, method: :get, class: "popup__list",
<li class="popup__group-title">Collections</li>
<%= form_with url: cards_path, method: :get, class: "display-contents",
data: { controller: "form" } do |form| %>
<% if Current.user.collections.one? %>
<%= link_to cards_path, class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
@@ -9,20 +9,22 @@
<% end %>
<% end %>
<% elsif Current.user.collections.many? %>
<%= link_to cards_path, class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
<label class="btn txt-xx-small flex-item-no-shrink">
<input type="checkbox">
<li>
<%= link_to cards_path, class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
<label class="btn txt-xx-small flex-item-no-shrink">
<input type="checkbox">
<span class="for-screen-reader">
See everything in all collections
</span>
<%= icon_tag "check", size: 18, class: "checked" %>
</label>
<%= tag.div class: "popup__item btn" do %>
<span class="overflow-ellipsis">All collections</span>
<span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> </span>
<span class="for-screen-reader">
See everything in all collections
</span>
<%= icon_tag "check", size: 18, class: "checked" %>
</label>
<%= tag.div class: "popup__item btn" do %>
<span class="overflow-ellipsis">All collections</span>
<span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> </span>
<% end %>
<% end %>
<% end %>
</li>
<% Current.user.collections.ordered_by_recently_accessed.each do |collection| %>
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
+7 -7
View File
@@ -36,15 +36,15 @@
<%= render "cards/show/collections" %>
</ul>
<% end %>
<strong class="popup__group-title">Tags</strong>
<div class="popup__list">
<ul class="popup__list">
<li class="popup__group-title">Tags</li>
<%= render partial: "events/filter/tag", collection: Tag.all.alphabetically, as: :tag %>
</div>
</ul>
<strong class="popup__group-title">People</strong>
<div class="popup__list">
<ul class="popup__list">
<li class="popup__group-title">People</li>
<%= render partial: "events/filter/user", collection: User.active.alphabetically, as: :user %>
</div>
</ul>
<% if platform.desktop? %>
<footer class="popup__footer">
@@ -54,4 +54,4 @@
<% end %>
</div>
</header>
</nav>
</nav>
+9 -9
View File
@@ -32,27 +32,27 @@
<%= render "events/filter/header" %>
<%= form_with url: events_path, method: :get, class: "popup__list",
<%= form_with url: events_path, method: :get, class: "display-contents",
data: { controller: "form" } do |form| %>
<% if Current.user.collections.many? %>
<%= render "events/filter/custom_collections" %>
<ul class="popup__list">
<%= render "events/filter/custom_collections" %>
<strong class="popup__group-title">Collections</strong>
<li class="popup__group-title">Collections</li>
<%= render "events/filter/all_collections_option", form: form, filter: filter %>
<%= render partial: "events/filter/collection_option", collection: Current.user.collections.ordered_by_recently_accessed, as: :collection, locals: { form: form, filter: filter } %>
</ul>
<% end %>
<% end %>
<strong class="popup__group-title">Tags</strong>
<div class="popup__list">
<ul class="popup__list">
<li class="popup__group-title">Tags</li>
<%= render partial: "events/filter/tag", collection: Tag.all.alphabetically, as: :tag %>
</div>
</ul>
<strong class="popup__group-title">People</strong>
<div class="popup__list">
<ul class="popup__list">
<li class="popup__group-title">People</li>
<%= render partial: "events/filter/user", collection: User.active.alphabetically, as: :user %>
</div>
</ul>
<% if platform.desktop? %>
<footer class="popup__footer">
@@ -1,22 +1,24 @@
<strong class="popup__group-title">Saved filters</strong>
<div class="popup__group gap-half overflow-ellipsis" data-navigable-list-target="item" data-filter-target="item">
<%= link_to cards_path(expand_all: true), class: "btn popup__new popup__item" do %>
<%= icon_tag "bookmark" %>
<div class="flex flex-column txt-tight-lines min-width txt-small">
<strong class="overflow-ellipsis">Create a new filter</strong>
</div>
<span class="translucent flex-item-no-shrink flex-item-justify-end"> </span>
<% end %>
</div>
<% @filters.each do |filter| %>
<div class="popup__group gap-half overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item">
<%= link_to cards_path(filter_id: filter.id), class: "btn popup__new popup__item" do %>
<ul class="popup__list">
<li class="popup__group-title">Saved filters</li>
<li class="popup__group gap-half overflow-ellipsis" data-navigable-list-target="item" data-filter-target="item">
<%= link_to cards_path(expand_all: true), class: "btn popup__new popup__item" do %>
<%= icon_tag "bookmark" %>
<div class="flex flex-column txt-tight-lines min-width txt-small">
<span class="overflow-ellipsis"><%= filter_selected_collections_sentence(filter).html_safe %></span>
<span class="overflow-ellipsis"><%= filter.summary %></span>
<strong class="overflow-ellipsis">Create a new filter</strong>
</div>
<span class="translucent flex-item-no-shrink flex-item-justify-end"> </span>
<% end %>
</div>
<% end %>
</li>
<% @filters.each do |filter| %>
<li class="popup__group gap-half overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item">
<%= link_to cards_path(filter_id: filter.id), class: "btn popup__new popup__item" do %>
<%= icon_tag "bookmark" %>
<div class="flex flex-column txt-tight-lines min-width txt-small">
<span class="overflow-ellipsis"><%= filter_selected_collections_sentence(filter).html_safe %></span>
<span class="overflow-ellipsis"><%= filter.summary %></span>
</div>
<span class="translucent flex-item-no-shrink flex-item-justify-end"> </span>
<% end %>
</li>
<% end %>
</ul>