Stub UI for independent settings for Considering and Doing

This commit is contained in:
Jason Zimdars
2025-06-03 15:51:37 -05:00
parent ff403021cc
commit 678fb66f17
2 changed files with 40 additions and 6 deletions
+19
View File
@@ -0,0 +1,19 @@
@layer components {
.divider {
--divider-padding: var(--inline-space);
--divider-color: var(--color-ink-medium);
align-items: center;
display: flex;
margin-inline: calc(var(--divider-padding) * -1);
&:before,
&:after {
background: var(--divider-color);
block-size: var(--divider-size, 1px);
content: "";
flex: 1;
margin: 0 var(--divider-padding);
}
}
}
@@ -1,6 +1,21 @@
<strong class="txt-large">Do or Die</strong>
<label for="closure" class="margin-block-end">Cards automatically close when there is no activity for…</label>
<%= form_with model: collection, data: { controller: "form" } do |form| %>
<%= form.select :auto_close_period, collection_auto_close_options, {}, { class: "input input--select full-width margin-block-end", data: { action: "change->form#submit" } } %>
<% end %>
<div class="margin-block-end">
<strong class="divider txt-large">Do or Die</strong>
<div class="flex align-start gap">
<div class="flex flex-column full-width" style="flex-basis: 48%">
<strong>Cards in Considering</strong>
<p class="txt-x-small margin-none">Auto-close after…</p>
<%= form_with model: collection, data: { controller: "form" } do |form| %>
<%= form.select :auto_close_period, collection_auto_close_options, {}, { class: "input input--select full-width margin-block-half txt-small fill-white txt-align-center", data: { action: "change->form#submit" } } %>
<% end %>
</div>
<div class="separator margin-block-half" style="--border-color: var(--color-ink-medium); min-block-size: 4lh;"></div>
<div class="flex flex-column full-width" style="flex-basis: 48%">
<strong>Cards inDoing</strong>
<p class="txt-x-small margin-none">Fall back to Considering after…</p>
<%= form_with model: collection, data: { controller: "form" } do |form| %>
<%= form.select :auto_close_period, collection_auto_close_options, {}, { class: "input input--select full-width margin-block-half txt-small fill-white txt-align-center", data: { action: "change->form#submit" } } %>
<% end %>
</div>
</div>
</div>