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

Adjust position of settings buttons

Browse Source
This commit is contained in:
Jason Zimdars
2024-12-06 17:21:34 -06:00
parent 1292729226
commit f8f320d76c
3 changed files with 7 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/buckets.css
+2 -3
View File
@@ -19,10 +19,9 @@
padding: var(--gap);
}
.bucket__edit-btn {
.bucket__button {
position: absolute;
inset-block-end: 0;
inset-inline-end: 0;
inset: calc((var(--btn-size) * -1) - 2cqi) 1cqi auto auto;
}
.bucket__windshield {
app/views/buckets/_bucket.html.erb
+3 -3
View File
@@ -1,5 +1,5 @@
<% cache bucket do %>
<li class="bucket flex flex-column txt-align-center max-width position-relative">
<li class="bucket flex flex-column txt-align-center max-width">
<%= link_to bubbles_path(bucket_ids: [ bucket ]), class: "border border-radius margin-block-end-half windshield__container flex justify-center align-center position-relative" do %>
<div class="windshield bucket__windshield flex flex-wrap gap justify-center align-end" style="view-transition-name: windshield_<%= bucket.id %>">
<% bucket.bubbles.ordered_by_activity.limit(10).each do |bubble| %>
@@ -10,12 +10,12 @@
</div>
<% end %>
<div class="flex align-center justify-center flex-column flex-wrap center gap-half">
<div class="flex align-center justify-center flex-column flex-wrap center gap-half position-relative full-width">
<%= link_to bubbles_path(bucket_ids: [ bucket ]), class: "txt-ink flex flex-column" do %>
<strong class="txt-x-large"><%= bucket.name %></strong>
<% end %>
<%= link_to edit_bucket_path(bucket), class: "btn txt-small" do %>
<%= link_to edit_bucket_path(bucket), class: "btn txt-small bucket__button" do %>
<%= image_tag "settings.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Settings for <%= bucket.name %></span>
<% end %>
app/views/filters/_filter.html.erb
+2 -2
View File
@@ -10,11 +10,11 @@
</div>
<% end %>
<div class="flex align-center justify-center flex-column flex-wrap center gap-half">
<div class="flex align-center justify-center flex-column flex-wrap center gap-half position-relative full-width">
<%= link_to bubbles_path(**filter.to_params), class: "txt-ink" do %>
<strong class="txt-large"><%= image_tag "filter.svg", aria: { hidden: true }, size: 30, class: "flex-inline", style: "vertical-align: bottom" %> <%= filter.summary %></strong>
<% end %>
<%= button_to filter_path(filter), method: :delete, class: "btn txt-small btn--negative", data: { turbo_confirm: "Are you sure you want to delete this filter?" } do %>
<%= button_to filter_path(filter), method: :delete, class: "btn txt-small btn--negative bucket__button", data: { turbo_confirm: "Are you sure you want to delete this filter?" } do %>
<%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Delete</span>
<% end %>