Browse Source

Rearrange to avoid position: absolute

master
Dylan Baker 3 years ago
parent
commit
8b24f88ee6
3 changed files with 35 additions and 28 deletions
  1. 17
    13
      src/Board.tsx
  2. 17
    12
      src/index.css
  3. 1
    3
      src/index.tsx

+ 17
- 13
src/Board.tsx View File

103
     const { grid, running, speed, width, height } = this.state;
103
     const { grid, running, speed, width, height } = this.state;
104
 
104
 
105
     return (
105
     return (
106
-      <div className="board">
106
+      <div className="container">
107
         <Controls
107
         <Controls
108
           running={running}
108
           running={running}
109
           speed={speed}
109
           speed={speed}
114
           updateSpeed={this.updateSpeed}
114
           updateSpeed={this.updateSpeed}
115
           reset={this.reset}
115
           reset={this.reset}
116
         />
116
         />
117
-        {grid.map((row, y) => (
118
-          <div className="row" key={y}>
119
-            {row.map((cell, x) => (
120
-              <Cell
121
-                disabled={running}
122
-                x={x}
123
-                y={y}
124
-                alive={cell}
125
-                toggle={this.toggleCell}
126
-                key={x}
127
-              />
117
+        <div className="board-container">
118
+          <div className="board">
119
+            {grid.map((row, y) => (
120
+              <div className="row" key={y}>
121
+                {row.map((cell, x) => (
122
+                  <Cell
123
+                    disabled={running}
124
+                    x={x}
125
+                    y={y}
126
+                    alive={cell}
127
+                    toggle={this.toggleCell}
128
+                    key={x}
129
+                  />
130
+                ))}
131
+              </div>
128
             ))}
132
             ))}
129
           </div>
133
           </div>
130
-        ))}
134
+        </div>
131
       </div>
135
       </div>
132
     );
136
     );
133
   }
137
   }

+ 17
- 12
src/index.css View File

21
   align-items: center;
21
   align-items: center;
22
   display: flex;
22
   display: flex;
23
   height: 100vh;
23
   height: 100vh;
24
-  justify-content: center;
24
+  flex-direction: column;
25
   width: 100vw;
25
   width: 100vw;
26
 }
26
 }
27
 
27
 
28
+.controls {
29
+  background: black;
30
+  color: white;
31
+  display: flex;
32
+  padding: 1em;
33
+  width: 100%;
34
+}
35
+
36
+.board-container {
37
+  align-items: center;
38
+  display: flex;
39
+  flex: 1;
40
+  justify-content: center;
41
+  width: 100%;
42
+}
43
+
28
 .row {
44
 .row {
29
   height: 30px;
45
   height: 30px;
30
 }
46
 }
54
   cursor: pointer;
70
   cursor: pointer;
55
 }
71
 }
56
 
72
 
57
-.controls {
58
-  background: black;
59
-  color: white;
60
-  display: flex;
61
-  left: 0;
62
-  padding: 1em;
63
-  position: absolute;
64
-  top: 0;
65
-  width: 100%;
66
-}
67
-
68
 .button {
73
 .button {
69
   background: black;
74
   background: black;
70
   border: 1px solid white;
75
   border: 1px solid white;

+ 1
- 3
src/index.tsx View File

6
 
6
 
7
 ReactDOM.render(
7
 ReactDOM.render(
8
   <React.StrictMode>
8
   <React.StrictMode>
9
-    <div className="container">
10
-      <Board />
11
-    </div>
9
+    <Board />
12
   </React.StrictMode>,
10
   </React.StrictMode>,
13
   document.getElementById('root'),
11
   document.getElementById('root'),
14
 );
12
 );

Loading…
Cancel
Save