UX: Improve layout of poll builder modal

This commit is contained in:
Penar Musaraj 2019-08-07 15:00:03 -04:00
parent 24877a7b8c
commit 78500fb770
2 changed files with 20 additions and 20 deletions

View File

@ -19,13 +19,13 @@
{{#if showMinMax}} {{#if showMinMax}}
<div class="input-group poll-number"> <div class="input-group poll-number">
{{input-tip validation=minMaxValueValidation}}
<label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.min'}}</label> <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.min'}}</label>
{{input type='number' {{input type='number'
value=pollMin value=pollMin
valueAttribute="value" valueAttribute="value"
class="poll-options-min"}} class="poll-options-min"}}
</div> </div>
{{input-tip validation=minMaxValueValidation}}
<div class="input-group poll-number"> <div class="input-group poll-number">
@ -44,8 +44,8 @@
valueAttribute="value" valueAttribute="value"
min="1" min="1"
class="poll-options-step"}} class="poll-options-step"}}
{{input-tip validation=minStepValueValidation}}
</div> </div>
{{input-tip validation=minStepValueValidation}}
{{/if}} {{/if}}
{{/if}} {{/if}}
@ -53,8 +53,8 @@
<div class="input-group poll-textarea"> <div class="input-group poll-textarea">
<label>{{i18n 'poll.ui_builder.poll_options.label'}}</label> <label>{{i18n 'poll.ui_builder.poll_options.label'}}</label>
{{textarea value=pollOptions autocomplete="discourse"}} {{textarea value=pollOptions autocomplete="discourse"}}
{{input-tip validation=minNumOfOptionsValidation}}
</div> </div>
{{input-tip validation=minNumOfOptionsValidation}}
{{/unless}} {{/unless}}
<div class="input-group poll-checkbox"> <div class="input-group poll-checkbox">

View File

@ -1,3 +1,5 @@
$poll-margin: 10px;
.poll-ui-builder-form { .poll-ui-builder-form {
margin: 0; margin: 0;
@ -8,31 +10,29 @@
.tip { .tip {
display: block; display: block;
} margin-bottom: $poll-margin * 1.5;
margin-top: $poll-margin / 2;
.input-group-label { font-size: $font-down-1;
display: inline-block;
min-width: 55px;
} }
.poll-select { .poll-select {
line-height: 3em; margin-bottom: $poll-margin;
display: flex;
align-items: center;
}
.input-group-label {
min-width: 85px;
} }
.poll-number { .poll-number {
margin: 8px 0; margin: $poll-margin 0;
display: flex;
.tip { align-items: center;
margin-bottom: 6px;
}
input { input {
width: 70px; width: 70px;
} }
input + .tip {
margin-top: 4px;
}
} }
.poll-textarea textarea { .poll-textarea textarea {
@ -42,10 +42,10 @@
} }
.poll-select + .poll-textarea { .poll-select + .poll-textarea {
margin-top: 12px; margin-top: $poll-margin;
} }
.poll-checkbox { .poll-checkbox {
margin-top: 4px; margin-top: $poll-margin / 2;
} }
} }