IMPROVE: mobile non-tiles meta

paviliondev · Sep 12, 2022 · 73df618 · 73df618
1 parent bfa1f60
commit 73df618
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 22 deletions.
diff --git a/javascripts/discourse/templates/mobile/list/topic-list-item.hbr b/javascripts/discourse/templates/mobile/list/topic-list-item.hbr
@@ -78,14 +78,18 @@
         {{raw "list/post-count-or-badges" topic=topic postBadgesEnabled=showTopicPostBadges}}
       </div>
       <div class="topic-item-stats clearfix">
-        {{#unless hideCategory}}
-          {{~raw-plugin-outlet name="topic-list-before-category"}}
-          <div class='category'>
-            {{category-link topic.category}}
-          </div>
-        {{/unless}}
-        {{discourse-tags topic mode="list"}}
-        <div class="pull-right">
+        <div class="category-and-tags">
+          {{#unless hideCategory}}
+            {{~raw-plugin-outlet name="topic-list-before-category"}}
+            <span class='category'>
+              {{category-link topic.category}}
+            </span>
+          {{/unless}}
+            <span class='tags'>
+              {{discourse-tags topic mode="list"}}
+            </span>
+        </div>
+        <div class="hang-right">
           <div class="keep-in-line">
             {{#if showActions}}
               {{raw "list/topic-actions" likeCount=likeCount topicActions=topicActions}}

diff --git a/mobile/mobile.scss b/mobile/mobile.scss
@@ -9,24 +9,35 @@
 
   .right {
     .topic-item-stats {
-      display:unset;
-    }
+      display:grid;
+      grid-template-columns: auto 150px;
+      grid-template-areas:
+      "catandtags actionandmeta";
+
+      .category-and-tags {
+        grid-area: catandtags;
+        display: flex-wrap;
+      }
 
-    .main-link {
-      margin-bottom: 8px;
-    }
-  }
+      .hang-right {
+        grid-area: actionandmeta;
+        align-self: end;
+        justify-self: right;
 
-  .pull-right {
-    .keep-in-line {
-      display: inline-block;
-      margin-top: 4px;
+        .keep-in-line {
+          display: inline-block;
 
-      .num {
-        text-align: right;
-        float: right;
+          .num {
+            text-align: right;
+            float: right;
+          }
+        }
       }
     }
+
+    .main-link {
+      margin-bottom: 8px;
+    }
   }
 
   .topic-details {
@@ -75,7 +86,6 @@
   .discourse-tags {
     float: initial;
     clear: initial;
-    margin-right: 30px;
     flex-wrap: wrap;
   }
 }