feat: Use container queries for dynamically adjusting layout

This is a canary feature currently on chrome, but instead of using media queries working on using container queries to dictate how the editor is rendered.
blinkk · Jul 30, 2021 · 87fd033 · 87fd033
1 parent 4db08a2
commit 87fd033
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/src/sass/parts/_onboarding.sass b/src/sass/parts/_onboarding.sass
@@ -33,8 +33,11 @@
   display: flex
   flex-flow: row
   justify-content: center
+  line-height: $le-line-height-paragraph
+  padding: 0 $le-space-medium
   position: sticky
   top: 0
+  z-index: 100
 
   a
     color: var(--color-on-tertiary)
@@ -43,6 +46,7 @@
   padding: $le-space-medium
 
 .le__part__onboarding__options
+  contain: layout inline-size style
   margin-left: auto
   margin-right: auto
   max-width: $le-space-max-content-width

diff --git a/src/sass/ui/_grid.sass b/src/sass/ui/_grid.sass
@@ -1,21 +1,36 @@
 
 .le__grid
-  --grid_columns: 1fr 1fr
+  --grid_columns: 1fr
 
   column-gap: $le-space-medium
   display: grid
   grid-template-columns: var(--grid_columns)
   row-gap: $le-space-medium
 
-  &--col-1
-    --grid_columns: 1fr
+  &--col-2
+    --grid_columns: 1fr 1fr 1fr
+
+    @container (max-width: #{$le-space-xxxxlarge - 1})
+      --grid_columns: 1fr
 
   &--col-3
     --grid_columns: 1fr 1fr 1fr
 
+    @container (max-width: #{$le-space-xxxxlarge - 1})
+      --grid_columns: 1fr
+
   &--col-4
     --grid_columns: 1fr 1fr 1fr 1fr
 
+    @container (max-width: #{$le-space-xxxxlarge - 1})
+      --grid_columns: 1fr
+
+  &--col-5
+    --grid_columns: 1fr 1fr 1fr 1fr 1fr
+
+    @container (max-width: #{$le-space-xxxxlarge - 1})
+      --grid_columns: 1fr
+
   &--gap-small
     column-gap: $le-space-small
     row-gap: $le-space-small
@@ -28,7 +43,8 @@
   color: var(--color-on-grid-item-background)
 
   .le__grid--3-2 &
-    aspect-ratio: 3 / 2
+    @container (min-width: #{$le-space-xxxxlarge})
+      aspect-ratio: 3 / 2
 
   &--box
     border: $le-border-size-medium solid var(--color-border)

diff --git a/src/ts/editor/ui/parts/onboarding/github.ts b/src/ts/editor/ui/parts/onboarding/github.ts
@@ -460,7 +460,7 @@ export class GitHubOnboardingPart extends BasePart implements UiPartComponent {
         ? ''
         : this.templateLoadingStatus(html`Finding ${this.api.organization}
           repositories…`)}
-      <div class="le__part__onboarding__github__list">
+      <div class="le__part__onboarding__options">
         ${useFilter ? this.templateFilter() : ''}
         <div
           class=${classMap({