0
0
Fork 1
Spiegel von https://github.com/paviliondev/discourse-custom-wizard.git synchronisiert 2024-11-09 11:52:54 +01:00

Use flexboxes to align step children and fields

Dieser Commit ist enthalten in:
Angus McLeod 2018-02-10 15:04:31 +08:00
Ursprung 42b933b030
Commit e81f131992
5 geänderte Dateien mit 46 neuen und 50 gelöschten Zeilen

Datei anzeigen

@ -151,6 +151,8 @@ export default {
});
WizardField.reopen({
classNameBindings: ['field.id'],
inputComponentName: function() {
const type = this.get('field.type');
const id = this.get('field.id');

Datei anzeigen

@ -8,7 +8,9 @@
{{/if}}
{{#if bannerImage}}
<img src={{bannerImage}} class="wizard-step-banner">
<div class="wizard-step-banner">
<img src={{bannerImage}}>
</div>
{{/if}}
{{#wizard-step-form step=step}}

Datei anzeigen

@ -26,15 +26,16 @@
.d-editor .d-editor-modal {
min-width: 400px;
@media screen and (max-width: 424px) {
min-width: 300px;
}
position: absolute;
background-color: $secondary;
border: 1px solid $primary;
padding: 1em;
top: 25px;
@media screen and (max-width: 424px) {
min-width: 300px;
}
input {
width: 95%;
}
@ -156,7 +157,7 @@
////
.d-editor {
max-height: 300px;
max-height: 250px;
}
.d-editor-modal.hidden {

Datei anzeigen

@ -5,13 +5,19 @@
.wizard-step-contents {
position: relative;
display: inline-block;
display: flex;
flex-direction: column;
width: 100%;
}
.wizard-step-title {
flex: 0;
}
.wizard-step-description {
line-height: 1.7;
margin: 1em 0;
flex: 0;
i {
margin-right: 7px;
@ -67,25 +73,45 @@
.inline-list > * {
display: inline-block;
}
}
.tip {
position: absolute;
bottom: 0;
font-style: italic;
margin-bottom: 20px;
.wizard-step-form {
flex: auto;
display: flex;
flex-direction: column;
width: 100%;
}
.wizard-field {
margin-bottom: 1em;
&.tip {
margin-top: auto;
}
.field-label {
font-weight: 400;
}
.field-description {
color: #333;
img {
width: 30px;
height: 30px;
width: 40px;
height: 40px;
vertical-align: middle;
padding-bottom: 5px;
padding-bottom: 10px;
margin-right: 10px;
}
input {
margin: 0 5px;
}
}
}
.wizard-column .wizard-step-banner {
width: initial;
max-width: 660px;
max-height: 300px;
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 {
padding: 3px;
border: 4px solid red;
@ -437,7 +438,3 @@ img.avatar {
color: rgb(231, 195, 0);
}
}
.textarea-field textarea {
height: 19em;
}

Datei anzeigen

@ -23,12 +23,6 @@
height: 60px;
padding: 10px;
}
.tip {
position: relative;
display: inline-block;
margin: 20px 0;
}
}
.wizard-step-banner {