UX: Various improvements to UI (#36)

.discourse-compatibility

@@ -1,3 +1,4 @@
+< 3.1.0.beta2-dev: c78a3998cdafabde7b9fa2e99ddab8ad2449c994
 3.1.999: 62b3115262fe50b523c0b1b4026be75e2b25f64a
 3.1.0.beta1: 244c2c47e0131bbb9f5be26990010e8ce37471f3
 2.7.0.beta3: 16918e67b2b16cb91a2dee1caea1bc96c317a5d0

.eslintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/eslint-theme");

.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/prettier");

.streerc

@@ -0,0 +1,2 @@
+--print-width=100
+--plugins=plugin/trailing_comma,plugin/disable_auto_ternary

.template-lintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/template-lint");

about.json

@@ -9,5 +9,7 @@
   "maximum_discourse_version": null,
   "assets": {},
   "color_schemes": {},
-  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
+  "modifiers": {
+    "svg_icons": ["user-minus"]
+  }
 }

common/common.scss

@@ -1,6 +1,13 @@
+html:has(body.kanban-active) {
+  overscroll-behavior: none;
+}
+
 .discourse-kanban {
-  position: relative;
-  display: flex;
+  height: 100%;
+  --d-sidebar-gap: 2em;
+  @media screen and (max-width: 1000px) {
+    --d-sidebar-gap: 1em;
+  }
 
   &.fullscreen {
     position: fixed;
@@ -9,92 +16,51 @@
     left: 0;
     right: 0;
     z-index: z("fullscreen");
-    background-color: var(--secondary, $secondary);
+    background-color: var(--secondary);
     width: 100%;
     padding: 0;
     margin: 0;
     display: flex;
+    justify-content: center;
 
     .discourse-kanban-container {
       height: auto;
-      padding: 10px 0;
+      padding: 10px !important;
       max-height: 100%;
     }
+
+    .fullscreen-close-wrapper {
+      padding: 10px 0 10px 10px;
+      display: flex;
+    }
   }
 }
 
 .discourse-kanban-container {
-  width: 100%;
-  height: 70vh;
-  margin-left: 40px;
+  height: 100%;
   display: flex;
-  overflow-x: scroll;
-  padding: 10px 0 5px 0;
-
-  &:after {
-    content: "";
-    position: absolute;
-    right: 0px;
-    width: 10px;
-    height: 100%;
-    background: linear-gradient
-      (to right, transparent, var(--secondary, $secondary));
-  }
-
-  .kanban-spacer {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    width: 40px;
-    flex-shrink: 0;
-    padding: 0;
-    margin: 0;
-    position: absolute;
-    left: -3px;
-
-    button {
-      margin-bottom: 4px;
-    }
-  }
+  overflow-y: scroll;
+  gap: 0 10px;
 
   .discourse-kanban-list {
-    position: relative;
-    overflow: hidden;
-    background: var(--primary-low, $primary-low);
-
-    &.accept-drag {
-      background: var(--primary-medium, $primary-medium);
-    }
+    background: var(--primary-100);
+    border: 1px solid var(--primary-low);
 
-    &:after {
-      content: "";
-      position: absolute;
-      bottom: 0px;
-      width: 100%;
-      height: 10px;
-      background: linear-gradient(
-        to bottom,
-        transparent,
-        var(--primary-low, $primary-low)
-      );
+    &.kanban-empty-state {
+      padding: 2em 1em;
+      text-align: center;
+      justify-content: center;
+      gap: 1em;
+      height: 6em;
     }
 
-    .list-bottom {
-      height: 10px;
+    &.accept-drag {
+      background: var(--primary-300);
     }
 
-    width: MAX(
-      calc((100% - 8px - (8px * (#{$num-columns} - 1))) / #{$num-columns}),
-      calc(
-        (#{$large-width} - 400px - (8px * (#{$num-columns} - 1))) / #{$num-columns}
-      )
-    );
+    width: 350px;
     flex-shrink: 0;
-    margin: 0 4px;
-    padding: 10px 0px 0px 0px;
-    border-radius: 3px;
-    display: flex;
-    flex-direction: column;
+    padding-top: 10px;
 
     .list-title {
       font-weight: bold;
@@ -105,52 +71,90 @@
     .topics {
       overflow-y: scroll;
       padding: 0 8px;
-      height: 100%;
     }
 
     .topic-card {
       display: block;
-      color: var(--primary-medium, $primary-medium);
-      cursor: pointer;
-
-      &.topic-unseen {
-        color: var(--primary-medium, $primary-medium);
-      }
+      color: var(--primary);
 
       margin: 10px 0;
 
-      background: var(--secondary, $secondary);
-      border-radius: 3px;
-      padding: 5px;
-      box-shadow: 0 1px 0 var(--primary-medium, $primary-medium);
+      background: var(--secondary);
+      padding: 10px;
+      box-shadow: var(--primary-low) 0px 3px 6px;
+      border: 1px solid var(--primary-low);
 
       &.dragging {
-        background-color: var(--tertiary-low, $tertiary-low);
+        background-color: var(--tertiary-low);
       }
 
       .card-row {
         display: flex;
-        align-content: flex-start;
+        align-items: baseline;
 
         * {
           flex-grow: 0;
         }
 
-        .posters,
+        &__user-details-row {
+          min-height: 24px;
+          align-items: center;
+        }
+
+        &__topic-details {
+          .relative-date {
+            font-size: $font-down-2;
+          }
+        }
+
+        .last-post-by,
         .topic-title {
           flex-grow: 1;
           word-wrap: break-word;
           overflow: hidden;
         }
 
-        .relative-date {
+        .topic-assignments {
+          text-align: right;
+        }
+
+        .topic-assignments-with-avatars {
+          text-align: right;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+
+          .d-icon {
+            margin-right: 0.25em;
+            font-size: $font-down-2;
+            color: var(--primary-medium);
+          }
+        }
+
+        .last-post-by {
+          text-align: left;
           font-size: $font-down-2;
+          color: var(--primary-medium);
+        }
+
+        .tags {
+          font-size: var(--font-down-1);
+        }
+
+        .category {
+          flex-grow: 1;
         }
 
         .assigned-to {
           margin-top: auto;
-          color: var(--primary-medium, $primary-medium);
-          font-size: $font-down-2;
+          margin-bottom: auto;
+
+          font-size: var(--font-down-1);
+          vertical-align: baseline;
+
+          a {
+            color: var(--primary-medium);
+          }
         }
       }
     }
@@ -159,6 +163,7 @@
       width: 100%;
       text-align: center;
       margin-top: 50px;
+      min-height: 100px;
     }
   }
 }
@@ -180,3 +185,40 @@
     width: 100%;
   }
 }
+
+body.kanban-active {
+  overflow: hidden;
+
+  #main-outlet {
+    overflow: hidden;
+    height: calc(100dvh - var(--header-offset) - 2.5em);
+  }
+
+  .list-container .row:nth-child(2),
+  .full-width {
+    height: 100%;
+  }
+
+  #list-area {
+    height: 100%;
+  }
+}
+
+ul.kanban-controls {
+  padding: 0.5rem;
+  margin: 0;
+  list-style: none;
+
+  li .btn {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  li {
+    margin-bottom: 2px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}