UX: Make lists fill width of viewport when sidebar is hidden (#41)

discourse · Dec 22, 2023 · 6ae7437 · 6ae7437
1 parent 3179539
commit 6ae7437
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/common/common.scss b/common/common.scss
@@ -3,13 +3,14 @@ html:has(body.kanban-active) {
 }
 
 .discourse-kanban {
+  position: relative;
   height: 100%;
   --d-sidebar-gap: 2em;
   @media screen and (max-width: 1000px) {
     --d-sidebar-gap: 1em;
   }
 
-  &.fullscreen {
+  &.kanban-fullscreen {
     position: fixed;
     top: 0;
     bottom: 0;
@@ -34,6 +35,25 @@ html:has(body.kanban-active) {
       display: flex;
     }
   }
+
+  // No sidebar. Make container fill the viewport width and center lists
+  body:not(.has-sidebar-page) &:not(.kanban-fullscreen) {
+    width: 100vw;
+    left: calc(-50vw + 50%);
+
+    .discourse-kanban-container {
+      padding: 0 10px;
+    }
+
+    .discourse-kanban-list {
+      &:first-of-type {
+        margin-left: auto;
+      }
+      &:last-of-type {
+        margin-right: auto;
+      }
+    }
+  }
 }
 
 .discourse-kanban-container {
@@ -187,10 +207,7 @@ html:has(body.kanban-active) {
 }
 
 body.kanban-active {
-  overflow: hidden;
-
   #main-outlet {
-    overflow: hidden;
     height: calc(100dvh - var(--header-offset) - 2.5em);
   }
 

diff --git a/javascripts/discourse/components/kanban/wrapper.gjs b/javascripts/discourse/components/kanban/wrapper.gjs
@@ -36,7 +36,7 @@ export default class Kanban extends Component {
       <div
         class={{concatClass
           "discourse-kanban"
-          (if this.kanbanManager.fullscreen "fullscreen" "inline")
+          (if this.kanbanManager.fullscreen "kanban-fullscreen" "kanban-inline")
         }}
       >
         {{#if this.kanbanManager.fullscreen}}
@@ -67,8 +67,6 @@ export default class Kanban extends Component {
               />
             </div>
           {{/each}}
-
-          <div class="kanban-spacer"></div>
         </div>
 
         {{bodyClass "kanban-active"}}