eSales Media Git repositories
Browse code

Reimplement extended registration and personal data form handling

Benjamin Roth authored on22/03/2023 12:59:10
Showing1 changed files
public/css/form.css
History View file @7d21c89
... ... 
@@ -29,7 +29,8 @@ input[type="number"],input[type="search"],input[type="tel"],input[type="time"],i
29 29 
 /**
30 30 
  * Fieldset Styles
31 31 
  */
32 
-.formbody {
32 
+.formbody,
33 
+.formbody > .fields:not(.widget) {
33 34 
 	display: grid;
34 35 
 	grid-gap: 10px;
35 36 
 	row-gap: 0.75em;
Browse code

widget without width class should default to 12 columns span

Benjamin Roth authored on15/03/2023 13:28:31
Showing1 changed files
public/css/form.css
History View file @2de4293
... ... 
@@ -93,7 +93,8 @@ input[type="number"],input[type="search"],input[type="tel"],input[type="time"],i
93 93 
 .formbody .widget.w85 { grid-column: auto / span 11; }
94 94 
 .formbody .widget.w90 { grid-column: auto / span 11; }
95 95 
 .formbody .widget.w95 { grid-column: auto / span 11; }
96 
-.formbody .widget.w100 { grid-column: auto / span 12; }
96 
+.formbody .widget.w100,
97 
+.formbody .widget { grid-column: auto / span 12; }
97 98
98 99 
 .formbody .widget.clr { grid-column-start: 1 }
99 100
Browse code

Apply submit widget alignment classes correctly to the widget container and not the widget itself

Benjamin Roth authored on24/01/2023 14:55:35
Showing1 changed files
public/css/form.css
History View file @56d3ddc
... ... 
@@ -53,16 +53,16 @@ input[type="number"],input[type="search"],input[type="tel"],input[type="time"],i
53 53 
 	margin-bottom: 0.4em;
54 54 
 	line-height: 1.5em;
55 55 
 }
56 
-.formbody .widget.fl_right_alignment input[type="submit"],
57 
-.formbody .submit_container.fl_right_alignment .submit {
56 
+.formbody .widget.fl_right_alignment,
57 
+.formbody .submit_container.fl_right_alignment {
58 58 
 	text-align: right;
59 59 
 }
60 
-.formbody .widget.fl_center_alignment input[type="submit"],
61 
-.formbody .submit_container.fl_center_alignment .submit {
60 
+.formbody .widget.fl_center_alignment,
61 
+.formbody .submit_container.fl_center_alignment {
62 62 
 	text-align: center;
63 63 
 }
64 
-.formbody .widget.fl_left_alignment input[type="submit"],
65 
-.formbody .submit_container.fl_left_alignment .submit {
64 
+.formbody .widget.fl_left_alignment,
65 
+.formbody .submit_container.fl_left_alignment {
66 66 
 	text-align: left;
67 67 
 }
68 68
Browse code

Add some missing css and add center alignment option for submit widget

Benjamin Roth authored on24/01/2023 14:52:03
Showing1 changed files
public/css/form.css
History View file @78d9f82
... ... 
@@ -48,6 +48,27 @@ input[type="number"],input[type="search"],input[type="tel"],input[type="time"],i
48 48 
 	grid-template-columns: repeat(12, 1fr);
49 49 
 	align-items: end;
50 50 
 }
51 
+.formbody .widget label {
52 
+	display: block;
53 
+	margin-bottom: 0.4em;
54 
+	line-height: 1.5em;
55 
+}
56 
+.formbody .widget.fl_right_alignment input[type="submit"],
57 
+.formbody .submit_container.fl_right_alignment .submit {
58 
+	text-align: right;
59 
+}
60 
+.formbody .widget.fl_center_alignment input[type="submit"],
61 
+.formbody .submit_container.fl_center_alignment .submit {
62 
+	text-align: center;
63 
+}
64 
+.formbody .widget.fl_left_alignment input[type="submit"],
65 
+.formbody .submit_container.fl_left_alignment .submit {
66 
+	text-align: left;
67 
+}
68 
+
69 
+.widget.lblp {
70 
+	padding-top: 1.9em;
71 
+}
51 72 
 .formbody .widget.w10 { grid-column: auto / span 2; }
52 73 
 .formbody .widget.w11 { grid-column: auto / span 2; }
53 74 
 .formbody .widget.w15 { grid-column: auto / span 2; }
Browse code

Make sure non widget elements inside form grid have full container width

Benjamin Roth authored on24/01/2023 14:14:15
Showing1 changed files
public/css/form.css
History View file @4236c04
... ... 
@@ -36,6 +36,9 @@ input[type="number"],input[type="search"],input[type="tel"],input[type="time"],i
36 36 
 	grid-template-columns: repeat(12, 1fr);
37 37 
 	align-items: end;
38 38 
 }
39 
+.formbody > *:not(.widget) {
40 
+	grid-column: auto / span 12;
41 
+}
39 42 
 .formbody > fieldset {
40 43 
 	grid-column-start: 1;
41 44 
 	grid-column: auto / span 12;
Browse code

Enable css grid in fieldset wrappers

Benjamin Roth authored on20/01/2023 10:48:29
Showing1 changed files
public/css/form.css
History View file @01b7b08
... ... 
@@ -39,6 +39,11 @@ input[type="number"],input[type="search"],input[type="tel"],input[type="time"],i
39 39 
 .formbody > fieldset {
40 40 
 	grid-column-start: 1;
41 41 
 	grid-column: auto / span 12;
42 
+	display: grid;
43 
+	grid-gap: 10px;
44 
+	row-gap: 0.75em;
45 
+	grid-template-columns: repeat(12, 1fr);
46 
+	align-items: end;
42 47 
 }
43 48 
 .formbody .widget.w10 { grid-column: auto / span 2; }
44 49 
 .formbody .widget.w11 { grid-column: auto / span 2; }
Browse code

First iteration of revamped formilicious for Contao 4.13+

Benjamin Roth authored on20/01/2023 09:49:23
Showing1 changed files
public/css/form.css
History View file @0d1d7c6
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,414 @@
1 
+/**
2 
+ * Fomrilicious for Contao Open Source CMS
3 
+ *
4 
+ * Copyright (C) 2013-2014 eSalesMedia
5 
+ *
6 
+ * @package eSM_formilicious
7 
+ * @link    http://www.esales-media.de
8 
+ * @license http://www.gnu.org/licenses/lgpl-3.0.html LGPL
9 
+ *
10 
+ * @author  Benjamin Roth <benjamin@esales-media.de>
11 
+ */
12 
+
13 
+/**
14 
+ *
15 
+ */
16 
+input[type="text"],input[type="password"],input[type="date"],input[type="datetime"],input[type="email"],
17 
+input[type="number"],input[type="search"],input[type="tel"],input[type="time"],input[type="url"],textarea, select {
18 
+	width:100%;
19 
+	-moz-box-sizing: border-box;
20 
+	-webkit-box-sizing: border-box;
21 
+	box-sizing: border-box;
22 
+}
23 
+
24 
+.widget input.captcha {
25 
+	max-width: 4em;
26 
+}
27 
+
28 
+
29 
+/**
30 
+ * Fieldset Styles
31 
+ */
32 
+.formbody {
33 
+	display: grid;
34 
+	grid-gap: 10px;
35 
+	row-gap: 0.75em;
36 
+	grid-template-columns: repeat(12, 1fr);
37 
+	align-items: end;
38 
+}
39 
+.formbody > fieldset {
40 
+	grid-column-start: 1;
41 
+	grid-column: auto / span 12;
42 
+}
43 
+.formbody .widget.w10 { grid-column: auto / span 2; }
44 
+.formbody .widget.w11 { grid-column: auto / span 2; }
45 
+.formbody .widget.w15 { grid-column: auto / span 2; }
46 
+.formbody .widget.w16_5 { grid-column: auto / span 2; }
47 
+.formbody .widget.w20 { grid-column: auto / span 3; }
48 
+.formbody .widget.w22 { grid-column: auto / span 3; }
49 
+.formbody .widget.w25 { grid-column: auto / span 3; }
50 
+.formbody .widget.w30 { grid-column: auto / span 4; }
51 
+.formbody .widget.w33 { grid-column: auto / span 4; }
52 
+.formbody .widget.w35 { grid-column: auto / span 5; }
53 
+.formbody .widget.w40 { grid-column: auto / span 5; }
54 
+.formbody .widget.w44 { grid-column: auto / span 6; }
55 
+.formbody .widget.w45 { grid-column: auto / span 6; }
56 
+.formbody .widget.w50 { grid-column: auto / span 6; }
57 
+.formbody .widget.w55 { grid-column: auto / span 7; }
58 
+.formbody .widget.w60 { grid-column: auto / span 8; }
59 
+.formbody .widget.w65 { grid-column: auto / span 8; }
60 
+.formbody .widget.w66 { grid-column: auto / span 8; }
61 
+.formbody .widget.w70 { grid-column: auto / span 9; }
62 
+.formbody .widget.w75 { grid-column: auto / span 9; }
63 
+.formbody .widget.w80 { grid-column: auto / span 10; }
64 
+.formbody .widget.w85 { grid-column: auto / span 11; }
65 
+.formbody .widget.w90 { grid-column: auto / span 11; }
66 
+.formbody .widget.w95 { grid-column: auto / span 11; }
67 
+.formbody .widget.w100 { grid-column: auto / span 12; }
68 
+
69 
+.formbody .widget.clr { grid-column-start: 1 }
70 
+
71 
+@media screen and (max-width: 599px) {
72 
+	.formbody .widget.w10,
73 
+	.formbody .widget.w11,
74 
+	.formbody .widget.w15,
75 
+	.formbody .widget.w16_5,
76 
+	.formbody .widget.w20,
77 
+	.formbody .widget.w22,
78 
+	.formbody .widget.w25,
79 
+	.formbody .widget.w30,
80 
+	.formbody .widget.w33,
81 
+	.formbody .widget.w35,
82 
+	.formbody .widget.w40,
83 
+	.formbody .widget.w44,
84 
+	.formbody .widget.w45,
85 
+	.formbody .widget.w50,
86 
+	.formbody .widget.w55,
87 
+	.formbody .widget.w60,
88 
+	.formbody .widget.w65,
89 
+	.formbody .widget.w66,
90 
+	.formbody .widget.w70,
91 
+	.formbody .widget.w75,
92 
+	.formbody .widget.w80,
93 
+	.formbody .widget.w85,
94 
+	.formbody .widget.w90,
95 
+	.formbody .widget.w95,
96 
+	.formbody .widget.w100 {
97 
+		grid-column: auto / span 12;
98 
+		grid-column-start: 1;
99 
+	}
100 
+}
101 
+
102 
+/*
103 
+.formbody > fieldset legend {
104 
+	color: inherit;
105 
+	font-size: 123%;
106 
+	line-height: 2;
107 
+	font-weight: normal;
108 
+	border-bottom: inherit 3px solid;
109 
+	margin-bottom: 1em;
110 
+}
111 
+
112 
+.widget .radio_container legend,
113 
+.widget .checkbox_container legend {
114 
+	color: inherit;
115 
+	font-size: 100%;
116 
+	font-weight: normal;
117 
+	border-bottom: none;
118 
+	display: block;
119 
+	margin-bottom: 0.4em;
120 
+	line-height: 1.5em;
121 
+}
122 
+
123 
+.widget .checkbox_container label,
124 
+.widget .radio_container label {
125 
+	font-weight: normal;
126 
+	display: inline;
127 
+	margin-bottom: 0;
128 
+}
129 
+
130 
+.widget .checkbox_container > span,
131 
+.widget .radio_container > span {
132 
+	display: block;
133 
+}
134 
+
135 
+!**
136 
+ * Headline Styles
137 
+ *!
138 
+
139 
+.widget.headline {
140 
+	margin-top: 1em;
141 
+	!*color: #d7ae6e;*!
142 
+	font-size: 108%;
143 
+	font-weight: bold;
144 
+	min-height: 1.5em;
145 
+}
146 
+
147 
+!**
148 
+ * Widget Styles
149 
+ *!
150 
+.widget {
151 
+	padding: 0 10px;
152 
+	margin-bottom: 0.5em;
153 
+	-webkit-box-sizing: border-box;
154 
+	-moz-box-sizing: border-box;
155 
+	box-sizing: border-box;
156 
+	min-height: 4em;
157 
+	float: left;
158 
+	width: 100%;
159 
+}
160 
+
161 
+.widget.cbx {
162 
+	min-height: 1.5em;
163 
+	height: 1.5em;
164 
+	padding: 4px 10px;
165 
+}
166 
+
167 
+.widget label {
168 
+	display: block;
169 
+	margin-bottom: 0.4em;
170 
+	line-height: 1.5em;
171 
+}
172 
+
173 
+!*.widget.error label {
174 
+	color: #E23E15;
175 
+}*!
176 
+.widget.error input,
177 
+.widget.error select,
178 
+.widget.error textarea {
179 
+	border-color: #E23E15;
180 
+}
181 
+
182 
+.widget p.error {
183 
+	font-size: 85%;
184 
+	margin-top: -0.4em;
185 
+	margin-bottom: 0.4em;
186 
+}
187 
+
188 
+.widget.error .errortip {
189 
+	background-color: rgb(226, 62, 21);
190 
+	border-bottom-left-radius: 50%;
191 
+	border-bottom-right-radius: 50%;
192 
+	border-top-left-radius: 50%;
193 
+	border-top-right-radius: 50%;
194 
+	color: rgb(255, 255, 255);
195 
+	cursor: help;
196 
+	display: block;
197 
+	float: right;
198 
+	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
199 
+	font-size: 13px;
200 
+	font-style: normal;
201 
+	font-variant: normal;
202 
+	font-weight: normal;
203 
+	height: 15px;
204 
+	line-height: 13px;
205 
+	margin-top: 3.25px;
206 
+	text-align: center;
207 
+	vertical-align: top;
208 
+	width: 15px;
209 
+}
210 
+
211 
+.submit_container {
212 
+	!*padding-top: 1.9em;*!
213 
+	min-height: 2.1em;
214 
+}
215 
+
216 
+.widget.w10 { float: left; width: 10%; }
217 
+.widget.w11 { float: left; width: 11.111%; }
218 
+.widget.w15 { float: left; width: 15%; }
219 
+.widget.w16_5 { float: left; width: 16.6665%; }
220 
+.widget.w20 { float: left; width: 20%; }
221 
+.widget.w22 { float: left; width: 22.222%; }
222 
+.widget.w25 { float: left; width: 25%; }
223 
+.widget.w30 { float: left; width: 30%; }
224 
+.widget.w33 { float: left; width: 33.333%; }
225 
+.widget.w35 { float: left; width: 35%; }
226 
+.widget.w40 { float: left; width: 40%; }
227 
+.widget.w44 { float: left; width: 44.444%; }
228 
+.widget.w45 { float: left; width: 45%; }
229 
+.widget.w50 { float: left; width: 50%; }
230 
+.widget.w55 { float: left; width: 55%; }
231 
+.widget.w60 { float: left; width: 60%; }
232 
+.widget.w65 { float: left; width: 65%; }
233 
+.widget.w66 { float: left; width: 66.666%; }
234 
+.widget.w70 { float: left; width: 70%; }
235 
+.widget.w75 { float: left; width: 75%; }
236 
+.widget.w80 { float: left; width: 80%; }
237 
+.widget.w85 { float: left; width: 85%; }
238 
+.widget.w90 { float: left; width: 90%; }
239 
+.widget.w95 { float: left; width: 95%; }
240 
+.widget.w100 { float: left; width: 100%; }
241 
+
242 
+
243 
+.widget.clr,
244 
+.formbody > fieldset {
245 
+	clear: left;
246 
+}
247 
+
248 
+@media screen and (max-width: 43em) {
249 
+	.widget.w10,
250 
+	.widget.w11,
251 
+	.widget.w15,
252 
+	.widget.w16_5,
253 
+	.widget.w20,
254 
+	.widget.w22,
255 
+	.widget.w25,
256 
+	.widget.w30,
257 
+	.widget.w33,
258 
+	.widget.w35,
259 
+	.widget.w40,
260 
+	.widget.w44,
261 
+	.widget.w45,
262 
+	.widget.w50,
263 
+	.widget.w55,
264 
+	.widget.w60,
265 
+	.widget.w65,
266 
+	.widget.w66,
267 
+	.widget.w70,
268 
+	.widget.w75,
269 
+	.widget.w80,
270 
+	.widget.w85,
271 
+	.widget.w90,
272 
+	.widget.w95,
273 
+	.widget.w100 { float: none; width: 100%; }
274 
+}
275 
+
276 
+.widget.w10:before,
277 
+.widget.w10:after,
278 
+.widget.w11:before,
279 
+.widget.w11:after,
280 
+.widget.w15:before,
281 
+.widget.w15:after,
282 
+.widget.w16_5:before,
283 
+.widget.w16_5:after,
284 
+.widget.w20:before,
285 
+.widget.w20:after,
286 
+.widget.w22:before,
287 
+.widget.w22:after,
288 
+.widget.w25:before,
289 
+.widget.w25:after,
290 
+.widget.w30:before,
291 
+.widget.w30:after,
292 
+.widget.w33:before,
293 
+.widget.w33:after,
294 
+.widget.w35:before,
295 
+.widget.w35:after,
296 
+.widget.w40:before,
297 
+.widget.w40:after,
298 
+.widget.w44:before,
299 
+.widget.w44:after,
300 
+.widget.w45:before,
301 
+.widget.w45:after,
302 
+.widget.w50:before,
303 
+.widget.w50:after,
304 
+.widget.w55:before,
305 
+.widget.w55:after,
306 
+.widget.w60:before,
307 
+.widget.w60:after,
308 
+.widget.w65:before,
309 
+.widget.w65:after,
310 
+.widget.w66:before,
311 
+.widget.w66:after,
312 
+.widget.w70:before,
313 
+.widget.w70:after,
314 
+.widget.w75:before,
315 
+.widget.w75:after,
316 
+.widget.w80:before,
317 
+.widget.w80:after,
318 
+.widget.w85:before,
319 
+.widget.w85:after,
320 
+.widget.w90:before,
321 
+.widget.w90:after,
322 
+.widget.w95:before,
323 
+.widget.w95:after,
324 
+.widget.w100:before,
325 
+.widget.w100:after,
326 
+form:before,
327 
+form:after {
328 
+	content: " "; !* 1 *!
329 
+	display: table; !* 2 *!
330 
+}
331 
+
332 
+.widget.w10:after,
333 
+.widget.w11:after,
334 
+.widget.w15:after,
335 
+.widget.w16_5:after,
336 
+.widget.w20:after,
337 
+.widget.w22:after,
338 
+.widget.w25:after,
339 
+.widget.w30:after,
340 
+.widget.w33:after,
341 
+.widget.w35:after,
342 
+.widget.w40:after,
343 
+.widget.w44:after,
344 
+.widget.w45:after,
345 
+.widget.w50:after,
346 
+.widget.w55:after,
347 
+.widget.w66:after,
348 
+.widget.w65:after,
349 
+.widget.w70:after,
350 
+.widget.w75:after,
351 
+.widget.w80:after,
352 
+.widget.w85:after,
353 
+.widget.w90:after,
354 
+.widget.w95:after,
355 
+.widget.w100:after,
356 
+form:after {
357 
+	clear: both;
358 
+}
359 
+
360 
+.widget.widget-split input[type="text"],
361 
+.widget.widget-split input[type="password"],
362 
+.widget.widget-split input[type="date"],
363 
+.widget.widget-split input[type="datetime"],
364 
+.widget.widget-split input[type="email"],
365 
+.widget.widget-split input[type="number"],
366 
+.widget.widget-split input[type="search"],
367 
+.widget.widget-split input[type="tel"],
368 
+.widget.widget-split input[type="time"],
369 
+.widget.widget-split input[type="url"],
370 
+.widget.widget-split textarea,
371 
+.widget.widget-split select
372 
+{
373 
+	max-width: 50% !important;
374 
+	min-width: 10% !important;
375 
+	float: left;
376 
+	margin-right: 10px;
377 
+	display: inline;
378 
+}
379 
+
380 
+.widget.widget-split.widget-split-3 input { max-width: 30% !important; }
381 
+.widget.widget-split.widget-split-3 input[type="submit"] { max-width: 70% !important; }
382 
+.widget.widget-split.widget-split-4 input { max-width: 40% !important; }
383 
+.widget.widget-split.widget-split-4 input[type="submit"] { max-width: 60% !important; }
384 
+.widget.widget-split.widget-split-5 input { max-width: 50% !important; }
385 
+.widget.widget-split.widget-split-5 input[type="submit"] { max-width: 50% !important; }
386 
+.widget.widget-split.widget-split-6 input { max-width: 60% !important; }
387 
+.widget.widget-split.widget-split-6 input[type="submit"] { max-width: 40% !important; }
388 
+.widget.widget-split.widget-split-7 input { max-width: 70% !important; }
389 
+.widget.widget-split.widget-split-7 input[type="submit"] { max-width: 30% !important; }
390 
+
391 
+
392 
+.widget.fl_right input[type="submit"],
393 
+.submit_container.fl_right .submit {
394 
+	float: right;
395 
+}
396 
+
397 
+.widget.lblp {
398 
+	padding-top: 1.9em;
399 
+	min-height: 2.1em;
400 
+}
401 
+
402 
+.widget.autoh {
403 
+	min-height: 0;
404 
+}
405 
+
406 
+!**
407 
+ * For IE 6/7 only
408 
+ * Include this rule to trigger hasLayout and contain floats.
409 
+ *!
410 
+.widget,
411 
+form {
412 
+	*zoom: 1;
413 
+}
414 
+*/