Improve mobile-first layout #93

alexis-martel · Apr 30, 2023 · 1518311 · 1518311
1 parent 32ee58f
commit 1518311
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/scripts/puzzle.js b/scripts/puzzle.js
@@ -29,7 +29,7 @@ class Puzzle {
         let squareX = 0; // x-coordinate of the current square
         let squareY = 0; // y-coordinate of the current square
 
-        gridContainer.style.gridTemplateColumns = `repeat(${this.obj["grid"][0].length}, 75px)`;
+        gridContainer.style.gridTemplateColumns = `repeat(${this.obj["grid"][0].length}, 1fr)`;
 
         for (const i of this.obj["grid"]) {
             for (const j of i) {
@@ -260,6 +260,7 @@ class PuzzleSquare {
             this.element.appendChild(this.clueElement);
             this.clueElement.classList.add("oc-puzzle-square-clue");
             this.clueElement.textContent = this.clue;
+            resizeClueFont.observe(this.clueElement.parentElement);
         }
         if (this.answer) {
             this.textElement = document.createElement("input");
@@ -271,6 +272,7 @@ class PuzzleSquare {
             this.textElement.setAttribute("autocomplete", "off");
             this.textElement.setAttribute("autocapitalize", "characters");
             this.textElement.ariaLabel = "Square answer".i18n();
+            resizeInputFont.observe(this.textElement);
             this.element.appendChild(this.textElement);
             this.textElement.classList.add("oc-puzzle-square-text");
             this.answer = this.answer.toUpperCase();
@@ -819,6 +821,18 @@ document.addEventListener("keydown", function (event) {
     }
 });
 
+const resizeInputFont = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+        entry.target.style.fontSize = (entry.contentRect.height * 0.75) + "px";
+    }
+});
+
+const resizeClueFont = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+        entry.target.firstChild.style.fontSize = (entry.target.clientHeight * 0.3) + "px";
+    }
+});
+
 function setLanguage(data) {
     l = data;
 }

diff --git a/styles/style.css b/styles/style.css
@@ -238,9 +238,6 @@ a {
 }
 
 .oc-puzzle-container {
-    padding: 0;
-    max-height: min-content;
-    max-width: min-content;
 }
 
 
@@ -297,9 +294,11 @@ a {
 
 .oc-grid-container {
     display: grid;
-    grid-gap: 2px;
-    height: min-content;
-    width: min-content;
+    gap: var(--main-border-width);
+    /*height: 100vh;*/
+    /*width: 100vw;*/
+    /*max-width: max-content;*/
+    /*max-height: max-content;*/
     margin: var(--main-border-width);
 }
 
@@ -332,7 +331,9 @@ a {
     display: inline-block;
     max-width: 75px;
     max-height: 75px;
-    aspect-ratio: 1 / 1;
+    min-height: 15px;
+    min-width: 15px;
+    aspect-ratio: 1;
     color: var(--foreground-colour);
     background-color: var(--background-colour);
     -webkit-user-select: none;
@@ -341,6 +342,7 @@ a {
     user-select: none;
     text-align: center;
     position: relative;
+    overflow: hidden;
 }
 
 .oc-puzzle-square-clue {
@@ -353,13 +355,12 @@ a {
 .oc-cell {
     font-size: 20px;
     cursor: text;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
 .oc-cell-circled::before {
     position: absolute;
+    top: calc(-1 * var(--main-border-width));
+    left: calc(-1 * var(--main-border-width));
     content: "";
     width: 100%;
     height: 100%;
@@ -406,6 +407,8 @@ a {
     background-color: transparent;
     border: none;
     outline: none;
+    padding: 0;
+    appearance: none;
     caret-color: transparent;
     font-family: var(--main-font);
     color: var(--foreground-colour);