Style

diff --git a/client/src/App.vue b/client/src/App.vue
index 671e746..311abb0 100644 (file)
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -149,31 +149,49 @@ nav
   & > #menuBar
     width: 100%
     padding: 0
-    & > #leftMenu
-      padding: 0
-      width: 50%
-      display: inline-flex
-      align-items: center
-      justify-content: flex-start
-      & > a
-        display: inline-block
-        color: #2c3e50
-        &.router-link-exact-active
-          color: #42b983
-    & > #rightMenu
-      padding: 0
-      width: 50%
-      display: inline-flex
-      align-items: center
-      justify-content: flex-end
-      & > div
-        display: inline-block
-        &#flagContainer
-          display: inline-flex
-        & > img
-          padding: 0
-          width: 36px
-          height: 27px
+    @media screen and (min-width: 768px)
+      & > #leftMenu
+        padding: 0
+        width: 50%
+        display: inline-flex
+        align-items: center
+        justify-content: flex-start
+        & > a
+          display: inline-block
+          color: #2c3e50
+          &.router-link-exact-active
+            color: #42b983
+      & > #rightMenu
+        padding: 0
+        width: 50%
+        display: inline-flex
+        align-items: center
+        justify-content: flex-end
+        & > div
+          display: inline-block
+          &#flagContainer
+            display: inline-flex
+          & > img
+            padding: 0
+            width: 36px
+            height: 27px
+    @media screen and (max-width: 767px)
+      & > #leftMenu
+        padding-bottom: 5px
+        & > a
+          color: #2c3e50
+          &.router-link-exact-active
+            color: #42b983
+      & > #rightMenu
+        padding-top: 5px
+        border-top: 1px solid darkgrey
+        & > div
+          &#flagContainer
+            display: inline-flex
+          & > img
+            padding: 0
+            width: 36px
+            height: 27px
 
 @media screen and (max-width: 767px)
   nav
@@ -182,10 +200,6 @@ nav
 [type="checkbox"].drawer+*
   right: -767px
 
-#menuBar
-  label.drawer-close
-    top: 50px
-
 @media screen and (max-width: 767px)
   .button-group
     flex-direction: row

diff --git a/client/src/translations/en.js b/client/src/translations/en.js
index 3681a4d..b84230a 100644 (file)
--- a/client/src/translations/en.js
+++ b/client/src/translations/en.js
@@ -84,7 +84,6 @@ export const translations =
   "Type here": "Type here",
   "Unknown": "Unknown",
   "Variant": "Variant",
-  "Variant:": "Variant:",
   "Variants": "Variants",
   "Warning: target is not connected": "Warning: target is not connected",
   "Warning: multi-tabs not supported": "Warning: multi-tabs not supported",

diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index ddd5e59..ee151f3 100644 (file)
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -14,9 +14,7 @@ main
         :newChat="newChat" @mychat="processChat")
   .row
     #aboveBoard.col-sm-12.col-md-9.col-md-offset-3.col-lg-10.col-lg-offset-2
-      span.variant-info
-        | {{ st.tr["Variant:"] + " " }}
-        span.vname {{ game.vname }}
+      span.variant-info {{ game.vname }}
       button#chatBtn(onClick="doClick('modalChat')") Chat
       #actions(v-if="game.score=='*'")
         button(@click="clickDraw" :class="{['draw-' + drawOffer]: true}")
@@ -679,9 +677,8 @@ export default {
     margin-left: 30%
 
 .variant-info
+  font-weight: bold
   padding-right: 10px
-  .vname
-    font-weight: bold
 
 .name
   font-size: 1.5rem