From: Carl Worth <cworth@cworth.org>
Date: Wed, 27 May 2020 04:27:41 +0000 (-0700)
Subject: Change styling to not put game info to the right of the board
X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=commitdiff_plain;h=1292fbceb528e33906f7f28f7205d57d6ff19b61;ds=sidebyside

Change styling to not put game info to the right of the board

Now that we don't have that huge list of buttons, it seems silly to
have the short status message off to the side.
---

diff --git a/tictactoe/tictactoe.css b/tictactoe/tictactoe.css
index 10ad370..d505c7d 100644
--- a/tictactoe/tictactoe.css
+++ b/tictactoe/tictactoe.css
@@ -35,13 +35,3 @@ ol, ul {
 .kbd-navigation .square:focus {
   background: #ddd;
 }
-
-.game {
-  display: flex;
-  flex-direction: row;
-}
-
-.game-info {
-  margin-left: 20px;
-  margin-bottom: 20px;
-}
diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index 934faa8..849a6f2 100644
--- a/tictactoe/tictactoe.jsx
+++ b/tictactoe/tictactoe.jsx
@@ -146,15 +146,15 @@ class Game extends React.Component {
 
     return (
       <div className="game">
+        <div className="game-info">
+          <div>{status}</div>
+        </div>
         <div className="game-board">
           <Board
             squares={current.squares}
             onClick={i => this.handleClick(i)}
           />
         </div>
-        <div className="game-info">
-          <div>{status}</div>
-        </div>
       </div>
     );
   }