De-emphasize new series form
Collapsed by default behind a <details> toggle at the top of the page.
Single-column layout with tight spacing keeps tasks as the focus.
Assisted-by: Claude Opus 4.6 via pi
diff --git a/lib/views/home.rb b/lib/views/home.rb
index 27622ef..43729a7 100644
--- a/lib/views/home.rb
+++ b/lib/views/home.rb
@@ -14,6 +14,46 @@ module Views
def view_template
render Layout.new(current_user: @current_user) do
div(class: "home") do
+ div(class: "panel") do
+ details(class: "new-series") do
+ summary { "New Series" }
+
+ form(method: "post", action: "/series") do
+ div(class: "field") do
+ label(for: "note") { "Note" }
+ textarea(id: "note", name: "note", rows: 3, required: true)
+ 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
+ option(value: "day") { "day(s)" }
+ option(value: "week") { "week(s)" }
+ option(value: "month") { "month(s)" }
+ option(value: "quarter") { "quarter(s)" }
+ option(value: "year") { "year(s)" }
+ 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") { "Create" }
+ end
+ end
+ end
+
div(class: "panel flow") do
h2 { "Tasks" }
@@ -29,44 +69,6 @@ module Views
end
end
end
-
- div(class: "panel flow") do
- h2 { "New Series" }
-
- form(method: "post", action: "/series") do
- div(class: "field") do
- label(for: "note") { "Note" }
- textarea(id: "note", name: "note", rows: 3, required: true)
- 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
- option(value: "day") { "day(s)" }
- option(value: "week") { "week(s)" }
- option(value: "month") { "month(s)" }
- option(value: "quarter") { "quarter(s)" }
- option(value: "year") { "year(s)" }
- 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") { "Create" }
- end
- end
end
end
end
diff --git a/public/css/app.css b/public/css/app.css
index 9c3ba22..b6b9963 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -63,21 +63,13 @@ h1 { font-size: var(--step-2); }
.home {
display: grid;
- grid-template-columns: 1fr;
- gap: var(--space-l);
+ gap: var(--space-s);
padding: var(--space-l) var(--grid-gutter);
- max-width: 60rem;
+ max-width: 36rem;
margin-inline: auto;
}
-@media (min-width: 48rem) {
- .home {
- grid-template-columns: 1fr 1fr;
- }
-}
-
.panel {
- padding: var(--space-m);
}
/* -------------------- */
@@ -129,6 +121,37 @@ h1 { font-size: var(--step-2); }
font-style: italic;
}
+/* -------------------- */
+/* New series (collapsible) */
+/* -------------------- */
+
+.new-series summary {
+ font-size: var(--step--1);
+ font-weight: 600;
+ color: #666;
+ cursor: pointer;
+ list-style: none;
+}
+
+.new-series summary::before {
+ content: "+ ";
+}
+
+.new-series[open] summary::before {
+ content: "− ";
+}
+
+.new-series[open] summary {
+ margin-block-end: var(--space-s);
+}
+
+.new-series form {
+ padding: var(--space-m);
+ border: 1px solid #e0e0e0;
+ border-radius: 6px;
+ background: #fff;
+}
+
/* -------------------- */
/* Forms */
/* -------------------- */