Change styling to not put game info to the right of the board
authorCarl Worth <cworth@cworth.org>
Wed, 27 May 2020 04:27:41 +0000 (21:27 -0700)
committerCarl Worth <cworth@cworth.org>
Wed, 27 May 2020 04:34:46 +0000 (21:34 -0700)
Now that we don't have that huge list of buttons, it seems silly to
have the short status message off to the side.

tictactoe/tictactoe.css
tictactoe/tictactoe.jsx

index 10ad37052f266b90fcdd9a0c5509f5737a657404..d505c7ded3f4b356548b3b40b38c92f3c284dae4 100644 (file)
@@ -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;
-}
index 934faa8e0cc63e37adc530c22beea642f7782fb7..849a6f2a113f6141ceaf1e33927bb10d2bbadd23 100644 (file)
@@ -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>
     );
   }