UX: core adjustments and styles for the experimental sidebar (#17271)

app/assets/javascripts/discourse/app/routes/application.js

@@ -48,6 +48,9 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
     },
 
     toggleSidebar() {
+      // enables CSS transitions, but not on did-insert
+      document.querySelector("body").classList.add("sidebar-animate");
+
       this.controllerFor("application").toggleProperty("showSidebar");
     },
 

app/assets/stylesheets/common/base/discourse.scss

@@ -327,11 +327,10 @@ table {
 }
 
 .wrap {
-  @extend .clearfix;
+  max-width: var(--d-max-width);
   margin-right: auto;
   margin-left: auto;
   padding: 0 10px;
-
   .contents {
     position: relative;
   }

app/assets/stylesheets/common/base/sidebar.scss

@@ -1,3 +1,7 @@
+:root {
+  --d-sidebar-width: 240px;
+}
+
 .header-sidebar-toggle {
   margin-right: 1em;
   margin-left: -10px;
@@ -49,10 +53,16 @@
     text-transform: uppercase;
     font-size: 1em;
     font-weight: bold;
-    align-items: center;
+    align-items: stretch;
   }
 
   .sidebar-section-header-link {
+    @include ellipsis;
+    flex: 1 1 auto;
+    color: var(--primary);
+    font-size: var(--font-down-1);
+    padding: 0.25em 0.5em;
+
     &:visited {
       color: var(--primary);
     }
@@ -60,11 +70,6 @@
     &:hover {
       background: var(--primary-low);
     }
-
-    flex: 1 1 auto;
-    color: var(--primary);
-    font-size: var(--font-down-1);
-    padding: 0.25em 0.5em;
   }
 
   .sidebar-section-header-button {
@@ -142,17 +147,25 @@
   }
 
   .sidebar-section-header-caret {
+    flex: 0 0 auto;
     width: 1.5em;
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
+    align-items: center;
     border: none;
-    background-color: transparent;
+    background: transparent;
+    padding: 0.25em 0;
+    opacity: 0;
+    transition: opacity 0.25s;
 
     &:hover {
       opacity: 100;
     }
 
-    opacity: 0;
+    svg {
+      display: block;
+      flex: 0 0 auto;
+    }
 
     .d-icon {
       font-size: $font-down-1;

app/assets/stylesheets/common/base/topic.scss

@@ -32,6 +32,7 @@ $topic-progress-height: 42px;
     max-width: calc(
       100vw - 20px
     ); // 20px is the left + right padding on .wrap in common/base/discourse.scss
+    min-width: 0; // grid needs to be able to shrink
   }
 
   .timeline-container {

app/assets/stylesheets/common/base/user-badges.scss

@@ -208,7 +208,7 @@
     align-self: flex-start;
 
     @media screen and (min-width: 767px) {
-      max-width: calc(#{$large-width} / 2);
+      max-width: calc(var(--d-max-width) / 2);
       margin-right: 1.5em;
     }
 

app/assets/stylesheets/common/foundation/base.scss

@@ -116,16 +116,6 @@ pre code {
   }
 }
 
-// TODO figure out a clean place to put stuff like this
-.row:before,
-.row:after {
-  display: table;
-  content: "";
-}
-.row:after {
-  clear: both;
-}
-
 // Tables
 // --------------------------------------------------
 

app/assets/stylesheets/desktop/discourse.scss

@@ -3,6 +3,10 @@
 // BEWARE: changing these styles implies they take effect anywhere they are seen
 // throughout the Discourse application
 
+:root {
+  --d-max-width: 1110px;
+}
+
 // Base Elements
 body.widget-dragging {
   cursor: ns-resize;
@@ -187,8 +191,11 @@ input {
   box-sizing: border-box;
   width: 100%;
   display: grid;
-  grid-template-areas: "content";
+  // we can CSS transition the sidebar grid width change
-  grid-template-columns: minmax(0, 1fr);
+  // as long as we keep the column count consistent
+  // grid transitions are only supported in Firefox at the moment, but coming summer 2022 to Chrome
+  grid-template-areas: "sidebar content";
+  grid-template-columns: 0 minmax(0, 1fr);
   gap: 0;
 
   #main-outlet {
@@ -196,8 +203,24 @@ input {
   }
 }
 
-body.has-sidebar-page #main-outlet-wrapper {
+body.has-sidebar-page {
-  grid-template-areas: "sidebar content";
+  .wrap {
-  grid-template-columns: 240px 1fr;
+    // increase page max-width to accommodate sidebar width
-  gap: 0 2em;
+    max-width: calc(var(--d-sidebar-width) + var(--d-max-width));
+  }
+  .d-header .wrap {
+    padding-left: 1.75em;
+  }
+  #main-outlet-wrapper {
+    grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
+    gap: 0 2em;
+    padding-left: 0;
+  }
+}
+
+body.sidebar-animate {
+  .d-header .wrap,
+  #main-outlet-wrapper {
+    transition: ease-in-out 0.5s;
+  }
 }

app/assets/stylesheets/desktop/history.scss

@@ -2,7 +2,7 @@
 
 .modal.history-modal {
   .modal-inner-container {
-    max-width: $large-width;
+    max-width: var(--d-max-width);
   }
   .modal-body {
     height: 70vh;

app/assets/stylesheets/desktop/topic-post.scss

@@ -1,7 +1,3 @@
-.wrap {
-  max-width: $large-width;
-}
-
 .full-width {
   margin-left: 0;
 }

app/assets/stylesheets/desktop/topic.scss

@@ -120,6 +120,10 @@
   left: 0;
 }
 
+.onscreen-post .row {
+  display: flex; // children should never wrap
+}
+
 @media all and (min-width: 400px) {
   #topic-footer-main-buttons {
     max-width: 70%;