resize the crossword grid by dimensions, not the type

guardian · Jul 22, 2024 · dbe5e43 · dbe5e43
1 parent d3321eb
commit dbe5e43
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 18 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 [email protected].crosswordType.toString.toLowerCase() crossword__container--accessible">
+                    <div class="crossword__container crossword__container--@{crosswordPage.crossword.dimensions.cols}cell 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
@@ -33,8 +33,8 @@
     -webkit-font-smoothing: subpixel-antialiased;
     transition: opacity .15s ease-in;
 
-    @each $xword, $cells in $xword-grid-sizes {
-        .crossword__container--#{$xword} & {
+    @each $cells in $xword-cell-sizes {
+        .crossword__container--#{$cells}cell & {
             font-size: ceil(1.2px * $cells);
 
             @include mq(tablet) {

diff --git a/static/src/stylesheets/module/crosswords/_layout.scss b/static/src/stylesheets/module/crosswords/_layout.scss
@@ -4,10 +4,10 @@
     @return $cells * ($xword-cell-width + $xword-border-width) + $xword-border-width;
 }
 
-@each $xword, $cells in $xword-grid-sizes {
+@each $cells in $xword-cell-sizes {
     $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;