FIX: Better UX for timezones selector in date modal (#20047)

When expanding the "Advanced mode" of the date modal, the Timezones
picker was at the bottom of the modal, and expanding it would often
overflow the viewport. This PR moves the elment higher up, therefore
avoiding the overflow.

There's a small width change as well, for better consistency.
This commit is contained in:
Penar Musaraj 2023-01-27 16:26:32 -05:00 committed by GitHub
parent 7441864474
commit c43068720f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 21 deletions

View File

@ -133,6 +133,19 @@
</div>
{{/unless}}
<div class="control-group timezones">
<label>{{i18n
"discourse_local_dates.create.form.timezones_title"
}}</label>
<p>{{i18n
"discourse_local_dates.create.form.timezones_description"
}}</p>
<div class="controls">
<MultiSelect @valueProperty={{null}} @nameProperty={{null}} @class="timezones-input" @content={{this.allTimezones}}
@value={{this.timezones}} @options={{hash allowAny=false maximum=5}} />
</div>
</div>
<div class="control-group format">
<label>{{i18n
"discourse_local_dates.create.form.format_title"
@ -169,25 +182,6 @@
{{/each}}
</ul>
</div>
<div class="control-group timezones">
<label>{{i18n
"discourse_local_dates.create.form.timezones_title"
}}</label>
<p>{{i18n
"discourse_local_dates.create.form.timezones_description"
}}</p>
<div class="controls">
<MultiSelect
@valueProperty={{null}}
@nameProperty={{null}}
@class="timezones-input"
@content={{this.allTimezones}}
@value={{this.timezones}}
@options={{hash allowAny=false maximum=5}}
/>
</div>
</div>
</div>
{{/if}}
</div>

View File

@ -265,7 +265,7 @@ div[data-tippy-root] {
.recurrence {
.recurrence-input {
width: 300px;
width: 350px;
}
}
}
@ -298,7 +298,7 @@ div[data-tippy-root] {
}
.timezones-input {
width: 99%;
width: 350px;
}
}