Merge branch 'main' into second-batch

UX: More logic for title columns (#87 )
FIX: remove overflow prop (#91 )
2025-03-28 13:16:27 -05:00 · 2025-03-28 13:13:28 -05:00 · 2025-03-28 13:12:42 -05:00 · 2025-03-28 13:12:42 -05:00 · 2025-03-28 13:11:53 -05:00 · 2025-03-28 13:11:21 -05:00
1 changed files with 68 additions and 42 deletions
@@ -29,11 +29,11 @@
  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);
@@ -47,8 +47,8 @@
  }
  @include breakpoint(extra-large) {
    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,
@@ -56,37 +56,37 @@
      grid-row: 2/3;
      grid-column: 1/-1;
    }
-    grid-template-columns: 25px repeat(7, 1fr);
+
+    grid-template-columns: 20px 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-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 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 likes-replies 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:
-        "category category category category category category category status"
-        ". . . . . . . ."
-        "activity activity activity activity activity activity activity likes-replies";
+        "category category category category status"
+        ". . . . ."
+        "activity . . . likes-replies";
      .topic-excerpt {
        display: none;
      }
@@ -400,7 +400,6 @@
 }

 // Assigned List
-
 .topic-list-item.assigned-list-item {
  td.main-link .link-top-line {
    grid-column: 1/-3;
@@ -408,13 +407,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;
@@ -447,19 +449,19 @@ body.user-messages-page .topic-list-item {
  }
  grid-template-areas:
    ". . . . . . ."
-    "activity activity activity activity activity likes-replies likes-replies";
+    "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";
    }
@@ -469,7 +471,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;
    }
@@ -478,10 +480,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;
@@ -493,19 +518,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 . . .";
  }
 }
Author	SHA1	Message	Date
Jordan Vidrine	efebb531c0	Merge branch 'main' into second-batch	2025-03-28 13:16:27 -05:00
Jordan Vidrine	a54dbdc59b	UX: More logic for title columns (#87 )	2025-03-28 13:13:28 -05:00
chapoi	0715bdc33a	FIX: remove overflow prop (#91 )	2025-03-28 13:12:42 -05:00
chapoi	34dfba0677	UX: fix minimised draft bg colour for composer (#89 ) Followup fix for #84	2025-03-28 13:12:42 -05:00
chapoi	701b69e0df	Composer styling on desktop (#84 )	2025-03-28 13:11:53 -05:00
chapoi	0fbe345c0c	FIX: remove overflow prop (#91 )	2025-03-28 13:11:21 -05:00
chapoi	7d48d0f936	UX: fix minimised draft bg colour for composer (#89 ) Followup fix for #84	2025-03-28 13:11:21 -05:00
Jordan Vidrine	8b6c056720	excerpt fixes	2025-03-28 13:11:21 -05:00
Jordan Vidrine	94c31086f9	title full width on mobile	2025-03-28 13:11:21 -05:00
Jordan Vidrine	1459099b8d	more	2025-03-28 13:11:21 -05:00
Martin Brennan	2983bac4a0	FIX: Messed up CSS grid on messages list (#88 ) This needs a better follow-up, but the messages topic list is currently busted. Removing the overridden topic-list-item grid for messages helps.	2025-03-28 13:11:21 -05:00
chapoi	cb72e6e091	Composer styling on desktop (#84 )	2025-03-28 13:11:21 -05:00
Jordan Vidrine	49f708db2c	PM fixes, mobile fixes	2025-03-28 13:11:21 -05:00
Jordan Vidrine	6364aa74e6	more logic for title columns	2025-03-28 13:11:21 -05:00