From e6fb8c8c12e0d3f3d7b71cf1ee86d077f9d06483 Mon Sep 17 00:00:00 2001
From: Andrew Nowak <10963046+andrew-nowak@users.noreply.github.com>
Date: Wed, 24 Jul 2024 10:26:36 +0100
Subject: [PATCH] resize the crossword grid by dimensions, not the type
 (#27336)

* resize the crossword grid by dimensions, not the type

* Cap max grid size, scale font with size not cell count

* Remove grid-size CSS class from accessible template

There is no grid on the accessible version of a crossword page, so these styles are irrelevant
---
 .../crosswords/accessibleCrosswordContent.scala.html |  2 +-
 .../fragments/crosswords/crosswordContent.scala.html |  2 +-
 .../projects/common/modules/crosswords/crossword.js  |  2 +-
 static/src/stylesheets/module/crosswords/_cell.scss  | 10 ----------
 .../src/stylesheets/module/crosswords/_layout.scss   |  7 ++++---
 static/src/stylesheets/module/crosswords/_vars.scss  | 12 +-----------
 6 files changed, 8 insertions(+), 27 deletions(-)

diff --git a/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html b/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
index c3fd85cea44..5e14e02d630 100644
--- a/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
+++ b/applications/app/views/fragments/crosswords/accessibleCrosswordContent.scala.html
@@ -9,7 +9,7 @@
         <div class="content__main tonal__main tonal__main--tone-news">
             <div class="gs-container">
                 <div class="js-content-main-column">
-                    <div class="crossword__container crossword__container--@crosswordPage.crossword.crosswordType.toString.toLowerCase() crossword__container--accessible">
+                    <div class="crossword__container crossword__container--accessible">
                         <div class="crossword__accessible-row-data-wrapper">
                             <div class="crossword__accessible-data">
                                 <h3 class="crossword__accessible-data--header">Blanks</h3>
diff --git a/applications/app/views/fragments/crosswords/crosswordContent.scala.html b/applications/app/views/fragments/crosswords/crosswordContent.scala.html
index 55de2576c92..2eee10bf217 100644
--- a/applications/app/views/fragments/crosswords/crosswordContent.scala.html
+++ b/applications/app/views/fragments/crosswords/crosswordContent.scala.html
@@ -17,7 +17,7 @@
                             data-crossword-data="@Json.stringify(Json.toJson(crosswordPage.crossword))">
 
                             <div
-                                class="crossword__container crossword__container--@crosswordPage.crossword.crosswordType.toString.toLowerCase()">
+                                class="crossword__container crossword__container--@{crosswordPage.crossword.dimensions.cols}cell">
                                 @* The following is a fallback for when JavaScript is not enabled *@
                                 <div class="crossword__container__grid-wrapper">
                                     <noscript>@crosswordPage.svg</noscript>
diff --git a/static/src/javascripts/projects/common/modules/crosswords/crossword.js b/static/src/javascripts/projects/common/modules/crosswords/crossword.js
index 181708aa65b..4803001e192 100644
--- a/static/src/javascripts/projects/common/modules/crosswords/crossword.js
+++ b/static/src/javascripts/projects/common/modules/crosswords/crossword.js
@@ -749,7 +749,7 @@ class Crossword extends Component {
 
 		return (
 			<div
-				className={`crossword__container crossword__container--${this.props.data.crosswordType} crossword__container--react`}
+				className={`crossword__container crossword__container--${this.props.data.dimensions.cols}cell crossword__container--react`}
 				data-link-name="Crosswords"
 			>
 				<div
diff --git a/static/src/stylesheets/module/crosswords/_cell.scss b/static/src/stylesheets/module/crosswords/_cell.scss
index 3a223d2d3b6..94b2f119ace 100644
--- a/static/src/stylesheets/module/crosswords/_cell.scss
+++ b/static/src/stylesheets/module/crosswords/_cell.scss
@@ -32,16 +32,6 @@
     opacity: 1;
     -webkit-font-smoothing: subpixel-antialiased;
     transition: opacity .15s ease-in;
-
-    @each $xword, $cells in $xword-grid-sizes {
-        .crossword__container--#{$xword} & {
-            font-size: ceil(1.2px * $cells);
-
-            @include mq(tablet) {
-                font-size: 1.1px * $cells;
-            }
-        }
-    }
 }
 
 .crossword__cell-text--focussed {
diff --git a/static/src/stylesheets/module/crosswords/_layout.scss b/static/src/stylesheets/module/crosswords/_layout.scss
index e42a6cf42c9..c946ae91a8d 100644
--- a/static/src/stylesheets/module/crosswords/_layout.scss
+++ b/static/src/stylesheets/module/crosswords/_layout.scss
@@ -4,10 +4,11 @@
     @return $cells * ($xword-cell-width + $xword-border-width) + $xword-border-width;
 }
 
-@each $xword, $cells in $xword-grid-sizes {
-    $size: xword-grid-dimensions($cells);
+@each $cells in $xword-cell-sizes {
+    $max-size: 481px; // width of 15-cell grid
+    $size: min($max-size, xword-grid-dimensions($cells));
 
-    .crossword__container--#{$xword} {
+    .crossword__container--#{$cells}cell {
         @include mq(tablet) {
             padding-left: $size;
 
diff --git a/static/src/stylesheets/module/crosswords/_vars.scss b/static/src/stylesheets/module/crosswords/_vars.scss
index b43080539a7..9503aaa5b90 100644
--- a/static/src/stylesheets/module/crosswords/_vars.scss
+++ b/static/src/stylesheets/module/crosswords/_vars.scss
@@ -11,14 +11,4 @@ $xword-focussed-background-colour: #fff7b2;
 
 $xword-clue-number-width: 32px;
 
-$xword-grid-sizes: (
-    quick-cryptic: 11,
-    quick: 13,
-    cryptic: 15,
-    prize: 15,
-    quiptic: 15,
-    genius: 15,
-    speedy: 13,
-    everyman: 15,
-    weekend: 13
-);
+$xword-cell-sizes: 11, 13, 15, 17, 19, 21, 23, 25, 27;