Skip to content

Commit 57f690b

Browse files
icebobicebob
committed
🚀 breaking: change form layout
change table, tr, td -> fieldset .form-group label, input
1 parent 3184fa4 commit 57f690b

File tree

3 files changed

+164
-191
lines changed

3 files changed

+164
-191
lines changed

‎dev/app.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
data-table(:rows="rows", :selected="selected", :select="selectRow")
55

66
.row(v-show="model")
7-
.col-md-6
7+
.col-md-5.col-md-offset-1
88
.buttons.text-center
99
button.btn.btn-default.new(@click="newModel")
1010
i.fa.fa-plus

‎src/formGenerator.vue‎

Lines changed: 133 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
<template lang="jade">
2-
table(v-if="schema != null")
3-
thead
4-
tbody
5-
tr(v-for="field in fields", v-if="fieldVisible(field)", :class="getFieldRowClasses(field)")
6-
td
7-
span.help(v-if="field.help")
8-
i.fa.fa-question-circle
9-
.helpText {{{field.help}}}
10-
| {{ field.label }}
11-
td
12-
.field-wrap
13-
component(:is="getFieldType(field)", :disabled="fieldDisabled(field)", :model.sync="model", :schema.sync="field")
14-
.buttons(v-if="field.buttons && field.buttons.length > 0")
15-
button.btn.btn-default(v-for="btn in field.buttons", @click="btn.onclick(model, field)", :class="btn.classes") {{ btn.label }}
16-
.hint(v-if="field.hint") {{ field.hint }}
17-
.errors(v-if="field.errors && field.errors.length > 0")
18-
span(v-for="error in field.errors", track-by="$index") {{ error }}
2+
fieldset(v-if="schema != null")
3+
.form-group(v-for="field in fields", v-if="fieldVisible(field)", :class="getFieldRowClasses(field)")
4+
label {{ field.label }}
5+
span.help(v-if="field.help")
6+
i.fa.fa-question-circle
7+
.helpText {{{field.help}}}
8+
.field-wrap
9+
component(:is="getFieldType(field)", :disabled="fieldDisabled(field)", :model.sync="model", :schema.sync="field")
10+
.buttons(v-if="field.buttons && field.buttons.length > 0")
11+
button.btn.btn-default(v-for="btn in field.buttons", @click="btn.onclick(model, field)", :class="btn.classes") {{ btn.label }}
12+
.hint(v-if="field.hint") {{ field.hint }}
13+
.errors(v-if="field.errors && field.errors.length > 0")
14+
span(v-for="error in field.errors", track-by="$index") {{ error }}
1915
</template>
2016

2117
<script>
@@ -102,6 +98,8 @@
10298
baseClasses[field.styleClasses] = true;
10399
}
104100
101+
baseClasses["field-" + field.type] = true;
102+
105103
return baseClasses;
106104
},
107105
@@ -164,175 +162,151 @@
164162
165163
$errorColor: lighten(#F00, 0%);
166164
167-
table {
168-
width: 70%;
169-
min-width: 350px;
170-
margin: auto;
165+
fieldset {
171166
172167
input, select, textarea {
173168
border-radius: 4px;
174169
border: 1px solid #BBB;
175170
padding: 2px 5px;
176171
}
177172
178-
td {
179-
padding: 0.3em 0.4em;
180-
181-
&:nth-child(1) {
182-
text-align: right;
183-
vertical-align: top;
184-
padding: 0.8em 0.5em;
185-
186-
span.help {
187-
margin-right: 0.3em;
188-
position: relative;
189-
190-
.helpText {
191-
background-color: #444;
192-
bottom: 30px;
193-
color: #fff;
194-
display: block;
195-
left: 0px;
196-
//margin-bottom: 15px;
197-
opacity: 0;
198-
padding: 20px;
199-
pointer-events: none;
200-
position: absolute;
201-
text-align: justify;
202-
width: 300px;
203-
//transform: translateY(10%);
204-
transition: all .25s ease-out;
205-
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
206-
border-radius: 6px;
207-
208-
a {
209-
font-weight: bold;
210-
text-decoration: underline;
211-
}
212-
}
213-
214-
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
215-
.helpText:before {
216-
bottom: -20px;
217-
content: " ";
218-
display: block;
219-
height: 20px;
220-
left: 0;
221-
position: absolute;
222-
width: 100%;
223-
}
224-
225-
/* CSS Triangles - see Trevor's post */
226-
/*.helpText:after {
227-
border-left: solid transparent 10px;
228-
border-right: solid transparent 10px;
229-
border-top: solid #1496bb 10px;
230-
bottom: -10px;
231-
content: " ";
232-
height: 0;
233-
left: 50%;
234-
margin-left: -13px;
235-
position: absolute;
236-
width: 0;
237-
}*/
238-
239-
&:hover .helpText {
240-
opacity: 1;
241-
pointer-events: auto;
242-
transform: translateY(0px);
243-
}
244-
}
245-
} // nth-child(1)
246-
247-
&:nth-child(2) {
248-
249-
> .field-wrap {
250-
display: flex;
251-
252-
.buttons {
253-
white-space: nowrap;
254-
button {
255-
display: inline-block;
256-
margin: 0 2px;
257-
}
258-
}
259-
}
260-
261-
.hint {
262-
font-style: italic;
263-
font-size: 0.8em;
173+
span.help {
174+
margin-left: 0.3em;
175+
position: relative;
176+
177+
.helpText {
178+
background-color: #444;
179+
bottom: 30px;
180+
color: #fff;
181+
display: block;
182+
left: 0px;
183+
//margin-bottom: 15px;
184+
opacity: 0;
185+
padding: 20px;
186+
pointer-events: none;
187+
position: absolute;
188+
text-align: justify;
189+
width: 300px;
190+
//transform: translateY(10%);
191+
transition: all .25s ease-out;
192+
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
193+
border-radius: 6px;
194+
195+
a {
196+
font-weight: bold;
197+
text-decoration: underline;
264198
}
199+
}
265200
266-
.errors {
267-
201+
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
202+
.helpText:before {
203+
bottom: -20px;
204+
content: " ";
205+
display: block;
206+
height: 20px;
207+
left: 0;
208+
position: absolute;
209+
width: 100%;
210+
}
211+
212+
/* CSS Triangles - see Trevor's post */
213+
/*.helpText:after {
214+
border-left: solid transparent 10px;
215+
border-right: solid transparent 10px;
216+
border-top: solid #1496bb 10px;
217+
bottom: -10px;
218+
content: " ";
219+
height: 0;
220+
left: 50%;
221+
margin-left: -13px;
222+
position: absolute;
223+
width: 0;
224+
}*/
225+
226+
&:hover .helpText {
227+
opacity: 1;
228+
pointer-events: auto;
229+
transform: translateY(0px);
230+
}
231+
} // span.help
232+
233+
> .field-wrap {
234+
display: flex;
235+
236+
.buttons {
237+
white-space: nowrap;
238+
button {
239+
display: inline-block;
240+
margin: 0 2px;
268241
}
242+
}
243+
}
269244
270-
} // nth-child(2)
271-
272-
} // td
273-
274-
tr.featured {
275-
td:nth-child(1) {
276-
font-weight: bold;
277-
}
245+
.hint {
246+
font-style: italic;
247+
font-size: 0.8em;
278248
}
279249
280-
tr.required {
281-
td:nth-child(1):after {
282-
content: "*";
283-
font-weight: normal;
284-
color: Red;
285-
padding-left: 0.1em;
286-
font-size: 0.8em;
287-
position: absolute;
288-
margin-top: -0.4em;
289-
}
290-
}
291250
251+
.form-group {
292252
293-
tr.disabled {
294-
td:nth-child(1) {
295-
color: #666;
296-
font-style: italic;
297-
}
298-
}
253+
label {
254+
font-weight: 400;
255+
}
299256
300-
tr.company {
301-
/* csak teszt */
302-
background-color: #EEE;
257+
&.featured {
258+
label {
259+
font-weight: bold;
260+
}
261+
}
303262
304-
}
263+
&.required {
264+
label:after {
265+
content: "*";
266+
font-weight: normal;
267+
color: Red;
268+
position: absolute;
269+
padding-left: 0.2em;
270+
font-size: 1em;
271+
}
272+
}
305273
306-
tr.error {
274+
&.disabled {
275+
label {
276+
color: #666;
277+
font-style: italic;
278+
}
279+
}
307280
308-
td:nth-child(1) {
309-
//color: $errorColor;
310-
}
281+
&.error {
282+
283+
label {
284+
//color: $errorColor;
285+
}
311286
312-
td:nth-child(2) {
313287
input:not([type="checkbox"]), textarea, select {
314288
border: 1px solid $errorColor;
315289
background-color: rgba($errorColor, 0.15);
316290
}
317-
}
318291
319-
.errors {
320-
color: $errorColor;
321-
font-size: 0.80em;
322-
span {
323-
display: block;
324-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiklEQVR4Xt2TMQoCQQxF3xdhu72MpZU3GU/meBFLOztPYrVWsQmEWSaMsIXgK8P8RyYkMjO2sAN+K9gTIAmDAlzoUzE7p4IFytvDCQWJKSStYB2efcAvqZFM0BcstMx5naSDYFzfLhh/4SmRM+6Agw/xIX0tKEDFufeDNRUc4XqLRz3qabVIf3BMHwl6Ktexn3nmAAAAAElFTkSuQmCC');
325-
background-repeat: no-repeat;
326-
padding-left: 17px;
327-
padding-top: 0px;
328-
margin-top: 0.2em;
329-
font-weight: 600;
330-
}
292+
.errors {
293+
color: $errorColor;
294+
font-size: 0.80em;
295+
span {
296+
display: block;
297+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiklEQVR4Xt2TMQoCQQxF3xdhu72MpZU3GU/meBFLOztPYrVWsQmEWSaMsIXgK8P8RyYkMjO2sAN+K9gTIAmDAlzoUzE7p4IFytvDCQWJKSStYB2efcAvqZFM0BcstMx5naSDYFzfLhh/4SmRM+6Agw/xIX0tKEDFufeDNRUc4XqLRz3qabVIf3BMHwl6Ktexn3nmAAAAAElFTkSuQmCC');
298+
background-repeat: no-repeat;
299+
padding-left: 17px;
300+
padding-top: 0px;
301+
margin-top: 0.2em;
302+
font-weight: 600;
303+
}
331304
332-
} // .errors
305+
} // .errors
333306
307+
} // .error
334308
335-
} // tr.error
309+
} // .form-group
336310
337-
} // table
311+
} // fieldset
338312
</style>

0 commit comments

Comments
 (0)