Skip to content

Commit

Permalink
🚀 breaking: change form layout
Browse files Browse the repository at this point in the history 
change table, tr, td -> fieldset .form-group label, input
  • Loading branch information
@icebob
icebob committed Jun 1, 2016
1 parent 3184fa4 commit 57f690b
Show file tree
Hide file tree
Showing 3 changed files with 164 additions and 191 deletions.
2 changes: 1 addition & 1 deletion dev/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
data-table(:rows="rows", :selected="selected", :select="selectRow")

.row(v-show="model")
.col-md-6
.col-md-5.col-md-offset-1
.buttons.text-center
button.btn.btn-default.new(@click="newModel")
i.fa.fa-plus
Expand Down
292 changes: 133 additions & 159 deletions src/formGenerator.vue
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
<template lang="jade">
table(v-if="schema != null")
thead
tbody
tr(v-for="field in fields", v-if="fieldVisible(field)", :class="getFieldRowClasses(field)")
td
span.help(v-if="field.help")
i.fa.fa-question-circle
.helpText {{{field.help}}}
| {{ field.label }}
td
.field-wrap
component(:is="getFieldType(field)", :disabled="fieldDisabled(field)", :model.sync="model", :schema.sync="field")
.buttons(v-if="field.buttons && field.buttons.length > 0")
button.btn.btn-default(v-for="btn in field.buttons", @click="btn.onclick(model, field)", :class="btn.classes") {{ btn.label }}
.hint(v-if="field.hint") {{ field.hint }}
.errors(v-if="field.errors && field.errors.length > 0")
span(v-for="error in field.errors", track-by="$index") {{ error }}
fieldset(v-if="schema != null")
.form-group(v-for="field in fields", v-if="fieldVisible(field)", :class="getFieldRowClasses(field)")
label {{ field.label }}
span.help(v-if="field.help")
i.fa.fa-question-circle
.helpText {{{field.help}}}
.field-wrap
component(:is="getFieldType(field)", :disabled="fieldDisabled(field)", :model.sync="model", :schema.sync="field")
.buttons(v-if="field.buttons && field.buttons.length > 0")
button.btn.btn-default(v-for="btn in field.buttons", @click="btn.onclick(model, field)", :class="btn.classes") {{ btn.label }}
.hint(v-if="field.hint") {{ field.hint }}
.errors(v-if="field.errors && field.errors.length > 0")
span(v-for="error in field.errors", track-by="$index") {{ error }}
</template>

<script>
Expand Down Expand Up @@ -102,6 +98,8 @@
baseClasses[field.styleClasses] = true;
}
baseClasses["field-" + field.type] = true;
return baseClasses;
},
Expand Down Expand Up @@ -164,175 +162,151 @@
$errorColor: lighten(#F00, 0%);
table {
width: 70%;
min-width: 350px;
margin: auto;
fieldset {
input, select, textarea {
border-radius: 4px;
border: 1px solid #BBB;
padding: 2px 5px;
}
td {
padding: 0.3em 0.4em;
&:nth-child(1) {
text-align: right;
vertical-align: top;
padding: 0.8em 0.5em;
span.help {
margin-right: 0.3em;
position: relative;
.helpText {
background-color: #444;
bottom: 30px;
color: #fff;
display: block;
left: 0px;
//margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
text-align: justify;
width: 300px;
//transform: translateY(10%);
transition: all .25s ease-out;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
border-radius: 6px;
a {
font-weight: bold;
text-decoration: underline;
}
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.helpText:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles - see Trevor's post */
/*.helpText:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #1496bb 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}*/
&:hover .helpText {
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
}
}
} // nth-child(1)
&:nth-child(2) {
> .field-wrap {
display: flex;
.buttons {
white-space: nowrap;
button {
display: inline-block;
margin: 0 2px;
}
}
}
.hint {
font-style: italic;
font-size: 0.8em;
span.help {
margin-left: 0.3em;
position: relative;
.helpText {
background-color: #444;
bottom: 30px;
color: #fff;
display: block;
left: 0px;
//margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
text-align: justify;
width: 300px;
//transform: translateY(10%);
transition: all .25s ease-out;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
border-radius: 6px;
a {
font-weight: bold;
text-decoration: underline;
}
}
.errors {
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.helpText:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles - see Trevor's post */
/*.helpText:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #1496bb 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}*/
&:hover .helpText {
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
}
} // span.help
> .field-wrap {
display: flex;
.buttons {
white-space: nowrap;
button {
display: inline-block;
margin: 0 2px;
}
}
}
} // nth-child(2)
} // td
tr.featured {
td:nth-child(1) {
font-weight: bold;
}
.hint {
font-style: italic;
font-size: 0.8em;
}
tr.required {
td:nth-child(1):after {
content: "*";
font-weight: normal;
color: Red;
padding-left: 0.1em;
font-size: 0.8em;
position: absolute;
margin-top: -0.4em;
}
}
.form-group {
tr.disabled {
td:nth-child(1) {
color: #666;
font-style: italic;
}
}
label {
font-weight: 400;
}
tr.company {
/* csak teszt */
background-color: #EEE;
&.featured {
label {
font-weight: bold;
}
}
}
&.required {
label:after {
content: "*";
font-weight: normal;
color: Red;
position: absolute;
padding-left: 0.2em;
font-size: 1em;
}
}
tr.error {
&.disabled {
label {
color: #666;
font-style: italic;
}
}
td:nth-child(1) {
//color: $errorColor;
}
&.error {
label {
//color: $errorColor;
}
td:nth-child(2) {
input:not([type="checkbox"]), textarea, select {
border: 1px solid $errorColor;
background-color: rgba($errorColor, 0.15);
}
}
.errors {
color: $errorColor;
font-size: 0.80em;
span {
display: block;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiklEQVR4Xt2TMQoCQQxF3xdhu72MpZU3GU/meBFLOztPYrVWsQmEWSaMsIXgK8P8RyYkMjO2sAN+K9gTIAmDAlzoUzE7p4IFytvDCQWJKSStYB2efcAvqZFM0BcstMx5naSDYFzfLhh/4SmRM+6Agw/xIX0tKEDFufeDNRUc4XqLRz3qabVIf3BMHwl6Ktexn3nmAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
padding-left: 17px;
padding-top: 0px;
margin-top: 0.2em;
font-weight: 600;
}
.errors {
color: $errorColor;
font-size: 0.80em;
span {
display: block;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiklEQVR4Xt2TMQoCQQxF3xdhu72MpZU3GU/meBFLOztPYrVWsQmEWSaMsIXgK8P8RyYkMjO2sAN+K9gTIAmDAlzoUzE7p4IFytvDCQWJKSStYB2efcAvqZFM0BcstMx5naSDYFzfLhh/4SmRM+6Agw/xIX0tKEDFufeDNRUc4XqLRz3qabVIf3BMHwl6Ktexn3nmAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
padding-left: 17px;
padding-top: 0px;
margin-top: 0.2em;
font-weight: 600;
}
} // .errors
} // .errors
} // .error
} // tr.error
} // .form-group
} // table
} // fieldset
</style>
Loading

0 comments on commit 57f690b

Please sign in to comment.