Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats 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> </div>
{{/unless}} {{/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"> <div class="control-group format">
<label>{{i18n <label>{{i18n
"discourse_local_dates.create.form.format_title" "discourse_local_dates.create.form.format_title"
@ -169,25 +182,6 @@
{{/each}} {{/each}}
</ul> </ul>
</div> </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> </div>
{{/if}} {{/if}}
</div> </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 {
.recurrence-input { .recurrence-input {
width: 300px; width: 350px;
} }
} }
} }
@ -298,7 +298,7 @@ div[data-tippy-root] {
} }
.timezones-input { .timezones-input {
width: 99%; width: 350px;
} }
} }