smaller css block gaps overall, consistent gaps in analyse and puzzle

lichess-org · Mar 17, 2024 · 425604d · 425604d
1 parent c0c284e
commit 425604d
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 26 deletions.
diff --git a/ui/analyse/css/_layout.scss b/ui/analyse/css/_layout.scss
@@ -1,3 +1,5 @@
+$analyse-block-gap: $block-gap-half;
+
 body {
   /* prevents scroll bar flicker on page height changes */
   overflow-y: scroll;
@@ -83,7 +85,7 @@ body {
     'uchat';
 
   @include breakpoint($mq-col2) {
-    grid-template-columns: var(--col2-uniboard-width) var(--gauge-gap) $col2-uniboard-table;
+    grid-template-columns: var(--col2-uniboard-width) $analyse-block-gap $col2-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas:
       'board      gauge tools'
@@ -102,7 +104,7 @@ body {
     }
 
     &__underboard {
-      margin-top: 23px;
+      margin-top: $analyse-block-gap;
     }
 
     .eval-gauge {
@@ -111,11 +113,11 @@ body {
   }
 
   @include breakpoint($mq-col2-uniboard-squeeze) {
-    grid-template-columns: $col2-uniboard-squeeze-width var(--gauge-gap) $col2-uniboard-squeeze-table;
+    grid-template-columns: $col2-uniboard-squeeze-width $analyse-block-gap $col2-uniboard-squeeze-table;
   }
 
   @include breakpoint($mq-col3) {
-    grid-template-columns: $col3-uniboard-side var(--gauge-gap) var(--col3-uniboard-width) var(--gauge-gap) $col3-uniboard-table;
+    grid-template-columns: $col3-uniboard-side $analyse-block-gap var(--col3-uniboard-width) $analyse-block-gap $col3-uniboard-table;
     grid-template-rows: auto $chat-height 2.5em 1fr;
     grid-template-areas:
       'side    . board gauge tools'
@@ -128,6 +130,7 @@ body {
     }
 
     .mchat {
+      margin-top: 0;
       min-height: 10em;
     }
 

diff --git a/ui/analyse/css/_zh.scss b/ui/analyse/css/_zh.scss
@@ -59,11 +59,11 @@ $pocket-height: 60px;
 @include breakpoint($mq-col1) {
   .pocket {
     &-top {
-      margin-bottom: $analyse-block-gap;
+      margin-bottom: $block-gap-half;
     }
 
     &-bottom {
-      margin-top: $analyse-block-gap;
+      margin-top: $block-gap-half;
     }
   }
 }
diff --git a/ui/analyse/css/study/relay/_layout.scss b/ui/analyse/css/study/relay/_layout.scss
@@ -56,7 +56,7 @@ main.is-relay.has-relay-tour {
   }
 
   @include breakpoint($mq-col3) {
-    grid-template-columns: $col3-uniboard-side var(--gauge-gap) var(--col3-uniboard-width) var(--gauge-gap) $col3-uniboard-table;
+    grid-template-columns: $col3-uniboard-side $block-gap-half var(--col3-uniboard-width) $block-gap-half $col3-uniboard-table;
     grid-template-rows: $mq-col3-side-height;
     grid-template-areas:
       'side        . relay-tour relay-tour relay-tour'

diff --git a/ui/ceval/css/_eval-gauge.scss b/ui/ceval/css/_eval-gauge.scss
@@ -1,10 +1,5 @@
-body {
-  @include fluid-size('--gauge-gap', 8px, 17px);
-}
-$analyse-block-gap: var(--gauge-gap);
-
 .eval-gauge {
-  width: var(--gauge-gap);
+  width: $block-gap-half;
   position: relative;
   background: if($theme-light, #fff, #a0a0a0);
   overflow: hidden;

diff --git a/ui/common/css/abstract/_uniboard.scss b/ui/common/css/abstract/_uniboard.scss
@@ -18,8 +18,10 @@ $col3-uniboard-controls: 3rem;
 $col3-min-bottom-margin: 1rem;
 
 $col3-uniboard-max-width: calc(
-  100vw - #{$col3-uniboard-side-min} - #{$block-gap} - var(--gauge-gap, #{$block-gap}) - #{$col3-uniboard-table-min} -
-    2 * var(--main-margin, 0px) - #{$scrollbar-width}
+  100vw - #{$col3-uniboard-side-min} - #{$block-gap} - #{$col3-uniboard-table-min} - 2 * var(
+      --main-margin,
+      0px
+    ) - #{$scrollbar-width}
 );
 $col3-uniboard-max-height: calc(100vh - #{$site-header-outer-height} - #{$col3-min-bottom-margin});
 $col3-uniboard-max-size: min(#{$col3-uniboard-max-width}, #{$col3-uniboard-max-height});
@@ -45,7 +47,7 @@ $col2-uniboard-table: $col3-uniboard-table;
 $col2-uniboard-controls: $col3-uniboard-controls;
 
 $col2-uniboard-max-width: calc(
-  100vw - var(--gauge-gap, #{$block-gap}) - #{$col3-uniboard-table-min} - 2 * var(--main-margin, 0px) - #{$scrollbar-width}
+  100vw - #{$block-gap-half} - #{$col3-uniboard-table-min} - 2 * var(--main-margin, 0px) - #{$scrollbar-width}
 );
 $col2-uniboard-max-height: $col3-uniboard-max-height;
 $col2-uniboard-max-size: min(#{$col2-uniboard-max-width}, #{$col2-uniboard-max-height});

diff --git a/ui/common/css/abstract/_variables.scss b/ui/common/css/abstract/_variables.scss
@@ -5,11 +5,11 @@ $img-path: '../images';
 
 $viewport-min-width: 320px;
 
-$block-gap: 2vmin;
+$block-gap: 1.5vmin;
 $block-gap-half: 1vmin;
 
-$block-gap-h: 2vh;
-$block-gap-w: 2vw;
+$block-gap-h: 1.5vh;
+$block-gap-w: 1.5vw;
 $block-gap-w-half: 1vw;
 
 $box-radius-size: 4px;

diff --git a/ui/puzzle/css/_layout.scss b/ui/puzzle/css/_layout.scss
@@ -1,3 +1,5 @@
+$puzzle-block-gap: $block-gap-half;
+
 #main-wrap {
   --main-max-width: calc(100vh - #{$site-header-outer-height} - #{$col1-uniboard-controls});
 
@@ -55,14 +57,14 @@
   }
 
   grid-template-areas: 'board' 'controls' 'tools' 'session' 'kb-move' 'side';
-  grid-row-gap: $block-gap;
+  grid-row-gap: $puzzle-block-gap;
 
   &__moves {
     display: none;
   }
 
   @include breakpoint($mq-col2) {
-    grid-template-columns: var(--col2-uniboard-width) var(--gauge-gap) $col2-uniboard-table;
+    grid-template-columns: var(--col2-uniboard-width) $puzzle-block-gap $col2-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas:
       'board   gauge tools'
@@ -76,7 +78,7 @@
   }
 
   @include breakpoint($mq-col2-uniboard-squeeze) {
-    grid-template-columns: $col2-uniboard-squeeze-width var(--gauge-gap) $col2-uniboard-squeeze-table;
+    grid-template-columns: $col2-uniboard-squeeze-width $puzzle-block-gap $col2-uniboard-squeeze-table;
   }
 
   @include breakpoint($mq-col3) {
@@ -85,12 +87,12 @@
       'side    . session .     controls'
       'side    . kb-move .     controls'
       'side    . .       .     .';
-    grid-template-columns: $col3-uniboard-side $block-gap var(--col3-uniboard-width) var(--gauge-gap) $col3-uniboard-table;
+    grid-template-columns: $col3-uniboard-side $puzzle-block-gap var(--col3-uniboard-width) $block-gap-half $col3-uniboard-table;
   }
 
   &__side {
     display: grid;
-    grid-gap: $block-gap;
+    grid-gap: $puzzle-block-gap;
     grid-template-areas: 'user' 'theme' 'metas' 'config';
 
     .puzzle-replay & {

diff --git a/ui/puzzle/css/_tools.scss b/ui/puzzle/css/_tools.scss
@@ -130,13 +130,13 @@
 
   position: relative;
   height: $col3-uniboard-controls;
-  margin-top: #{-$block-gap};
+  margin-top: #{-$puzzle-block-gap};
 
   @include breakpoint($mq-col1) {
     height: $col1-uniboard-controls;
   }
 
-  // height: calc(#{$puzzle-history-height} + #{$block-gap});
+  // height: calc(#{$puzzle-history-height} + #{$puzzle-block-gap});
   .jumps {
     position: relative;
     flex: 1 1 auto;