From 4af4081c394b1a9ddfd383f83dea614715ebb426 Mon Sep 17 00:00:00 2001 From: Kris Date: Mon, 4 Dec 2017 15:29:02 -0500 Subject: [PATCH] UX: Updating the edit post title layout --- .../javascripts/discourse/templates/topic.hbs | 43 ++++++++++--------- app/assets/stylesheets/common/base/topic.scss | 38 ++++++++++++++++ .../common/select-kit/legacy-combo-box.scss | 9 ++-- app/assets/stylesheets/desktop/topic.scss | 2 +- app/assets/stylesheets/mobile/topic.scss | 2 +- app/assets/stylesheets/vendor/select2.scss | 2 +- 6 files changed, 67 insertions(+), 29 deletions(-) diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs index f5958d118a3..952302a57db 100644 --- a/app/assets/javascripts/discourse/templates/topic.hbs +++ b/app/assets/javascripts/discourse/templates/topic.hbs @@ -12,32 +12,33 @@ {{#if model.postStream.firstPostPresent}} {{#topic-title cancelled="cancelEditingTopic" save="finishedEditingTopic" model=model}} {{#if editingTopic}} +
{{#if model.isPrivateMessage}} {{d-icon "envelope"}} {{/if}} - - {{text-field id="edit-title" value=buffered.title maxlength=siteSettings.max_topic_title_length autofocus="true"}} - {{#if showCategoryChooser}} - {{category-chooser class="small" value=buffered.category_id}} - {{/if}} - - {{#if canEditTags}} - {{tag-chooser tags=buffered.tags categoryId=buffered.category_id}} - {{/if}} - - {{plugin-outlet name="edit-topic" args=(hash model=model buffered=buffered)}} - -
- {{d-button action="finishedEditingTopic" class="btn-primary btn-small submit-edit" icon="check"}} - {{d-button action="cancelEditingTopic" class="btn-small cancel-edit" icon="times"}} - - {{#if canRemoveTopicFeaturedLink}} - - {{d-icon "times-circle"}} - {{featuredLinkDomain}} - + {{text-field id="edit-title" value=buffered.title maxlength=siteSettings.max_topic_title_length autofocus="true"}} + {{#if showCategoryChooser}} + {{category-chooser class="small" value=buffered.category_id}} {{/if}} + + {{#if canEditTags}} + {{tag-chooser tags=buffered.tags categoryId=buffered.category_id}} + {{/if}} + + {{plugin-outlet name="edit-topic" args=(hash model=model buffered=buffered)}} +
+ {{d-button action="finishedEditingTopic" class="btn-primary btn-small submit-edit" icon="check"}} + {{d-button action="cancelEditingTopic" class="btn-small cancel-edit" icon="times"}} + + {{#if canRemoveTopicFeaturedLink}} + + {{d-icon "times-circle"}} + {{featuredLinkDomain}} + + {{/if}} +
+ {{else}}

{{#unless model.is_warning}} diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss index 6e58fd34a54..9efde29e8d5 100644 --- a/app/assets/stylesheets/common/base/topic.scss +++ b/app/assets/stylesheets/common/base/topic.scss @@ -73,8 +73,46 @@ } 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 { clear: both; } diff --git a/app/assets/stylesheets/common/select-kit/legacy-combo-box.scss b/app/assets/stylesheets/common/select-kit/legacy-combo-box.scss index 234ee0cc4e9..2800f68db29 100644 --- a/app/assets/stylesheets/common/select-kit/legacy-combo-box.scss +++ b/app/assets/stylesheets/common/select-kit/legacy-combo-box.scss @@ -1,8 +1,8 @@ // DO NOT MODIFY // TODO: remove when all select2 instances are gone .select2-results .select2-highlighted { - background: $highlight-medium; - color: $primary; + background: $highlight-medium; + color: $primary; } .select2-drop { @@ -36,9 +36,8 @@ } .select2-container { - border: 1px solid $primary-low; min-width: 200px; - + &.select2-dropdown-open { border: 0; margin-bottom: 2px; @@ -82,4 +81,4 @@ .select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-selection-limit { background: $secondary; color: $primary; -} +} \ No newline at end of file diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss index e19a307347d..2944d94e778 100644 --- a/app/assets/stylesheets/desktop/topic.scss +++ b/app/assets/stylesheets/desktop/topic.scss @@ -53,7 +53,7 @@ .private-message-glyph { color: dark-light-choose($primary-low-mid, $secondary-high); float: left; - margin: 0 5px 0 0; + margin-right: 5px; } .private_message #topic-title .private-message-glyph { display: inline; } diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss index c14217df772..2b2f6583f55 100644 --- a/app/assets/stylesheets/mobile/topic.scss +++ b/app/assets/stylesheets/mobile/topic.scss @@ -221,4 +221,4 @@ sup sup, sub sup, sup sub, sub sub { top: 0; } .btn.pull-right { margin-right: 0; } -} +} \ No newline at end of file diff --git a/app/assets/stylesheets/vendor/select2.scss b/app/assets/stylesheets/vendor/select2.scss index 2d8cc87788c..44064dfc8a8 100644 --- a/app/assets/stylesheets/vendor/select2.scss +++ b/app/assets/stylesheets/vendor/select2.scss @@ -406,7 +406,7 @@ disabled look for disabled choices in the results dropdown margin: 0; padding: 0 5px 0 0; position: relative; - border: 1px solid #aaa; + border: 1px solid $primary-medium; cursor: text; overflow: hidden; }