Showing
3 changed files
with
36 additions
and
14 deletions
1 | -import "../styles/Grid.css"; | ||
2 | -import GridHead from "./GridHead.js"; | ||
3 | import GridRow from "./GridRow.js"; | 1 | import GridRow from "./GridRow.js"; |
4 | - | ||
5 | -import React, { useContext } from "react"; | ||
6 | import { CalendarStateContext } from "../pages/Calendar"; | 2 | import { CalendarStateContext } from "../pages/Calendar"; |
7 | import { moveDate, toSunday } from "../utils/Dates"; | 3 | import { moveDate, toSunday } from "../utils/Dates"; |
8 | 4 | ||
5 | +import React, { useContext } from "react"; | ||
6 | + | ||
9 | const Grid = () => { | 7 | const Grid = () => { |
10 | - const [state] = useContext(CalendarStateContext); | 8 | + const { state } = useContext(CalendarStateContext); |
11 | 9 | ||
12 | const renderRows = () => { | 10 | const renderRows = () => { |
13 | const rows = []; | 11 | const rows = []; |
... | @@ -23,12 +21,7 @@ const Grid = () => { | ... | @@ -23,12 +21,7 @@ const Grid = () => { |
23 | return rows; | 21 | return rows; |
24 | }; | 22 | }; |
25 | 23 | ||
26 | - return ( | 24 | + return <div className="Grid">{renderRows()}</div>; |
27 | - <div className="Grid"> | ||
28 | - <GridHead /> | ||
29 | - {renderRows()} | ||
30 | - </div> | ||
31 | - ); | ||
32 | }; | 25 | }; |
33 | 26 | ||
34 | export default Grid; | 27 | export default Grid; | ... | ... |
src/components/Month.js
0 → 100644
1 | +.Month { | ||
2 | + display: flex; | ||
3 | + flex-direction: column; | ||
4 | + flex-grow: 1; | ||
5 | +} | ||
6 | + | ||
1 | .GridItem, | 7 | .GridItem, |
2 | .GridHeadItem { | 8 | .GridHeadItem { |
3 | - border-style: solid; | ||
4 | - border-width: thin; | ||
5 | - height: 150px; | ||
6 | flex-basis: 100px; | 9 | flex-basis: 100px; |
7 | flex-grow: 1; | 10 | flex-grow: 1; |
11 | +} | ||
12 | + | ||
13 | +.GridItem { | ||
14 | + border: solid thin lightgray; | ||
15 | + height: 150px; | ||
8 | padding: 5px; | 16 | padding: 5px; |
9 | } | 17 | } |
10 | 18 | ||
... | @@ -20,9 +28,16 @@ | ... | @@ -20,9 +28,16 @@ |
20 | display: flex; | 28 | display: flex; |
21 | } | 29 | } |
22 | 30 | ||
31 | +.GridHead { | ||
32 | + margin-right: 16.8px; | ||
33 | +} | ||
34 | + | ||
23 | .Grid { | 35 | .Grid { |
24 | display: flex; | 36 | display: flex; |
25 | flex-direction: column; | 37 | flex-direction: column; |
38 | + overflow-y: auto; | ||
39 | + height: calc(100vh - 85px - 50px); | ||
40 | + border: solid thin gray; | ||
26 | } | 41 | } |
27 | 42 | ||
28 | .GridItem[relative] > span { | 43 | .GridItem[relative] > span { | ... | ... |
-
Please register or login to post a comment