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
guardian · Jul 24, 2024 · e6fb8c8 · e6fb8c8
1 parent 7aa0fee
commit e6fb8c8
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 27 deletions.
diff --git 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
@@ -17,7 +17,7 @@
                             data-crossword-data="@Json.stringify(Json.toJson(crosswordPage.crossword))">
 
                             <div
-                                class="crossword__container [email protected].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
@@ -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
@@ -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
@@ -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
@@ -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;