reuse layout

mdn · Feb 7, 2024 · dc9dbc4 · dc9dbc4
1 parent 3263119
commit dc9dbc4
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 139 deletions.
diff --git a/client/src/assets/icons/cur-started-underline.svg b/client/src/assets/icons/cur-started-underline.svg
diff --git a/client/src/curriculum/index.scss b/client/src/curriculum/index.scss
@@ -183,124 +183,5 @@
         margin: 0.5rem 0;
       }
     }
-    @media screen and (min-width: $screen-md) {
-      display: grid;
-      gap: 3rem;
-      grid-template-areas: "sidebar main";
-      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
-      padding-left: 1.5rem;
-      padding-right: 3rem;
-    }
-
-    @media screen and (min-width: $screen-xl) {
-      display: grid;
-      gap: 3rem;
-      grid-template-areas: "sidebar main toc";
-      grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem);
-      padding-left: 1rem;
-      padding-right: 1rem;
-
-      .toc {
-        --offset: var(--sticky-header-with-actions-height);
-
-        display: block;
-        grid-area: toc;
-        height: fit-content;
-        padding-bottom: 0;
-      }
-
-      .in-nav-toc {
-        display: none;
-      }
-    }
-
-    .sidebar-container {
-      --offset: var(--sticky-header-with-actions-height);
-      --max-height: calc(100vh - var(--offset));
-
-      max-height: var(--max-height);
-      position: sticky;
-      top: var(--offset);
-      z-index: var(--z-index-sidebar-mobile);
-
-      > .curriculum-sidebar {
-        align-self: start;
-        grid-area: sidebar;
-
-        li li {
-          margin-left: 1rem;
-        }
-      }
-
-      &.toc-container,
-      .toc-container {
-        grid-area: toc;
-
-        .place {
-          grid-area: toc;
-          margin: 0;
-        }
-        @media screen and (min-width: $screen-xl) {
-          display: flex;
-          flex-direction: column;
-          gap: 0;
-          height: calc(100vh - var(--offset));
-          mask-image: linear-gradient(
-            to bottom,
-            rgba(0, 0, 0, 0) 0%,
-            rgb(0, 0, 0) 3rem calc(100% - 3rem),
-            rgba(0, 0, 0, 0) 100%
-          );
-          overflow: auto;
-          position: sticky;
-          top: var(--offset);
-
-          .place {
-            margin: 1rem 0;
-            padding-bottom: 3rem;
-          }
-        }
-      }
-
-      @media screen and (min-width: $screen-md) and (min-height: $screen-height-place-limit) {
-        display: flex;
-        flex-direction: column;
-      }
-
-      @media screen and (min-width: $screen-md) {
-        z-index: auto;
-
-        .curriculum-sidebar {
-          mask-image: linear-gradient(
-            to bottom,
-            rgb(0, 0, 0) 0% calc(100% - 3rem),
-            rgba(0, 0, 0, 0) 100%
-          );
-        }
-
-        @media screen and not (min-height: $screen-height-place-limit) {
-          overflow: auto;
-        }
-      }
-
-      @media screen and (max-width: #{$screen-md - 1}) {
-        .toc-container {
-          display: none;
-        }
-      }
-
-      @media screen and (min-width: #{$screen-md}) {
-        #sidebar-quicklinks {
-          display: none;
-        }
-      }
-      @media screen and (min-width: $screen-xl) {
-        display: contents;
-
-        .sidebar {
-          mask-image: none;
-        }
-      }
-    }
   }
 }
diff --git a/client/src/curriculum/landing.scss b/client/src/curriculum/landing.scss
@@ -10,7 +10,6 @@
     > header,
     > section {
       margin: 0 auto 3rem;
-      margin-bottom: 4rem;
       max-width: min(var(--max-width), 74rem);
       padding-left: var(--gutter);
       padding-right: var(--gutter);
@@ -52,6 +51,7 @@
     }
 
     > section {
+      margin-bottom: 4rem;
       margin-right: auto;
       min-width: min(30rem, 90vw);
       padding-right: 1rem;
@@ -312,9 +312,9 @@
 
         > li {
           align-items: center;
+          color: var(--text-secondary);
           display: grid;
           gap: 1rem;
-          color: var(--text-secondary);
           @media screen and (min-width: $screen-sm) {
             align-items: start;
             gap: 1rem 2rem;
@@ -368,9 +368,9 @@
           }
 
           h3 {
+            color: var(--text-primary);
             font-weight: var(--font-body-strong-weight);
             margin-top: 0;
-            color: var(--text-primary);
           }
 
           a {

diff --git a/client/src/curriculum/layout.tsx b/client/src/curriculum/layout.tsx
@@ -34,16 +34,18 @@ export function CurriculumLayout({
           className={[
             "curriculum-content-container",
             "container",
-            ...(withSidebar ? ["with-sidebar"] : []),
+            ...(withSidebar ? ["with-sidebar", "main-wrapper"] : []),
             ...extraClasses,
           ].join(" ")}
         >
-          {withSidebar && (
+          {withSidebar && doc.sidebar && (
             <div className="sidebar-container">
-              <SidebarContainer doc={doc} label="Related Topics">
-                {doc.sidebar && (
-                  <Sidebar current={doc.mdn_url} sidebar={doc.sidebar} />
-                )}
+              <SidebarContainer
+                doc={doc}
+                label="Related Topics"
+                tocTitle="In this module"
+              >
+                <Sidebar current={doc.mdn_url} sidebar={doc.sidebar} />
               </SidebarContainer>
               <div className="toc-container">
                 <aside className="toc">
@@ -55,13 +57,6 @@ export function CurriculumLayout({
                 </aside>
                 {PLACEMENT_ENABLED && <SidePlacement />}
               </div>
-              {doc.sidebar && (
-                <Sidebar
-                  extraClasses="sidebar"
-                  current={doc.mdn_url}
-                  sidebar={doc.sidebar}
-                />
-              )}
             </div>
           )}
           <article className="curriculum-content" lang={doc?.locale}>

diff --git a/client/src/document/organisms/sidebar/index.tsx b/client/src/document/organisms/sidebar/index.tsx
@@ -14,10 +14,12 @@ export function SidebarContainer({
   doc,
   label,
   children,
+  tocTitle,
 }: {
   doc: any;
   label?: string;
   children: React.ReactNode;
+  tocTitle?: string;
 }) {
   const { isSidebarOpen, setIsSidebarOpen } = useUIStatus();
   const [classes, setClasses] = useState<string>("sidebar");
@@ -65,12 +67,16 @@ export function SidebarContainer({
           aria-label="Collapse sidebar"
         />
         <nav aria-label={label} className="sidebar-inner">
-          <header className="sidebar-actions">
-            {doc.sidebarHTML && <SidebarFilter />}
-          </header>
+          {doc.sidebarHTML && (
+            <header className="sidebar-actions">
+              <SidebarFilter />
+            </header>
+          )}
           <div className="sidebar-inner-nav">
             <div className="in-nav-toc">
-              {doc.toc && !!doc.toc.length && <TOC toc={doc.toc} />}
+              {doc.toc && !!doc.toc.length && (
+                <TOC toc={doc.toc} title={tocTitle} />
+              )}
             </div>
             {children}
           </div>