Skip to content

Commit fee759c

Browse files
arkasharmaArshMalik02veronicasalassnigdha-kansalKevin-D23
authored
Fixed eventCard rendering and calendar icon bug on eventsPage and fixed navBar disappearing 'Team' button. (#10)
* Initial commit * initial setup (#1) * Setup (#2) * initial setup * update readme * Updated README.md (#3) * fix team page (#5) * fix: removed duplicate events from events page (#6) * Hardcoded events, members for sample website * changes * index * update * padding * 0 * Added google calendar, edited events and team pages * Modified eventsPage to display past events in reverse chronological order * Updated deprecated version of actions,cache to v3 * Updated all deprecated actions * Added date to Event CardInterface * Removed unused script * Modified logo image files * Added spreadsheet ranges * fix horizontal scrolling * fix event page screen size * Fixed eventPage rendering on mobile and mid-size screens * Fixed lint errors * Fixed calendar icon rendering bug in eventsPage * fix navbar disappeared team button * Merging main into dev --------- Co-authored-by: Arsh Malik <[email protected]> Co-authored-by: veronicasalas <[email protected]> Co-authored-by: Snigdha Kansal <[email protected]> Co-authored-by: Kevin Duong <[email protected]> Co-authored-by: Iris Li <[email protected]> Co-authored-by: Yushan Li <[email protected]>
1 parent 9fd0bff commit fee759c

File tree

8 files changed

+2151
-67
lines changed

8 files changed

+2151
-67
lines changed

‎components/EventCard.tsx‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,44 @@ interface CardInterface {
1010
img: string;
1111
}
1212
function EventCard({ header, body, time, img }: CardInterface) {
13+
// Only show image if it's not a default or empty value
14+
const hasImage = img && !img.includes('default');
1315
return (
1416
<div className={styles.container}>
1517
<div className={styles.text}>
1618
<div className={styles.header}>{header}</div>
17-
<div className={styles.body}>
18-
<div style={{ flex: '1' }}>{body}</div>
19-
<Image src={img} width={300} height={300} />
19+
<div
20+
className={
21+
hasImage ? styles.body : `${styles.body} ${styles['no-image']}`
22+
}
23+
>
24+
{hasImage ? (
25+
<>
26+
<div className={styles['event-image-wrapper']}>
27+
<Image
28+
src={img}
29+
width={300}
30+
height={300}
31+
className={styles['event-image']}
32+
alt={header}
33+
/>
34+
</div>
35+
<div className={styles['body-text']}>{body}</div>
36+
</>
37+
) : (
38+
<div className={styles['body-text'] + ' ' + styles['full-width']}>
39+
{body}
40+
</div>
41+
)}
2042
</div>
2143
<div className={styles.time}>
22-
<Image src="/icons8-calendar-24.png" width={20} height={20} />
23-
<div>&nbsp;{time}</div>
44+
<Image
45+
src="/icons8-calendar-24.png"
46+
width={20}
47+
height={20}
48+
alt="calendar icon"
49+
/>
50+
<span>{time}</span>
2451
</div>
2552
</div>
2653
</div>

‎components/Navbar.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,11 @@ const Navbar = () => {
5656
</div>
5757
<div>
5858
<ul
59-
className={styles['nav-item-list']}
60-
id={clicked ? styles.active : ''}
59+
className={`${styles['nav-item-list']} ${clicked ? styles.active : ''}`}
6160
>
6261
<li>
6362
<Link href="/teamPage">
64-
<a className={styles['nav-item-list']}>Team</a>
63+
<a>Team</a>
6564
</Link>
6665
</li>
6766
<li>
@@ -76,7 +75,7 @@ const Navbar = () => {
7675
</li>
7776
</ul>
7877
</div>
79-
<div id={styles['small-screen']}>
78+
<div className={styles['small-screen']}>
8079
<i onClick={() => setClicked(!clicked)}>
8180
{clicked ? <FaTimes /> : <FaBars />}
8281
</i>

‎pages/index.tsx‎

Lines changed: 2 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { GetStaticProps } from 'next';
33
import Image from 'next/image';
44
import Link from 'next/link';
55
import MainLayout from '../components/MainLayout';
6-
import discord from '../public/discord.png';
6+
import slack from '../public/acmwslack_1.png';
77
import event1 from '../public/event1.png';
88
import event2 from '../public/event2.png';
99
import event3 from '../public/event3.png';
@@ -69,32 +69,6 @@ export default function Home({ committee }: Props): JSX.Element {
6969
/>
7070
</div>
7171

72-
<div
73-
style={{
74-
display: 'block',
75-
width: '95%',
76-
margin: '10px auto',
77-
backgroundColor: 'transparent',
78-
color: '#56B7A0',
79-
textAlign: 'center',
80-
fontWeight: '600',
81-
fontSize: '1.2rem',
82-
padding: '12px 0',
83-
border: '3px solid #56B7A0',
84-
borderRadius: '20px',
85-
letterSpacing: '0.3px',
86-
textDecoration: 'none',
87-
}}
88-
>
89-
The ACM Internship Program is now open! Apply by October 14th! <br/>
90-
<a
91-
style={{ padding: '2%', marginLeft: '2%', color: '#56B7A0'}}
92-
href="https://acm.cs.ucla.edu/internship"
93-
>
94-
Join Us
95-
</a>
96-
</div>
97-
9872
<div>
9973
<div className={styles.heading} style={{ margin: '1%' }}>
10074
<h1 className={styles.title} style={{ margin: '5%' }}>
@@ -123,22 +97,8 @@ export default function Home({ committee }: Props): JSX.Element {
12397
>
12498
<Image src={ins} alt="Instagram logo" />
12599
</a>
126-
127-
<a
128-
href="https://discord.gg/JjbSf45cY"
129-
target="_blank"
130-
rel="noreferrer"
131-
>
132-
<Image src={discord} alt="Discord logo" width={50} height={50} />
133-
</a>
134-
135-
<a
136-
href="https://www.linkedin.com/company/acm-w-acm-ucla/"
137-
target="_blank"
138-
rel="noreferrer"
139-
>
100+
<Image src={slack} alt="Slack logo" />
140101
<Image src={linkedin} alt="Linkedin logo" />
141-
</a>
142102
</div>
143103
</div>
144104
<div

‎styles/EventCard.module.scss‎

Lines changed: 118 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,24 +24,138 @@
2424
line-height: 2em;
2525
}
2626

27+
/* Your two-column area with image + details */
2728
.body {
2829
display: flex;
29-
gap: 4rem;
3030
overflow-wrap: break-word;
3131
font-size: 0.9rem;
32+
background: #fff;
33+
gap: 1rem;
34+
}
35+
36+
.body img {
37+
width: 100%;
38+
max-width: 100%;
39+
height: auto;
40+
margin: 0;
41+
border-radius: 10px;
3242
}
3343

3444
.time {
3545
color: vars.$committee-color;
3646
font-family: "Courier New", Courier, monospace;
3747
font-weight: bold;
3848
font-size: 1rem;
39-
display: flex;
49+
display: grid;
50+
grid-template-columns: 20px 1fr;
51+
align-items: center;
4052
margin-top: 15px;
53+
gap: 0.5rem;
54+
}
55+
56+
.time img {
57+
width: 20px;
58+
height: 20px;
59+
flex-shrink: 0;
60+
vertical-align: middle;
61+
margin-bottom: 2px;
62+
}
63+
64+
.event-image-wrapper {
65+
flex: 0 0 30%;
66+
max-width: 30%;
67+
display: flex;
68+
align-items: center;
69+
justify-content: center;
70+
margin-bottom: 0;
71+
background: #fff;
72+
}
73+
74+
.event-image {
75+
width: 100%;
76+
height: auto;
77+
object-fit: contain;
78+
border-radius: 10px;
79+
display: block;
80+
}
81+
82+
.body-text {
83+
flex: 1 1 70%;
84+
max-width: 70%;
85+
display: flex;
86+
align-items: center;
87+
color: #000;
88+
}
89+
90+
.full-width {
91+
flex: 1 1 100%;
92+
max-width: 100%;
93+
}
94+
95+
@media (max-width: 1024px) {
96+
.body {
97+
display: flex;
98+
flex-direction: row;
99+
align-items: center;
100+
gap: 1rem;
101+
}
102+
103+
.event-image-wrapper {
104+
flex: 0 0 30%;
105+
max-width: 30%;
106+
}
107+
108+
.body-text,
109+
.full-width {
110+
flex: 1 1 70%;
111+
max-width: 70%;
112+
}
113+
114+
.no-image .body-text,
115+
.no-image .full-width {
116+
flex: 1 1 100% !important;
117+
max-width: 100% !important;
118+
width: 100% !important;
119+
display: block !important;
120+
}
41121
}
42122

43-
@media (max-width: 1175px) {
123+
@media (max-width: 768px) {
44124
.body {
45-
display: inline;
125+
flex-direction: column;
126+
align-items: stretch;
127+
gap: 1rem;
128+
}
129+
130+
.body img {
131+
max-width: 85%;
132+
margin-bottom: 1rem;
133+
}
134+
135+
.event-image {
136+
width: 100%;
137+
max-width: 85%;
138+
}
139+
140+
.event-image-wrapper {
141+
flex: none;
142+
max-width: 100%;
143+
width: 100%;
144+
}
145+
146+
.body-text,
147+
.full-width {
148+
flex: none !important;
149+
max-width: none !important;
150+
width: 100% !important;
151+
display: block !important;
152+
align-items: unset !important;
153+
}
154+
}
155+
156+
@media (max-width: 500px) {
157+
.container {
158+
margin: 0.5rem;
159+
padding: 0.5rem;
46160
}
47161
}

‎styles/Events.module.scss‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,3 +94,61 @@
9494
flex-wrap: wrap;
9595
gap: 2rem;
9696
}
97+
98+
@media (max-width: 1024px) {
99+
.card,
100+
.past-card {
101+
width: 100%;
102+
margin-left: 0;
103+
margin-right: 0;
104+
}
105+
106+
.events-section {
107+
max-width: 100%;
108+
}
109+
}
110+
111+
@media (max-width: 768px) {
112+
.main {
113+
padding: 1rem;
114+
}
115+
116+
.calendar-and-events-wrapper {
117+
flex-direction: column;
118+
gap: 1rem;
119+
align-items: stretch;
120+
}
121+
122+
.calendar-container,
123+
.events-section {
124+
flex: none;
125+
max-width: 100%;
126+
width: 100%;
127+
height: auto;
128+
}
129+
130+
.calendar-container iframe {
131+
height: 50vh;
132+
}
133+
134+
.events-section {
135+
max-width: 100%;
136+
padding: 0;
137+
height: auto;
138+
}
139+
140+
.card {
141+
width: 100%;
142+
margin-left: 0;
143+
margin-right: 0;
144+
min-height: auto;
145+
}
146+
147+
.past-card {
148+
width: 100%;
149+
}
150+
151+
.past-events-grid {
152+
justify-content: center;
153+
}
154+
}

‎styles/Navbar.module.scss‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
justify-content: center;
2020
}
2121

22-
.nav-item-list#active {
22+
.nav-item-list.active {
2323
right: 0;
2424
}
2525

@@ -56,10 +56,15 @@
5656
}
5757

5858
#small-screen {
59+
/* keep an ID fallback for global usage if needed, but expose a class for CSS Modules */
5960
display: none;
6061
}
6162

62-
#small-screen i:hover {
63+
.small-screen {
64+
display: none;
65+
}
66+
67+
.small-screen i:hover {
6368
color: vars.$committee-color;
6469
}
6570

@@ -88,6 +93,12 @@
8893
display: block;
8994
}
9095

96+
/* also expose the class-based selector for CSS Modules */
97+
.small-screen {
98+
display: block;
99+
}
100+
101+
.small-screen i,
91102
#small-screen i {
92103
font-size: 24px;
93104
cursor: pointer;

‎styles/globals.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ html,
77
body {
88
padding: 0;
99
margin: 0;
10+
width: 100%;
11+
overflow-x: hidden;
1012
}
1113

1214
a {
@@ -29,4 +31,6 @@ description-list {
2931

3032
main {
3133
padding-top: 10vh;
34+
max-width: 100vw; /* Keep main content within screen width */
35+
overflow-x: hidden;
3236
}

0 commit comments

Comments
 (0)