From: Benjamin Auder Date: Sat, 22 Dec 2018 09:28:00 +0000 (+0100) Subject: Improve style on variant page; TODO: problems, Crazyhouse X-Git-Url: https://git.auder.net/variants/img/pieces/css/doc/html/%7B%7B%20pkg.url%20%7D%7D?a=commitdiff_plain;h=d449ae46d69980f18c96dbd5a87135d257dcb19d;p=vchess.git Improve style on variant page; TODO: problems, Crazyhouse --- diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 80a8e7cb..773bc1f1 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -908,7 +908,8 @@ Vue.component('my-game', { h('p', { attrs: { id: "fen-string" }, - domProps: { innerHTML: this.vr.getBaseFen() } + domProps: { innerHTML: this.vr.getBaseFen() }, + "class": { "text-center": true }, } ) ] diff --git a/public/javascripts/variant.js b/public/javascripts/variant.js index f9fb0c62..f77be329 100644 --- a/public/javascripts/variant.js +++ b/public/javascripts/variant.js @@ -4,6 +4,12 @@ new Vue({ display: "game", //default: play! problem: undefined, //current problem in view }, + created: function() { + const url = window.location.href; + const hashPos = url.indexOf("#"); + if (hashPos >= 0) + this.setDisplay(url.substr(hashPos+1)); + }, methods: { showProblem: function(problemTxt) { this.problem = JSON.parse(problemTxt); diff --git a/public/stylesheets/index.sass b/public/stylesheets/index.sass index 3b944915..0c6d92a5 100644 --- a/public/stylesheets/index.sass +++ b/public/stylesheets/index.sass @@ -27,9 +27,9 @@ img display: inline-block height: 30px - padding-top: 25px + margin-top: 25px @media screen and (max-width: 767px) - padding-top: 7px + margin-top: 7px p font-weight: bold padding: 0 diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass index efaf1e99..da55577f 100644 --- a/public/stylesheets/variant.sass +++ b/public/stylesheets/variant.sass @@ -1,64 +1,69 @@ +// Menu: + #menuBar - font-style: italic background: linear-gradient(#e66465, #9198e5) - margin: 0 0 10px 0 + height: 77px + margin-bottom: 10px + @media screen and (max-width: 767px) + height: 100% + margin-bottom: 0 @media screen and (min-width: 768px) width: 100% - img - height: 30px - padding-top: 10px - span - padding-left: 10px - padding-right: 15px -#menuContainer - height: 48px +a#homeLink + margin: 27px 0 0 10px + display: inline-block + @media screen and (max-width: 767px) + margin: 10px 0 0 10px + display: block -.warn - padding: 3px - color: red - background-color: lightgrey - font-weight: bold +.info-container + display: inline-block + vertical-align: top + padding: 0 + box-sizing: border-box + a + text-decoration: none + color: black + a, p + display: inline-block + padding: 3px + border: 1px solid black; + margin: 25px 0 0 15px + @media screen and (max-width: 767px) + margin-top: 10px + display: block -button.playing - background-color: #ffcc99 - &:hover - background-color: #ffcc99 +#helpMenu + @media screen and (min-width: 768px) + float: right + cursor: pointer + @media screen and (max-width: 767px) + .info-container + p + margin-right: 5px -button.seek - background-color: #cc99ff - &:hover - background-color: #cc99ff +#flagMenu + @media screen and (min-width: 768px) + float: right + cursor: pointer + margin: 0 15px + @media screen and (max-width: 767px) + margin-right: 5px + img + display: inline-block + height: 30px + margin-top: 25px -figure.diagram-container - margin: 15px 0 15px 0 - text-align: center - width: 100% - display: block - .diagram - display: block - width: 40% - //min-width: 300px - max-width: 800px - margin-left: auto - margin-right: auto - .diag12 - float: left - margin-left: calc(10% - 20px) - margin-right: 40px - @media screen and (max-width: 500px) - float: none - margin: 0 auto 10px auto - .diag22 - float: left - margin-right: calc(10% - 20px) - @media screen and (max-width: 500px) - float: none - margin: 0 auto - figcaption - display: block - clear: both - padding-top: 5px +label.drawer-toggle + padding: 0 + &::before + font-size: 2.5em; + max-height: 43px; + top: -10px; + left: 10px + +// Game section: .topindicator position: relative @@ -66,23 +71,17 @@ figure.diagram-container .indic-left float: left - margin: 0 0 10px 20px + margin: 0 0 var(--universal-margin) 20px .indic-right float: right - margin: 0 20px 10px 0 - -.spaceleft - margin-left: 30px - -.reserve-count - padding-left: 40% + margin: 0 20px var(--universal-margin) 0 -.reserve-div - margin-bottom: 20px +.my-chatmsg + color: black -.reserve-row-1 - margin-bottom: 15px +.opp-chatmsg + color: blue .connected background-color: green @@ -102,6 +101,25 @@ figure.diagram-container .black-turn background-color: black +button.playing + background-color: #ffcc99 + &:hover + background-color: #ffcc99 + +button.seek + background-color: #cc99ff + &:hover + background-color: #cc99ff + +.reserve-count + padding-left: 40% + +.reserve-div + margin-bottom: 20px + +.reserve-row-1 + margin-bottom: 15px + div.board float: left height: 0 @@ -130,7 +148,7 @@ div.board11 position: relative z-index: 300 overflow-y: inherit - background-color: rgba(0,0,0,0) //transparent + background-color: rgba(0,0,0,0) img cursor: pointer background-color: #e6ee9c @@ -142,6 +160,9 @@ div.board11 height: auto display: block +img.piece + width: 100% + img.piece, img.mark-square max-width: 100% height: auto @@ -149,22 +170,17 @@ img.piece, img.mark-square img.mark-square opacity: 0.6 - -img.ghost - position: absolute - opacity: 0.4 - top: 0 - -img.piece - width: 100% - -img.mark-square width: 76% position: absolute top: 12% left: 12% opacity: .7 +img.ghost + position: absolute + opacity: 0.4 + top: 0 + .highlight background-color: #00cc66 !important @@ -175,10 +191,12 @@ img.mark-square background-color: #f0d9b5; .dark-square.lichess background-color: #b58863; + .light-square.chesscom background-color: #e5e5ca; .dark-square.chesscom background-color: #6f8f57; + .light-square.chesstempo background-color: #fdfdfd; .dark-square.chesstempo @@ -189,6 +207,66 @@ img.mark-square .dark-square-diag background-color: #6f8f57 +#fen-string + margin-top: 0 + +#pgn-game + margin-top: 0 + margin-bottom: 0 + +#downloadBtn + display: block + margin-left: auto + margin-right: auto + +#pgn-div > a + display: none + +#fen-div > p + margin-left: 0 + margin-right: 0 + +// Rules section: + +.warn + padding: 3px + color: red + background-color: lightgrey + font-weight: bold + +figure.diagram-container + margin: 15px 0 15px 0 + text-align: center + width: 100% + display: block + .diagram + display: block + width: 40% + //min-width: 300px + max-width: 800px + margin-left: auto + margin-right: auto + .diag12 + float: left + margin-left: calc(10% - 20px) + margin-right: 40px + @media screen and (max-width: 500px) + float: none + margin: 0 auto 10px auto + .diag22 + float: left + margin-right: calc(10% - 20px) + @media screen and (max-width: 500px) + float: none + margin: 0 auto + figcaption + display: block + clear: both + padding-top: 5px + +.spaceleft + margin-left: 30px + p.boxed background-color: #FFCC66 padding: 5px @@ -218,32 +296,7 @@ ul:not(.browser-default) ul:not(.browser-default) > li list-style-type: disc -.variantpage-title - font-weight: bold - cursor: pointer - padding: 3px - margin-left: 0 - margin-right: 0 - background-color: lightgrey - -#fen-string - margin-top: 0 - -#pgn-game - margin-top: 0 - margin-bottom: 0 - -#downloadBtn - display: block - margin-left: auto - margin-right: auto - -#pgn-div > a - display: none - -#fen-div > p - margin-left: 0 - margin-right: 0 +// Problems section: .newproblem-form input, .newproblem-form textarea width: 100% @@ -286,17 +339,5 @@ ul:not(.browser-default) > li .clickable cursor: pointer -.name-connected - color: green - -.name-disconnected - color: red - .clearer clear: both - -.my-chatmsg - color: black - -.opp-chatmsg - color: blue diff --git a/views/variant.pug b/views/variant.pug index 89d814b2..a3b846f7 100644 --- a/views/variant.pug +++ b/views/variant.pug @@ -7,19 +7,25 @@ block css block content .container#variantPage .row - #menuContainer.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 + .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 label.drawer-toggle(for="drawer-control") input#drawer-control.drawer(type="checkbox") #menuBar label.drawer-close(for="drawer-control") - a(href="/") + a#homeLink.conditional-jump(href="/") i.material-icons home - a(href="#rules" @click="setDisplay('rules')") Rules - a(href="#play" @click="setDisplay('game')") Play! - a(href="#problems" @click="setDisplay('problems')") Problems - #flagMenu(onClick="document.getElementById('modalLang').checked=true") + .info-container + a.conditional-jump(href="#rules" @click="setDisplay('rules')") + | Rules + a.conditional-jump(href="#play" @click="setDisplay('game')") + | Play! + a.conditional-jump(href="#problems" @click="setDisplay('problems')") + | Problems + #flagMenu.conditional-jump( + onClick="document.getElementById('modalLang').checked=true") img(src="/images/flags/" + lang + ".svg") - #helpMenu(onClick="document.getElementById('modalHelp').checked=true") + #helpMenu.conditional-jump( + onClick="document.getElementById('modalHelp').checked=true") .info-container p Help .row