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

Organize existing popup styles

Browse Source
This commit is contained in:
Andy Smith
2025-09-12 10:49:30 -05:00
parent 2a3cb28891
commit e864ec6d69
11 changed files with 50 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/popup.css
+31 -23
View File
@@ -41,17 +41,9 @@
}
}
.popup__footer {
background-color: var(--color-canvas);
border-block-start: 1px solid var(--color-ink-lighter);
font-size: var(--text-small);
inset: auto 0 0;
line-height: 1.6;
margin-block-start: var(--block-space-half);
padding: 1.5ch;
position: sticky;
text-align: center;
z-index: 1;
.popup__title {
font-weight: 800;
white-space: nowrap;
}
.popup__group {
@@ -87,6 +79,22 @@
}
}
.popup__group-title {
background: var(--color-canvas);
font-size: var(--text-small);
font-weight: bold;
list-style: none;
padding: var(--block-space-half) var(--inline-space-half);
position: sticky;
text-transform: uppercase;
top: calc(-1 * var(--block-space));
z-index: 1;
&::-webkit-details-marker {
display: none;
}
}
.popup__list {
display: flex;
flex-direction: column;
@@ -125,8 +133,7 @@
}
.icon {
block-size: 1em;
inline-size: 1em;
--icon-size: 1em;
}
&:has(input:checked) {
@@ -155,21 +162,22 @@
}
}
.popup__title {
font-weight: 800;
}
.popup__group-title {
background: var(--color-canvas);
.popup__footer {
background-color: var(--color-canvas);
border-block-start: 1px solid var(--color-ink-lighter);
font-size: var(--text-small);
font-weight: bold;
padding: var(--block-space-half) var(--inline-space-half);
inset: auto 0 0;
line-height: 1.6;
margin-block-start: var(--block-space-half);
padding: 1.5ch;
position: sticky;
text-transform: uppercase;
top: calc(-1 * var(--block-space));
text-align: center;
z-index: 1;
}
/* Variants
/* ------------------------------------------------------------------------ */
.popup--animated {
opacity: 0;
transform: scale(0.2) translateX(-50%);
app/views/cards/assignments/new.html.erb
+1 -1
View File
@@ -5,7 +5,7 @@
dialog_target: "dialog",
navigable_list_focus_on_selection_value: false,
navigable_list_actionable_items_value: true } do %>
<strong class="popup__title txt-nowrap">Assign this to…</strong>
<strong class="popup__title">Assign this to…</strong>
<% if @collection.users.active.count > 1 %>
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small margin-block-half", autofocus: true,
app/views/cards/display/perma/_collection.html.erb
+1 -1
View File
@@ -12,7 +12,7 @@
dialog_target: "dialog",
navigable_list_focus_on_selection_value: false,
navigable_list_actionable_items_value: true } do %>
<strong class="popup__title pad-inline-half txt-nowrap">Move this card to…</strong>
<strong class="popup__title pad-inline-half">Move this card to…</strong>
<% if Current.user.collections.count > 1 %>
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small margin-block-half font-weight-normal", autofocus: true,
app/views/cards/taggings/new.html.erb
+1 -1
View File
@@ -5,7 +5,7 @@
data-navigable-list-actionable-items-value="true"
data-action="keydown->navigable-list#navigate filter:changed->navigable-list#reset dialog:show@document->navigable-list#reset"
>
<strong class="popup__title txt-nowrap">Tag this…</strong>
<strong class="popup__title">Tag this…</strong>
<%= form_with url: card_taggings_path(@card), class: "flex flex-column gap-half full-width margin-block-half" do |form| %>
<%= form.text_field :tag_title, placeholder: @tags.any? ? "Add a new tag or filter…" : "Name this tag…", class: "input txt-small full-width",
app/views/filters/menu/_collections.html.erb
+10 -9
View File
@@ -1,11 +1,12 @@
<%= form_with url: user_filtering.self_filter_path, method: :get, class: "display-contents",
data: { controller: "form" } do |form| %>
<% if user_filtering.collections.any? %>
<% if user_filtering.collections.any? %>
<details open>
<summary class="popup__group-title">Collections</summary>
<ul class="popup__list">
<li class="popup__group-title">Collections</li>
<%= render "filters/menu/collections/all_option", form: form, user_filtering: user_filtering %>
<%= render partial: "filters/menu/collections/collection", collection: user_filtering.collections, as: :collection, locals: { form: form, user_filtering: user_filtering } %>
</ul>
<% end %>
<%= form_with url: user_filtering.self_filter_path, method: :get, class: "display-contents", data: { controller: "form" } do |form| %>
<ul class="popup__list">
<%= render "filters/menu/collections/all_option", form: form, user_filtering: user_filtering %>
<%= render partial: "filters/menu/collections/collection", collection: user_filtering.collections, as: :collection, locals: { form: form, user_filtering: user_filtering } %>
</ul>
<% end %>
</details>
<% end %>
app/views/filters/settings/_assignees.html.erb
+1 -1
View File
@@ -14,7 +14,7 @@
</button>
<%= filter_dialog "Assigned to…" do %>
<strong class="popup__title txt-nowrap">Assigned to…</strong>
<strong class="popup__title">Assigned to…</strong>
<% if User.active.many? %>
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
app/views/filters/settings/_closers.html.erb
+1 -1
View File
@@ -14,7 +14,7 @@
</button>
<%= filter_dialog "Closed by…" do %>
<strong class="popup__title txt-nowrap">Closed by…</strong>
<strong class="popup__title">Closed by…</strong>
<% if user_filtering.users.many? %>
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
app/views/filters/settings/_creators.html.erb
+1 -1
View File
@@ -14,7 +14,7 @@
</button>
<%= filter_dialog "Added by…" do %>
<strong class="popup__title txt-nowrap">Added by…</strong>
<strong class="popup__title">Added by…</strong>
<% if user_filtering.users.many? %>
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
app/views/filters/settings/_indexed_by.html.erb
+1 -1
View File
@@ -9,7 +9,7 @@
</button>
<%= filter_dialog "Filter by…" do %>
<strong class="popup__title txt-nowrap">Filter by…</strong>
<strong class="popup__title">Filter by…</strong>
<ul class="popup__list" data-filter-target="list">
<% Filter::INDEXES.each do |index| %>
app/views/filters/settings/_sorted_by.html.erb
+1 -1
View File
@@ -9,7 +9,7 @@
</button>
<%= filter_dialog "Sort by…" do %>
<strong class="popup__title txt-nowrap">Sort by…</strong>
<strong class="popup__title">Sort by…</strong>
<ul class="popup__list" data-filter-target="list">
<% Filter::SORTED_BY.each do |sort| %>
app/views/filters/settings/_tags.html.erb
+1 -1
View File
@@ -13,7 +13,7 @@
</button>
<%= filter_dialog "Tagged…" do %>
<strong class="popup__title txt-nowrap">Tagged…</strong>
<strong class="popup__title">Tagged…</strong>
<% if user_filtering.tags.many? %>
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,