UX: Updating the edit post title layout

This commit is contained in:
Kris 2017-12-04 15:29:02 -05:00 committed by GitHub
parent 995bf3c84e
commit 4af4081c39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 67 additions and 29 deletions

View File

@ -12,10 +12,10 @@
{{#if model.postStream.firstPostPresent}} {{#if model.postStream.firstPostPresent}}
{{#topic-title cancelled="cancelEditingTopic" save="finishedEditingTopic" model=model}} {{#topic-title cancelled="cancelEditingTopic" save="finishedEditingTopic" model=model}}
{{#if editingTopic}} {{#if editingTopic}}
<div class="edit-topic-title">
{{#if model.isPrivateMessage}} {{#if model.isPrivateMessage}}
<span class="private-message-glyph">{{d-icon "envelope"}}</span> <span class="private-message-glyph">{{d-icon "envelope"}}</span>
{{/if}} {{/if}}
{{text-field id="edit-title" value=buffered.title maxlength=siteSettings.max_topic_title_length autofocus="true"}} {{text-field id="edit-title" value=buffered.title maxlength=siteSettings.max_topic_title_length autofocus="true"}}
{{#if showCategoryChooser}} {{#if showCategoryChooser}}
{{category-chooser class="small" value=buffered.category_id}} {{category-chooser class="small" value=buffered.category_id}}
@ -26,7 +26,6 @@
{{/if}} {{/if}}
{{plugin-outlet name="edit-topic" args=(hash model=model buffered=buffered)}} {{plugin-outlet name="edit-topic" args=(hash model=model buffered=buffered)}}
<div class="edit-controls"> <div class="edit-controls">
{{d-button action="finishedEditingTopic" class="btn-primary btn-small submit-edit" icon="check"}} {{d-button action="finishedEditingTopic" class="btn-primary btn-small submit-edit" icon="check"}}
{{d-button action="cancelEditingTopic" class="btn-small cancel-edit" icon="times"}} {{d-button action="cancelEditingTopic" class="btn-small cancel-edit" icon="times"}}
@ -38,6 +37,8 @@
</a> </a>
{{/if}} {{/if}}
</div> </div>
</div>
{{else}} {{else}}
<h1> <h1>
{{#unless model.is_warning}} {{#unless model.is_warning}}

View File

@ -73,8 +73,46 @@
} }
a.edit-topic i { font-size: 0.8em; } a.edit-topic i { font-size: 0.8em; }
.edit-topic-title {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
max-width: 758px;
#edit-title {
flex: 1 1 auto;
}
.private-message-glyph {
margin: 5px 5px 0 0;
}
.category-chooser, .tag-chooser {
flex: 1 1 49%;
margin: 0 0 9px 0;
@media all and (max-width: 500px) {
flex: 1 1 100%;
}
}
.tag-chooser {
margin-left: 2%;
@media all and (max-width: 500px) {
margin-left: 0;
}
}
}
} }
.private_message {
#topic-title {
.edit-topic-title {
#edit-title {
width: calc(100% - 50px);
}
}
}
}
.topic-title-outlet { .topic-title-outlet {
clear: both; clear: both;
} }

View File

@ -36,7 +36,6 @@
} }
.select2-container { .select2-container {
border: 1px solid $primary-low;
min-width: 200px; min-width: 200px;
&.select2-dropdown-open { &.select2-dropdown-open {

View File

@ -53,7 +53,7 @@
.private-message-glyph { .private-message-glyph {
color: dark-light-choose($primary-low-mid, $secondary-high); color: dark-light-choose($primary-low-mid, $secondary-high);
float: left; float: left;
margin: 0 5px 0 0; margin-right: 5px;
} }
.private_message #topic-title .private-message-glyph { display: inline; } .private_message #topic-title .private-message-glyph { display: inline; }

View File

@ -406,7 +406,7 @@ disabled look for disabled choices in the results dropdown
margin: 0; margin: 0;
padding: 0 5px 0 0; padding: 0 5px 0 0;
position: relative; position: relative;
border: 1px solid #aaa; border: 1px solid $primary-medium;
cursor: text; cursor: text;
overflow: hidden; overflow: hidden;
} }