Showing
3 changed files
with
46 additions
and
0 deletions
src/components/Day.js
0 → 100644
1 | +import React, { useContext } from "react"; | ||
2 | +import GridItem from "./GridItem.js"; | ||
3 | + | ||
4 | +import { CalendarStateContext } from "../pages/Calendar"; | ||
5 | +import "../styles/Day.css"; | ||
6 | + | ||
7 | +const Day = () => { | ||
8 | + const { state } = useContext(CalendarStateContext); | ||
9 | + return ( | ||
10 | + <div className="Day"> | ||
11 | + <GridItem targetDate={new Date(state.date)} /> | ||
12 | + </div> | ||
13 | + ); | ||
14 | +}; | ||
15 | + | ||
16 | +export default Day; |
... | @@ -102,6 +102,7 @@ button:disabled { | ... | @@ -102,6 +102,7 @@ button:disabled { |
102 | border-radius: 3px; | 102 | border-radius: 3px; |
103 | cursor: pointer; | 103 | cursor: pointer; |
104 | position: relative; | 104 | position: relative; |
105 | + flex-flow: wrap; | ||
105 | } | 106 | } |
106 | 107 | ||
107 | .ScheduleItem > span { | 108 | .ScheduleItem > span { |
... | @@ -128,6 +129,11 @@ button:disabled { | ... | @@ -128,6 +129,11 @@ button:disabled { |
128 | padding: 0; | 129 | padding: 0; |
129 | } | 130 | } |
130 | 131 | ||
132 | +.s_substr { | ||
133 | + width: 100%; | ||
134 | + font-weight: bold; | ||
135 | +} | ||
136 | + | ||
131 | [popup] { | 137 | [popup] { |
132 | position: absolute; | 138 | position: absolute; |
133 | z-index: 1000; | 139 | z-index: 1000; | ... | ... |
src/styles/Day.css
0 → 100644
1 | +.GridItem[scope="day"] { | ||
2 | + flex-basis: 100px; | ||
3 | + padding: 5px; | ||
4 | +} | ||
5 | + | ||
6 | +.GridItem[scope="day"] > span { | ||
7 | + display: none; | ||
8 | +} | ||
9 | + | ||
10 | +.GridItem[scope="day"] > .ScheduleItem { | ||
11 | + margin: 3px 0 3px 0; | ||
12 | +} | ||
13 | + | ||
14 | +.GridItem[scope="day"] > .ScheduleItem > span { | ||
15 | + line-height: 30px; | ||
16 | + margin: 5px 5px 5px 5px; | ||
17 | + font-size: large; | ||
18 | +} | ||
19 | + | ||
20 | +.GridItem[scope="day"] > .ScheduleItem > img { | ||
21 | + width: 30px; | ||
22 | + height: 30px; | ||
23 | + margin: 5px; | ||
24 | +} |
-
Please register or login to post a comment