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

Tighten engagement switch design, only display it for published cards

Browse Source
This commit is contained in:
Jason Zimdars
2025-04-11 11:50:09 -05:00
parent f2811803d3
commit ee8559343a
3 changed files with 23 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/buttons.css
+6 -2
View File
@@ -201,15 +201,19 @@
}
:first-of-type .btn {
border-top-left-radius: 2em;
border-bottom-left-radius: 2em;
border-inline-end: 0;
border-top-left-radius: 2em;
flex: 1 0 50%;
padding-inline-end: 0.8em;
}
:last-of-type .btn {
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-inline-start: 0;
border-top-right-radius: 2em;
flex: 1 0 50%;
padding-inline-start: 0.8em;
}
span {
app/assets/stylesheets/cards.css
+2 -1
View File
@@ -153,7 +153,8 @@
&.card__actions-container--top {
margin: calc(var(--block-space) * 1) auto calc(var(--block-space) * -0.66);
min-inline-size: 30ch;
min-inline-size: 28ch;
padding: 0;
#header:has(&) {
position: relative;
app/views/cards/show.html.erb
+15 -13
View File
@@ -23,23 +23,25 @@
<%= link_to_home %>
<%= link_to_back fallback_path: cards_path(collection_id: @card.collection) %>
<div class="card__actions-container card__actions-container--top center border-radius" style="--card-color: <%= @card.color %>;">
<div class="btn__group flex full-width">
<%= form_with url: card_engagement_path(@card), method: :delete, data: { controller: "form" } do |form| %>
<%= form.label :engagement, value: "considering", class: "btn", aria: { label: "Move to Doing"} do %>
<%= form.radio_button :engagement, "considering", checked: @card.considering?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
<span>Considering</span>
<% if @card.published? %>
<div class="card__actions-container card__actions-container--top center border-radius" style="--card-color: <%= @card.color %>;">
<div class="btn__group flex full-width txt-uppercase">
<%= form_with url: card_engagement_path(@card), method: :delete, data: { controller: "form" } do |form| %>
<%= form.label :engagement, value: "considering", class: "btn", aria: { label: "Move to Doing"} do %>
<%= form.radio_button :engagement, "considering", checked: @card.considering?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
<span>Considering</span>
<% end %>
<% end %>
<% end %>
<%= form_with url: card_engagement_path(@card), method: :post, data: { controller: "form" } do |form| %>
<%= form.label :engagement, value: "doing", class: "btn", aria: { label: "Move back to Considering"} do %>
<%= form.radio_button :engagement, "doing", checked: @card.doing?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
<span>Doing</span>
<%= form_with url: card_engagement_path(@card), method: :post, data: { controller: "form" } do |form| %>
<%= form.label :engagement, value: "doing", class: "btn", aria: { label: "Move back to Considering"} do %>
<%= form.radio_button :engagement, "doing", checked: @card.doing?, class: "for-screen-reader", data: { action: "change->form#submit" } %>
<span>Doing</span>
<% end %>
<% end %>
<% end %>
</div>
</div>
</div>
<% end %>
<div class="btn btn--placeholder flex-item-justify-end"></div>
<div class="btn btn--placeholder"></div>