github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-21 18:12:32 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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
2 changed files with 15 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
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>

4
plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
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;
}
}