UX: Misc desktop edits (#15)

javascripts/discourse/api-initializers/next-gen.gjs

@@ -1,19 +1,6 @@
-import Component from "@glimmer/component";
 import { apiInitializer } from "discourse/lib/api";
+import ExperimentalScreen from "../components/experimental-screen";
 
 export default apiInitializer("1.8.0", (api) => {
-  api.renderInOutlet(
+  api.renderInOutlet("above-main-container", ExperimentalScreen);
-    "above-main-container",
-    class ExperimentalScreen extends Component {
-      <template>
-        <ul class="experimental-screen">
-          <li class="experimental-screen__top-left"></li>
-          <li class="experimental-screen__top-right"></li>
-          <li class="experimental-screen__bottom-left"></li>
-          <li class="experimental-screen__bottom-right"></li>
-          <li class="experimental-screen__bottom-bar"></li>
-        </ul>
-      </template>
-    }
-  );
 });

javascripts/discourse/components/experimental-screen.gjs

@@ -0,0 +1,67 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import { cancel, throttle } from "@ember/runloop";
+import { htmlSafe } from "@ember/template";
+import { bind } from "discourse/lib/decorators";
+
+export default class ExperimentalScreen extends Component {
+  @tracked left = 0;
+  @tracked right = 0;
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    cancel(this._throttledCalculateDistanceHandler);
+  }
+
+  getDistance(element) {
+    const rect = element.getBoundingClientRect();
+    return rect;
+  }
+
+  @bind
+  calculateDistance() {
+    this._throttledCalculateDistanceHandler = throttle(
+      this,
+      this._throttledCalculateDistance,
+      50
+    );
+  }
+
+  _throttledCalculateDistance() {
+    const element = document.getElementById("main-outlet");
+
+    if (element) {
+      const distance = this.getDistance(element);
+      this.left = distance.left;
+      this.right = distance.right;
+    }
+  }
+
+  get distanceStyles() {
+    return htmlSafe(
+      `--left-distance: ${this.left}px; --right-distance: ${this.right}px;`
+    );
+  }
+
+  @action
+  onInsert() {
+    this.calculateDistance();
+    window.addEventListener("resize", this.calculateDistance);
+  }
+
+  <template>
+    <ul
+      class="experimental-screen"
+      {{didInsert this.onInsert}}
+      style={{this.distanceStyles}}
+    >
+      <li class="experimental-screen__top-left"></li>
+      <li class="experimental-screen__top-right"></li>
+      <li class="experimental-screen__bottom-left"></li>
+      <li class="experimental-screen__bottom-right"></li>
+      <li class="experimental-screen__bottom-bar"></li>
+    </ul>
+  </template>
+}

scss/box-view.scss

@@ -4,6 +4,11 @@
     border-top-left-radius: var(--d-border-radius-large);
   }
 }
+
+.has-full-page-chat .experimental-screen {
+  display: none;
+}
+
 .experimental-screen {
   max-width: unset !important;
   .has-full-page-chat & {
@@ -31,7 +36,7 @@
     width: var(--d-border-radius-large);
     height: var(--d-border-radius-large);
     background-color: var(--tertiary-50);
-    z-index: 999;
+    z-index: 399;
     -webkit-mask: radial-gradient(
       circle at var(--d-border-radius-large) var(--d-border-radius-large),
       transparent var(--d-border-radius-large),
@@ -41,32 +46,18 @@
   }
   &__top-left {
     top: var(--header-offset);
-    left: calc(var(--main-grid-gap) + var(--d-sidebar-width));
+    left: var(--left-distance);
-    @media screen and (max-width: 768px) {
-      left: var(--main-grid-gap);
-    }
   }
   &__top-right {
     top: var(--header-offset);
     transform: rotate(90deg);
-    @container content-width (width > 1px) {
+    left: calc(var(--right-distance) - var(--d-border-radius-large));
-      left: calc(
-        var(--main-grid-gap) + var(--d-sidebar-width) + 100cqw -
-          var(--d-border-radius-large)
-      );
-      @media screen and (max-width: 768px) {
-        left: calc(
-          var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
-        );
-      }
-    }
   }
   &__bottom-left {
     transform: rotate(-90deg);
     bottom: var(--d-border-radius-large);
-    left: calc(var(--main-grid-gap) + var(--d-sidebar-width));
+    left: var(--left-distance);
     @media screen and (max-width: 768px) {
-      left: var(--main-grid-gap);
       bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
@@ -74,14 +65,8 @@
     transform: rotate(180deg);
     bottom: var(--d-border-radius-large);
     @container content-width (width > 1px) {
-      left: calc(
+      left: calc(var(--right-distance) - var(--d-border-radius-large));
-        var(--main-grid-gap) + var(--d-sidebar-width) + 100cqw -
-          var(--d-border-radius-large)
-      );
       @media screen and (max-width: 768px) {
-        left: calc(
-          var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
-        );
         bottom: calc(var(--d-border-radius-large) * 2);
       }
     }
@@ -89,15 +74,14 @@
   &__bottom-bar {
     position: fixed;
     width: 100%;
-    z-index: 999;
+    z-index: 399;
     background-color: var(--tertiary-50);
     bottom: 0;
-    left: calc(var(--main-grid-gap) + var(--d-sidebar-width));
+    left: var(--left-distance);
+    height: var(--d-border-radius-large);
     @media screen and (max-width: 768px) {
-      left: var(--main-grid-gap);
       height: calc(var(--d-border-radius-large) * 2);
     }
-    height: var(--d-border-radius-large);
     @container content-width (width > 1px) {
       width: 100cqw;
     }

scss/chat.scss

@@ -1,16 +1,16 @@
 .full-page-chat.full-page-chat-sidebar-enabled {
   border-top-left-radius: var(--d-border-radius-large);
-  box-shadow: 0px 0px 1px 2px var(--tertiary-50),
+  box-shadow: 0px 0px 1px 2px var(--tertiary-100),
-    0px 0px 24px 4px var(--tertiary-50);
+    0px 0px 24px 4px var(--tertiary-100);
   border: none;
 }
 
-.has-full-page-chat .d-header {
-  background-color: transparent;
-}
-
 .c-navbar-container {
   border-top-left-radius: var(--d-border-radius-large);
   padding: 0 1.5rem;
   background-color: var(--d-content-background);
 }
+
+body.has-full-page-chat {
+  background-color: var(--background-color);
+}

scss/header.scss

@@ -4,6 +4,10 @@
   padding-bottom: 1.5em;
 }
 
+.has-full-page-chat .d-header {
+  background-color: transparent;
+}
+
 .user-menu .quick-access-panel,
 .user-notifications-list {
   li {

scss/main.scss

@@ -37,7 +37,15 @@ body:not(.has-full-page-chat) {
       #topic-title,
       .container.posts,
       #topic-footer-buttons,
-      .more-topics__container {
+      .more-topics__container,
+      .search-banner,
+      .container.viewing-self,
+      .reviewable,
+      .admin-content,
+      .discourse-post-event-upcoming-events,
+      .container.groups-index,
+      .body-page,
+      .container.badges {
         max-width: 1000px;
         margin-inline: auto;
         padding-inline: 1.5em;
@@ -61,9 +69,6 @@ body:not(.has-full-page-chat) {
   .topic-list-body {
     padding-top: var(--spacing-block-m);
   }
-  .topic-list-item {
-    box-shadow: 0px 0px 26px 1px hsl(224 61% 96% / 1);
-  }
 }
 
 aside.onebox {

scss/sidebar.scss

@@ -1,5 +1,6 @@
 .sidebar-wrapper {
-  .has-full-page-chat & {
+  .has-full-page-chat &,
+  .has-full-page-chat & .sidebar-footer-wrapper {
     background: transparent;
   }
   .sidebar-container {
@@ -10,12 +11,11 @@
     padding: 0;
   }
   .sidebar-section-link {
-    font-size: var(
+    font-size: var(--font-up-1);
-      --font-up-1
+    // dont want to change fonts here just yet as font-size can be changed as a user pref.
-    ); // dont want to change fonts here just yet as font-size can be changed as a user pref. – charlie: sure but I want it to be bigger by default
+    // – charlie: sure but I want it to be bigger by default
-    // font-family: "inter";
+    // letter-spacing: 0.5px;
-    letter-spacing: 0.5px;
+    border-radius: 10px; // visually somewhat consistent with border on main outlet (?)
-    border-radius: 10px; //visually somewhat consistent with border on main outlet (?)
     transition: none;
   }
 }

scss/topic-cards.scss

@@ -1,6 +1,9 @@
 .topic-list-item {
   background: var(--d-content-background);
+  box-shadow: 0px 0px 26px 1px
+    light-dark(hsl(224 61% 96% / 1), hsl(224 61% 96% / 0.1));
   &:hover {
     border: 1px solid var(--accent-color);
+    background: var(--d-content-background);
   }
 }

scss/topic.scss

@@ -1,19 +1,19 @@
 .post-stream {
-  .contents p {
+  .contents {
     font-size: var(--font-up-1);
     line-height: 1.25;
   }
 }
 
 .container.posts .topic-navigation {
-  //super fragile because new sticky topic title doesnt have a calculated value (= 53px with this font and size but…)
+  // super fragile because new sticky topic title doesnt have a calculated value (= 53px with this font and size but…)
   top: calc(
     var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
   );
 }
 
 .timeline-container .topic-timeline {
-  min-width: unset; //why we have this?
+  min-width: unset; // why we have this?
   .timeline-scrollarea {
     border-left: 1px solid var(--accent-color);
   }
@@ -24,7 +24,7 @@
     padding-left: 0.5em;
     margin-left: calc(-0.5em - 2.5px);
     background: var(--secondary);
-    height: 40px !important; //height is coming from element style have no other choice
+    height: 40px !important; // height is coming from element style have no other choice
   }
   .timelime-scroller-content {
     display: flex;
@@ -47,12 +47,13 @@
 }
 
 #topic-title {
-  z-index: 999;
+  z-index: z("composer", "content") - 1;
   padding: var(--spacing-block-l) var(--spacing-inline-xl);
   position: sticky;
   margin-bottom: 0;
   top: var(--header-offset);
   background: var(--d-content-background);
+  border-radius: var(--d-border-radius-large);
 }
 
 .container.posts,

scss/variables.scss

@@ -1,4 +1,5 @@
 :root {
+  color-scheme: light dark;
   --d-border-radius-large: 20px;
   --d-border-radius: 8px;
   --d-input-border-radius: 6px;