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

UX: Improve layout of topic pin admin modal

This commit is contained in:
Kris 2020-06-08 23:58:53 -04:00
parent 9b050f2822
commit d09bf892c7
2 changed files with 46 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/assets/javascripts/discourse/app/templates/modal/feature-topic.hbs
View File

@ -53,15 +53,17 @@
{{else}} {{else}}
<p class="with-validation"> <p class="with-validation">
{{html-safe pinMessage}} {{html-safe pinMessage}}
{{d-icon "far-clock"}} <span>
{{future-date-input {{d-icon "far-clock"}}
class="pin-until" {{future-date-input
includeFarFuture=true class="pin-until"
clearable=true includeFarFuture=true
input=model.pinnedInCategoryUntil clearable=true
onChangeInput=(action (mut model.pinnedInCategoryUntil)) input=model.pinnedInCategoryUntil
}} onChangeInput=(action (mut model.pinnedInCategoryUntil))
{{popup-input-tip validation=pinInCategoryValidation shownAt=pinInCategoryTipShownAt}} }}
{{popup-input-tip validation=pinInCategoryValidation shownAt=pinInCategoryTipShownAt}}
</span>
</p> </p>
{{/if}} {{/if}}
<p> <p>
@ -100,15 +102,17 @@
{{else}} {{else}}
<p class="with-validation"> <p class="with-validation">
{{i18n "topic.feature_topic.pin_globally"}} {{i18n "topic.feature_topic.pin_globally"}}
{{d-icon "far-clock"}} <span>
{{future-date-input {{d-icon "far-clock"}}
class="pin-until" {{future-date-input
includeFarFuture=true class="pin-until"
clearable=true includeFarFuture=true
input=model.pinnedGloballyUntil clearable=true
onChangeInput=(action (mut model.pinnedGloballyUntil)) input=model.pinnedGloballyUntil
}} onChangeInput=(action (mut model.pinnedGloballyUntil))
{{popup-input-tip validation=pinGloballyValidation shownAt=pinGloballyTipShownAt}} }}
{{popup-input-tip validation=pinGloballyValidation shownAt=pinGloballyTipShownAt}}
</span>
</p> </p>
{{/if}} {{/if}}
<p> <p>

34
app/assets/stylesheets/common/base/topic-admin-menu.scss
View File

@ -25,13 +25,14 @@
} }
.modal-body.feature-topic { .modal-body.feature-topic {
max-height: 500px; max-height: 70vh !important ;
padding: 0 1em;
input.date-picker { input.date-picker {
margin: 0; margin: 0;
} }
.feature-section { .feature-section {
display: block; display: block;
padding: 1em 0; padding: 1.25em 0;
&:not(:last-of-type) { &:not(:last-of-type) {
border-bottom: 1px solid $primary-low; border-bottom: 1px solid $primary-low;
} }
@ -46,10 +47,20 @@
} }
p { p {
margin: 10px 0 0; margin: 10px 0 0;
max-width: 31em;
} }
} }
.with-validation { .with-validation {
position: relative; position: relative;
> span {
display: flex;
align-items: flex-start;
> .d-icon {
padding-top: 0.75em;
margin-right: 0.5em;
}
}
} }
} }
} }
@ -61,18 +72,16 @@
} }
.desktop-view .feature-topic-modal { .desktop-view .feature-topic-modal {
.feature-topic {
overflow: visible;
}
.modal-inner-container {
min-width: 700px;
}
.pin-until { .pin-until {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.modal-inner-container {
overflow: visible;
}
.modal-footer {
background: $secondary;
}
} }
.mobile-view .feature-topic .feature-section { .mobile-view .feature-topic .feature-section {
@ -82,6 +91,11 @@
max-width: 90%; max-width: 90%;
margin: 0; margin: 0;
} }
.badge-wrapper {
white-space: nowrap;
overflow: hidden;
max-width: 19em;
}
} }
// Select posts // Select posts