bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First stab at filter button + popup component

Browse Source
This commit is contained in:
Jason Zimdars
2024-10-02 17:24:20 -05:00
parent 4d26a8c765
commit eabba22607
4 changed files with 129 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/filters.css
+41
View File
@@ -0,0 +1,41 @@
.filter {
display: inline-flex;
position: relative;
#header:has(&) {
position: relative;
z-index: 1;
}
}
.filter__button {
--hover-size: 0;
color: var(--color-link);
text-decoration: underline;
text-decoration-skip-ink: auto;
}
.filter__menu {
li {
display: flex;
margin: 0;
padding: 0;
}
}
.filter__popup {
--panel-padding: 1em;
--panel-size: 20ch;
inset: calc(var(--btn-size) * 0.6) 0 auto 50%;
max-inline-size: 60ch !important;
position: absolute;
transform: translateX(-50%);
transform-origin: top left;
z-index: 1;
&[open] {
display: inline-flex;
}
}
app/assets/stylesheets/inputs.css
+6
View File
@@ -71,6 +71,12 @@
}
}
.input--select {
--input-padding: 0.5em 0em 0.5em 0.7em;
text-align: start;
}
.input--textara {
--input-padding: 0;
app/assets/stylesheets/panels.css
+1 -1
View File
@@ -5,7 +5,7 @@
border-radius: var(--panel-border-radius, 1em);
inline-size: var(--panel-size, 60ch);
max-inline-size: 100%;
padding: calc(var(--block-space) * 2);
padding: var(--panel-padding, calc(var(--block-space) * 2));
@media (prefers-color-scheme: dark) {
--panel-border-color: var(--color-subtle-dark);
app/views/bubbles/index.html.erb
+81 -9
View File
@@ -7,18 +7,90 @@
<span class="for-screen-reader">Buckets</span>
<% end %>
<h1 class="txt-xx-large margin-none flex align-center gap-half">
Bubbled up in <%= @bucket.name %>
<header class="txt-align-center">
<h1 class="txt-large">
<div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close">
<button class="btn btn--plain filter__button"
data-action="click->dialog#toggle"
data-dialog-modal-value="true">Most active</button>
<dialog class="filter__popup panel fill-white shadow" data-dialog-target="dialog">
<menu class="filter__menu flex flex-column gap-half unpad margin-none txt-medium">
<li><button class="btn btn--plain filter__button">Most active</button></li>
<li><button class="btn btn--plain filter__button">Most discussed</button></li>
<li><button class="btn btn--plain filter__button">Most boosted</button></li>
<li><button class="btn btn--plain filter__button">Newest</button></li>
<li><button class="btn btn--plain filter__button">Oldest</button></li>
<li><button class="btn btn--plain filter__button">Popped</button></li>
</menu>
</dialog>
</div>
in
<div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close">
<button class="btn btn--plain filter__button"
data-action="click->dialog#toggle"
data-dialog-modal-value="true"><%= @bucket.name %></button>
<dialog class="filter__popup panel fill-white shadow" data-dialog-target="dialog">
<menu class="filter__menu flex flex-column gap-half unpad margin-none txt-medium">
<% Bucket.all.each do |bucket| %>
<li><button class="btn btn--plain filter__button"><%= bucket.name %></button></li>
<% end %>
</menu>
</dialog>
</div>
</h1>
<% if @tag %>
tagged <%= @tag.title %>
<h2 class="txt-medium txt-normal margin-none flex align-center gap-half">
<% if @tag %>
Tagged
<%= link_to bucket_bubbles_path(@bucket), class: "btn txt-small" do %>
<%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Clear</span>
<div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close">
<button class="btn btn--plain filter__button"
data-action="click->dialog#toggle"
data-dialog-modal-value="true"><%= @tag.title %></button>
<dialog class="filter__popup panel fill-white shadow" data-dialog-target="dialog">
<menu class="filter__menu flex flex-column gap-half unpad margin-none txt-medium">
<% Tag.all.each do |tag| %>
<li><button class="btn btn--plain filter__button"><%= tag.title %></button></li>
<% end %>
</menu>
</dialog>
</div>
<%= link_to bucket_bubbles_path(@bucket), class: "btn", style: "font-size: 0.4em;" do %>
<%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Clear</span>
<% end %>
<% else %>
with
<div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close">
<button class="btn btn--plain filter__button"
data-action="click->dialog#toggle"
data-dialog-modal-value="true">any tag</button>
<dialog class="filter__popup panel fill-white shadow" data-dialog-target="dialog">
<menu class="filter__menu flex flex-column gap-half unpad margin-none txt-medium">
<% Tag.all.each do |tag| %>
<li><button class="btn btn--plain filter__button"><%= tag.title %></button></li>
<% end %>
</menu>
</dialog>
</div>
<% end %>
<% end %>
</h1>
and
<div class="filter" data-controller="dialog" data-action="keydown.esc->dialog#close">
<button class="btn btn--plain filter__button"
data-action="click->dialog#toggle"
data-dialog-modal-value="true">assigned to anyone</button>
<dialog class="filter__popup panel fill-white shadow" data-dialog-target="dialog">
<menu class="filter__menu flex flex-column gap-half unpad margin-none txt-medium">
<% User.all.each do |user| %>
<li><button class="btn btn--plain filter__button"><%= user.name %></button></li>
<% end %>
</menu>
</dialog>
</div>
</h2>
</header>
<%= button_to bucket_bubbles_path(@bucket), method: :post, params: { bubble: { title: "Untitled"} }, class: "btn btn--plain", form_class: "flex-item-justify-end" do %>
<%= image_tag "bubble-add.svg", aria: { hidden: true }, size: 24 %>