Skip to content

Commit 4314ecd

Browse files
NelsonDong41NelsonDong41
authored
Revert "Nelson event calender (#255)" (#269)
This reverts commit 8699295.
1 parent 8699295 commit 4314ecd

File tree

16 files changed

+8673
-8699
lines changed

16 files changed

+8673
-8699
lines changed

‎main-site/components/events-calendar-section/EventsCalendarSection.styles.ts‎

Lines changed: 54 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,16 @@ const StyledEventsContainer = styled.div`
2222
position: relative;
2323
display: flex;
2424
justify-content: center;
25-
align-items: center;
26-
flex-direction: column;
2725
`;
2826

29-
const StyledEventsBox = styled.div<{ elapsedEvent: boolean }>`
27+
const StyledEventsBox = styled.div<{ elapsedEvent: boolean}>`
3028
border-radius: 2em;
31-
background-color: ${colors.SAND_HIGHLIGHTS};
29+
30+
background-color: ${(props): string => (props.elapsedEvent ? colors.TEXT_BROWN : colors.BUTTON_DARK_GREEN)};
3231
position: relative;
3332
flex-direction: column;
3433
display: flex;
3534
margin: 2em 1.5em;
36-
padding: 0 1em;
3735
@media ${max.desktop} {
3836
margin: 2em 1em;
3937
}
@@ -46,51 +44,38 @@ const StyledEventsBox = styled.div<{ elapsedEvent: boolean }>`
4644
`;
4745

4846
const StyledTextContainer = styled.div`
49-
display: grid;
50-
grid-template-columns: 1.4fr 1fr;
51-
grid-auto-flow: row;
47+
display: flex;
5248
margin: 2em;
5349
padding-top: 0.5em;
54-
gap: 6em;
50+
padding-bottom: 4em;
51+
52+
53+
5554
5655
@media ${max.tablet} {
57-
margin: 1em 0;
58-
height: fit-content;
59-
grid-template-rows: 2fr 1fr;
60-
grid-auto-flow: column;
61-
grid-template-columns: none;
62-
gap: 1em;
56+
margin: 1.5em;
57+
}
58+
@media ${max.tabletSm} {
59+
padding-left: 1em;
6360
}
6461
@media ${max.mobile} {
6562
margin: 2em;
6663
padding-left: 0.5em;
6764
}
6865
`;
6966

70-
const EventsLeftContainer = styled.div`
67+
const TextLeftContainer = styled.div`
7168
width: 95%;
72-
display: grid;
73-
74-
@media ${max.tablet} {
69+
@media ${max.tabletSm} {
7570
width: 93%;
7671
}
7772
`;
7873

79-
const EventsRightContainer = styled.div`
80-
display: flex;
81-
flex-direction: column;
82-
justify-content: space-between;
83-
gap: 2em;
84-
@media ${max.tablet} {
85-
gap: 0;
86-
}
87-
`;
88-
8974
const StyledEventsCalendar = styled.div`
9075
border-radius: 2em;
9176
width: 60%;
92-
93-
background-color: ${colors.YELLOW_GREEN};
77+
78+
background-color: ${colors.BUTTON_GREEN};
9479
position: relative;
9580
@media ${max.tabletLg} {
9681
width: 80%;
@@ -102,39 +87,48 @@ const StyledEventsCalendar = styled.div`
10287
}
10388
`;
10489

105-
const StyledEventsSeaweed = styled.img<{ numberOfEvents: number }>`
90+
const StyledEventsCactus = styled.img`
10691
position: absolute;
107-
bottom: 0;
108-
left: -8vw;
109-
width: 11vw;
110-
`;
111-
112-
const StyledEventsFishSchool = styled.img`
113-
position: absolute;
114-
height: 10vw;
115-
@media ${min.tablet} {
116-
top: -16vh;
92+
@media ${min.tabletSm} {
11793
right: 2em;
94+
top: 50em;
95+
height: 16em;
11896
}
11997
@media ${min.desktop} {
120-
top: -16vh;
12198
right: 5em;
99+
top: 40em;
100+
height: 20em;
122101
}
123102
@media ${min.desktopLg} {
124-
top: -20vh;
125-
right: 8vw;
103+
right: 10em;
104+
top: 45em;
105+
height: 25em;
106+
}
107+
`;
108+
109+
const StyledEventsGrass = styled.img`
110+
position: absolute;
111+
@media ${min.tabletSm} {
112+
height: 10em;
113+
left: 2em;
114+
top: -8em;
115+
}
116+
@media ${min.tabletLg} {
117+
height: 15em;
118+
left: 2em;
119+
top: -8em;
126120
}
127121
`;
128122

129123
const EventsHeader = styled(P)`
130124
font-family: ${fonts.nunitoSansSemibold};
131125
line-height: 1.2em;
132126
letter-spacing: 0.08em;
133-
color: #193c60;
127+
134128
font-size: 1.7em;
135-
font-weight: bolder;
136-
@media ${max.tablet} {
137-
font-size: 1.3em;
129+
@media ${max.tabletSm} {
130+
font-size: 1em;
131+
138132
}
139133
@media ${max.mobile} {
140134
font-size: 0.6em;
@@ -143,18 +137,13 @@ const EventsHeader = styled(P)`
143137

144138
const EventsP = styled(P)`
145139
font-size: 1.1em;
146-
color: ${colors.BLACK};
147-
@media ${max.tablet} {
148-
font-size: 0.8em;
149-
}
150140
`;
151141

152142
const EventsSubHeader = styled(P)`
153143
font-family: ${fonts.nunitoSansSemibold};
154-
font-size: 1.2em;
144+
font-size: 1.5em;
155145
line-height: 2em;
156-
color: ${colors.BLACK};
157-
@media ${max.tablet} {
146+
@media ${max.tabletSm} {
158147
font-size: 0.8em;
159148
}
160149
@media ${max.mobile} {
@@ -164,75 +153,32 @@ const EventsSubHeader = styled(P)`
164153

165154
const StyledH2 = styled(H2)`
166155
text-align: center;
167-
color: ${colors.WHITE};
168156
`;
169157

170158
const EventsPBolded = styled(P)`
171159
font-family: ${fonts.nunitoSansSemibold};
172160
font-size: 1.1em;
173-
color: ${colors.BLACK};
174-
`;
175-
176-
const EventsImage = styled.img`
177-
height: 5vh;
178-
width: 5vh;
179-
align-self: flex-end;
180-
@media ${max.tablet} {
181-
position: absolute;
182-
top: 2em;
183-
right: 2em;
184-
}
185-
`;
186-
187-
const EventsLocationContainer = styled.div`
188-
border: 1px solid ${colors.YELLOW_GREEN};
189-
padding: 2em;
190-
border-radius: 10px;
191-
display: grid;
192-
grid-template-columns: 1fr 3fr;
193-
@media ${min.tabletLg && max.desktopLg} {
194-
grid-template-columns: 1fr;
195-
grid-auto-flow: row;
196-
}
197-
198-
@media ${max.tablet} {
199-
grid-template-columns: 1fr 2fr;
200-
padding: 0.3em;
201-
font-size: xx-large;
202-
}
203-
`;
204-
205-
const EventsLocationPQuestion = styled(P)`
206-
font-size: 1em;
207-
right: 2em;
208-
bottom: 2em;
209-
color: black;
210-
211-
@media ${max.tablet} {
212-
font-size: 0.5em;
213-
bottom: 1.5em;
214-
justify-self: left;
215-
}
216161
`;
217162

218163
const EventsLocationP = styled(P)`
219164
font-size: 1em;
165+
position: absolute;
220166
right: 2em;
221167
bottom: 2em;
222-
color: ${colors.BLACK};
223-
@media ${max.tablet} {
168+
@media ${max.tabletSm} {
224169
font-size: 0.5em;
225170
bottom: 1.5em;
226-
justify-self: flex-end;
227-
text-align: right;
228171
}
229172
`;
230173

174+
175+
176+
231177
export {
232178
StyledSectionContainer,
233179
StyledEventsCalendar,
234-
StyledEventsSeaweed,
235-
StyledEventsFishSchool,
180+
StyledEventsCactus,
181+
StyledEventsGrass,
236182
StyledEventsContainer,
237183
EventsHeader,
238184
EventsSubHeader,
@@ -241,11 +187,7 @@ export {
241187
StyledEventsBox,
242188
StyledTextContainer,
243189
EventsLocationP,
244-
EventsLeftContainer,
245-
EventsRightContainer,
190+
TextLeftContainer,
246191
StyledH2,
247-
StyledDesktopTextsContainer,
248-
EventsLocationContainer,
249-
EventsImage,
250-
EventsLocationPQuestion
192+
StyledDesktopTextsContainer
251193
};

‎main-site/components/events-calendar-section/EventsCalendarSection.tsx‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import React from 'react';
2-
import EventsSeaweed from '../../../shared-ui/images/seaweed-rock.svg';
3-
import EventsSeaweedDark from '../../../shared-ui/images/seaweed-rock-dark.svg';
4-
import EventsFishSchool from '../../../shared-ui/images/school-fish.svg';
5-
import EventsFishSchoolDark from '../../../shared-ui/images/school-fish-dark.svg';
6-
2+
import EventsGrass from '../../../shared-ui/images/events-grass.svg';
3+
import EventsCactus from '../../../shared-ui/images/events-cactus.svg';
74
import {
8-
StyledEventsSeaweed,
9-
StyledEventsFishSchool,
5+
StyledEventsCactus,
6+
StyledEventsGrass,
107
StyledEventsContainer,
118
StyledEventsCalendar,
129
StyledSectionContainer,
@@ -15,23 +12,19 @@ import {
1512
import { min } from '../../../shared-ui/lib/responsive';
1613
import useMatchMedia from 'react-use-match-media';
1714
import DesktopTexts from './texts/DesktopTexts';
18-
import { eventsCalendarData } from '../../lib/data';
1915

20-
const EventsCalendarSection: React.FC = ({ isDay }) => {
16+
const EventsCalendarSection: React.FC = () => {
2117
const isDesktop = useMatchMedia(min.tablet);
2218
return (
2319
<div id="calendar">
2420
<StyledSectionContainer>
2521
<StyledH2>Events Calendar</StyledH2>
2622
<StyledEventsContainer>
27-
{isDesktop && (
28-
<StyledEventsFishSchool
29-
src={isDay ? EventsFishSchool : EventsFishSchoolDark}
30-
/>
31-
)}
23+
{isDesktop && <StyledEventsGrass src={EventsGrass} />}
3224
<StyledEventsCalendar>
33-
<DesktopTexts isDay = {isDay} />
25+
<DesktopTexts />
3426
</StyledEventsCalendar>
27+
{isDesktop && <StyledEventsCactus src={EventsCactus} />}
3528
</StyledEventsContainer>
3629
</StyledSectionContainer>
3730
</div>

‎main-site/components/events-calendar-section/texts/DesktopTexts.tsx‎

Lines changed: 17 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,44 @@
11
import React from 'react';
22
import {
33
EventsHeader,
4+
EventsPBolded,
45
EventsSubHeader,
56
EventsP,
67
StyledEventsBox,
78
StyledTextContainer,
89
EventsLocationP,
9-
EventsLeftContainer,
10-
StyledDesktopTextsContainer,
11-
EventsRightContainer,
12-
EventsLocationContainer,
13-
EventsImage,
14-
EventsLocationPQuestion,
15-
StyledEventsSeaweed
10+
TextLeftContainer,
11+
StyledDesktopTextsContainer
1612
} from '../EventsCalendarSection.styles';
13+
import { EventsCalendarData } from '../../../lib/types';
1714
import { eventsCalendarData } from '../../../lib/data';
18-
import MissingPhoto from '../../../../shared-ui/images/missing_image.png';
19-
import { max, min } from '../../../../shared-ui/lib/responsive';
20-
import useMatchMedia from 'react-use-match-media';
21-
import EventsSeaweed from '../../../../shared-ui/images/seaweed-rock.svg';
22-
import EventsSeaweedDark from '../../../../shared-ui/images/seaweed-rock-dark.svg';
2315

24-
const DesktopTexts: React.FC = ({isDay}) => {
16+
const DesktopTexts: React.FC = () => {
2517
const currentDate = new Date();
26-
const isTablet = useMatchMedia(min.tablet);
27-
const isMobile = useMatchMedia(max.tabletLg);
28-
const isDesktop = useMatchMedia(max.desktopLg);
2918

3019
return (
3120
<StyledDesktopTextsContainer>
3221
{eventsCalendarData.map((event) => (
3322
<StyledEventsBox elapsedEvent = {currentDate > event.date}>
3423
<StyledTextContainer>
35-
<EventsLeftContainer>
24+
<TextLeftContainer>
3625
<EventsHeader>
37-
{event.title}
26+
{event.title} -- {event.date.getMonth()}/{event.date.getDate()} {event.time}
3827
</EventsHeader>
39-
{<EventsSubHeader>Prerequisites: {isMobile && <br/>}{event.prerequisites || "XXX, XXX"}</EventsSubHeader>}
28+
{event.subtitle && <EventsSubHeader>{event.subtitle}</EventsSubHeader>}
29+
{event.punchline && <EventsPBolded>{event.punchline}</EventsPBolded>}
30+
<br/>
4031
{event.description && <EventsP>{event.description}</EventsP>}
41-
</EventsLeftContainer>
42-
<EventsRightContainer>
43-
<EventsImage src={ event.image || MissingPhoto}></EventsImage>
44-
<EventsLocationContainer>
45-
<EventsLocationPQuestion>When?</EventsLocationPQuestion>
46-
<EventsLocationP>{event.date.toDateString()}<br/>{event.time}</EventsLocationP>
47-
{isTablet && isDesktop && <br></br>}
48-
<EventsLocationPQuestion>Where?</EventsLocationPQuestion>
49-
<EventsLocationP>{event.room}</EventsLocationP>
50-
</EventsLocationContainer>
51-
</EventsRightContainer>
32+
{event.prerequisites && <EventsSubHeader>Prerequisites: {event.prerequisites}</EventsSubHeader>}
33+
</TextLeftContainer>
34+
<EventsLocationP>
35+
{event.location}<br/>
36+
{event.room}
37+
</EventsLocationP>
38+
5239
</StyledTextContainer>
5340
</StyledEventsBox>
5441
))}
55-
{!isMobile && <StyledEventsSeaweed src={isDay ? EventsSeaweed : EventsSeaweedDark } numberOfEvents = {eventsCalendarData.length}/>}
5642
</StyledDesktopTextsContainer>
5743
);
5844
};

0 commit comments

Comments
 (0)