Skip to content

Commit d47cf0c

Browse files
bradgesslerbradgessler
committed
Cleanup preview server
1 parent f9d5601 commit d47cf0c

5 files changed

Lines changed: 312 additions & 17 deletions

File tree

‎server/components/breadcrumb.rb‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# frozen_string_literal: true
2+
3+
class Breadcrumb < Phlex::HTML
4+
def view_template(&)
5+
nav(class: "breadcrumb") { yield self }
6+
end
7+
8+
def crumb(&)
9+
span(class: "crumb") { yield }
10+
end
11+
end

‎server/components/layout.rb‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# frozen_string_literal: true
22

33
class Layout < Phlex::HTML
4-
def initialize(title: "Superform Examples")
4+
def initialize(title: "Superform")
55
@title = title
66
end
77

@@ -10,15 +10,13 @@ def view_template(&)
1010
html do
1111
head do
1212
title { @title }
13-
link rel: "stylesheet", href: "/pico.min.css"
13+
link rel: "stylesheet", href: "/styles.css"
1414
end
1515
body do
16-
main class: "container" do
17-
header do
18-
h1 { a(href: "/") { "Superform Examples" } }
19-
end
20-
yield
16+
header do
17+
h1 { a(href: "/") { "Superform" } }
2118
end
19+
yield
2220
end
2321
end
2422
end

‎server/controllers/forms_controller.rb‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ class FormsController < ActionController::Base
55
class IndexPage < Phlex::HTML
66
def view_template
77
render Layout.new do
8+
render Breadcrumb.new do |b|
9+
b.crumb { "Examples" }
10+
end
11+
812
form_classes.each_with_index do |form_class, index|
913
render FormCard.new(form_class: form_class, index: index)
1014
end
@@ -19,10 +23,12 @@ def initialize(form_class:, action:)
1923
end
2024

2125
def view_template
22-
render Layout.new(title: "#{@form_class.name_text} - Superform Examples") do
23-
p { a(href: "/") { "Back to all forms" } }
26+
render Layout.new(title: "#{@form_class.name_text} - Superform") do
27+
render Breadcrumb.new do |b|
28+
b.crumb { a(href: "/") { "Examples" } }
29+
b.crumb { @form_class.name_text }
30+
end
2431

25-
h2 { @form_class.name_text }
2632
p { @form_class.description.html_safe }
2733
render @form
2834

@@ -56,9 +62,11 @@ def initialize(form_class:, params:, form_path:)
5662

5763
def view_template
5864
render Layout.new(title: "#{@form_class.name_text} - Submitted") do
59-
p { a(href: @form_path) { "Back to form" } }
60-
61-
h2 { "#{@form_class.name_text} - Submitted" }
65+
render Breadcrumb.new do |b|
66+
b.crumb { a(href: "/") { "Examples" } }
67+
b.crumb { a(href: @form_path) { @form_class.name_text } }
68+
b.crumb { "Submitted" }
69+
end
6270

6371
h3 { "Params" }
6472
pre do

‎server/public/pico.min.css‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎server/public/styles.css‎

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
/* Superform Examples */
2+
3+
:root {
4+
--bg: #ffffff;
5+
--bg-secondary: #f5f5f7;
6+
--fg: #1d1d1f;
7+
--fg-secondary: #6e6e73;
8+
--border: #c7c7cc;
9+
--accent: #007aff;
10+
--radius: 8px;
11+
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
12+
--font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace;
13+
}
14+
15+
@media (prefers-color-scheme: dark) {
16+
:root {
17+
--bg: #000000;
18+
--bg-secondary: #1c1c1e;
19+
--fg: #f5f5f7;
20+
--fg-secondary: #86868b;
21+
--border: #38383a;
22+
--accent: #0a84ff;
23+
}
24+
}
25+
26+
* {
27+
box-sizing: border-box;
28+
}
29+
30+
html {
31+
font-family: var(--font);
32+
font-size: 17px;
33+
line-height: 1.47059;
34+
-webkit-font-smoothing: antialiased;
35+
}
36+
37+
body {
38+
margin: 0;
39+
padding: 48px 24px;
40+
background: var(--bg);
41+
color: var(--fg);
42+
max-width: 600px;
43+
margin-inline: auto;
44+
}
45+
46+
h1, h2, h3 {
47+
font-weight: 600;
48+
letter-spacing: -0.015em;
49+
margin: 0 0 8px;
50+
}
51+
52+
h1 { font-size: 21px; }
53+
h2 { font-size: 19px; }
54+
h3 { font-size: 14px; color: var(--fg-secondary); font-weight: 500; letter-spacing: 0; }
55+
56+
p {
57+
margin: 0 0 16px;
58+
color: var(--fg-secondary);
59+
font-size: 15px;
60+
}
61+
62+
a {
63+
color: var(--accent);
64+
text-decoration: none;
65+
}
66+
67+
a:hover {
68+
text-decoration: underline;
69+
}
70+
71+
hr {
72+
border: none;
73+
border-top: 1px solid var(--border);
74+
margin: 32px 0;
75+
}
76+
77+
pre, code {
78+
font-family: var(--font-mono);
79+
font-size: 13px;
80+
}
81+
82+
code {
83+
background: var(--bg-secondary);
84+
padding: 2px 6px;
85+
border-radius: 4px;
86+
}
87+
88+
pre {
89+
background: var(--bg-secondary);
90+
border-radius: var(--radius);
91+
padding: 16px;
92+
overflow-x: auto;
93+
margin: 0 0 16px;
94+
}
95+
96+
pre code {
97+
background: none;
98+
padding: 0;
99+
}
100+
101+
/* Header */
102+
header {
103+
margin-bottom: 32px;
104+
}
105+
106+
header h1 {
107+
margin: 0;
108+
font-size: 21px;
109+
font-weight: 600;
110+
}
111+
112+
header h1 a {
113+
color: var(--fg);
114+
}
115+
116+
header h1 a:hover {
117+
text-decoration: none;
118+
color: var(--accent);
119+
}
120+
121+
/* Breadcrumb */
122+
nav.breadcrumb {
123+
margin-bottom: 24px;
124+
font-size: 15px;
125+
color: var(--fg-secondary);
126+
}
127+
128+
nav.breadcrumb .crumb + .crumb::before {
129+
content: "›";
130+
margin: 0 8px;
131+
color: var(--fg-secondary);
132+
}
133+
134+
/* Forms */
135+
form {
136+
display: flex;
137+
flex-direction: column;
138+
gap: 16px;
139+
}
140+
141+
fieldset {
142+
border: 1px solid var(--border);
143+
border-radius: var(--radius);
144+
padding: 16px;
145+
margin: 0;
146+
}
147+
148+
legend {
149+
padding: 0 8px;
150+
font-size: 15px;
151+
font-weight: 500;
152+
color: var(--fg-secondary);
153+
}
154+
155+
label {
156+
display: block;
157+
font-size: 13px;
158+
font-weight: 500;
159+
margin-bottom: 4px;
160+
color: var(--fg-secondary);
161+
}
162+
163+
label + input,
164+
label + textarea,
165+
label + select {
166+
margin-top: 0;
167+
}
168+
169+
input[type="text"],
170+
input[type="email"],
171+
input[type="password"],
172+
input[type="number"],
173+
input[type="date"],
174+
input[type="time"],
175+
input[type="datetime-local"],
176+
input[type="url"],
177+
input[type="tel"],
178+
input[type="search"],
179+
input[type="color"],
180+
input[type="file"],
181+
textarea,
182+
select {
183+
display: block;
184+
width: 100%;
185+
padding: 7px 10px;
186+
font-family: inherit;
187+
font-size: 17px;
188+
color: var(--fg);
189+
background: var(--bg);
190+
border: 1px solid var(--border);
191+
border-radius: var(--radius);
192+
}
193+
194+
input:focus,
195+
textarea:focus,
196+
select:focus {
197+
outline: none;
198+
border-color: var(--accent);
199+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
200+
}
201+
202+
input[type="checkbox"],
203+
input[type="radio"] {
204+
accent-color: var(--accent);
205+
}
206+
207+
input[type="range"] {
208+
accent-color: var(--accent);
209+
}
210+
211+
input[type="color"] {
212+
padding: 4px;
213+
height: 38px;
214+
}
215+
216+
input[type="file"] {
217+
font-size: 15px;
218+
padding: 6px;
219+
}
220+
221+
textarea {
222+
min-height: 80px;
223+
resize: vertical;
224+
}
225+
226+
button,
227+
input[type="submit"] {
228+
display: inline-flex;
229+
align-items: center;
230+
justify-content: center;
231+
padding: 8px 16px;
232+
font-family: inherit;
233+
font-size: 15px;
234+
font-weight: 500;
235+
color: #fff;
236+
background: var(--accent);
237+
border: none;
238+
border-radius: var(--radius);
239+
cursor: pointer;
240+
}
241+
242+
button:hover,
243+
input[type="submit"]:hover {
244+
filter: brightness(1.1);
245+
}
246+
247+
/* List */
248+
article {
249+
padding: 16px 0;
250+
border-bottom: 1px solid var(--border);
251+
}
252+
253+
article:first-of-type {
254+
padding-top: 0;
255+
}
256+
257+
article:last-of-type {
258+
border-bottom: none;
259+
}
260+
261+
article h2 {
262+
margin-bottom: 4px;
263+
font-size: 17px;
264+
}
265+
266+
article h2 a {
267+
color: var(--fg);
268+
}
269+
270+
article h2 a:hover {
271+
color: var(--accent);
272+
text-decoration: none;
273+
}
274+
275+
article p {
276+
margin: 0;
277+
font-size: 15px;
278+
}
279+
280+
article p code {
281+
font-size: 12px;
282+
}

0 commit comments

Comments
 (0)