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