Merge pull request #565 from asuc-octo/jaden-refactor-yaml

Remove dependency on Yaml
asuc-octo · Mar 16, 2023 · ea96cfb · ea96cfb
2 parents 1d743c8 + 25f9665
commit ea96cfb
Show file tree

Hide file tree

Showing 10 changed files with 614 additions and 517 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -24,7 +24,6 @@
 		"color": "^3.1.3",
 		"date-fns": "^2.21.1",
 		"graphql": "^15.4.0",
-		"js-yaml": "^3.13.1",
 		"object-hash": "^3.0.0",
 		"react": "^18.0.0",
 		"react-bootstrap": "^1.3.0",
@@ -56,7 +55,6 @@
 		"@graphql-codegen/typescript-rtk-query": "^2.4.0",
 		"@graphql-typed-document-node/core": "^3.1.1",
 		"@types/color": "^3.0.1",
-		"@types/js-yaml": "^3.12.5",
 		"@types/node": "^14.6.1",
 		"@types/react": "^18.0.27",
 		"@types/react-dom": "^18.0.10",

diff --git a/frontend/public/past_contributors.yaml b/frontend/public/past_contributors.yaml
diff --git a/frontend/public/releases.yaml b/frontend/public/releases.yaml
diff --git a/frontend/src/assets/img/about/2022-23/zachary_1.jpeg b/frontend/src/assets/img/about/2022-23/zachary_1.jpeg
diff --git a/frontend/src/assets/scss/bt/about/_current_and_past.scss b/frontend/src/assets/scss/bt/about/_current_and_past.scss
@@ -1,80 +1,85 @@
 .current-contributors,
 .past-contributors {
-	// width's chosen so column widths are exactly 150px, kinda jank but whatevers
-	@include desktop {
-		width: 690px;
-	}
-	@include tablet {
-		width: 650px;
-	}
-	@include mobile {
-		width: 330px;
+	display: flex;
+	flex-direction: column;
+
+	> div {
+		display: grid;
+		grid-template-columns: repeat(4, 150px);
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: 25px;
+
+		@include media(mobile) {
+			grid-template-columns: repeat(2, 150px);
+		}
 	}
+}
 
-	.contributor-card {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		margin-bottom: 25px;
+.contributor-card {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	margin-bottom: 25px;
 
-		// use width/height to enforce aspect ratio i guess
-		.headshot {
-			width: 150px;
-			height: 150px;
+	// use width/height to enforce aspect ratio i guess
+	.headshot {
+		width: 150px;
+		height: 150px;
 
-			margin-bottom: 10px;
+		margin-bottom: 10px;
 
-			img {
-				width: 150px;
-				height: 150px;
+		img {
+			width: 150px;
+			height: 150px;
 
-				position: absolute;
-				object-fit: cover;
-				object-position: 50% 20%;
-				border-radius: 3px;
-			}
+			position: absolute;
+			object-fit: cover;
+			object-position: 50% 20%;
+			border-radius: 3px;
+		}
 
-			.serious {
-				z-index: $z-index-serious;
-				transition: 0.2s;
+		.serious {
+			z-index: $z-index-serious;
+			transition: 0.2s;
 
-				&:hover {
-					opacity: 0;
-				}
+			&:hover {
+				opacity: 0;
 			}
 		}
+	}
 
-		.name {
-			display: flex;
-			flex-direction: row;
-			justify-content: space-between;
-			align-items: center;
+	.name {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
 
-			width: 100%;
-			margin-bottom: 3px;
+		width: 100%;
+		margin-bottom: 3px;
 
-			p {
-				// font-weight: 500;
-				color: $bt-grey-text;
-			}
+		p {
+			// font-weight: 500;
+			color: $bt-grey-text;
+		}
 
-			svg {
-				width: 22px;
-				height: 21px;
-				padding: 2px;
-				transition: 0.2s;
-				border-radius: 4px;
-				margin-bottom: 2px;
+		svg {
+			width: 22px;
+			height: 21px;
+			padding: 2px;
+			transition: 0.2s;
+			border-radius: 4px;
+			margin-bottom: 2px;
 
-				&:hover {
-					background-color: $bt-button-background;
-				}
+			&:hover {
+				background-color: $bt-button-background;
 			}
 		}
+	}
 
-		.role {
-			font-size: 14px;
-			color: $bt-light-text;
-		}
+	.role {
+		font-size: 14px;
+		word-wrap: normal;
+		color: $bt-light-text;
 	}
 }