From 7c364c5c0130ab42b65629993f3ed28715b43065 Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Wed, 9 Sep 2020 11:23:50 -0500
Subject: [PATCH] Revise styles for game board column labels (#1)

- Just a few tweaks here. The general principle is good.
- If you want <div> elements to display horizontally, they need to
  be wrapped in a parent <div> which has "display: flex;" in the css.
- Then, add a width and centering to the individual labels.
---
 src/components/GameBoard.component.js | 11 +++++------
 src/style/components.css              | 28 ++++++++++++++++++++-------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/GameBoard.component.js b/src/components/GameBoard.component.js
index c4c0277..44d7b91 100644
--- a/src/components/GameBoard.component.js
+++ b/src/components/GameBoard.component.js
@@ -23,17 +23,16 @@ const template  = `
 <div class="game-board-component" v-if="ready">
     <div class="grid-container">
         <div class="grid-row" v-for="(row,i) of rows">
-        <br> {{i}}
+        <br> <span class="label">{{ i + 1 }}</span>
             <app-game-cell
                 v-for="cell of row"
                 v-bind:render="cell.render"
             ></app-game-cell>
         </div>
-     <!--   <div class="column_labels"
-        v-for="(label,i) of column_labels">
-            {{ column_labels[i] }}
-       </div> --!>
-     </div>
+         <div class="column_labels">
+             <div class="label" v-for="(label,i) of column_labels">{{ label }}</div>
+         </div>
+    </div>
 </div>
 `
 export default class GameBoardComponent extends Component {
diff --git a/src/style/components.css b/src/style/components.css
index b82a846..83bce52 100644
--- a/src/style/components.css
+++ b/src/style/components.css
@@ -1,7 +1,21 @@
+/* Styles for top-level component */
+.top-level-component .game-boards-container {
+    display: flex;
+}
+
+.top-level-component .game-boards-container .game-board {
+    margin-right: 50px;
+}
+
 .game-board-component .grid-container .grid-row {
     display: flex;
 }
 
+.game-board-component .grid-container .grid-row .label {
+    margin-right: 5px;
+    padding-top: 10px;
+}
+
 /* Styles for the various grid cell states. */
 
 .game-board-cell-component {
@@ -42,13 +56,13 @@
     background: #eeeeee;
 }
 
-.game-board-component {
+.column_labels {
     display: flex;
+    margin-top: 5px;
+    margin-left: 15px;
+}
 
+.column_labels .label {
+    width: 42px;
+    text-align: center;
 }
-.column_labels {
-    
-    padding: 20px;  
-    flex-direction: column-reverse;
- 
-}
\ No newline at end of file