Skip to content

Commit 772553b

Browse files
FloppyFloppy
authored
Merge pull request #4903 from manyfold3d/grid-forms
2 parents a6ba455 + 1e91f73 commit 772553b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+799
-822
lines changed

‎app/assets/stylesheets/application.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ $ra-font-path: "../fonts" !default;
1616
@import 'src/effects';
1717
@import 'src/altcha';
1818
@import 'src/avatars';
19+
@import 'src/forms';
1920

2021
@import 'tom-select/dist/css/tom-select.bootstrap5';
2122

‎app/assets/stylesheets/src/forms.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.tabular-form {
2+
display: grid;
3+
grid-template-columns: minmax(min-content, 25%) minmax(75%, auto);
4+
gap: 1em;
5+
6+
div:has(input[type=submit]),
7+
div:has(button[type=submit]) {
8+
grid-column: 2;
9+
}
10+
11+
table,
12+
hr,
13+
h1,
14+
h2,
15+
h3,
16+
h4,
17+
h5,
18+
h6,
19+
p,
20+
ul {
21+
grid-column: span 2;
22+
}
23+
24+
}

‎app/helpers/application_helper.rb‎

Lines changed: 137 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -78,18 +78,18 @@ def card(style, title = nil, options = {}, &content)
7878
end
7979

8080
def text_input_row(form, name, options = {})
81-
content_tag :div, class: "row mb-3 input-group" do
82-
safe_join [
83-
form.label(name, options[:label], class: "col-auto col-form-label"),
84-
content_tag(:div, class: "col p-0") do
85-
safe_join [
86-
form.text_field(name, {class: "form-control"}.merge(options)),
87-
errors_for(form.object, name),
88-
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
89-
].compact
90-
end
91-
]
92-
end
81+
safe_join([
82+
content_tag(:div) do
83+
form.label(name, options[:label], class: "col-form-label")
84+
end,
85+
content_tag(:div) do
86+
safe_join [
87+
form.text_field(name, {class: "form-control"}.merge(options)),
88+
errors_for(form.object, name),
89+
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
90+
].compact
91+
end
92+
])
9393
end
9494

9595
def password_input_row(form, name, options = {})
@@ -98,131 +98,151 @@ def password_input_row(form, name, options = {})
9898
field_options["data-controller"] = "zxcvbn"
9999
field_options["data-action"] = "input->zxcvbn#onInput"
100100
end
101-
content_tag :div, class: "row mb-3 input-group" do
102-
safe_join [
103-
form.label(name, options[:label], class: "col-auto col-form-label"),
104-
content_tag(:div, class: "col p-0") do
105-
safe_join [
106-
form.password_field(name, field_options),
107-
(if options[:strength_meter]
108-
content_tag(:div, class: "progress") do
109-
content_tag(:div, nil, class: "progress-bar w-0 zxcvbn-meter", "data-zxcvbn-min-score": Devise.min_password_score)
110-
end
111-
end),
112-
errors_for(form.object, name),
113-
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
114-
].compact
115-
end
116-
]
117-
end
101+
safe_join([
102+
content_tag(:div) do
103+
form.label(name, options[:label], class: "col-form-label")
104+
end,
105+
content_tag(:div) do
106+
safe_join [
107+
form.password_field(name, field_options),
108+
(if options[:strength_meter]
109+
content_tag(:div, class: "progress") do
110+
content_tag(:div, nil, class: "progress-bar w-0 zxcvbn-meter", "data-zxcvbn-min-score": Devise.min_password_score)
111+
end
112+
end),
113+
errors_for(form.object, name),
114+
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
115+
].compact
116+
end
117+
])
118118
end
119119

120120
def url_input_row(form, name, options = {})
121-
content_tag :div, class: "row mb-3 input-group" do
122-
safe_join [
123-
form.label(name, options[:label], class: "col-auto col-form-label"),
124-
content_tag(:div, class: "col p-0") do
125-
safe_join [
126-
form.url_field(name, {class: "form-control"}.merge(options)),
127-
errors_for(form.object, name),
128-
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
129-
].compact
130-
end
131-
]
132-
end
121+
safe_join([
122+
content_tag(:div) do
123+
form.label(name, options[:label], class: "col-form-label")
124+
end,
125+
content_tag(:div) do
126+
safe_join [
127+
form.url_field(name, {class: "form-control"}.merge(options)),
128+
errors_for(form.object, name),
129+
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
130+
].compact
131+
end
132+
])
133133
end
134134

135-
def rich_text_input_row(form, name, options = {})
136-
content_tag :div, class: "row mb-3 input-group" do
137-
safe_join [
138-
form.label(name, options[:label], class: "col-auto col-form-label"),
139-
content_tag(:div, class: "col p-0") do
140-
safe_join [
141-
form.text_area(name, {class: "form-control col-auto"}.merge(options)),
142-
errors_for(form.object, name),
143-
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
144-
].compact
145-
end
146-
]
147-
end
135+
def numeric_input_row(form, name, options = {})
136+
safe_join([
137+
content_tag(:div) do
138+
form.label(name, options[:label], class: "col-form-label")
139+
end,
140+
content_tag(:div) do
141+
safe_join [
142+
content_tag(:div, class: "input-group") do
143+
safe_join [
144+
form.number_field(name, {class: "form-control"}.merge(options)),
145+
options[:unit] ? content_tag(:span, class: "input-group-text") { options[:unit] } : nil
146+
]
147+
end,
148+
errors_for(form.object, name),
149+
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
150+
].compact
151+
end
152+
])
148153
end
149154

150-
def checkbox_input_row(form, name, options = {})
151-
content_tag :div, class: "row mb-3 input-group" do
152-
safe_join [
153-
form.label(name, options[:label], class: "col-sm-2 col-form-label"),
154-
content_tag(:div, class: "col-sm-10") do
155-
content_tag(:div, class: "form-switch") do
156-
safe_join [
157-
form.check_box(name, options.merge(class: "form-check-input form-check-inline")),
158-
errors_for(form.object, name),
159-
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
160-
].compact
161-
end
162-
end
163-
]
164-
end
155+
def rich_text_input_row(form, name, options = {})
156+
safe_join([
157+
content_tag(:div) do
158+
form.label(name, options[:label], class: "col-form-label")
159+
end,
160+
content_tag(:div) do
161+
safe_join [
162+
form.text_area(name, {class: "form-control"}.merge(options)),
163+
errors_for(form.object, name),
164+
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
165+
].compact
166+
end
167+
])
165168
end
166169

167-
def select_input_row(form, name, select_options, options = {})
168-
content_tag :div, class: "row mb-3 input-group" do
169-
safe_join [
170-
form.label(name, options[:label], class: "col-auto col-form-label"),
171-
content_tag(:div, class: "col p-0") do
170+
def checkbox_input_row(form, name, options = {})
171+
safe_join([
172+
content_tag(:div) do
173+
form.label(name, options[:label])
174+
end,
175+
content_tag(:div) do
176+
content_tag(:div, class: "form-switch") do
172177
safe_join [
173-
content_tag(:div, class: "input-group") do
174-
safe_join [
175-
form.select(name, select_options, options.compact, {data: {controller: "searchable-select"}, class: "form-control col-auto form-select #{"is-invalid" if form.object&.errors&.include?(name) && !form.object.errors[name].empty?}"}),
176-
(link_to(options[:button][:label], options[:button][:path], class: "btn btn-outline-secondary col-auto") if options[:button])
177-
]
178-
end,
178+
form.check_box(name, options.merge(class: "form-check-input form-check-inline")),
179179
errors_for(form.object, name),
180180
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
181181
].compact
182182
end
183-
]
184-
end
183+
end
184+
])
185+
end
186+
187+
def select_input_row(form, name, select_options, options = {})
188+
safe_join([
189+
content_tag(:div) do
190+
form.label(name, options[:label], class: "col-form-label")
191+
end,
192+
content_tag(:div) do
193+
safe_join [
194+
content_tag(:div, class: "input-group") do
195+
safe_join [
196+
form.select(name, select_options, options.compact, {data: {controller: "searchable-select"}, class: "form-control form-select #{"is-invalid" if form.object&.errors&.include?(name) && !form.object.errors[name].empty?}"}),
197+
(link_to(options[:button][:label], options[:button][:path], class: "btn btn-outline-secondary") if options[:button])
198+
]
199+
end,
200+
errors_for(form.object, name),
201+
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
202+
].compact
203+
end
204+
])
185205
end
186206

187207
def collection_select_input_row(form, name, collection, value_method, text_method, options = {})
188-
content_tag :div, class: "row mb-3 input-group" do
189-
safe_join [
190-
form.label(name, options[:label], class: "col-auto col-form-label"),
191-
content_tag(:div, class: "col p-0") do
192-
safe_join [
193-
content_tag(:div, class: "input-group") do
194-
safe_join [
195-
form.collection_select(:"#{name}_id", collection, value_method, text_method, options.compact, {data: {controller: "searchable-select"}, class: "form-control col-auto form-select #{"is-invalid" if form.object&.errors&.include?(name) && !form.object.errors[name].empty?}"}),
196-
(link_to(options[:button][:label], options[:button][:path], class: "btn btn-outline-secondary col-auto") if options[:button])
197-
]
198-
end,
199-
errors_for(form.object, name),
200-
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
201-
].compact
202-
end
203-
]
204-
end
208+
safe_join([
209+
content_tag(:div) do
210+
form.label(name, options[:label], class: "col-form-label")
211+
end,
212+
content_tag(:div) do
213+
safe_join [
214+
content_tag(:div, class: "input-group") do
215+
safe_join [
216+
form.collection_select(:"#{name}_id", collection, value_method, text_method, options.compact, {data: {controller: "searchable-select"}, class: "form-control form-select #{"is-invalid" if form.object&.errors&.include?(name) && !form.object.errors[name].empty?}"}),
217+
(link_to(options[:button][:label], options[:button][:path], class: "btn btn-outline-secondary") if options[:button])
218+
]
219+
end,
220+
errors_for(form.object, name),
221+
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
222+
].compact
223+
end
224+
])
205225
end
206226

207227
def file_input_row(form, name, options = {})
208-
content_tag :div, class: "row mb-3 input-group" do
209-
safe_join [
210-
form.label(name, options[:label], class: "col-auto col-form-label"),
211-
content_tag(:div, class: "col p-0") do
212-
safe_join [
213-
content_tag(:div, class: "input-group") do
214-
safe_join [
215-
form.file_field(name, class: "form-control"),
216-
options[:remove] ? form.check_box(:"remove_#{name}", class: "btn-check", autocomplete: "off") : nil,
217-
options[:remove] ? form.label(:"remove_#{name}", icon("trash", options[:remove_label]), class: "btn btn-outline-danger") : nil
218-
].compact
219-
end,
220-
errors_for(form.object, name),
221-
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
222-
].compact
223-
end
224-
].compact
225-
end
228+
safe_join([
229+
content_tag(:div) do
230+
form.label(name, options[:label], class: "col-form-label")
231+
end,
232+
content_tag(:div) do
233+
safe_join [
234+
content_tag(:div, class: "input-group") do
235+
safe_join [
236+
form.file_field(name, class: "form-control"),
237+
options[:remove] ? form.check_box(:"remove_#{name}", class: "btn-check", autocomplete: "off") : nil,
238+
options[:remove] ? form.label(:"remove_#{name}", icon("trash", options[:remove_label]), class: "btn btn-outline-danger") : nil
239+
].compact
240+
end,
241+
errors_for(form.object, name),
242+
(options[:help] ? content_tag(:span, class: "form-text") { options[:help] } : nil)
243+
].compact
244+
end
245+
])
226246
end
227247

228248
def nav_link(ico, text, path, options = {})

‎app/javascript/controllers/upload_controller.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ const uppyLocales = { cs, de, en, es, fr, ja, nl, pl }
1818
// Connects to data-controller="upload"
1919
export default class extends Controller {
2020
uppy: Uppy | null = null
21-
nameLine: HTMLDivElement | null = null
21+
nameLabel: HTMLDivElement | null = null
22+
nameField: HTMLDivElement | null = null
2223
multiMessage: HTMLDivElement | null = null
2324
singleMessage: HTMLDivElement | null = null
2425

@@ -49,7 +50,8 @@ export default class extends Controller {
4950
const submitButton = this.element?.closest('form')?.querySelector("input[type='submit']")
5051
const form = this.element?.closest('form')
5152
if (form != null) {
52-
this.nameLine = form.querySelector("div:has(> label[for='name'])")
53+
this.nameLabel = form.querySelector("div:has(> label[for='name'])")
54+
this.nameField = form.querySelector("div:has(> input[name='name'])")
5355
this.multiMessage = form.querySelector("div[id='multi-model-message']")
5456
this.singleMessage = form.querySelector("div[id='single-model-message']")
5557
}
@@ -92,13 +94,15 @@ export default class extends Controller {
9294
}
9395

9496
setMultiModelMode (): void {
95-
if (this.nameLine != null) { this.nameLine.style.display = 'none' }
97+
if (this.nameLabel != null) { this.nameLabel.style.display = 'none' }
98+
if (this.nameField != null) { this.nameField.style.display = 'none' }
9699
if (this.multiMessage != null) { this.multiMessage.style.display = 'block' }
97100
if (this.singleMessage != null) { this.singleMessage.style.display = 'none' }
98101
}
99102

100103
setSingleModelMode (): void {
101-
if (this.nameLine != null) { this.nameLine.style.display = 'flex' }
104+
if (this.nameLabel != null) { this.nameLabel.style.display = 'block' }
105+
if (this.nameField != null) { this.nameField.style.display = 'block' }
102106
if (this.multiMessage != null) { this.multiMessage.style.display = 'none' }
103107
if (this.singleMessage != null) { this.singleMessage.style.display = 'block' }
104108
}

0 commit comments

Comments
 (0)