Add uniboard fallback for browsers without min()/max() support

stanleyjacob · May 13, 2023 · 3449d03 · 3449d03
1 parent c8a7b50
commit 3449d03
Show file tree

Hide file tree

Showing 13 changed files with 36 additions and 0 deletions.
diff --git a/ui/analyse/css/_layout.scss b/ui/analyse/css/_layout.scss
@@ -80,6 +80,7 @@ body {
     'uchat';
 
   @include breakpoint($mq-col2) {
+    grid-template-columns: $col2-uniboard-fallback-width var(--gauge-gap) $col2-uniboard-table;
     grid-template-columns: $col2-uniboard-width var(--gauge-gap) $col2-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas:
@@ -111,6 +112,7 @@ body {
   }
 
   @include breakpoint($mq-col3) {
+    grid-template-columns: $col3-uniboard-side $block-gap $col3-uniboard-fallback-width var(--gauge-gap) $col3-uniboard-table;
     grid-template-columns: $col3-uniboard-side $block-gap $col3-uniboard-width var(--gauge-gap) $col3-uniboard-table;
     grid-template-rows: $meta-height $chat-height 2.5em 1fr;
     grid-template-areas:

diff --git a/ui/common/css/abstract/_uniboard.scss b/ui/common/css/abstract/_uniboard.scss
@@ -49,3 +49,19 @@ $col2-uniboard-squeeze-table: minmax(200px, 240px);
 $col2-uniboard-squeeze-width: minmax(calc(55vmin), calc(100vh - #{$site-header-outer-height} - #{$block-gap}));
 
 $col1-uniboard-controls: 5rem;
+
+// fallbacks for really old browsers that don't support css min() and max() functions
+$col3-uniboard-fallback-min-width: calc(70vmin * var(--board-scale));
+$col3-uniboard-fallback-max-width: calc(
+  100vh * var(--board-scale) - #{$site-header-outer-height} - #{$col3-uniboard-controls}
+);
+$col3-uniboard-fallback-width: minmax($col3-uniboard-fallback-min-width, $col3-uniboard-fallback-max-width);
+$col3-uniboard-fallback-default-max-width: calc(
+  100vh * #{$uniboard-default-scale} - #{$site-header-outer-height} - #{$col3-uniboard-controls}
+);
+$col3-uniboard-fallback-default-width: minmax(
+  #{$col3-uniboard-default-min-width},
+  #{$col3-uniboard-fallback-default-max-width}
+);
+$col2-uniboard-fallback-width: $col3-uniboard-fallback-width;
+$col2-uniboard-fallback-default-width: $col3-uniboard-fallback-default-width;
diff --git a/ui/coordinateTrainer/css/_layout.scss b/ui/coordinateTrainer/css/_layout.scss
@@ -44,6 +44,7 @@ $mq-col3: $mq-x-large;
   grid-row-gap: $block-gap;
 
   @include breakpoint($mq-col2) {
+    grid-template-columns: $col2-uniboard-fallback-width $block-gap $col2-uniboard-table;
     grid-template-columns: $col2-uniboard-width $block-gap $col2-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas:
@@ -60,6 +61,7 @@ $mq-col3: $mq-x-large;
       'side . progress . .'
       'side . co-input . .'
       'side . .        . .';
+    grid-template-columns: $col3-uniboard-side $block-gap $col3-uniboard-fallback-width $block-gap $col3-uniboard-table;
     grid-template-columns: $col3-uniboard-side $block-gap $col3-uniboard-width $block-gap $col3-uniboard-table;
   }
 }

diff --git a/ui/learn/css/_layout.scss b/ui/learn/css/_layout.scss
@@ -37,6 +37,7 @@ $mq-col3: $mq-col3-uniboard;
 
   @include breakpoint($mq-col2) {
     &--run {
+      grid-template-columns: $col2-uniboard-fallback-width $col2-uniboard-table;
       grid-template-columns: $col2-uniboard-width $col2-uniboard-table;
       grid-template-rows: fit-content(0);
       grid-template-areas: 'main table' 'side .';
@@ -54,6 +55,7 @@ $mq-col3: $mq-col3-uniboard;
 
   @include breakpoint($mq-col3) {
     &--run {
+      grid-template-columns: $col3-uniboard-side $col3-uniboard-fallback-width $col3-uniboard-table;
       grid-template-columns: $col3-uniboard-side $col3-uniboard-width $col3-uniboard-table;
       grid-template-areas: 'side main table';
     }

diff --git a/ui/puzzle/css/_layout.scss b/ui/puzzle/css/_layout.scss
@@ -62,6 +62,7 @@
   }
 
   @include breakpoint($mq-col2) {
+    grid-template-columns: $col2-uniboard-fallback-width var(--gauge-gap) $col2-uniboard-table;
     grid-template-columns: $col2-uniboard-width var(--gauge-gap) $col2-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas:
@@ -81,6 +82,7 @@
       'side    . session .     controls'
       'side    . kb-move .     controls'
       'side    . .       .     .';
+    grid-template-columns: $col3-uniboard-side $block-gap $col3-uniboard-fallback-width var(--gauge-gap) $col3-uniboard-table;
     grid-template-columns: $col3-uniboard-side $block-gap $col3-uniboard-width var(--gauge-gap) $col3-uniboard-table;
   }
 

diff --git a/ui/racer/css/_racer.scss b/ui/racer/css/_racer.scss
@@ -14,6 +14,7 @@
   grid-template-areas: 'board' 'race' 'side' 'history';
 
   @include breakpoint($mq-col2) {
+    grid-template-columns: $col2-uniboard-fallback-width $col2-uniboard-table;
     grid-template-columns: $col2-uniboard-width $col2-uniboard-table;
     grid-template-rows: auto fit-content(0);
     grid-template-areas:

diff --git a/ui/round/css/_app-layout.scss b/ui/round/css/_app-layout.scss
@@ -82,6 +82,7 @@
 
   @include breakpoint($mq-col2) {
     grid-template-areas: 'board voice' 'board .' 'board mat-top' 'board clock-top' 'board expi-top' 'board user-top' 'board moves' 'board controls' 'board user-bot' 'board expi-bot' 'board clock-bot' 'board mat-bot' 'board .' 'kb-move .';
+    grid-template-columns: $col2-uniboard-fallback-width $col2-uniboard-table;
     grid-template-columns: $col2-uniboard-width $col2-uniboard-table;
     grid-template-rows: 0; // prevent voice from pushing the table off center
     grid-column-gap: $block-gap;
@@ -116,6 +117,7 @@
   }
 
   @include breakpoint($mq-col3) {
+    grid-template-columns: $col3-uniboard-fallback-width $col3-uniboard-table;
     grid-template-columns: $col3-uniboard-width $col3-uniboard-table;
   }
 

diff --git a/ui/round/css/_layout.scss b/ui/round/css/_layout.scss
@@ -46,6 +46,7 @@
   }
 
   @include breakpoint($mq-col3) {
+    grid-template-columns: $col3-uniboard-side $col3-uniboard-fallback-width $col3-uniboard-table;
     grid-template-columns: $col3-uniboard-side $col3-uniboard-width $col3-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas: 'side  app   app' 'uchat under .';

diff --git a/ui/simul/css/_layout.scss b/ui/simul/css/_layout.scss
@@ -18,6 +18,7 @@
 
   @include breakpoint($mq-col2) {
     &:not(.simul-created) {
+      grid-template-columns: $col2-uniboard-fallback-default-width $col2-uniboard-table;
       grid-template-columns: $col2-uniboard-default-width $col2-uniboard-table;
       grid-template-rows: auto max-content;
       grid-template-areas: 'main side' 'main uchat' '.    uchat';
@@ -26,6 +27,7 @@
 
   @include breakpoint($mq-col3) {
     &.simul {
+      grid-template-columns: $col3-uniboard-side $col3-uniboard-fallback-default-width $col3-uniboard-table;
       grid-template-columns: $col3-uniboard-side $col3-uniboard-default-width $col3-uniboard-table;
       grid-template-rows: auto fit-content(0);
       grid-template-areas: 'side  main main' 'uchat main main' 'uchat .    .';

diff --git a/ui/site/css/tv/_single.scss b/ui/site/css/tv/_single.scss
@@ -18,6 +18,7 @@ $mq-col3: $mq-col3-uniboard;
   }
 
   @include breakpoint($mq-col3) {
+    grid-template-columns: $col3-uniboard-side $col3-uniboard-fallback-width $col3-uniboard-table;
     grid-template-columns: $col3-uniboard-side $col3-uniboard-width $col3-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas: 'side app   app' 'side under .';

diff --git a/ui/storm/css/_play.scss b/ui/storm/css/_play.scss
@@ -7,6 +7,7 @@
     grid-template-areas: 'board' 'side';
 
     @include breakpoint($mq-col2) {
+      grid-template-columns: $col2-uniboard-fallback-width $col2-uniboard-table;
       grid-template-columns: $col2-uniboard-width $col2-uniboard-table;
       grid-template-rows: fit-content(0);
       grid-template-areas: 'board   side';

diff --git a/ui/swiss/css/_layout.scss b/ui/swiss/css/_layout.scss
@@ -33,6 +33,7 @@ $chat-optimal-size: calc(100vh - #{$site-header-outer-height} - #{$block-gap} -
   grid-gap: $block-gap;
 
   @include breakpoint($mq-col2) {
+    grid-template-columns: $col2-uniboard-fallback-default-width $col2-uniboard-table;
     grid-template-columns: $col2-uniboard-default-width $col2-uniboard-table;
     grid-template-rows: $chat-optimal-size min-content;
     grid-template-areas: 'main  side' 'main  uchat' 'table table';
@@ -43,6 +44,7 @@ $chat-optimal-size: calc(100vh - #{$site-header-outer-height} - #{$block-gap} -
   }
 
   @include breakpoint($mq-col3) {
+    grid-template-columns: $col3-uniboard-side $col3-uniboard-fallback-default-width $col3-uniboard-table;
     grid-template-columns: $col3-uniboard-side $col3-uniboard-default-width $col3-uniboard-table;
     grid-template-rows: $chat-optimal-size auto;
     grid-template-areas: 'side  main table' 'uchat main table';

diff --git a/ui/tournament/css/_layout.scss b/ui/tournament/css/_layout.scss
@@ -31,6 +31,7 @@ $chat-optimal-size: calc(100vh - #{$site-header-outer-height} - #{$block-gap} -
   grid-gap: $block-gap;
 
   @include breakpoint($mq-col2) {
+    grid-template-columns: $col2-uniboard-fallback-default-width $col2-uniboard-table;
     grid-template-columns: $col2-uniboard-default-width $col2-uniboard-table;
     grid-template-rows: $chat-optimal-size min-content;
     grid-template-areas: 'main  side' 'main  uchat' 'table table';
@@ -49,6 +50,7 @@ $chat-optimal-size: calc(100vh - #{$site-header-outer-height} - #{$block-gap} -
   }
 
   @include breakpoint($mq-col3) {
+    grid-template-columns: $col3-uniboard-side $col3-uniboard-fallback-default-width $col3-uniboard-table;
     grid-template-columns: $col3-uniboard-side $col3-uniboard-default-width $col3-uniboard-table;
     grid-template-rows: $chat-optimal-size auto;
     grid-template-areas: 'side  main table' 'uchat main table';