From 1459099b8dffff359ec3d7dbf3d3eea53f8e707f Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <jordan@jordanvidrine.com>
Date: Fri, 28 Mar 2025 08:25:49 -0500
Subject: [PATCH] more

---
 scss/topic-cards.scss | 154 +++++++++++++++++++++++-------------------
 1 file changed, 86 insertions(+), 68 deletions(-)

diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss
index e3cf989..5c04fea 100644
--- a/scss/topic-cards.scss
+++ b/scss/topic-cards.scss
@@ -29,58 +29,63 @@
   padding: 0.75em 1rem;
   border: 1px solid var(--primary-300);
   display: grid;
-  grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
+  grid-template-columns: 20px min-content min-content auto min-content;
   grid-template-rows: auto minmax(20px, auto);
   grid-template-areas:
-    ". . . . . . status"
-    "activity activity activity activity activity likes-replies category";
+    ". . . . status"
+    "activity . . likes-replies category";
   grid-column-gap: 12px;
   grid-row-gap: 8px;
   border-radius: var(--d-border-radius);
+  td.main-link .link-top-line {
+    grid-row: 1/2;
+    grid-column: 1/-1;
+    font-weight: 500;
+  }
+  &.--has-status-card td.main-link .link-top-line {
+    grid-column: 1/-2;
+  }
   @include breakpoint(extra-large) {
-    grid-template-columns: 20px repeat(6, 1fr);
     grid-template-areas:
-      ". . . . . . status"
-      "activity activity activity activity activity likes-replies category";
+      ". . . . status"
+      "activity . . likes-replies category";
   }
   @include breakpoint(mobile-extra-large) {
-    td.main-link .link-top-line {
-      grid-row: 2/3 !important;
-      grid-column: 1/-1 !important;
+    td.main-link .link-top-line,
+    &.--has-status-card td.main-link .link-top-line {
+      grid-row: 2/3;
+      grid-column: 1/-1;
     }
-    grid-template-columns: 25px repeat(7, 1fr);
+    grid-template-columns: 25px repeat(5, 1fr);
     grid-template-rows: auto auto auto;
     grid-template-areas:
-      "category category category category category category category status"
-      ". . . . . . . ."
-      "activity activity activity activity activity activity activity likes-replies";
+      "category category category category category status"
+      ". . . . . ."
+      "activity . . . . likes-replies";
     border: none;
     border-bottom: 1px solid var(--primary-200);
     box-shadow: none;
     border-radius: 0;
   }
   &.excerpt-expanded {
-    grid-template-columns: 20px auto repeat(5, 1fr) auto;
-    grid-template-rows: auto auto auto 30px;
+    grid-template-columns: 20px min-content min-content auto min-content;
+    grid-template-rows: auto auto auto;
     grid-template-areas:
-      ". . . . . . . status"
-      "activity activity activity activity activity activity activity activity"
-      "excerpt excerpt excerpt excerpt excerpt excerpt . ."
-      "excerpt excerpt excerpt excerpt excerpt excerpt likes-replies category";
+      ". . . . status"
+      "activity . . . ."
+      "excerpt excerpt excerpt likes-replies category";
     @include breakpoint(extra-large) {
       grid-template-areas:
-        ". . . . . . . status"
-        "activity activity activity activity activity activity activity activity"
-        "excerpt excerpt excerpt excerpt excerpt excerpt excerpt likes-replies"
-        "excerpt excerpt excerpt excerpt excerpt excerpt excerpt category";
+        ". . . . status"
+        "activity . . . ."
+        "excerpt excerpt excerpt likes-replies category";
     }
     @include breakpoint(mobile-extra-large) {
-      grid-template-columns: 25px auto repeat(6, 1fr);
       grid-template-rows: auto auto auto;
       grid-template-areas:
-        ". . . . . . . status"
-        "activity activity activity activity activity activity activity activity"
-        "category . . . . . . likes-replies";
+        "category category category category status"
+        ". . . . ."
+        "activity . . . likes-replies";
       .topic-excerpt {
         display: none;
       }
@@ -172,21 +177,6 @@
     --status-color: #e45735;
   }
 
-  // title
-  td.main-link .link-top-line {
-    font-size: var(--font-0);
-    grid-row: 1/2;
-    grid-column: 1/-1;
-    font-weight: 500;
-    display: flex;
-  }
-
-  &.--has-status-card {
-    td.main-link .link-top-line {
-      grid-column: 1/-2;
-    }
-  }
-
   .link-top-line .event-date {
     margin-left: 0.5em;
     font-size: var(--font-down-3);
@@ -218,7 +208,8 @@
 
   // excerpt
   .topic-excerpt {
-    grid-area: excerpt;
+    grid-row: 3 / -1;
+    grid-column: 1 / -2;
     margin: 0;
     font-size: var(--font-down-2);
   }
@@ -408,7 +399,6 @@
 }
 
 // Assigned List
-
 .topic-list-item.assigned-list-item {
   td.main-link .link-top-line {
     grid-column: 1/-3;
@@ -416,13 +406,16 @@
   grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
   grid-template-areas:
     ". . . . . status dropdown"
-    "activity activity activity activity likes-replies category dropdown";
+    "activity . . . likes-replies category dropdown";
   @include breakpoint(mobile-extra-large) {
+    td.main-link .link-top-line {
+      grid-column: 1/-2 !important;
+    }
     grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
     grid-template-areas:
-      ". . . . . . status dropdown"
-      "activity activity activity activity activity activity activity dropdown"
-      "category category category category category category likes-replies dropdown";
+      "category category . . . . status dropdown"
+      ". . . . . . . dropdown"
+      "activity . . . . . likes-replies dropdown";
   }
   .assign-topic-buttons {
     display: contents;
@@ -449,24 +442,25 @@ body.user-messages-page .topic-list-item {
   td.topic-status-data {
     display: none;
   }
-<<<<<<< HEAD
+  td.main-link .link-top-line {
+    grid-row: 1 / 2;
+    grid-column: 1 / -1;
+  }
   grid-template-areas:
     ". . . . . . ."
-    "activity activity activity activity activity likes-replies likes-replies";
-=======
->>>>>>> FIX: Messed up CSS grid on messages list (#88)
+    "activity . . . . likes-replies likes-replies";
   &.excerpt-expanded {
     grid-template-columns: 20px repeat(6, 1fr) auto;
     grid-template-rows: 20px auto auto 30px;
     grid-template-areas:
       ". . . . . . . ."
-      "activity activity activity activity activity activity activity activity"
+      "activity . . . . . . ."
       "excerpt excerpt excerpt excerpt excerpt excerpt . ."
       "excerpt excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
     @include breakpoint(extra-large) {
       grid-template-areas:
         ". . . . . . . ."
-        "activity activity activity activity activity activity activity activity"
+        "activity . . . . . . ."
         "excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies"
         "excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies";
     }
@@ -476,7 +470,7 @@ body.user-messages-page .topic-list-item {
     grid-template-rows: auto auto;
     grid-template-areas:
       ". . . . . . . ."
-      "activity activity activity activity activity activity activity activity";
+      "activity . . . . . . .";
     .topic-excerpt {
       display: none;
     }
@@ -485,10 +479,33 @@ body.user-messages-page .topic-list-item {
 
 // Bulk select
 
-.bulk-select-enabled .topic-list-item {
+.bulk-select-enabled .topic-list-body .topic-list-item {
+  td.topic-likes-replies-data {
+    display: none;
+  }
+  td.main-link .link-top-line,
+  &.--has-status-card td.main-link .link-top-line {
+    grid-column: 2/-1;
+    font-weight: 500;
+  }
+  .topic-excerpt {
+    grid-area: excerpt;
+    margin: 0;
+  }
+  &.excerpt-expanded {
+    grid-template-areas:
+      "bulk-select . . . status" "bulk-select activity . . ."
+      "bulk-select excerpt excerpt excerpt category";
+    @include breakpoint(mobile-extra-large) {
+      grid-template-areas:
+        "bulk-select category . . .  status"
+        "bulk-select . . . . ."
+        "bulk-select activity activity . . .";
+    }
+  }
   grid-template-areas:
-    "bulk-select activity activity activity . . status"
-    "bulk-select . . . likes-replies likes-replies category";
+    "bulk-select . . . status"
+    "bulk-select activity activity . category";
   .bulk-select {
     grid-area: bulk-select;
     padding: 0;
@@ -500,19 +517,20 @@ body.user-messages-page .topic-list-item {
     }
   }
   @include breakpoint(large) {
-    grid-template-columns: 20px repeat(6, 1fr);
-    grid-template-rows: 20px minmax(20px, auto);
     grid-template-areas:
-      "bulk-select activity activity activity activity activity status"
-      "bulk-select . . . . . ."
-      "bulk-select category . . . . likes-replies";
+      "bulk-select . . . status"
+      "bulk-select activity activity . category";
   }
   @include breakpoint(mobile-extra-large) {
-    grid-template-columns: 25px auto repeat(6, 1fr);
-    grid-template-rows: auto auto auto;
+    td.main-link .link-top-line,
+    &.--has-status-card td.main-link .link-top-line {
+      grid-column: 2/-1;
+      grid-row: 2;
+      font-weight: 500;
+    }
     grid-template-areas:
-      "bulk-select activity activity activity activity activity activity status"
-      "bulk-select . . . . . . ."
-      "bulk-select category . . . . .  likes-replies";
+      "bulk-select category . . .  status"
+      "bulk-select . . . . ."
+      "bulk-select activity activity . . .";
   }
 }