FIX: tweaking topic footer dropdowns (#6882)

- no description on mobile for notifications
- better reason text positioning

app/assets/javascripts/select-kit/components/notifications-button/notifications-button-row.js.es6

@@ -22,6 +22,10 @@ export default DropdownSelectBoxRoxComponent.extend({
 
   @computed("_start")
   description(_start) {
+    if (this.site && this.site.mobileView) {
+      return null;
+    }
+
     return Handlebars.escapeExpression(I18n.t(`${_start}.description`));
   },
 

app/assets/stylesheets/common/select-kit/pinned-button.scss

@@ -1,7 +1,7 @@
 #topic-footer-buttons {
   .pinned-button {
     min-width: auto;
-    margin: 10px 0 5px 0;
+    margin: 1em 0;
 
     &.is-hidden {
       display: none;
@@ -12,32 +12,19 @@
     }
 
     .reason {
+      display: inline;
       line-height: $line-height-medium;
-      margin: 0 0 0 10px;
     }
   }
 }
 
 .pinned-button {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   margin: 0;
   min-width: auto;
 
   .pinned-options {
-    display: -webkit-inline-box;
+    display: inline;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-  }
 
-  .pinned-options {
     .select-kit-body {
       min-width: unset;
       max-width: unset;

app/assets/stylesheets/common/select-kit/topic-notifications-button.scss

@@ -1,15 +1,15 @@
 #topic-footer-buttons {
   .topic-notifications-button {
     min-width: auto;
-    margin: 10px 0 15px 0;
+    margin: 1em 0;
 
     .btn {
       margin: 0;
     }
 
     .reason {
+      display: inline;
       line-height: $line-height-medium;
-      margin: 0 0 0 10px;
     }
   }
 }
@@ -19,20 +19,9 @@
 }
 
 .topic-notifications-button {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   margin: 0;
 
   .topic-notifications-options {
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
     display: inline-flex;
   }
 }

app/assets/stylesheets/mobile/topic-post.scss

@@ -245,8 +245,7 @@ a.reply-to-tab {
   }
 }
 
-#topic-footer-buttons p {
+#topic-footer-buttons .reason {
-  clear: both;
   /* this is to force the drop-down notification state description para below the button */
   margin: 0;
   color: dark-light-choose($primary-medium, $secondary-medium);

app/assets/stylesheets/mobile/topic.scss

@@ -36,15 +36,6 @@
   display: inline;
 }
 
-/* both blocks that appear under the standard post control buttons */
-.notification-options,
-.pinned-options {
-  float: left;
-  margin-top: 0;
-  padding-top: 1px;
-  clear: both;
-}
-
 .topic-status-info {
   padding-left: 10px;
   border-top: 1px solid $primary-low;