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