add sidecar right

microsoft · Nov 28, 2023 · 86bfd4f · 86bfd4f
1 parent 83b6f86
commit 86bfd4f
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 10 deletions.
diff --git a/css/src/components/layout.scss b/css/src/components/layout.scss
@@ -1,5 +1,9 @@
 @use 'sass:math';
 
+$quarter-widescreen: math.div($breakpoint-widescreen, 4);
+$half-widescreen: math.div($breakpoint-widescreen, 2);
+$three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
+
 .layout {
 	display: flex;
 	flex-direction: column;
@@ -79,11 +83,8 @@
 				'footer footer footer';
 		}
 
-		$widescreen-side-columns-width: math.div($breakpoint-widescreen, 4);
-		$widescreen-main-width: math.div($breakpoint-widescreen, 2);
-
 		@include widescreen {
-			grid-template: auto auto 1fr auto / auto #{$widescreen-side-columns-width} #{$widescreen-main-width} #{$widescreen-side-columns-width} auto;
+			grid-template: auto auto 1fr auto / auto #{quarter-widescreen} #{$half-widescreen} #{quarter-widescreen} auto;
 			grid-template-areas:
 				'header header header header header'
 				'hero hero hero hero hero'
@@ -120,11 +121,8 @@
 				'footer footer';
 		}
 
-		$widescreen-side-columns-width: math.div($breakpoint-widescreen, 4);
-		$widescreen-main-width: math.div($breakpoint-widescreen, 4) * 3;
-
 		@include widescreen {
-			grid-template: auto auto 1fr auto / auto #{$widescreen-side-columns-width} #{$widescreen-main-width} auto;
+			grid-template: auto auto 1fr auto / auto #{$quarter-widescreen} #{$three-quarters-widescreen} auto;
 			grid-template-areas:
 				'header header header header'
 				'hero hero hero hero'
@@ -134,6 +132,44 @@
 	}
 }
 
+.layout.layout-sidecar-right {
+	.layout-body-menu {
+		display: none;
+	}
+
+	.layout-body {
+		grid-template: auto auto auto 1fr auto / 1fr;
+		grid-template-areas: 'header' 'hero' 'main' 'aside' 'footer';
+
+		@include tablet {
+			grid-template: auto auto 1fr auto / 2fr 1fr;
+			grid-template-areas:
+				'header header'
+				'hero hero'
+				'main aside '
+				'footer footer';
+		}
+
+		@include desktop {
+			grid-template: auto auto 1fr auto / 3fr 1fr;
+			grid-template-areas:
+				'header header'
+				'hero hero'
+				'main aside '
+				'footer footer';
+		}
+
+		@include widescreen {
+			grid-template: auto auto 1fr auto / auto #{$three-quarters-widescreen} #{$quarter-widescreen} auto;
+			grid-template-areas:
+				'header header header header'
+				'hero hero hero hero'
+				'. main aside .'
+				'footer footer footer footer';
+		}
+	}
+}
+
 .layout-padding {
 	padding-inline: var(#{$layout-gap-custom-property-name}) !important;
 }

diff --git a/site/src/components/layout.md b/site/src/components/layout.md
@@ -20,6 +20,7 @@ This page is utilizing the holy grail layout, but you can use the buttons below
   <button class="button" data-set-layout="layout-holy-grail" aria-pressed="true">Holy grail</button>
   <button class="button" data-set-layout="layout-single">Single</button>
   <button class="button" data-set-layout="layout-sidecar-left">Sidecar left</button>
+  <button class="button" data-set-layout="layout-sidecar-right">Sidecar right</button>
 </div>
 <button class="button margin-top-sm" data-toggle-debug aria-pressed="false">Toggle container labels</button>
 
@@ -70,6 +71,7 @@ There are two available layouts.
 - [`layout-single`](#layout-single)
 - [`layout-holy-grail`](#holy-grail-layout)
 - [`layout-sidecar-left`](#sidecar-left-layout)
+- [`layout-sidecar-right`](#sidecar-right-layout)
 
 ### Layout Single
 
@@ -172,6 +174,40 @@ The specification for this layout is as follows.
 | Tablet - desktop | Menu and main are side by side. Main is wider than menu.                                                                         |
 | Widescreen       | Same as tablet-desktop with scaling gutter that keeps combined width of menu and main to the width of the widescreen breakpoint. |
 
+### Sidecar right layout
+
+The "sidecar" remains as defined in the section above, but in `layout-sidecar-left` the sidecar refers to the `layout-body-aside` element, which sits to the right of `layout-body-main` on tablet screens and wider. Unlike other layouts, this layout does not allow the usage of the `layout-body-menu` containers.
+
+How do I apply it? `layout-sidecar-right` to the `layout` element.
+Required elements: all except `layout-body-hero` and `layout-body-menu` (see allowed elements).
+Allowed elements: all except `layout-body-menu`.
+
+The following block is arranged from narrow widths on the left to wider widths on the right.
+
+```txt
+ ┌──────────────┐ ┌──────────────────────┐ ┌──────────────────────┐
+ │Header        │ │ Header               │ │ Header               │
+ ├──────────────┤ ├──────────────────────┤ ├──────────────────────┤
+ │Hero          │ │ Hero                 │ │ Hero                 │
+ ├────────┬─────┤ ├───────────────┬──────┤ ├───────────────┬──────┤
+ │Main    │Aside│ │ Main          │ Aside│ │ Main          │ Aside│
+ │        │     │ │               │      │ │               │      │
+ │        │     │ │               │      │ │               │      │
+ │        │     │ │               │      │ │               │      │
+ │        │     │ │               │      │ │               │      │
+ ├────────┴─────┤ ├───────────────┴──────┤ ├───────────────┴──────┤
+ │Footer        │ │ Footer               │ │ Footer               │
+ └──────────────┘ └──────────────────────┘ └──────────────────────┘
+```
+
+The specification for this layout is as follows.
+
+| Screensize       | Behavior                                                                                                                          |
+| ---------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| Narrow           | All elements are stacked.                                                                                                         |
+| Tablet - desktop | Main and aside are side by side. Main is wider than aside.                                                                        |
+| Widescreen       | Same as tablet-desktop with scaling gutter that keeps combined width of main and aside to the width of the widescreen breakpoint. |
+
 ## Accessibility and ARIA landmarks
 
 ## Accessibility Concerns
@@ -196,7 +232,6 @@ See WCAG on [Making the DOM order match the visual order](https://www.w3.org/TR/
 ## Advanced topic - switching layouts on the fly
 
 Because layouts generally contain the same elements and because the current layout is determined by a singular class on the `.layout` element, changing layout is as easy as swapping out a class.
-s
 
 ```JavaScript
 document.documentElement.classList.remove('layout-single');

diff --git a/site/src/scaffold/scripts/layout-page.ts b/site/src/scaffold/scripts/layout-page.ts
@@ -1,4 +1,9 @@
-const layoutsClasses = ['layout-single', 'layout-holy-grail', 'layout-sidecar-left'];
+const layoutsClasses = [
+	'layout-single',
+	'layout-holy-grail',
+	'layout-sidecar-left',
+	'layout-sidecar-right'
+];
 
 // A function that removes all classes that begin with layout- on the html element
 function setLayoutClass(layoutToSet: string) {

diff --git a/site/src/scaffold/styles/layout-buttons.scss b/site/src/scaffold/styles/layout-buttons.scss
@@ -0,0 +1,10 @@
+$layouts: 'single', 'holy-grail', 'sidecar-left', 'sidecar-right';
+
+@each $layout in $layouts {
+	.layout-#{$layout} {
+		[data-set-layout='layout-#{$layout}'] {
+			@extend .button-primary;
+			@extend .button-filled;
+		}
+	}
+}