fix chessboard offset

Author: ArneVogel

assets/js/modules/ground.js

@@ -74,8 +74,9 @@ function onresize() {
 function calculate_width() {
     let gc = document.getElementById("game_container");
     let gc_width = gc.offsetWidth;
-    let width = gc_width - 7; // for the numbers on the side of the ground
-    width -= width % 8; // fix chrome alignment errors; https://github.com/ornicar/lila/pull/3881
+    let width = gc_width ;//- 7; // for the numbers on the side of the ground
+    //width -= width % 8; // fix chrome alignment errors; https://github.com/ornicar/lila/pull/3881
+    // shouldn't be neccessary any longer https://github.com/lichess-org/chessground/pull/191
     return width;
 }
 

assets/static/css/chessground.css

@@ -10,26 +10,20 @@
 }
 
 .cg-wrap {
+  box-sizing: content-box;
   width: 320px;
   height: 320px;
   position: relative;
   display: block;
 }
 
-cg-helper {
-  position: absolute;
-  width: 12.5%;
-  padding-bottom: 12.5%;
-  display: table; /* hack: round to full pixel size in chrome */
-  bottom: 0;
-}
-
 cg-container {
   position: absolute;
-  width: 800%;
-  height: 800%;
+  width: 100%;
+  height: 100%;
   display: block;
-  bottom: 0;
+  top: 0;
+  box-sizing: content-box;
 }
 
 cg-board {
@@ -38,12 +32,15 @@ cg-board {
   left: 0;
   width: 100%;
   height: 100%;
+  box-sizing: content-box;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   line-height: 0;
   background-size: cover;
+}
+.cg-wrap.manipulable cg-board {
   cursor: pointer;
 }
 cg-board square {
@@ -52,6 +49,7 @@ cg-board square {
   left: 0;
   width: 12.5%;
   height: 12.5%;
+  box-sizing: content-box;
   pointer-events: none;
 }
 cg-board square.move-dest {
@@ -92,19 +90,20 @@ cg-board square.current-premove {
   left: 0;
   width: 12.5%;
   height: 12.5%;
+  box-sizing: content-box;
   background-size: cover;
   z-index: 2;
   will-change: transform;
   pointer-events: none;
 }
 cg-board piece.dragging {
   cursor: move;
-  z-index: 9;
+  z-index: 11 !important;
 }
-cg-board piece.anim {
+piece.anim {
   z-index: 8;
 }
-cg-board piece.fading {
+piece.fading {
   z-index: 1;
   opacity: 0.5;
 }
@@ -114,40 +113,70 @@ cg-board piece.fading {
 .cg-wrap piece.ghost {
   opacity: 0.3;
 }
-.cg-wrap svg {
+.cg-wrap piece svg {
   overflow: hidden;
+  position: relative;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 2;
+  opacity: 0.6;
+}
+.cg-wrap cg-auto-pieces,
+.cg-wrap .cg-shapes,
+.cg-wrap .cg-custom-svgs {
+  overflow: visible;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   pointer-events: none;
+}
+.cg-wrap cg-auto-pieces {
   z-index: 2;
+}
+.cg-wrap cg-auto-pieces piece {
+  opacity: 0.3;
+}
+.cg-wrap .cg-shapes {
+  overflow: hidden;
   opacity: 0.6;
+  z-index: 2;
 }
-.cg-wrap svg image {
-  opacity: 0.5;
+.cg-wrap .cg-custom-svgs {
+  z-index: 9;
+}
+.cg-wrap .cg-custom-svgs svg {
+  overflow: visible;
 }
 .cg-wrap coords {
   position: absolute;
   display: flex;
   pointer-events: none;
   opacity: 0.8;
+  font-family: sans-serif;
   font-size: 9px;
 }
 .cg-wrap coords.ranks {
-  right: -15px;
-  top: 0;
+  left: 4px;
+  top: -20px;
   flex-flow: column-reverse;
   height: 100%;
   width: 12px;
 }
 .cg-wrap coords.ranks.black {
   flex-flow: column;
 }
+.cg-wrap coords.ranks.left {
+  left: -15px;
+  align-items: flex-end;
+}
 .cg-wrap coords.files {
-  bottom: -16px;
-  left: 0;
+  bottom: -4px;
+  left: 24px;
   flex-flow: row;
   width: 100%;
   height: 16px;
@@ -171,16 +200,16 @@ cg-board piece.fading {
  * See https://github.com/ornicar/lila/blob/master/COPYING.md
  * License: AGPLv3+
  */
-.blue .chessboard {
+.blue cg-board {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgODAwIDgwMCI+CjxnIGlkPSJicm93bi1ib2FyZCI+CjxnIGlkPSJMaWdodCIgZmlsbD0iI2RlZTNlNiI+CjxyZWN0IHdpZHRoPSI4MDAiIGhlaWdodD0iODAwIi8+CjwvZz4KPGcgaWQ9IkZyYW1lIiBmaWxsPSJub25lIj4KPHJlY3Qgd2lkdGg9IjgwMCIgaGVpZ2h0PSI4MDAiLz4KPC9nPgo8ZyBpZD0iRGFyayIgZmlsbD0iIzhjYTJhZCI+CjxnIGlkPSJyYXoiPgo8ZyBpZD0iZHZhIj4KPGcgaWQ9InRyaSI+CjxyZWN0IHg9IjEwMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiLz4KPHJlY3QgeD0iMzAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIvPgo8cmVjdCB4PSI1MDAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIi8+CjxyZWN0IHg9IjcwMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiLz4KPC9nPgo8dXNlIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDAsMTAwKSIgeGxpbms6aHJlZj0iI3RyaSIvPgo8L2c+Cjx1c2UgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwyMDApIiB4bGluazpocmVmPSIjZHZhIi8+CjwvZz4KPHVzZSB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDQwMCkiIHhsaW5rOmhyZWY9IiNyYXoiLz4KPC9nPgo8L2c+Cjwvc3ZnPg==');
 }
-.brown .chessboard {
+.brown cg-board {
   background-image: url('/images/boards/brown.svg');
 }
-.green .chessboard {
+.green cg-board {
   background-image: url('/images/boards/green.svg');
 }
-.ic .chessboard {
+.ic cg-board {
   background-image: url('/images/boards/ic.svg');
 }