Some style improvements

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index f5b7eda..c949c29 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -700,7 +700,10 @@ Vue.component('my-game', {
                {
                        elementArray.push(
                                h('div',
-                                       { attrs: { id: "pgn-div" } },
+                                       {
+                                               attrs: { id: "pgn-div" },
+                                               "class": { "section-content": true },
+                                       },
                                        [
                                                h('a',
                                                        {
@@ -713,10 +716,16 @@ Vue.component('my-game', {
                                                h('p',
                                                        {
                                                                attrs: { id: "pgn-game" },
-                                                               on: { click: this.download },
                                                                domProps: { innerHTML: this.pgnTxt }
                                                        }
-                                               )
+                                               ),
+                                               h('button',
+                                                       {
+                                                               attrs: { "id": "downloadBtn" },
+                                                               on: { click: this.download },
+                                                               domProps: { innerHTML: "Download game" },
+                                                       }
+                                               ),
                                        ]
                                )
                        );
@@ -726,7 +735,10 @@ Vue.component('my-game', {
                        // Show current FEN
                        elementArray.push(
                                h('div',
-                                       { attrs: { id: "fen-div" } },
+                                       {
+                                               attrs: { id: "fen-div" },
+                                               "class": { "section-content": true },
+                                       },
                                        [
                                                h('p',
                                                        {

diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 3207287..3eec290 100644 (file)
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -12,16 +12,6 @@
     margin-right: 0
     padding: 0 3px
 
-#pgn-div > a
-  display: none
-
-#pgn-div > p
-  cursor: pointer
-
-#fen-div > p
-  margin-left: 0
-  margin-right: 0
-
 .warn
   padding: 3px
   color: red
@@ -211,7 +201,7 @@ figure.diagram-container
   padding: 5px
 
 .section-content
-  padding: 5px
+  padding: 0 5px
 
 ol, ul:not(.browser-default)
   padding-left: 20px
@@ -230,3 +220,19 @@ ul:not(.browser-default) > li
 
 #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