UX: Refactor topic metadata's many floats into flexbox (#6018)

app/assets/javascripts/discourse/widgets/post.js.es6

@@ -220,13 +220,11 @@ createWidget("post-meta-data", {
   },
 
   html(attrs) {
-    let result = [];
+
-    if (this.settings.displayPosterName) {
+    let postInfo = [];
-      result.push(this.attach("poster-name", attrs));
-    }
 
     if (attrs.isWhisper) {
-      result.push(
+      postInfo.push(
         h(
           "div.post-info.whisper",
           {
@@ -252,29 +250,29 @@ createWidget("post-meta-data", {
       attributes["class"] += " last-wiki-edit";
     }
 
-    result.push(h("div.post-info.post-date", h("a", { attributes }, date)));
-
     if (attrs.via_email) {
-      result.push(this.attach("post-email-indicator", attrs));
+      postInfo.push(this.attach("post-email-indicator", attrs));
     }
 
     if (attrs.locked) {
-      result.push(this.attach("post-locked-indicator", attrs));
+      postInfo.push(this.attach("post-locked-indicator", attrs));
     }
 
     if (attrs.version > 1 || attrs.wiki) {
-      result.push(this.attach("post-edits-indicator", attrs));
+      postInfo.push(this.attach("post-edits-indicator", attrs));
     }
 
     if (attrs.multiSelect) {
-      result.push(this.attach("select-post", attrs));
+      postInfo.push(this.attach("select-post", attrs));
     }
 
     if (showReplyTab(attrs, this.siteSettings)) {
-      result.push(this.attach("reply-to-tab", attrs));
+      postInfo.push(this.attach("reply-to-tab", attrs));
     }
 
-    result.push(
+    postInfo.push(h("div.post-info.post-date", h("a", { attributes }, date)));
+
+    postInfo.push(
       h(
         "div.read-state",
         {
@@ -287,6 +285,12 @@ createWidget("post-meta-data", {
       )
     );
 
+    let result = [];
+    if (this.settings.displayPosterName) {
+      result.push(this.attach("poster-name", attrs));
+    }
+    result.push(h('div.post-infos', postInfo));
+
     return result;
   }
 });

app/assets/stylesheets/common/base/topic-post.scss

@@ -15,8 +15,6 @@
 }
 
 .names {
-  float: left;
-
   span.first {
     font-weight: bold;
   }
@@ -150,6 +148,20 @@
   }
 }
 
+.topic-meta-data {
+  display: flex;
+  align-items: flex-start;
+
+  .names {
+    margin-right: auto;
+  }
+
+  .post-infos {
+    display: flex;
+    align-items: center;
+  }
+}
+
 // we use aside to hold expandable quotes (versus, say, static blockquotes)
 aside.quote {
   margin-top: 1em;
@@ -423,7 +435,6 @@ aside.quote {
   &.via-email,
   &.whisper,
   &.post-locked {
-    margin-right: 5px;
     .d-icon {
       font-size: $font-0;
     }
@@ -682,6 +693,16 @@ a.mention-group {
 
 /* below standard tablet portrait ----------- */
 
+.reply-to-tab {
+  display: flex;
+  align-items: center;
+  margin-right: 2em;
+
+  img {
+    margin: 0 0.25em;
+  }
+}
+
 @media all and (max-width: 767px) {
   .reply-to-tab {
     span {

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

@@ -26,8 +26,6 @@ h1 .topic-statuses .topic-status i {
   }
   .reply-to-tab {
     z-index: z("base") + 1;
-    float: right;
-    margin: -2px 25px 0 0;
     color: dark-light-choose($primary-medium, $secondary-medium);
   }
   .actions .fade-out {
@@ -902,6 +900,13 @@ a.attachment:before {
 }
 
 .topic-meta-data {
+  align-items: center;
+
+  .names {
+    display: flex;
+    align-items: center;
+  }
+
   &:after {
     visibility: hidden;
     display: block;
@@ -910,9 +915,10 @@ a.attachment:before {
     clear: both;
     height: 0;
   }
+
   .post-info {
-    display: inline-block;
+    margin-left: 0.5em;
-    float: right;
+
     a {
       color: dark-light-choose($primary-medium, $secondary-medium);
     }
@@ -940,6 +946,7 @@ span.highlighted {
 
 .read-state {
   color: $tertiary-medium;
+  // We use absolute positioning here because we want it to display in the padding
   position: absolute;
   right: 0;
   top: 2em;

app/assets/stylesheets/desktop/topic.scss

@@ -14,10 +14,6 @@
   margin: 20px 0;
 }
 
-.edits {
-  margin-right: 5px;
-}
-
 #topic-title {
   z-index: z("base");
   padding-top: 14px;

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

@@ -155,10 +155,8 @@ span.badge-posts {
 
 a.reply-to-tab {
   z-index: z("base") + 1;
-  right: 80px;
   color: dark-light-choose($primary-medium, $secondary-medium);
-  margin: -3px 10px 0 0;
+  margin-right: 0.5em;
-  float: right;
 }
 
 .topic-post .boxed .contents {
@@ -455,15 +453,6 @@ span.highlighted {
   font-size: $font-down-1;
   .names {
     line-height: $line-height-medium;
-    .poster-icon {
-      float: right;
-    }
-  }
-  .post-info {
-    float: right;
-    .edits {
-      margin-right: 5px;
-    }
   }
 }
 

app/assets/stylesheets/mobile/topic.scss

@@ -12,10 +12,6 @@
   display: inline-block;
 }
 
-.edits {
-  margin-right: 5px;
-}
-
 #topic-title {
   //margin-bottom: 20px;
   margin: 0 60px 10px 0;