2024 Workshops (#268)

* update workshops page for 2024 * update workshops header * update workshops data
WICS-UCI · May 24, 2024 · 5b86025 · 5b86025
1 parent a1feee6
commit 5b86025
Show file tree

Hide file tree

Showing 6 changed files with 247 additions and 172 deletions.
diff --git a/public/assets/images/titles/vh-workshops-title.png b/public/assets/images/titles/vh-workshops-title.png
diff --git a/src/app/components/workshop-card/workshop-card.jsx b/src/app/components/workshop-card/workshop-card.jsx
@@ -2,51 +2,47 @@ import React from "react";
 import "./workshop-card.scss";
 
 const renderButtons = (buttons) => {
-	console.log(buttons);
 	return buttons.map((button) => {
 		const { link, description } = button;
 		return link ? (
-			<a href={link} target="_blank" rel="noopener noreferrer">
-				{description}
-			</a>
+			<div className="prereq-button" key={description}>
+				<a href={link} target="_blank" rel="noopener noreferrer">
+					{description}
+				</a>
+			</div>
 		) : (
 			<p>{description}</p>
 		);
 	});
 };
 
-function WorkshopCard(workshop) {
+function WorkshopCard({ workshop }) {
 	const { title, description, prereqs, recap, host } = workshop;
 
 	return (
 		<div className="workshop-card">
-			<div className="workshop-card-header">
-				<div>
-					<h4>{title}</h4>
-					<h5>
-						Hosted by{" "}
-						<a href={host.link} target="_blank" rel="noopener noreferrer">
-							{host.name}
-						</a>
-					</h5>
-				</div>
-				<div className="right pink-buttons">
-					{recap &&
-						renderButtons(
-							Object.entries(recap).map((pair) => {
-								const [key, val] = pair;
-								return { description: key, link: val };
-							})
-						)}
-				</div>
+			<div className="workshop-card-left">
+				<p className="workshop-card-title">{title}</p>
+				<p id="hosted-by">Hosted by</p>
+				<p id="host-name">{host.name}</p>
+				{/* recap??? */}
+				{recap &&
+					renderButtons(
+						Object.entries(recap).map((pair) => {
+							const [key, val] = pair;
+							return { description: key, link: val };
+						})
+					)}
+				{prereqs && (
+					<div className="workshop-card-prereqs">
+						<h5 id="prerequisites-title">Prequisites:</h5>
+						{renderButtons(prereqs)}
+					</div>
+				)}
+			</div>
+			<div className="workshop-card-right">
+				<p className="workshop-card-description">{description}</p>
 			</div>
-			{description}
-			{prereqs && (
-				<div className="workshop-card-prereqs pink-buttons">
-					<h5>Prequisites:</h5>
-					{renderButtons(prereqs)}
-				</div>
-			)}
 		</div>
 	);
 }

diff --git a/src/app/components/workshop-card/workshop-card.scss b/src/app/components/workshop-card/workshop-card.scss
@@ -2,61 +2,119 @@
 
 .workshop-card {
 	border-radius: 20px;
-	padding: 20px;
 	width: 85vw;
+	max-width: 67vw;
 	margin: 20px auto;
-	background-color: #42384473;
+	background-image: linear-gradient(rgba(50, 38, 96), rgb(137, 143, 247));
 	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
-	color: #f6d4d4;
-	text-align: left;
+	color: #ffffff;
+	display: flex;
+	flex-direction: row;
 
-	.workshop-card-header {
-		display: flex;
-		justify-content: space-between;
+	.workshop-card-left,
+	.workshop-card-right {
+		padding: 20px;
+		margin-top: 10px;
+		margin-bottom: 10px;
+		flex: 1 1 0px;
+	}
+
+	.workshop-card-title {
+		font-size: 1.6em;
+		margin-bottom: 25px;
+	}
+
+	.workshop-card-description {
+		font-size: 0.95em;
+	}
+
+	#hosted-by {
+		font-size: large;
+		margin-top: 25px;
+		margin-bottom: 3px;
+		color: #ee99a0;
+	}
 
-		.right {
-			text-align: right;
+	#host-name {
+		font-size: large;
+		margin-top: 3px;
+	}
+
+	a {
+		text-decoration: none;
+		background-color: #322660;
+		display: block;
+		margin-bottom: 6px;
+		width: max-content;
+		padding: 10px;
+		border-radius: 20px;
+		font-size: small;
+		color: #ffffff;
+	}
+
+	#prerequisites-title {
+		margin-bottom: 6px;
+		font-size: medium;
+	}
+
+	@media (max-width: 768px) {
+		flex-direction: column;
+		width: 95vw;
+		max-width: 95vw;
+
+		.workshop-card-left,
+		.workshop-card-right {
+			flex: none;
+			width: 100%;
+			padding: 15px;
 		}
 
-		h4 {
-			color: white;
-			margin-bottom: 0;
+		.workshop-card-title {
+			font-size: 1.4em;
+			margin-bottom: 20px;
+		}
+
+		.workshop-card-description {
+			font-size: 0.9em;
+		}
+
+		#hosted-by,
+		#host-name {
+			font-size: medium;
 		}
-	}
 
-	.pink-buttons {
 		a {
-			display: inline-flex;
-			font-size: 14px;
-			border: 1px;
-			border-style: solid;
-			border-radius: 25px;
-			border-color: #f6d4d4;
-			width: fit-content;
-			margin: 5px;
-			padding: 8px;
-			text-decoration: none;
-		}
-
-		p {
-			display: inline-flex;
-			font-size: 14px;
-			font-weight: bold;
-			border: 1px;
-			border-style: solid;
-			border-radius: 25px;
-			border-color: #f6d4d4;
-			width: fit-content;
-			margin: 5px;
 			padding: 8px;
+			font-size: 0.85em;
+		}
+
+		#prerequisites-title {
+			font-size: small;
 		}
 	}
 
-	.workshop-card-prereqs {
-		margin-top: 0.75em;
+	@media (max-width: 480px) {
+		.workshop-card-title {
+			font-size: 1.2em;
+			margin-bottom: 15px;
+		}
+
+		.workshop-card-description {
+			font-size: 0.85em;
+		}
+
+		#hosted-by,
+		#host-name {
+			font-size: small;
+		}
+
+		a {
+			padding: 6px;
+			font-size: 0.75em;
+		}
 
-		h5 {
-			color: white;
+		#prerequisites-title {
+			font-size: small;
 		}
 	}
 }