UX: Login layout fixes (#133)

common/common.scss

@@ -5,6 +5,7 @@
 @import "composer";
 @import "header";
 @import "hiddenstuff";
+@import "login";
 @import "main";
 @import "misc";
 @import "mobile-stuff";

javascripts/discourse/components/experimental-screen.gjs

@@ -2,10 +2,14 @@ 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 { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { bind } from "discourse/lib/decorators";
 
+const DO_NOT_RENDER_LIST = ["login"];
+
 export default class ExperimentalScreen extends Component {
+  @service router;
   @tracked left = 0;
   @tracked right = 0;
   resizeObserver;
@@ -28,6 +32,10 @@ export default class ExperimentalScreen extends Component {
     );
   }
 
+  get shouldRender() {
+    return !DO_NOT_RENDER_LIST.includes(this.router.currentRouteName);
+  }
+
   @action
   onInsert(element) {
     this.calculateDistance(element);
@@ -42,16 +50,18 @@ export default class ExperimentalScreen extends Component {
   }
 
   <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>
+    {{#if this.shouldRender}}
+      <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>
+    {{/if}}
   </template>
 }

scss/login.scss

@@ -0,0 +1,14 @@
+body.static-login {
+  #main-outlet-wrapper {
+    grid-template-areas:
+      "sidebar blank"
+      "sidebar content"
+      "sidebar below-content";
+    grid-template-rows: auto 1fr auto;
+  }
+  .login-welcome {
+    border-radius: none;
+    border: none;
+    box-shadow: none;
+  }
+}

scss/main.scss

@@ -113,3 +113,12 @@ aside.onebox {
   padding: 1em;
   background-color: var(--d-content-background);
 }
+
+.no-ember {
+  #main-outlet {
+    border-radius: var(--d-border-radius-large);
+    margin: 0 var(--main-grid-gap) var(--main-grid-gap) var(--main-grid-gap);
+    padding: 2em;
+    max-height: calc(100vh - 50px - 1em - var(--main-grid-gap));
+  }
+}