Switch approaches - just make the bottom clock appear shifted slightl…

…y upwards.
lichess-org · Feb 5, 2025 · 4234a06 · 4234a06
1 parent f04e696
commit 4234a06
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/ui/round/css/_app-layout.scss b/ui/round/css/_app-layout.scss
@@ -47,7 +47,7 @@
   display: grid;
 
   @include mq-is-col1 {
-    grid-template-rows: auto $col1-user-height $col1-mat-height auto auto $col1-mat-height $col1-user-height auto auto auto auto 0;
+    grid-template-rows: auto $col1-user-height $col1-mat-height auto auto $col1-bottom-mat-height $col1-bottom-user-height auto auto auto auto 0;
     grid-template-areas: 'pocket-top' 'user-top' 'mat-top' 'board' 'expi-bot' 'mat-bot' 'user-bot' 'pocket-bot' 'moves' 'controls' 'voice' 'kb-move';
 
     // Put clocks and players in the same grid cell.
@@ -61,6 +61,7 @@
 
     .rclock-bottom {
       grid-area: 6 / 1 / 8 / 2;
+      margin-top: $col1-bottom-clock-top-margin;
     }
 
     cg-board {

diff --git a/ui/round/css/_clock.scss b/ui/round/css/_clock.scss
@@ -8,7 +8,6 @@
     /* that weird shit is required so the clock goes above the player since they share the same grid cell */
     justify-self: flex-end;
     z-index: 1;
-    margin-top: $col1-clock-margin-top;
   }
 
   /* overflow: hidden; is not possible because of clock bars and shadows */
@@ -74,7 +73,7 @@
   .time {
     @extend %roboto, %box-shadow;
 
-    background: $c-bg-box;
+    background: $m-secondary_bg--mix-30;
     min-width: 3em;
     font-size: 2.8em;
     line-height: $col1-player-clock-height;
@@ -95,7 +94,6 @@
     @include mq-is-col1 {
       border-radius: 0;
       box-shadow: none;
-      line-height: $col1-player-clock-height - $col1-clock-margin-top;
     }
 
     @include mq-at-least-col2 {

diff --git a/ui/round/css/_constants.scss b/ui/round/css/_constants.scss
@@ -1,8 +1,17 @@
 // layout
 $col1-player-clock-height: 50px;
-$col1-clock-margin-top: -3px;
+$bottom-clock-shift-up-percent: 0.06;
+// todo:
+    // use this new percent variable to ideally clean up code a bit.
+    // review your changes, see if they make sense
+    // take screenshots of the clocks, and compare against screenshots of master.
+        // look at positionings of username and material too.
+$col1-bottom-clock-top-margin: -3px;
+$col1-bottom-clock-height: 47px;
 $col1-user-height: $col1-player-clock-height * 3 / 5;
 $col1-mat-height: $col1-player-clock-height * 2 / 5;
+$col1-bottom-user-height: $col1-bottom-clock-height * 3 / 5;
+$col1-bottom-mat-height: $col1-bottom-clock-height * 2 / 5;
 $col1-moves-height: 4em;
 $move-tag: 'kwdb';
 $rmoves-tag: 'rm6';