Use flexboxes to align step children and fields
Dieser Commit ist enthalten in:
Ursprung
42b933b030
Commit
e81f131992
5 geänderte Dateien mit 46 neuen und 50 gelöschten Zeilen
|
@ -151,6 +151,8 @@ export default {
|
||||||
});
|
});
|
||||||
|
|
||||||
WizardField.reopen({
|
WizardField.reopen({
|
||||||
|
classNameBindings: ['field.id'],
|
||||||
|
|
||||||
inputComponentName: function() {
|
inputComponentName: function() {
|
||||||
const type = this.get('field.type');
|
const type = this.get('field.type');
|
||||||
const id = this.get('field.id');
|
const id = this.get('field.id');
|
||||||
|
|
|
@ -8,7 +8,9 @@
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if bannerImage}}
|
{{#if bannerImage}}
|
||||||
<img src={{bannerImage}} class="wizard-step-banner">
|
<div class="wizard-step-banner">
|
||||||
|
<img src={{bannerImage}}>
|
||||||
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#wizard-step-form step=step}}
|
{{#wizard-step-form step=step}}
|
||||||
|
|
|
@ -26,15 +26,16 @@
|
||||||
|
|
||||||
.d-editor .d-editor-modal {
|
.d-editor .d-editor-modal {
|
||||||
min-width: 400px;
|
min-width: 400px;
|
||||||
@media screen and (max-width: 424px) {
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: $secondary;
|
background-color: $secondary;
|
||||||
border: 1px solid $primary;
|
border: 1px solid $primary;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
top: 25px;
|
top: 25px;
|
||||||
|
|
||||||
|
@media screen and (max-width: 424px) {
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
}
|
}
|
||||||
|
@ -156,7 +157,7 @@
|
||||||
////
|
////
|
||||||
|
|
||||||
.d-editor {
|
.d-editor {
|
||||||
max-height: 300px;
|
max-height: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.d-editor-modal.hidden {
|
.d-editor-modal.hidden {
|
||||||
|
|
|
@ -5,13 +5,19 @@
|
||||||
|
|
||||||
.wizard-step-contents {
|
.wizard-step-contents {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wizard-step-title {
|
||||||
|
flex: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.wizard-step-description {
|
.wizard-step-description {
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
|
flex: 0;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
margin-right: 7px;
|
margin-right: 7px;
|
||||||
|
@ -67,25 +73,45 @@
|
||||||
.inline-list > * {
|
.inline-list > * {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.tip {
|
.wizard-step-form {
|
||||||
position: absolute;
|
flex: auto;
|
||||||
bottom: 0;
|
display: flex;
|
||||||
font-style: italic;
|
flex-direction: column;
|
||||||
margin-bottom: 20px;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard-field {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
|
||||||
|
&.tip {
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-label {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-description {
|
||||||
|
color: #333;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 30px;
|
width: 40px;
|
||||||
height: 30px;
|
height: 40px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
padding-bottom: 5px;
|
padding-bottom: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
margin: 0 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wizard-column .wizard-step-banner {
|
.wizard-column .wizard-step-banner {
|
||||||
width: initial;
|
width: initial;
|
||||||
max-width: 660px;
|
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
@ -385,31 +411,6 @@ img.avatar {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wizard-column .wizard-field {
|
|
||||||
clear: both;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
|
|
||||||
.field-label {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-description {
|
|
||||||
color: #333;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
vertical-align: middle;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
margin: 0 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-field.invalid .input-area {
|
.checkbox-field.invalid .input-area {
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
border: 4px solid red;
|
border: 4px solid red;
|
||||||
|
@ -437,7 +438,3 @@ img.avatar {
|
||||||
color: rgb(231, 195, 0);
|
color: rgb(231, 195, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.textarea-field textarea {
|
|
||||||
height: 19em;
|
|
||||||
}
|
|
||||||
|
|
|
@ -23,12 +23,6 @@
|
||||||
height: 60px;
|
height: 60px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tip {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wizard-step-banner {
|
.wizard-step-banner {
|
||||||
|
|
Laden …
In neuem Issue referenzieren