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:
Ursprung
42b933b030
Commit
e81f131992
5 geänderte Dateien mit 46 neuen und 50 gelöschten Zeilen
|
@ -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');
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -23,12 +23,6 @@
|
|||
height: 60px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-step-banner {
|
||||
|
|
Laden …
In neuem Issue referenzieren