Skip to content
Permalink
Browse files

UX: Improve layout of poll builder modal

  • Loading branch information...
pmusaraj committed Aug 7, 2019
1 parent 24877a7 commit 78500fb77017ae1defd9d1a77f26164493847624
@@ -19,13 +19,13 @@

{{#if showMinMax}}
<div class="input-group poll-number">
{{input-tip validation=minMaxValueValidation}}
<label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.min'}}</label>
{{input type='number'
value=pollMin
valueAttribute="value"
class="poll-options-min"}}
</div>
{{input-tip validation=minMaxValueValidation}}


<div class="input-group poll-number">
@@ -44,17 +44,17 @@
valueAttribute="value"
min="1"
class="poll-options-step"}}
{{input-tip validation=minStepValueValidation}}
</div>
{{input-tip validation=minStepValueValidation}}
{{/if}}
{{/if}}

{{#unless isNumber}}
<div class="input-group poll-textarea">
<label>{{i18n 'poll.ui_builder.poll_options.label'}}</label>
{{textarea value=pollOptions autocomplete="discourse"}}
{{input-tip validation=minNumOfOptionsValidation}}
</div>
{{input-tip validation=minNumOfOptionsValidation}}
{{/unless}}

<div class="input-group poll-checkbox">
@@ -1,3 +1,5 @@
$poll-margin: 10px;

.poll-ui-builder-form {
margin: 0;

@@ -8,31 +10,29 @@

.tip {
display: block;
margin-bottom: $poll-margin * 1.5;
margin-top: $poll-margin / 2;
font-size: $font-down-1;
}

.input-group-label {
display: inline-block;
min-width: 55px;
.poll-select {
margin-bottom: $poll-margin;
display: flex;
align-items: center;
}

.poll-select {
line-height: 3em;
.input-group-label {
min-width: 85px;
}

.poll-number {
margin: 8px 0;

.tip {
margin-bottom: 6px;
}
margin: $poll-margin 0;
display: flex;
align-items: center;

input {
width: 70px;
}

input + .tip {
margin-top: 4px;
}
}

.poll-textarea textarea {
@@ -42,10 +42,10 @@
}

.poll-select + .poll-textarea {
margin-top: 12px;
margin-top: $poll-margin;
}

.poll-checkbox {
margin-top: 4px;
margin-top: $poll-margin / 2;
}
}

1 comment on commit 78500fb

@discoursereviewbot

This comment has been minimized.

Copy link

commented on 78500fb Aug 7, 2019

Penar Musaraj posted:

This is better explained with a before / after screenshot:

image|690x425,100%

Please sign in to comment.
You can’t perform that action at this time.