UX: refactor title editing CSS to improve layout (#30109)
This commit is contained in:
Kris
GitHub
parent
f75c43713b
commit
19f530a827
|
|
@ -52,58 +52,61 @@
|
|||
<div class="edit-topic-title">
|
||||
<PrivateMessageGlyph @shouldShow={{this.model.isPrivateMessage}} />
|
||||
|
||||
<PluginOutlet
|
||||
@name="edit-topic-title"
|
||||
@outletArgs={{hash model=this.model buffered=this.buffered}}
|
||||
>
|
||||
<TextField
|
||||
@id="edit-title"
|
||||
@value={{this.buffered.title}}
|
||||
@maxlength={{this.siteSettings.max_topic_title_length}}
|
||||
@autofocus="true"
|
||||
/>
|
||||
</PluginOutlet>
|
||||
|
||||
{{#if this.showCategoryChooser}}
|
||||
<div class="edit-title__wrapper">
|
||||
<PluginOutlet
|
||||
@name="edit-topic-category"
|
||||
@name="edit-topic-title"
|
||||
@outletArgs={{hash model=this.model buffered=this.buffered}}
|
||||
>
|
||||
<CategoryChooser
|
||||
@value={{this.buffered.category_id}}
|
||||
@onChange={{action "topicCategoryChanged"}}
|
||||
class="small"
|
||||
<TextField
|
||||
@id="edit-title"
|
||||
@value={{this.buffered.title}}
|
||||
@maxlength={{this.siteSettings.max_topic_title_length}}
|
||||
@autofocus="true"
|
||||
/>
|
||||
</PluginOutlet>
|
||||
</div>
|
||||
|
||||
{{#if this.showCategoryChooser}}
|
||||
<div class="edit-category__wrapper">
|
||||
<PluginOutlet
|
||||
@name="edit-topic-category"
|
||||
@outletArgs={{hash model=this.model buffered=this.buffered}}
|
||||
>
|
||||
<CategoryChooser
|
||||
@value={{this.buffered.category_id}}
|
||||
@onChange={{action "topicCategoryChanged"}}
|
||||
class="small"
|
||||
/>
|
||||
</PluginOutlet>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.canEditTags}}
|
||||
<PluginOutlet
|
||||
@name="edit-topic-tags"
|
||||
@outletArgs={{hash model=this.model buffered=this.buffered}}
|
||||
>
|
||||
<MiniTagChooser
|
||||
@value={{this.buffered.tags}}
|
||||
@onChange={{action "topicTagsChanged"}}
|
||||
@options={{hash
|
||||
filterable=true
|
||||
categoryId=this.buffered.category_id
|
||||
minimum=this.minimumRequiredTags
|
||||
filterPlaceholder="tagging.choose_for_topic"
|
||||
useHeaderFilter=true
|
||||
}}
|
||||
/>
|
||||
</PluginOutlet>
|
||||
|
||||
<div class="edit-tags__wrapper">
|
||||
<PluginOutlet
|
||||
@name="edit-topic-tags"
|
||||
@outletArgs={{hash model=this.model buffered=this.buffered}}
|
||||
>
|
||||
<MiniTagChooser
|
||||
@value={{this.buffered.tags}}
|
||||
@onChange={{action "topicTagsChanged"}}
|
||||
@options={{hash
|
||||
filterable=true
|
||||
categoryId=this.buffered.category_id
|
||||
minimum=this.minimumRequiredTags
|
||||
filterPlaceholder="tagging.choose_for_topic"
|
||||
useHeaderFilter=true
|
||||
}}
|
||||
/>
|
||||
</PluginOutlet>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<span>
|
||||
<PluginOutlet
|
||||
@name="edit-topic"
|
||||
@connectorTagName="div"
|
||||
@outletArgs={{hash model=this.model buffered=this.buffered}}
|
||||
/>
|
||||
</span>
|
||||
<PluginOutlet
|
||||
@name="edit-topic"
|
||||
@connectorTagName="div"
|
||||
@outletArgs={{hash model=this.model buffered=this.buffered}}
|
||||
/>
|
||||
|
||||
<div class="edit-controls">
|
||||
<DButton
|
||||
|
|
|
|||
|
|
@ -249,9 +249,6 @@
|
|||
.title-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
button {
|
||||
margin: 0 0.5em 0 0;
|
||||
}
|
||||
.topic-statuses {
|
||||
line-height: 1.2;
|
||||
.d-icon {
|
||||
|
|
@ -268,7 +265,9 @@
|
|||
.title-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 90%;
|
||||
@media screen and (min-width: 925px) {
|
||||
width: 90%; // topic title isn't full-width on wide screens
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -282,36 +281,66 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
gap: 0.5em;
|
||||
width: 100%;
|
||||
max-width: calc(
|
||||
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
|
||||
var(--topic-avatar-width)
|
||||
);
|
||||
#edit-title {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
.category-chooser,
|
||||
.mini-tag-chooser {
|
||||
flex: 1 1 35%;
|
||||
margin: 0 0 9px 0;
|
||||
@media all and (max-width: 500px) {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
.mini-tag-chooser {
|
||||
flex: 1 1 54%;
|
||||
margin: 0 0 9px 0;
|
||||
margin-left: 1%; // category at 40%, tag chooser at 58%
|
||||
@media all and (max-width: 500px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.edit-controls {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
.select-kit .category-row {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-title__wrapper {
|
||||
flex: 1 1 100%;
|
||||
#edit-title {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-category__wrapper {
|
||||
flex: 1 1 5%;
|
||||
@include breakpoint(tablet) {
|
||||
min-width: 0; // allows category name to shrink to fit narrow screens
|
||||
}
|
||||
.select-kit.combo-box.category-chooser {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-tags__wrapper {
|
||||
flex: 1 1 33%;
|
||||
@include breakpoint(tablet) {
|
||||
flex: 1 1 100%; // force full row on narrow screens
|
||||
}
|
||||
|
||||
.mini-tag-chooser {
|
||||
width: 100%;
|
||||
}
|
||||
.select-kit-header--filter {
|
||||
flex-wrap: nowrap; // forces the whole input to wrap if needed, rather than individual tags
|
||||
min-width: 0;
|
||||
@include breakpoint(tablet) {
|
||||
flex-wrap: wrap; // individual tags will need to wrap on narrow screens
|
||||
}
|
||||
button {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-select-filter {
|
||||
flex-shrink: 0;
|
||||
min-width: 2em; // always provide a minimal space for input
|
||||
}
|
||||
}
|
||||
|
||||
.edit-controls {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.private-message-glyph {
|
||||
|
|
|
|||
|
|
@ -18,11 +18,6 @@
|
|||
z-index: z("base");
|
||||
margin-bottom: 1em;
|
||||
|
||||
#edit-title,
|
||||
.category-chooser,
|
||||
.edit-controls {
|
||||
width: 500px;
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--font-up-4);
|
||||
line-height: var(--line-height-medium);
|
||||
|
|
|
|||
Loading…
Reference in New Issue