Restyle new series page to match dashboard layout
Use dashboard/main-column/section structure with consistent
section header. Scope series-note bottom margin to panel only
so the form fields sit tighter.
Assisted-by: Claude Opus 4.6 via Claude Code
diff --git a/lib/ketchup/views/series/new.rb b/lib/ketchup/views/series/new.rb
index 459817f..6abc3a4 100644
--- a/lib/ketchup/views/series/new.rb
+++ b/lib/ketchup/views/series/new.rb
@@ -14,38 +14,46 @@ module Views
def view_template
render Layout.new(current_user: @current_user, title: "New Series — Ketchup", active_view: :new) do
- div(class: "wrapper flow") do
- h1 { "New Series" }
-
- form(method: "post", action: "/series") do
- input(type: "hidden", name: "_csrf", value: @csrf.call("/series"))
- div(class: "field") do
- label(for: "series-note-editor") { "Note" }
- div(id: "series-note-editor", class: "series-note series-note--editable")
- end
-
- div(class: "field") do
- label(for: "interval_count") { "Repeat every" }
- div(class: "interval") do
- input(
- type: "number", id: "interval_count", name: "interval_count",
- min: 1, value: 1, required: true
- )
- select(id: "interval_unit", name: "interval_unit", required: true) do
- Views::INTERVAL_OPTIONS.each { |val, label| option(value: val) { label } }
+ div(class: "dashboard") do
+ div(class: "main-column") do
+ section(class: "section") do
+ div(class: "section-header") do
+ h2(class: "section-title") do
+ span(class: "section-title-text") { "New series" }
end
end
- end
- div(class: "field") do
- label(for: "first_due_date") { "First due date" }
- input(
- type: "date", id: "first_due_date", name: "first_due_date",
- value: Date.today.to_s, required: true
- )
- end
+ form(method: "post", action: "/series", class: "new-series-form") do
+ input(type: "hidden", name: "_csrf", value: @csrf.call("/series"))
+ div(class: "field") do
+ label(for: "series-note-editor") { "Note" }
+ div(id: "series-note-editor", class: "series-note series-note--editable")
+ end
- button(type: "submit", id: "create-series-btn", disabled: true) { "Create" }
+ div(class: "field") do
+ label(for: "interval_count") { "Repeat every" }
+ div(class: "interval") do
+ input(
+ type: "number", id: "interval_count", name: "interval_count",
+ min: 1, value: 1, required: true
+ )
+ select(id: "interval_unit", name: "interval_unit", required: true) do
+ Views::INTERVAL_OPTIONS.each { |val, label| option(value: val) { label } }
+ end
+ end
+ end
+
+ div(class: "field") do
+ label(for: "first_due_date") { "First due date" }
+ input(
+ type: "date", id: "first_due_date", name: "first_due_date",
+ value: Date.today.to_s, required: true
+ )
+ end
+
+ button(type: "submit", id: "create-series-btn", disabled: true) { "Create" }
+ end
+ end
end
end
end
diff --git a/public/css/app.css b/public/css/app.css
index e9b3564..eb95c95 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -433,12 +433,15 @@ h2 { font-size: var(--step-0); font-weight: 600; }
.series-note {
color: #444;
- margin-block-end: var(--space-m);
line-height: 1.4;
border: 1px solid transparent;
border-radius: 4px;
}
+.panel .series-note {
+ margin-block-end: var(--space-m);
+}
+
.series-note--editable {
border-color: #ddd;
}