From 26d8a01a40dc198b633ae86f698b1ae82415e5e1 Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Mon, 6 Apr 2020 12:50:08 +0200
Subject: [PATCH] Factorize some duplicated CSS

---
 client/src/App.vue                        |  70 +-------------
 client/src/components/Board.vue           |   3 +-
 client/src/styles/TODO                    |   3 -
 client/src/styles/_board_squares_img.sass |  63 +++++++++++++
 client/src/styles/_rules.sass             |  76 +++++++++++++++
 client/src/views/About.vue                |   1 +
 client/src/views/Analyse.vue              |  55 ++++++++++-
 client/src/views/Game.vue                 | 110 ++++------------------
 client/src/views/MyGames.vue              |   2 +-
 client/src/views/News.vue                 |  18 ++--
 client/src/views/Rules.vue                |  84 ++---------------
 11 files changed, 236 insertions(+), 249 deletions(-)
 delete mode 100644 client/src/styles/TODO
 create mode 100644 client/src/styles/_board_squares_img.sass
 create mode 100644 client/src/styles/_rules.sass

diff --git a/client/src/App.vue b/client/src/App.vue
index eef7169f..0637d09d 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -204,6 +204,11 @@ nav
       & > #leftMenu
         margin-top: 42px
         padding-bottom: 5px
+        & > a
+          text-decoration: none
+          color: #2c3e50
+          &.router-link-exact-active
+            color: #42b983
       & > #rightMenu
         padding-top: 5px
         border-top: 1px solid darkgrey
@@ -294,69 +299,4 @@ footer
   color: red
   &:link, &:visited, &:hover
     color: red
-
-// Styles for diagrams and board (partial).
-// TODO: where to put that ?
-
-.light-square-diag
-  background-color: #e5e5ca
-
-.dark-square-diag
-  background-color: #6f8f57
-
-div.board
-  user-select: none
-  float: left
-  height: 0
-  display: inline-block
-  position: relative
-
-div.board5
-  width: 20%
-  padding-bottom: 20%
-
-div.board8
-  width: 12.5%
-  padding-bottom: 12.5%
-
-div.board9
-  width: 11.1%
-  padding-bottom: 11.1%
-
-div.board10
-  width: 10%
-  padding-bottom: 10%
-
-div.board11
-  width: 9.09%
-  padding-bottom: 9.09%
-
-div.board12
-  width: 8.33%
-  padding-bottom: 8.33%
-
-img.piece
-  width: 100%
-
-img.piece, img.mark-square, img.circle-square
-  max-width: 100%
-  height: auto
-  display: block
-
-img.mark-square
-  opacity: .7
-  width: 76%
-  position: absolute
-  top: 12%
-  left: 12%
-
-img.circle-square
-  opacity: 0.7
-  width: 100%
-  position: absolute
-  top: 0
-  left: 0
-
-.in-shadow
-  filter: brightness(50%)
 </style>
diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index e6a0aafd..c052cd14 100644
--- a/client/src/components/Board.vue
+++ b/client/src/components/Board.vue
@@ -709,6 +709,8 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+@import "@/styles/_board_squares_img.sass";
+
 // NOTE: no variants with reserve of size != 8
 .game.reserve-div
   margin-bottom: 18px
@@ -802,5 +804,4 @@ img.ghost
   background-color: #9f9fff
 .dark-square.chesstempo.highlight-dark
   background-color: #557fff
-
 </style>
diff --git a/client/src/styles/TODO b/client/src/styles/TODO
deleted file mode 100644
index e3f897ee..00000000
--- a/client/src/styles/TODO
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "./styles/_variables.scss";
-https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/
---> Stop duplicating CSS
diff --git a/client/src/styles/_board_squares_img.sass b/client/src/styles/_board_squares_img.sass
new file mode 100644
index 00000000..e9606602
--- /dev/null
+++ b/client/src/styles/_board_squares_img.sass
@@ -0,0 +1,63 @@
+// Styles for diagrams and board (partial).
+
+.light-square-diag
+  background-color: #e5e5ca
+
+.dark-square-diag
+  background-color: #6f8f57
+
+div.board
+  user-select: none
+  float: left
+  height: 0
+  display: inline-block
+  position: relative
+
+div.board5
+  width: 20%
+  padding-bottom: 20%
+
+div.board8
+  width: 12.5%
+  padding-bottom: 12.5%
+
+div.board9
+  width: 11.1%
+  padding-bottom: 11.1%
+
+div.board10
+  width: 10%
+  padding-bottom: 10%
+
+div.board11
+  width: 9.09%
+  padding-bottom: 9.09%
+
+div.board12
+  width: 8.33%
+  padding-bottom: 8.33%
+
+img.piece
+  width: 100%
+
+img.piece, img.mark-square, img.circle-square
+  max-width: 100%
+  height: auto
+  display: block
+
+img.mark-square
+  opacity: .7
+  width: 76%
+  position: absolute
+  top: 12%
+  left: 12%
+
+img.circle-square
+  opacity: 0.7
+  width: 100%
+  position: absolute
+  top: 0
+  left: 0
+
+.in-shadow
+  filter: brightness(50%)
diff --git a/client/src/styles/_rules.sass b/client/src/styles/_rules.sass
new file mode 100644
index 00000000..17b10667
--- /dev/null
+++ b/client/src/styles/_rules.sass
@@ -0,0 +1,76 @@
+figure.diagram-container
+  margin: 15px 0 15px 0
+  text-align: center
+  width: 100%
+  display: block
+  .diagram
+    display: block
+    width: 50%
+    min-width: 240px
+    margin-left: auto
+    margin-right: auto
+  .diag12
+    float: left
+    width: 40%
+    margin-left: calc(10% - 20px)
+    margin-right: 40px
+    @media screen and (max-width: 630px)
+      float: none
+      margin: 0 auto 10px auto
+  .diag22
+    float: left
+    width: 40%
+    margin-right: calc(10% - 20px)
+    @media screen and (max-width: 630px)
+      float: none
+      margin: 0 auto
+  figcaption
+    display: block
+    clear: both
+    padding-top: 5px
+    font-size: 0.8em
+
+p.boxed
+  background-color: #FFCC66
+  padding: 5px
+
+.bigfont
+  font-size: 1.2em
+
+.bold
+  font-weight: bold
+
+.stageDelimiter
+  color: purple
+
+// To show (new) pieces, and/or there values...
+figure.showPieces > img
+  width: 50px
+
+figure.showPieces > figcaption
+  color: #6C6C6C
+
+.section-title
+  padding: 0
+
+.section-title > h4
+  padding: 5px
+
+ol, ul:not(.browser-default)
+  padding-left: 20px
+
+ul:not(.browser-default)
+  margin-top: 5px
+
+ul:not(.browser-default) > li
+  list-style-type: disc
+
+table
+  margin: 15px auto
+
+.italic
+  font-style: italic
+
+img.img-center
+  display: block
+  margin: 0 auto 15px auto
diff --git a/client/src/views/About.vue b/client/src/views/About.vue
index b7f47afb..44414944 100644
--- a/client/src/views/About.vue
+++ b/client/src/views/About.vue
@@ -23,6 +23,7 @@ export default {
 };
 </script>
 
+<!-- Not scoped, because code is injected -->
 <style lang="sass">
 #links
   margin: var(--universal-margin);
diff --git a/client/src/views/Analyse.vue b/client/src/views/Analyse.vue
index 39022e8a..bc88c757 100644
--- a/client/src/views/Analyse.vue
+++ b/client/src/views/Analyse.vue
@@ -1,5 +1,14 @@
 <template lang="pug">
 main
+  input#modalRules.modal(type="checkbox")
+  div#rulesDiv(
+    role="dialog"
+    data-checkbox="modalRules"
+  )
+    .card
+      label.modal-close(for="modalRules")
+      h4#variantNameInAnalyze(@click="gotoRules()") {{ game.vname }}
+      div(v-html="rulesContent")
   .row
     .col-sm-12
       .text-center
@@ -16,6 +25,8 @@ main
 
 <script>
 import BaseGame from "@/components/BaseGame.vue";
+import { processModalClick } from "@/utils/modalClick";
+import { replaceByDiag } from "@/utils/printDiagram";
 import { store } from "@/store";
 export default {
   name: "my-analyse",
@@ -28,6 +39,7 @@ export default {
   data: function() {
     return {
       st: store.state,
+      rulesContent: "",
       gameRef: {
         vname: "",
         fen: ""
@@ -47,6 +59,10 @@ export default {
   created: function() {
     this.initFromUrl();
   },
+  mounted: function() {
+    document.getElementById("rulesDiv")
+      .addEventListener("click", processModalClick);
+  },
   methods: {
     alertAndQuit: function(text, wrongVname) {
       // Soon after component creation, st.tr might be uninitialized.
@@ -82,6 +98,21 @@ export default {
         else this.loadGame(orientation);
       })
       .catch((err) => { this.alertAndQuit("Mispelled variant name", true); });
+      this.rulesContent =
+        require(
+          "raw-loader!@/translations/rules/" +
+          this.gameRef.vname + "/" +
+          this.st.lang + ".pug"
+        )
+        // Next two lines fix a weird issue after last update (2019-11)
+        .replace(/\\n/g, " ")
+        .replace(/\\"/g, '"')
+        .replace('module.exports = "', "")
+        .replace(/"$/, "")
+        .replace(/(fen:)([^:]*):/g, replaceByDiag);
+    },
+    gotoRules: function() {
+      this.$router.push("/variants/" + this.gameRef.vname);
     },
     loadGame: function(orientation) {
       this.game.vname = this.gameRef.vname;
@@ -112,7 +143,29 @@ export default {
 };
 </script>
 
-<style lang="sass" scoped=true>
+<style lang="sass">
+@import "@/styles/_board_squares_img.sass"
+@import "@/styles/_rules.sass"
+</style>
+
+<style lang="sass" scoped>
+h4#variantNameInAnalyze
+  cursor: pointer
+  text-align: center
+  text-decoration: underline
+  font-weight: bold
+
+#rulesDiv > .card
+  padding: 5px 0
+  max-width: 50%
+  max-height: 100%
+  @media screen and (max-width: 1500px)
+    max-width: 67%
+  @media screen and (max-width: 1024px)
+    max-width: 85%
+  @media screen and (max-width: 767px)
+    max-width: 100%
+
 input#fen
   // Use a Monospace font for input FEN width adjustment
   font-family: "Fira Code"
diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index 0d7a4ee9..ae90255d 100644
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -1243,21 +1243,21 @@ export default {
       await import("@/variants/" + game.vname + ".js")
       .then((vModule) => {
         window.V = vModule[game.vname + "Rules"];
-        // (AJAX) Request to get rules content (plain text, HTML)
-        this.rulesContent =
-          require(
-            "raw-loader!@/translations/rules/" +
-            game.vname + "/" +
-            this.st.lang + ".pug"
-          )
-          // Next two lines fix a weird issue after last update (2019-11)
-          .replace(/\\n/g, " ")
-          .replace(/\\"/g, '"')
-          .replace('module.exports = "', "")
-          .replace(/"$/, "")
-          .replace(/(fen:)([^:]*):/g, replaceByDiag);
         this.loadGame(game, callback);
       });
+      // (AJAX) Request to get rules content (plain text, HTML)
+      this.rulesContent =
+        require(
+          "raw-loader!@/translations/rules/" +
+          game.vname + "/" +
+          this.st.lang + ".pug"
+        )
+        // Next two lines fix a weird issue after last update (2019-11)
+        .replace(/\\n/g, " ")
+        .replace(/\\"/g, '"')
+        .replace('module.exports = "', "")
+        .replace(/"$/, "")
+        .replace(/(fen:)([^:]*):/g, replaceByDiag);
     },
     // 3 cases for loading a game:
     //  - from indexedDB (running or completed live game I play)
@@ -1615,8 +1615,10 @@ export default {
 
 #rulesDiv > .card
   padding: 5px 0
-  max-width: 75%
+  max-width: 50%
   max-height: 100%
+  @media screen and (max-width: 1500px)
+    max-width: 67%
   @media screen and (max-width: 1024px)
     max-width: 85%
   @media screen and (max-width: 767px)
@@ -1758,82 +1760,6 @@ h4#variantNameInGame
 </style>
 
 <style lang="sass">
-// TODO: next is duplicated from Rules/. Merge ? How ? ...
-
-figure.diagram-container
-  margin: 15px 0 15px 0
-  text-align: center
-  width: 100%
-  display: block
-  .diagram
-    display: block
-    width: 50%
-    min-width: 240px
-    margin-left: auto
-    margin-right: auto
-  .diag12
-    float: left
-    width: 40%
-    margin-left: calc(10% - 20px)
-    margin-right: 40px
-    @media screen and (max-width: 630px)
-      float: none
-      margin: 0 auto 10px auto
-  .diag22
-    float: left
-    width: 40%
-    margin-right: calc(10% - 20px)
-    @media screen and (max-width: 630px)
-      float: none
-      margin: 0 auto
-  figcaption
-    display: block
-    clear: both
-    padding-top: 5px
-    font-size: 0.8em
-
-p.boxed
-  background-color: #FFCC66
-  padding: 5px
-
-.bigfont
-  font-size: 1.2em
-
-.bold
-  font-weight: bold
-
-.stageDelimiter
-  color: purple
-
-// To show (new) pieces, and/or there values...
-figure.showPieces > img
-  width: 50px
-
-figure.showPieces > figcaption
-  color: #6C6C6C
-
-.section-title
-  padding: 0
-
-.section-title > h4
-  padding: 5px
-
-ol, ul:not(.browser-default)
-  padding-left: 20px
-
-ul:not(.browser-default)
-  margin-top: 5px
-
-ul:not(.browser-default) > li
-  list-style-type: disc
-
-table
-  margin: 15px auto
-
-.italic
-  font-style: italic
-
-img.img-center
-  display: block
-  margin: 0 auto 15px auto
+@import "@/styles/_rules.sass"
+@import "@/styles/_board_squares_img.sass"
 </style>
diff --git a/client/src/views/MyGames.vue b/client/src/views/MyGames.vue
index ea9b49d3..b50af21e 100644
--- a/client/src/views/MyGames.vue
+++ b/client/src/views/MyGames.vue
@@ -392,7 +392,7 @@ export default {
 };
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
 .active
   color: #42a983
 
diff --git a/client/src/views/News.vue b/client/src/views/News.vue
index 96492ab2..664b5957 100644
--- a/client/src/views/News.vue
+++ b/client/src/views/News.vue
@@ -195,7 +195,7 @@ export default {
 };
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
 [type="checkbox"].modal+div .card
   max-width: 767px
   max-height: 100%
@@ -221,6 +221,15 @@ span.ndt
   color: darkblue
   padding: 0 5px 0 var(--universal-margin)
 
+.margintop
+  margin-top: 25px
+  border-top: 1px solid grey
+@media screen and (max-width: 767px)
+  .margintop
+    margin-top: 10px
+</style>
+
+<style lang="sass">
 .news
   padding-top: 10px
   & > .dev-buttons
@@ -233,11 +242,4 @@ span.ndt
       display: block
       margin-top: 10px
       content: " "
-
-.margintop
-  margin-top: 25px
-  border-top: 1px solid grey
-@media screen and (max-width: 767px)
-  .margintop
-    margin-top: 10px
 </style>
diff --git a/client/src/views/Rules.vue b/client/src/views/Rules.vue
index c48feb08..367963c5 100644
--- a/client/src/views/Rules.vue
+++ b/client/src/views/Rules.vue
@@ -148,86 +148,14 @@ export default {
 };
 </script>
 
-<!-- NOTE: not scoped here, because HTML is injected (TODO) -->
+<!-- NOTE: not scoped here, because HTML is injected -->
 <style lang="sass">
-h4#variantName
-  text-align: center
-  font-weight: bold
+@import "@/styles/_board_squares_img.sass"
+@import "@/styles/_rules.sass"
+</style>
 
-figure.diagram-container
-  margin: 15px 0 15px 0
+<style lang="sass" scoped>
+h4#variantName
   text-align: center
-  width: 100%
-  display: block
-  .diagram
-    display: block
-    width: 50%
-    min-width: 240px
-    margin-left: auto
-    margin-right: auto
-  .diag12
-    float: left
-    width: 40%
-    margin-left: calc(10% - 20px)
-    margin-right: 40px
-    @media screen and (max-width: 630px)
-      float: none
-      margin: 0 auto 10px auto
-  .diag22
-    float: left
-    width: 40%
-    margin-right: calc(10% - 20px)
-    @media screen and (max-width: 630px)
-      float: none
-      margin: 0 auto
-  figcaption
-    display: block
-    clear: both
-    padding-top: 5px
-    font-size: 0.8em
-
-p.boxed
-  background-color: #FFCC66
-  padding: 5px
-
-.bigfont
-  font-size: 1.2em
-
-.bold
   font-weight: bold
-
-.stageDelimiter
-  color: purple
-
-// To show (new) pieces, and/or there values...
-figure.showPieces > img
-  width: 50px
-
-figure.showPieces > figcaption
-  color: #6C6C6C
-
-.section-title
-  padding: 0
-
-.section-title > h4
-  padding: 5px
-
-ol, ul:not(.browser-default)
-  padding-left: 20px
-
-ul:not(.browser-default)
-  margin-top: 5px
-
-ul:not(.browser-default) > li
-  list-style-type: disc
-
-table
-  margin: 15px auto
-
-.italic
-  font-style: italic
-
-img.img-center
-  display: block
-  margin: 0 auto 15px auto
 </style>
-- 
2.44.0