banner other css

discourse · Jun 12, 2024 · 05248a0 · 05248a0
1 parent c7a5d87
commit 05248a0
Show file tree

Hide file tree

Showing 11 changed files with 242 additions and 102 deletions.
diff --git a/javascripts/discourse/components/blocks/banner.gjs b/javascripts/discourse/components/blocks/banner.gjs
@@ -1,10 +1,10 @@
 import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { concat } from "@ember/helper";
+// import { tracked } from "@glimmer/tracking";
+// import { concat } from "@ember/helper";
 // import UserLink from "discourse/components/user-link";
-import avatar from "discourse/helpers/avatar";
+// import avatar from "discourse/helpers/avatar";
 // import { ajax } from "discourse/lib/ajax";
-import i18n from "discourse-common/helpers/i18n";
+// import i18n from "discourse-common/helpers/i18n";
 
 export default class BlockBanner extends Component {
   constructor() {

diff --git a/javascripts/discourse/connectors/below-site-header/banner.gjs b/javascripts/discourse/connectors/below-site-header/banner.gjs
@@ -0,0 +1,10 @@
+import Component from "@glimmer/component";
+import DiscourseBanner from "discourse/components/discourse-banner";
+
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
+export default class Banner extends Component {
+  // moves banner topic from main-outlet to below-site-header
+  <template>
+    <DiscourseBanner />
+  </template>
+}
diff --git a/...nectors/before-main-outlet/top-blocks.gjs → ...nnectors/below-site-header/top-blocks.gjs b/...nectors/before-main-outlet/top-blocks.gjs → ...nnectors/below-site-header/top-blocks.gjs
diff --git a/scss/_base.scss b/scss/_base.scss
@@ -25,3 +25,4 @@
 @import "discourse/admin";
 @import "discourse/d-menu";
 @import "discourse/compose";
+@import "discourse/banner";
diff --git a/scss/blocks/base.scss b/scss/blocks/base.scss
@@ -10,59 +10,62 @@
 // @import "canvas";
 // @import "emoji";
 
-#main-outlet-wrapper {
-  .blocks.--top {
-    grid-area: center-top !important;
-    display: flex;
+// #main-outlet-wrapper {
+.blocks.--top {
+  // display: none;
+  // grid-area: content / blocks;
+  display: flex;
+  justify-content: center;
+  // margin-right: 2rem;
+  // border-bottom: var(--border-outer);
+
+  .blocks__wrapper {
+    display: grid;
     justify-content: center;
-    margin-right: 2rem;
-    // border-bottom: var(--border-outer);
+    background: #e8ecf2;
+    width: 100%;
+    // margin-right: 2rem;
+    // border-radius: var(--rounded-lg);
+    // grid-template-columns: repeat(12, 4rem);
+    grid-auto-rows: 4rem;
+    height: min-content;
+    max-height: 19rem;
+    gap: 1rem;
+    box-sizing: border-box;
+    align-items: stretch;
 
-    .blocks__wrapper {
-      display: grid;
-      justify-content: center;
-      background: #e8ecf2;
+    .block-banner {
+      --jc: center;
+      --ai: center;
+      --bg: transparent;
+      --c: #14263f;
+      --p: 0;
+      --fd: column;
       width: 100%;
-      // margin-right: 2rem;
-      border-radius: var(--rounded-lg);
-      // grid-template-columns: repeat(12, 4rem);
-      grid-auto-rows: 4rem;
-      height: min-content;
-      max-height: 19rem;
-      gap: 1rem;
+      // grid-column: span 12;
+      grid-row: span 3;
+      padding: 0 2rem;
       box-sizing: border-box;
-      align-items: stretch;
-
-      .block-banner {
-        --jc: center;
-        --ai: center;
-        --bg: transparent;
-        --c: #14263f;
-        --p: 0;
-        --fd: column;
-        width: 100%;
-        // grid-column: span 12;
-        grid-row: span 3;
 
-        h1 {
-          margin: 0;
-          text-align: center;
-          @include headline-small;
-        }
-        &__blurb {
-          margin-top: 0.75rem;
-          max-width: 75ch;
-          @include body-medium;
-          text-align: center;
-        }
-        .button--primary {
-          margin-top: 1rem;
-          @include button($style: primary);
-        }
+      h1 {
+        margin: 0;
+        text-align: center;
+        @include headline-small;
+      }
+      &__blurb {
+        margin-top: 0.75rem;
+        max-width: 75ch;
+        @include body-medium;
+        text-align: center;
+      }
+      .button--primary {
+        margin-top: 1rem;
+        @include button($style: primary);
       }
     }
   }
 }
+// }
 
 #main-outlet-wrapper {
   .blocks {

diff --git a/scss/components/navigation.scss b/scss/components/navigation.scss
@@ -28,7 +28,7 @@
 
   box-sizing: border-box;
   height: calc(100vh - var(--header-offset));
-  padding: 2rem 2rem 2rem 0;
+  padding: 2rem 0 2rem 0;
 
   background: var(--neutral-100);
 
@@ -165,11 +165,13 @@
 
             .badge-category {
               gap: 1rem;
+              text-overflow: ellipsis;
+              overflow: hidden;
             }
 
             .badge-category__name {
-              display: inline-flex;
-              gap: 0.25rem;
+              // display: inline-flex;
+              // gap: 0.25rem;
               color: var(--neutral-10);
             }
           }

diff --git a/scss/discourse/badges.scss b/scss/discourse/badges.scss
@@ -31,6 +31,10 @@
             @include i($font-size: 0.75rem);
             content: "lock" !important;
             align-self: center;
+            display: inline-flex;
+            margin-right: 0.125rem;
+            align-items: center;
+            justify-content: center;
           }
         }
       }

diff --git a/scss/discourse/banner.scss b/scss/discourse/banner.scss
@@ -0,0 +1,35 @@
+#main-outlet {
+  .container:has(#banner) {
+    display: none;
+  }
+}
+
+#banner {
+  margin: 0;
+  padding: 0;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .floated-buttons {
+    // display: none;
+    position: absolute;
+    right: 1rem;
+  }
+//   &:hover .floated-buttons {
+//     display: flex;
+//   }
+  &-content {
+    flex: 1;
+    box-sizing: border-box;
+    padding: 1rem;
+    max-width: var(--d-max-width);
+    text-align: center;
+    h3 {
+      @include headline-small;
+    }
+    p {
+      @include body-medium;
+    }
+  }
+}