UX: adds flexbox to topic user name fields on mobile

2018-07-09 11:45:00 +08:00 · 2018-07-09 11:45:00 +08:00 · d36c260dd0
parent 6d0732f7b4
commit d36c260dd0
1 changed files with 24 additions and 0 deletions
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@ -453,6 +453,30 @@ span.highlighted {
  font-size: $font-down-1;
  .names {
    line-height: $line-height-medium;
+    display: flex;
+    flex-wrap: wrap;
+    .full-name {
+      font-weight: bold;
+      order: 1;
+    }
+    .staff-notes-icon {
+      order: 2;
+      margin-left: 4px;
+    }
+    .poster-icon {
+      order: 2;
+    }
+    .username {
+      order: 3;
+      flex-basis: 100%;
+    }
+    .user-title {
+      order: 4;
+      flex-basis: 100%;
+    }
+    span {
+      margin-right: 4px;
+    }
  }
 }