From b942794d15571e71aced9ae9b3a1f93e70e08926 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Tue, 3 Jun 2025 16:18:51 -0500 Subject: [PATCH 01/11] Remove unnecessary param and update condition This should have been removed in #581 when this was moved to a separate controller --- app/controllers/cards_controller.rb | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/app/controllers/cards_controller.rb b/app/controllers/cards_controller.rb index 8993fdb2c..d535f26d9 100644 --- a/app/controllers/cards_controller.rb +++ b/app/controllers/cards_controller.rb @@ -28,9 +28,7 @@ class CardsController < ApplicationController def update @card.update! card_params - if params[:card][:collection_id].present? - redirect_to collection_card_path(@card.collection, @card) - elsif @card.published? + if @card.published? render_card_replacement else redirect_to @card @@ -56,7 +54,7 @@ class CardsController < ApplicationController end def card_params - params.expect(card: [ :collection_id, :status, :title, :description, :image, tag_ids: [] ]) + params.expect(card: [ :status, :title, :description, :image, tag_ids: [] ]) end def render_card_replacement From 37dc14c0c6c683b5166643ed53068b0be3234562 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Tue, 3 Jun 2025 16:35:55 -0500 Subject: [PATCH 02/11] `x` interferes with string entry, try `SHIFT+ENTER` to toggle checkboxes --- app/javascript/controllers/navigable_list_controller.js | 9 +++++---- app/views/cards/index/_header.html.erb | 2 +- app/views/events/_filter.html.erb | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/app/javascript/controllers/navigable_list_controller.js b/app/javascript/controllers/navigable_list_controller.js index 49050e3ab..eb416c159 100644 --- a/app/javascript/controllers/navigable_list_controller.js +++ b/app/javascript/controllers/navigable_list_controller.js @@ -125,10 +125,11 @@ export default class extends Controller { this.#handleArrowKey(event, this.#selectPrevious.bind(this)) }, Enter(event) { - this.#clickCurrentItem(event) + if (event.shiftKey) { + this.#toggleCurrentItem(event) + } else { + this.#clickCurrentItem(event) + } }, - x(event) { - this.#toggleCurrentItem(event) - } } } diff --git a/app/views/cards/index/_header.html.erb b/app/views/cards/index/_header.html.erb index 7498d9095..8120d3ea4 100644 --- a/app/views/cards/index/_header.html.erb +++ b/app/views/cards/index/_header.html.erb @@ -31,7 +31,7 @@ <%= render "cards/index/collections_filter", filter: filter %>

- Press <%= hotkey_label(["ctrl", "J"]) -%> anytime to open this, esc to close, ↑↓ to move, enter to navigate, x to select. + Press <%= hotkey_label(["ctrl", "J"]) -%> anytime to open this, esc to close, ↑↓ to move, enter to navigate, SHIFT+ENTER to select.

<% end %> diff --git a/app/views/events/_filter.html.erb b/app/views/events/_filter.html.erb index 22add94b5..7486754a4 100644 --- a/app/views/events/_filter.html.erb +++ b/app/views/events/_filter.html.erb @@ -36,7 +36,7 @@ <% end %>

- Press <%= hotkey_label(["ctrl", "J"]) -%> anytime to open this, esc to close, ↑↓ to move, enter to navigate, x to select. + Press <%= hotkey_label(["ctrl", "J"]) -%> anytime to open this, esc to close, ↑↓ to move, enter to navigate, SHIFT+ENTER to select.

<% end %> From 029daece9bbaec4bb9cc3ba4684c9fe27691d940 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Tue, 3 Jun 2025 16:46:09 -0500 Subject: [PATCH 03/11] Save button should match card color --- app/views/cards/edit.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/cards/edit.html.erb b/app/views/cards/edit.html.erb index 6a8d37e13..d7cbe9e6c 100644 --- a/app/views/cards/edit.html.erb +++ b/app/views/cards/edit.html.erb @@ -12,7 +12,7 @@ placeholder: "Add some notes, context, pictures, or video about this…", data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } %> - <%= form.button "Save changes", type: :submit, class: "btn" %> + <%= form.button "Save changes", type: :submit, class: "btn btn--reversed", style: "--btn-background: #{@card.color}" %> <%= link_to "Close editor and discard changes", collection_card_path(@card.collection, @card), data: { form_target: "cancel" }, hidden: true %> <% end %> <% end %> From 7355b09382d3afc788659cd3f490f85b1e1335aa Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Tue, 3 Jun 2025 17:48:08 -0500 Subject: [PATCH 04/11] Expose button so you can delete drafts --- app/views/cards/_messages.html.erb | 32 ++++++++++++++++-------------- app/views/cards/show.html.erb | 2 +- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/app/views/cards/_messages.html.erb b/app/views/cards/_messages.html.erb index cbf7a40d0..042c25ed5 100644 --- a/app/views/cards/_messages.html.erb +++ b/app/views/cards/_messages.html.erb @@ -1,23 +1,25 @@ <%= messages_tag(card) do %> - <%= render partial: "cards/comments/comment", collection: card.comments.chronologically, cached: true %> - <%= render "cards/comments/new", card: card %> + <% if card.published? %> + <%= render partial: "cards/comments/comment", collection: card.comments.chronologically, cached: true %> + <%= render "cards/comments/new", card: card %> -
- Subscribers +
+ Subscribers -

- <%= pluralize(@card.watchers.without(User.system).count, "person") %> will be notified when someone comments on this. -

+

+ <%= pluralize(@card.watchers.without(User.system).count, "person") %> will be notified when someone comments on this. +

-
- <% prepend_current_user_to(@card.watchers.without(User.system).alphabetically).each do |watcher| %> - <%= avatar_tag watcher %> - <% end %> +
+ <% prepend_current_user_to(@card.watchers.without(User.system).alphabetically).each do |watcher| %> + <%= avatar_tag watcher %> + <% end %> +
+ <% end %> -
-
- <%= button_to_delete_card(@card) %> -
+
+
+ <%= button_to_delete_card(@card) %>
<% end %> diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb index 56ca920bb..ef0989929 100644 --- a/app/views/cards/show.html.erb +++ b/app/views/cards/show.html.erb @@ -32,7 +32,7 @@
<%= render "cards/container", card: @card %> - <% if @card.published? %> + <% if @card.published? || @card.drafted? %> <%= render "cards/messages", card: @card %> <% end %>
From 68ac1f80ec34fdd1f4cdd2e9648b0ab44958cacd Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 4 Jun 2025 12:10:28 -0500 Subject: [PATCH 05/11] Basic radio input working --- app/assets/stylesheets/knobs.css | 135 ++++++++++++++++++ app/javascript/controllers/knob_controller.js | 27 ++++ .../collections/edit/_auto_close.html.erb | 2 + app/views/collections/edit/_knob.html.erb | 30 ++++ 4 files changed, 194 insertions(+) create mode 100644 app/assets/stylesheets/knobs.css create mode 100644 app/javascript/controllers/knob_controller.js create mode 100644 app/views/collections/edit/_knob.html.erb diff --git a/app/assets/stylesheets/knobs.css b/app/assets/stylesheets/knobs.css new file mode 100644 index 000000000..77b800210 --- /dev/null +++ b/app/assets/stylesheets/knobs.css @@ -0,0 +1,135 @@ +.knob { + --knob-angle-reserve: 120deg; + --knob-angle: calc((360deg - var(--knob-angle-reserve)) / (var(--knob-options) - 1)); + --knob-button-size: 3ch; + --knob-chamfer-size: 1ch; + --knob-color: oklch(var(--lch-ink-light)); + --knob-color-accent: oklch(var(--lch-red-medium)); + --knob-tick-size: 1ch; + --knob-radius: calc(var(--knob-size) / 2); + --knob-size: 96px; + + aspect-ratio: 1; + block-size: calc(var(--knob-size) + var(--knob-button-size) * 2); + border: none; + display: grid; + font-weight: 500; + inline-size: fit-content; + place-content: center; + position: relative; +} + +.knob__slider { + appearance: none; + background-color: transparent; + block-size: var(--knob-size); + inline-size: var(--knob-size); + inset: 50% auto auto 50%; + position: absolute; + translate: -50% -50%; + z-index: 1; + + &::-webkit-slider-runnable-track { + block-size: var(--knob-size); + cursor: grab; + } + + &::-webkit-slider-thumb { + appearance: none; + background-color: transparent; + } +} + +.knob__option { + block-size: var(--knob-button-size); + border-radius: 50%; + cursor: pointer; + display: grid; + inline-size: var(--knob-button-size); + inset: 50% auto auto 50%; + place-content: center; + position: absolute; + transform: + translate(-50%, -50%) + rotate(calc(-1 * var(--knob-angle-reserve) + (var(--knob-angle) * var(--i)))) + translateY(calc(-1 * var(--knob-radius) - 50% - var(--knob-tick-size))); + z-index: 1; + + &:hover, + &:has(input:checked) { + color: var(--knob-color-accent); + } + + /* Tick marks */ + &:before { + background-color: var(--knob-color); + block-size: var(--knob-tick-size); + content: ""; + inline-size: 2px; + inset: 100% auto auto 50%; + position: absolute; + translate: -50% 0; + } + + /* The value text */ + span { + rotate: calc(var(--knob-angle-reserve) - (var(--knob-angle) * var(--i))); + } + + input { + opacity: 0; + position: absolute; + } +} + +.knob__knob { + background: linear-gradient(to top, var(--knob-color), color-mix(in oklch, var(--knob-color) 50%, var(--color-canvas) 50%)); + block-size: var(--knob-size); + border-radius: 50%; + box-shadow: + 0 0 2px 1px rgba(0,0,0,0.10), + 0 2px 4px rgba(0,0,0,0.15), + 0 2px 8px rgba(0,0,0,0.20); + inline-size: var(--knob-size); + position: relative; + + &:before, + &:after { + content: ""; + position: absolute; + } + + /* Indent */ + &:before { + background: linear-gradient(to bottom, var(--knob-color), color-mix(in oklch, var(--knob-color) 50%, var(--color-canvas) 50%)); + block-size: calc(var(--knob-size) - var(--knob-chamfer-size)); + border-radius: 50%; + box-shadow: + 0 -1px 0 rgba(255, 255, 255, 0.25), + inset 0 -1px 0 rgba(255, 255, 255, 0.25); + inline-size: calc(var(--knob-size) - var(--knob-chamfer-size)); + inset: 50% auto auto 50%; + translate: -50% -50%; + } + + /* Indicator */ + &:after { + background-color: var(--color-ink); + block-size: calc(var(--knob-radius) - var(--knob-chamfer-size) / 2); + border-radius: 50% 50% 2px 2px; + inline-size: 4px; + inset: auto auto 50% 50%; + rotate: calc(-1 * var(--knob-angle-reserve) + (var(--knob-angle) * var(--knob-index))); + transform-origin: center bottom; + transition: rotate 100ms; + translate: -50% 0; + } +} + +.knob__label { + font-weight: bold; + inset: 50% auto auto 50%; + position: absolute; + text-transform: uppercase; + transform: translate(-50%, calc(var(--knob-radius) + var(--knob-tick-size))); +} diff --git a/app/javascript/controllers/knob_controller.js b/app/javascript/controllers/knob_controller.js new file mode 100644 index 000000000..fe90fe84e --- /dev/null +++ b/app/javascript/controllers/knob_controller.js @@ -0,0 +1,27 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static targets = [ "wrapper" ] + + optionChanged(e) { + const input = e.target + const value = input.value + const index = (input.getAttribute("data-index")) + this.wrapperTarget.style.setProperty("--knob-index", `${index}`); + } + + sliderChanged(e) { + const sliderIndex = e.target.value + } +} + + +// The slider has a range of 0-4. We can't add day values statically. +// These 0-4 values are used to set the angle via css. +// but, that if the range was simply used to set the value of the radio input. +// OK, what if we get the knob and radio inputs working as expected, then… +// When radio input changes, update the slider +// when the slider changes, update the radio input + +// knob need an index, options have the index. +// when option is changed, set i on main component diff --git a/app/views/collections/edit/_auto_close.html.erb b/app/views/collections/edit/_auto_close.html.erb index e0a05df2b..efbcb3218 100644 --- a/app/views/collections/edit/_auto_close.html.erb +++ b/app/views/collections/edit/_auto_close.html.erb @@ -4,3 +4,5 @@ <%= 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 %> + +<%= render "collections/edit/knob", day_options: [3, 7, 30, 90, 365], default_index: 0, label: "Days until auto-close" %> diff --git a/app/views/collections/edit/_knob.html.erb b/app/views/collections/edit/_knob.html.erb new file mode 100644 index 000000000..b036a02f0 --- /dev/null +++ b/app/views/collections/edit/_knob.html.erb @@ -0,0 +1,30 @@ +
+
+ <% day_options.each_with_index do |value, i| %> + + <% end %> +
+ + <%= label %> + +
+
+ + +<%# + +OK, the indicator needs to know what index position to point to +We have --knob-index on the wrapper, set to the default. +As the input changes, update that index. + +%> From 80b1ac8cc9ce1a1bb2ae08a4b88d17f4cf851afd Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 4 Jun 2025 12:49:32 -0500 Subject: [PATCH 06/11] Connect the range slider --- app/assets/stylesheets/knobs.css | 8 +++++ app/javascript/controllers/knob_controller.js | 36 ++++++++++--------- .../collections/edit/_auto_close.html.erb | 2 +- app/views/collections/edit/_knob.html.erb | 27 +++++++------- 4 files changed, 43 insertions(+), 30 deletions(-) diff --git a/app/assets/stylesheets/knobs.css b/app/assets/stylesheets/knobs.css index 77b800210..c9a580244 100644 --- a/app/assets/stylesheets/knobs.css +++ b/app/assets/stylesheets/knobs.css @@ -20,6 +20,8 @@ } .knob__slider { + --hover-size: 0; + appearance: none; background-color: transparent; block-size: var(--knob-size); @@ -37,6 +39,8 @@ &::-webkit-slider-thumb { appearance: none; background-color: transparent; + height: 1px; + width: 1px; } } @@ -60,6 +64,10 @@ color: var(--knob-color-accent); } + &:has(:focus-visible) { + box-shadow: 0 0 0 2px var(--knob-color); + } + /* Tick marks */ &:before { background-color: var(--knob-color); diff --git a/app/javascript/controllers/knob_controller.js b/app/javascript/controllers/knob_controller.js index fe90fe84e..a48251a6a 100644 --- a/app/javascript/controllers/knob_controller.js +++ b/app/javascript/controllers/knob_controller.js @@ -1,27 +1,29 @@ import { Controller } from "@hotwired/stimulus" export default class extends Controller { - static targets = [ "wrapper" ] + static targets = [ "field", "option", "slider" ] optionChanged(e) { - const input = e.target - const value = input.value - const index = (input.getAttribute("data-index")) - this.wrapperTarget.style.setProperty("--knob-index", `${index}`); + this.#setIndex(e.target.getAttribute("data-index")) } sliderChanged(e) { - const sliderIndex = e.target.value + const index = e.target.value + this.#setIndex(index) + this.#setValue(index) + console.log(index) + } + + #setIndex(index) { + this.fieldTarget.style.setProperty("--knob-index", `${index}`); + this.sliderTarget.value = index; + } + + #setValue(index) { + const option = this.optionTargets.find(option => { + return option.dataset.index === index; + }); + + option.checked = true; } } - - -// The slider has a range of 0-4. We can't add day values statically. -// These 0-4 values are used to set the angle via css. -// but, that if the range was simply used to set the value of the radio input. -// OK, what if we get the knob and radio inputs working as expected, then… -// When radio input changes, update the slider -// when the slider changes, update the radio input - -// knob need an index, options have the index. -// when option is changed, set i on main component diff --git a/app/views/collections/edit/_auto_close.html.erb b/app/views/collections/edit/_auto_close.html.erb index efbcb3218..cb2060510 100644 --- a/app/views/collections/edit/_auto_close.html.erb +++ b/app/views/collections/edit/_auto_close.html.erb @@ -5,4 +5,4 @@ <%= form.select :auto_close_period, collection_auto_close_options, {}, { class: "input input--select full-width margin-block-end", data: { action: "change->form#submit" } } %> <% end %> -<%= render "collections/edit/knob", day_options: [3, 7, 30, 90, 365], default_index: 0, label: "Days until auto-close" %> +<%= render "collections/edit/knob", knob_options: [3, 7, 30, 90, 365], default_index: 0, label: "Days until auto-close" %> diff --git a/app/views/collections/edit/_knob.html.erb b/app/views/collections/edit/_knob.html.erb index b036a02f0..2569a4287 100644 --- a/app/views/collections/edit/_knob.html.erb +++ b/app/views/collections/edit/_knob.html.erb @@ -1,11 +1,12 @@ -
+
- <% day_options.each_with_index do |value, i| %> + <% knob_options.each_with_index do |value, i| %>
- - -<%# - -OK, the indicator needs to know what index position to point to -We have --knob-index on the wrapper, set to the default. -As the input changes, update that index. - -%> From 04551d859e1e91612216398ae2469bc7821e3909 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 4 Jun 2025 13:06:43 -0500 Subject: [PATCH 07/11] Better a11y --- app/assets/stylesheets/knobs.css | 21 +++++------- .../collections/edit/_auto_close.html.erb | 2 +- app/views/collections/edit/_knob.html.erb | 34 ++++++++++--------- 3 files changed, 28 insertions(+), 29 deletions(-) diff --git a/app/assets/stylesheets/knobs.css b/app/assets/stylesheets/knobs.css index c9a580244..345ce266f 100644 --- a/app/assets/stylesheets/knobs.css +++ b/app/assets/stylesheets/knobs.css @@ -1,22 +1,20 @@ .knob { --knob-angle-reserve: 120deg; --knob-angle: calc((360deg - var(--knob-angle-reserve)) / (var(--knob-options) - 1)); - --knob-button-size: 3ch; + --knob-option-size: 3ch; --knob-chamfer-size: 1ch; --knob-color: oklch(var(--lch-ink-light)); - --knob-color-accent: oklch(var(--lch-red-medium)); + --knob-color-accent: oklch(var(--lch-blue-medium)); --knob-tick-size: 1ch; --knob-radius: calc(var(--knob-size) / 2); --knob-size: 96px; - aspect-ratio: 1; - block-size: calc(var(--knob-size) + var(--knob-button-size) * 2); border: none; - display: grid; + display: block; font-weight: 500; - inline-size: fit-content; - place-content: center; + padding: var(--knob-option-size) 0 0; position: relative; + text-align: center; } .knob__slider { @@ -45,11 +43,11 @@ } .knob__option { - block-size: var(--knob-button-size); + block-size: var(--knob-option-size); border-radius: 50%; cursor: pointer; display: grid; - inline-size: var(--knob-button-size); + inline-size: var(--knob-option-size); inset: 50% auto auto 50%; place-content: center; position: absolute; @@ -99,6 +97,7 @@ 0 2px 4px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.20); inline-size: var(--knob-size); + margin-inline: auto; position: relative; &:before, @@ -136,8 +135,6 @@ .knob__label { font-weight: bold; - inset: 50% auto auto 50%; - position: absolute; + margin-block-start: 1ch; text-transform: uppercase; - transform: translate(-50%, calc(var(--knob-radius) + var(--knob-tick-size))); } diff --git a/app/views/collections/edit/_auto_close.html.erb b/app/views/collections/edit/_auto_close.html.erb index cb2060510..c45d263e4 100644 --- a/app/views/collections/edit/_auto_close.html.erb +++ b/app/views/collections/edit/_auto_close.html.erb @@ -5,4 +5,4 @@ <%= form.select :auto_close_period, collection_auto_close_options, {}, { class: "input input--select full-width margin-block-end", data: { action: "change->form#submit" } } %> <% end %> -<%= render "collections/edit/knob", knob_options: [3, 7, 30, 90, 365], default_index: 0, label: "Days until auto-close" %> +<%= render "collections/edit/knob", knob_options: [3, 7, 30, 90, 365], default_index: 2, label: "Days until auto-close" %> diff --git a/app/views/collections/edit/_knob.html.erb b/app/views/collections/edit/_knob.html.erb index 2569a4287..24ca1c129 100644 --- a/app/views/collections/edit/_knob.html.erb +++ b/app/views/collections/edit/_knob.html.erb @@ -1,5 +1,8 @@ +<% name = label.dasherize %> +
-
+ +
<% knob_options.each_with_index do |value, i| %> <% end %> + + +
- <%= label %> - - - -
+
Days
From e513474e36290feb226c2f0c56832d0177a0669c Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 4 Jun 2025 13:38:50 -0500 Subject: [PATCH 08/11] Correct the reserved area math --- app/assets/stylesheets/knobs.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/knobs.css b/app/assets/stylesheets/knobs.css index 345ce266f..bb1403fd7 100644 --- a/app/assets/stylesheets/knobs.css +++ b/app/assets/stylesheets/knobs.css @@ -1,6 +1,6 @@ .knob { --knob-angle-reserve: 120deg; - --knob-angle: calc((360deg - var(--knob-angle-reserve)) / (var(--knob-options) - 1)); + --knob-option-angle: calc((360deg - var(--knob-angle-reserve)) / (var(--knob-options) - 1)); --knob-option-size: 3ch; --knob-chamfer-size: 1ch; --knob-color: oklch(var(--lch-ink-light)); @@ -53,7 +53,7 @@ position: absolute; transform: translate(-50%, -50%) - rotate(calc(-1 * var(--knob-angle-reserve) + (var(--knob-angle) * var(--i)))) + rotate(calc(-1 * ((360deg - var(--knob-angle-reserve)) / 2) + (var(--knob-option-angle) * var(--i)))) translateY(calc(-1 * var(--knob-radius) - 50% - var(--knob-tick-size))); z-index: 1; @@ -79,7 +79,7 @@ /* The value text */ span { - rotate: calc(var(--knob-angle-reserve) - (var(--knob-angle) * var(--i))); + rotate: calc(((360deg - var(--knob-angle-reserve)) / 2) - (var(--knob-option-angle) * var(--i))); } input { @@ -126,7 +126,7 @@ border-radius: 50% 50% 2px 2px; inline-size: 4px; inset: auto auto 50% 50%; - rotate: calc(-1 * var(--knob-angle-reserve) + (var(--knob-angle) * var(--knob-index))); + rotate: calc(-1 * ((360deg - var(--knob-angle-reserve)) / 2) + (var(--knob-option-angle) * var(--knob-index))); transform-origin: center bottom; transition: rotate 100ms; translate: -50% 0; From 5baebefb6b50f2e3f3923e565bc1cb6caae1ff32 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 4 Jun 2025 13:48:07 -0500 Subject: [PATCH 09/11] Remove leftover console.log --- app/javascript/controllers/knob_controller.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/javascript/controllers/knob_controller.js b/app/javascript/controllers/knob_controller.js index a48251a6a..f8413cb76 100644 --- a/app/javascript/controllers/knob_controller.js +++ b/app/javascript/controllers/knob_controller.js @@ -11,7 +11,6 @@ export default class extends Controller { const index = e.target.value this.#setIndex(index) this.#setValue(index) - console.log(index) } #setIndex(index) { From b4e283ab6a707e6b218b3572185d9f3467a63321 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 4 Jun 2025 13:49:18 -0500 Subject: [PATCH 10/11] Properly parameterize the field name --- app/views/collections/edit/_knob.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/collections/edit/_knob.html.erb b/app/views/collections/edit/_knob.html.erb index 24ca1c129..5dda6727e 100644 --- a/app/views/collections/edit/_knob.html.erb +++ b/app/views/collections/edit/_knob.html.erb @@ -1,4 +1,4 @@ -<% name = label.dasherize %> +<% name = label.parameterize %>
From 989825dcda0af03291b7716697966087b1fa6c02 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 4 Jun 2025 13:50:27 -0500 Subject: [PATCH 11/11] Add comment --- app/assets/stylesheets/knobs.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/knobs.css b/app/assets/stylesheets/knobs.css index bb1403fd7..585dcaf3b 100644 --- a/app/assets/stylesheets/knobs.css +++ b/app/assets/stylesheets/knobs.css @@ -1,5 +1,5 @@ .knob { - --knob-angle-reserve: 120deg; + --knob-angle-reserve: 120deg; /* The angle to reserve at the bottom for the label */ --knob-option-angle: calc((360deg - var(--knob-angle-reserve)) / (var(--knob-options) - 1)); --knob-option-size: 3ch; --knob-chamfer-size: 1ch;