From d449ae46d69980f18c96dbd5a87135d257dcb19d Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Sat, 22 Dec 2018 10:28:00 +0100
Subject: [PATCH] Improve style on variant page; TODO: problems, Crazyhouse

---
 public/javascripts/components/game.js |   3 +-
 public/javascripts/variant.js         |   6 +
 public/stylesheets/index.sass         |   4 +-
 public/stylesheets/variant.sass       | 267 +++++++++++++++-----------
 views/variant.pug                     |  20 +-
 5 files changed, 177 insertions(+), 123 deletions(-)

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
-- 
2.44.0