From 3acb852d971bc17d31ccc05756524f40038adf95 Mon Sep 17 00:00:00 2001 From: Benjamin Auder Date: Thu, 20 Dec 2018 19:10:27 +0100 Subject: [PATCH] Fix index style. Now on variant page --- public/javascripts/index.js | 8 +-- public/stylesheets/index.sass | 98 +++++++++++---------------------- public/stylesheets/layout.sass | 28 ++++++++-- public/stylesheets/variant.sass | 5 +- views/index.pug | 77 +++++++++++++------------- 5 files changed, 103 insertions(+), 113 deletions(-) diff --git a/public/javascripts/index.js b/public/javascripts/index.js index 54c296ba..e460f868 100644 --- a/public/javascripts/index.js +++ b/public/javascripts/index.js @@ -77,16 +77,16 @@ new Vue({ // Show welcome dialog box if "first visit" const visited = getCookie("visited"); if (!visited || visited !== "1") - document.getElementById("modal-b4welcome").checked = true; + document.getElementById("modalB4welcome").checked = true; }, methods: { showWelcomeMsg: function() { - document.getElementById("modal-b4welcome").checked = false; - document.getElementById("modal-welcome").checked = true; + document.getElementById("modalB4welcome").checked = false; + document.getElementById("modalWelcome").checked = true; }, markAsVisited: function() { setCookie('visited', '1'); - document.getElementById('modal-welcome').checked = false; + document.getElementById('modalWelcome').checked = false; }, }, }); diff --git a/public/stylesheets/index.sass b/public/stylesheets/index.sass index 07f965fe..3ae86f9e 100644 --- a/public/stylesheets/index.sass +++ b/public/stylesheets/index.sass @@ -1,21 +1,3 @@ -.boxtitle - font-weight: bold - -.variant - color: black - //margin-top: 20px - border: 1px solid brown - box-sizing: border-box - background-color: lightyellow - a - color: #663300 - -.card > h3.section.blue - color: #0033cc - -.card > h3.section.red - color: #cc3300 - #main-title font-style: italic background: linear-gradient(#e66465, #9198e5) @@ -28,61 +10,47 @@ padding-left: 10px padding-right: 15px +.variant + box-sizing: border-box + border: 1px solid brown + background-color: lightyellow + a + color: #663300 + .boxtitle + font-weight: bold + #needHelp cursor: pointer -#welcome - max-height: 100vh - max-width: 90vw - -#help - max-height: 100vh - max-width: 600px - -.conditional-jump - display: block - -@media screen and (max-width: 710px) - .conditional-jump - display: inline - -@media screen and (max-width: 400px) - #welcome, #help - max-width: 100vw - -#welcome ul - list-style-type: none - -#welcome ul > li - font-family: monospace - -.read-this +#readThis color: blue text-decoration: underline cursor: pointer -.emphasis - font-style: italic - color: purple - -.disable-msg - cursor: pointer - color: darkred +#b4welcome + max-width: 320px -.smallfont - font-size: 0.8em - -table.list-table - width: 300px - margin: 0 auto - border: 0 - tbody +#welcome + max-width: 90vw + @media screen and (max-width: 767px) + max-width: 100vw + ul + list-style-type: none + // TODO: bad practice, use table to align things... + table.list-table + width: 300px + margin: 0 auto border: 0 - tr + tbody border: 0 - margin: 0 - padding: 0 - td - padding: 0 - text-align: left + tr border: 0 + margin: 0 + padding: 0 + td + padding: 0 + text-align: left + border: 0 + #disableMsg + cursor: pointer + color: darkred diff --git a/public/stylesheets/layout.sass b/public/stylesheets/layout.sass index 647a78bf..cdcd81e0 100644 --- a/public/stylesheets/layout.sass +++ b/public/stylesheets/layout.sass @@ -7,12 +7,32 @@ body padding: 0 min-width: 320px -//@media screen and (min-width: 767px) - .card - max-width: 600px - .text-center text-align: center .smallpad padding: 5px + +.emphasis + font-style: italic + +.red + color: #cc3300 + +.purple + color: purple + +.smallfont + font-size: 0.8em + +[type="checkbox"].modal+div .card + max-width: 767px + max-height: 100vh + +// TODO: unused +// Jump lines only if screen is large enough +.conditional-jump + display: block +@media screen and (max-width: 767px) + .conditional-jump + display: inline diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass index be0dbc8e..6cd3c1f4 100644 --- a/public/stylesheets/variant.sass +++ b/public/stylesheets/variant.sass @@ -1,7 +1,6 @@ .container#variantPage padding: 0 -//.container#variantPage > .row > div @media screen and (max-width: 767px) .col-sm-12 padding: 0 @@ -12,6 +11,10 @@ margin-right: 0 padding: 0 3px + +//TODO: taille modal au cas par cas. standard == 767. Can be larger (welcome, fen...) + + .warn padding: 3px color: red diff --git a/views/index.pug b/views/index.pug index 78473c0e..011e4e96 100644 --- a/views/index.pug +++ b/views/index.pug @@ -12,50 +12,51 @@ block content span vchess.club img(src="/images/index/wildebeest.svg") h2#needHelp.text-center( - onClick="document.getElementById('modal-help').checked=true") + onClick="document.getElementById('modalHelp').checked=true") | Need help ? - input#modal-help.modal(type="checkbox") + input#modalHelp.modal(type="checkbox") div(role="dialog") #help.card - label.modal-close(for="modal-help") - h3.section.emphasis Welcome to v[ariant] chess club - p.section First: watch #[a(href="/demo.webm") demo video] ! - h3.blue.section Comments - p.section. - All games start with a random assymetric position. #[br] - Games are untimed, and played anonymously. #[br] - No chat while playing, to focus on the moves :) - h3.red.section Bug report - p.section - | If you find a bug in a game, please follow this procedure: #[br] - | 1. stop playing: click on the resign button; #[br] - | 2. click on the PGN to download it; #[br] - | 3. send an email to - a(href="mailto:contact@vchess.club?subject=[vchess.club] bug report") - | contact@vchess.club - | with relevant comments and the PGN attached. Thank you! - input#modal-b4welcome.modal(type="checkbox") + label.modal-close(for="modalHelp") + .section + p.emphasis First: watch #[a(href="/demo.webm") demo video] ! + p Then click on a variant... Reminder: + ul + li All games start with a random assymetric position. + li Games are untimed, and played anonymously. + li No chat while playing, to focus on the moves. + .section + h3.red Bug report + p + | If you find a bug in a game, please follow this procedure: #[br] + | 1. stop playing: click on the resign button; #[br] + | 2. download the game as PGN; #[br] + | 3. send an email to + a(href="mailto:contact@vchess.club?subject=[vchess.club] bug report") + | contact@vchess.club + | with comments + PGN attached. + input#modalB4welcome.modal(type="checkbox") div(role="dialog") #b4welcome.card.text-center - label.modal-close(for="modal-b4welcome") - h3.blue.section First visit? + label.modal-close(for="modalB4welcome") + h3.blue First visit? p Please - span.read-this(@click="showWelcomeMsg") read this - span  before playing ☺ - input#modal-welcome.modal(type="checkbox") + span#readThis(@click="showWelcomeMsg") read this + span  before playing! + input#modalWelcome.modal(type="checkbox") div(role="dialog") #welcome.card.text-center - label.modal-close(for="modal-welcome") - h3.blue.section Welcome to vchess.club! + label.modal-close(for="modalWelcome") + h3.blue.section Welcome to v[ariant]chess.club! .section - p A fun place to play chess variants in real time! + p A fun place to play chess variants in real time. p But wait... what is a chess variant? img(src="/images/Hexagonal_chess.svg") p. As suggested by the picture, a variant setup generally looks more or less like a chessboard with regular pieces - (otherwise it's no longer a variant but a whole new game!). - p.emphasis However... + (otherwise it's no longer a variant but a whole new game). + p.emphasis.purple However... p Each variant has its own new rules, which can involve table.list-table tbody @@ -77,7 +78,7 @@ block content p Also state a goal: make the opponent's king explode. p → Congrats, you defined Atomic chess! (Playable here) .section - p.emphasis OK, this all sounds interesting, but why would that be fun? + p.emphasis.purple OK, this all sounds interesting, but why would that be fun? p. Because all games here start with a random setup: no more boring openings memorization, you have to rely on your chess skills only. @@ -86,17 +87,15 @@ block content var wikipediaUrl = "https://en.wikipedia.org/wiki/" + "List_of_chess_variants#/media/File:Hexagonal_chess.svg"; p. - For informations about hundreds (if not thousands!) of variants, you - can visit the excellent - #[a(href="https://www.chessvariants.com/") chessvariants] website. - p.disable-msg(@click="markAsVisited") + For informations about hundreds (if not thousands) of variants, you + can visit the excellent + #[a(href="https://www.chessvariants.com/") chessvariants] website. + p#disableMsg(@click="markAsVisited") | Click here to not show this message next time p.smallfont Image credit: #[a(href=wikipediaUrl) Wikipedia] .row - my-variant-summary( - v-for="(v,idx) in sortedCounts" - v-bind:vobj="v" v-bind:index="idx" - v-bind:key="v.name") + my-variant-summary(v-for="(v,idx) in sortedCounts" + v-bind:vobj="v" v-bind:index="idx" v-bind:key="v.name") block javascripts script. -- 2.44.0