From 98c31f399afae3fd609593be4175dac69187c3c2 Mon Sep 17 00:00:00 2001
From: riking <rikingcoding@gmail.com>
Date: Fri, 13 Mar 2015 23:53:41 -0700
Subject: [PATCH] FEATURE: Style 'Feature Topic' dialog

---
 .../templates/modal/feature-topic.hbs         | 115 +++++++++++-------
 .../common/base/topic-admin-menu.scss         |  30 +++++
 2 files changed, 98 insertions(+), 47 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs b/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs
index b517a376241..2cc24a5c1c6 100644
--- a/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs
@@ -1,60 +1,81 @@
-<div class="modal-body">
+<div class="modal-body feature-topic">
   {{#if pinned_at}}
-    <div>
-      {{d-button action="unpin" icon="thumb-tack" label="topic.actions.unpin" class="btn-primary btn-small"}}
-      <p>{{{unPinMessage}}}</p>
-      {{#if pinned_globally}}
-        <p>{{i18n "topic.feature_topic.global_pin_note"}}</p>
-        <p>
-          {{#loading-spinner size="small" condition=loading}}
-            {{{i18n "topic.feature_topic.already_pinned_globally" count=pinnedGloballyCount}}}
-          {{/loading-spinner}}
-        </p>
-      {{else}}
+    <div class="feature-section">
+      <div class="button">
+        {{d-button action="unpin" icon="thumb-tack" label="topic.actions.unpin" class="btn-primary"}}
+      </div>
+      <div class="desc">
+        <p>{{{unPinMessage}}}</p>
+        {{#if pinned_globally}}
+          <p>{{i18n "topic.feature_topic.global_pin_note"}}</p>
+          <p>
+            {{#loading-spinner size="small" condition=loading}}
+              {{{i18n "topic.feature_topic.already_pinned_globally" count=pinnedGloballyCount}}}
+            {{/loading-spinner}}
+          </p>
+        {{else}}
+          <p>{{i18n "topic.feature_topic.pin_note"}}</p>
+          <p>
+            {{#loading-spinner size="small" condition=loading}}
+              {{{alreadyPinnedMessage}}}
+            {{/loading-spinner}}
+          </p>
+        {{/if}}
+      </div>
+    </div>
+  {{else}}
+    <div class="feature-section">
+      <div class="button">
+        {{d-button action="pin" icon="thumb-tack" label="topic.actions.pin" class="btn-primary"}}
+      </div>
+      <div class="desc">
+        <p>{{{pinMessage}}}</p>
         <p>{{i18n "topic.feature_topic.pin_note"}}</p>
         <p>
           {{#loading-spinner size="small" condition=loading}}
             {{{alreadyPinnedMessage}}}
           {{/loading-spinner}}
         </p>
-      {{/if}}
+      </div>
     </div>
-  {{else}}
-    <div>
-      {{d-button action="pin" icon="thumb-tack" label="topic.actions.pin" class="btn-primary btn-small"}}
-      <p>{{{pinMessage}}}</p>
-      <p>{{i18n "topic.feature_topic.pin_note"}}</p>
-      <p>
-        {{#loading-spinner size="small" condition=loading}}
-          {{{alreadyPinnedMessage}}}
-        {{/loading-spinner}}
-      </p>
-    </div>
-    <div>
-      {{d-button action="pinGlobally" icon="thumb-tack" label="topic.actions.pin_globally" class="btn-primary btn-small"}}
-      <p>{{i18n "topic.feature_topic.pin_globally"}}</p>
-      <p>{{i18n "topic.feature_topic.global_pin_note"}}</p>
-      <p>
-        {{#loading-spinner size="small" condition=loading}}
-          {{{i18n "topic.feature_topic.already_pinned_globally" count=pinnedGloballyCount}}}
-        {{/loading-spinner}}
-      </p>
+    <hr>
+    <div class="feature-section">
+      <div class="button">
+        {{d-button action="pinGlobally" icon="thumb-tack" label="topic.actions.pin_globally" class="btn-primary"}}
+      </div>
+      <div class="desc">
+        <p>{{i18n "topic.feature_topic.pin_globally"}}</p>
+        <p>{{i18n "topic.feature_topic.global_pin_note"}}</p>
+        <p>
+          {{#loading-spinner size="small" condition=loading}}
+            {{{i18n "topic.feature_topic.already_pinned_globally" count=pinnedGloballyCount}}}
+          {{/loading-spinner}}
+        </p>
+      </div>
     </div>
   {{/if}}
-  <div>
-    {{#if isBanner}}
-      {{d-button action="removeBanner" icon="bullhorn" label="topic.actions.remove_banner" class="btn-primary btn-small"}}
-      <p>{{i18n "topic.feature_topic.remove_banner"}}</p>
-    {{else}}
-      {{d-button action="makeBanner" icon="bullhorn" label="topic.actions.make_banner" class="btn-primary btn-small"}}
-      <p>{{i18n "topic.feature_topic.make_banner"}}</p>
-    {{/if}}
-    <p>{{i18n "topic.feature_topic.banner_note"}}</p>
-    <p>
-      {{#loading-spinner size="small" condition=loading}}
-        {{{i18n "topic.feature_topic.already_banner" count=bannerCount}}}
-      {{/loading-spinner}}
-    </p>
+  <hr>
+  <div class="feature-section">
+    <div class="button">
+      {{#if isBanner}}
+        {{d-button action="removeBanner" icon="bullhorn" label="topic.actions.remove_banner" class="btn-primary"}}
+      {{else}}
+        {{d-button action="makeBanner" icon="bullhorn" label="topic.actions.make_banner" class="btn-primary"}}
+      {{/if}}
+    </div>
+    <div class="desc">
+      {{#if isBanner}}
+        <p>{{i18n "topic.feature_topic.remove_banner"}}</p>
+      {{else}}
+        <p>{{i18n "topic.feature_topic.make_banner"}}</p>
+      {{/if}}
+      <p>{{i18n "topic.feature_topic.banner_note"}}</p>
+      <p>
+        {{#loading-spinner size="small" condition=loading}}
+          {{{i18n "topic.feature_topic.already_banner" count=bannerCount}}}
+        {{/loading-spinner}}
+      </p>
+    </div>
   </div>
 </div>
 <div class="modal-footer">
diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss
index 268ff3527a5..27d16c20263 100644
--- a/app/assets/stylesheets/common/base/topic-admin-menu.scss
+++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss
@@ -29,3 +29,33 @@
     }
   }
 }
+
+.modal-body.feature-topic .feature-section {
+  display: block;
+  .button {
+    width: 33%;
+    display: inline-block;
+  }
+  .desc {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 60%;
+    margin-left: 10px;
+    p {
+      margin: 10px 0;
+    }
+  }
+}
+.mobile-view .feature-topic .feature-section {
+  .button {
+    width: auto;
+    display: block;
+    margin: 0 10px;
+  }
+  .desc {
+    display: block;
+    clear: both;
+    max-width: 90%;
+    margin: 0 10px;
+  }
+}