minor tweaks

ausspeedruns · Jul 9, 2023 · ad01ad2 · ad01ad2
1 parent 31bea9a
commit ad01ad2
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 12 deletions.
diff --git a/apps/nextjs/components/EventLive/EventLive.module.scss b/apps/nextjs/components/EventLive/EventLive.module.scss
@@ -7,10 +7,13 @@
 	background: $asm23-main;
 	background-image: url("../../styles/img/events/asm23/asm23-background.png");
 	background-size: cover;
+	background-position-x: center;
 	padding: 2rem;
 
 	@include breakpoint($sm-zero-only) {
-		padding: 0;
+		padding-left: 0;
+		padding-right: 0;
+		background-size: contain;
 	}
 
 	.logo {
@@ -95,6 +98,10 @@
 		.columnLeft {
 			h3 {
 				text-align: left;
+
+				@include breakpoint($sm-zero-only) {
+					text-align: center;
+				}
 			}
 
 			h4 {
@@ -107,6 +114,10 @@
 		}
 
 		.columnMiddle {
+			h3 {
+				text-align: center;
+			}
+
 			h4 {
 				text-align: center;
 			}
@@ -115,6 +126,10 @@
 		.columnRight {
 			h3 {
 				text-align: right;
+
+				@include breakpoint($sm-zero-only) {
+					text-align: center;
+				}
 			}
 
 			h4 {

diff --git a/apps/nextjs/components/EventLive/EventLive.tsx b/apps/nextjs/components/EventLive/EventLive.tsx
@@ -104,13 +104,14 @@ export const EventLive = (props: EventProps) => {
 		}
 	}
 
-	if (nextRunIndex == -1) {
+	if (nextRunIndex <= 0) {
 		// Before the marathon
 		nextRunIndex = 1;
 	}
 
+
 	let currentRunIndex = nextRunIndex - 1;
-
+	
 	return (
 		<div className={styles.eventLive}>
 			<div className={styles.logo}>
@@ -146,21 +147,21 @@ export const EventLive = (props: EventProps) => {
 
 			<div className={styles.onDeck}>
 				<div className={styles.columnLeft}>
-					<h4>{nextRunIndex == -1 ? "First Game" : "Game"}</h4>
+					<h4>{currentRunIndex == 0 ? "First Game" : "Game"}</h4>
 					<h3>
-						{eventQuery.data?.event.runs?.[nextRunIndex == -1 ? 0 : currentRunIndex]?.game ?? "Loading"}
+						{eventQuery.data?.event.runs?.[currentRunIndex]?.game ?? "Loading"}
 					</h3>
 				</div>
 				<div className={styles.columnMiddle}>
-					<h4>{nextRunIndex == -1 ? "First Category" : "Category"}</h4>
+					<h4>{currentRunIndex == 0 ? "First Category" : "Category"}</h4>
 					<h3>
-						{eventQuery.data?.event.runs?.[nextRunIndex == -1 ? 0 : currentRunIndex]?.category ?? "Loading"}
+						{eventQuery.data?.event.runs?.[currentRunIndex]?.category ?? "Loading"}
 					</h3>
 				</div>
 				<div className={styles.columnRight}>
-					<h4>{nextRunIndex == -1 ? "First Runners" : "Runners"}</h4>
+					<h4>{currentRunIndex == 0 ? "First Runners" : "Runners"}</h4>
 					<h3>
-						{eventQuery.data?.event.runs?.[nextRunIndex == -1 ? 0 : currentRunIndex]?.runners
+						{eventQuery.data?.event.runs?.[currentRunIndex]?.runners
 							.map((runner) => runner.username)
 							.join(", ") ?? "Loading"}
 					</h3>

diff --git a/apps/nextjs/pages/ASM2023/incentives.tsx b/apps/nextjs/pages/ASM2023/incentives.tsx
@@ -126,9 +126,9 @@ function getIncentiveElement(incentive: any): JSX.Element {
 	};
 	switch (incentive.type) {
 		case "goal":
-			return <Goal key={incentive.id} {...runMetadata} {...incentive.data} />;
+			return <><Goal key={incentive.id} {...runMetadata} {...incentive.data} /><hr /></>;
 		case "war":
-			return <War key={incentive.id} {...runMetadata} {...incentive.data} />;
+			return <><War key={incentive.id} {...runMetadata} {...incentive.data} /><hr /></>;
 		default:
 			return <></>;
 	}

diff --git a/apps/nextjs/styles/Event.incentives.module.scss b/apps/nextjs/styles/Event.incentives.module.scss
@@ -5,7 +5,8 @@
 .app {
 	background: $asm23-main;
 	background-image: url("./img/events/asm23/asm23-background.png");
-	background-size: cover;
+	background-size: contain;
+	background-position-x: center;
 }
 
 .content {
@@ -85,6 +86,11 @@
 		width: 50%;
 		height: 2px;
 	}
+
+	hr {
+		width: 80%;
+		margin: 48px auto;
+	}
 }
 
 .goal,
@@ -102,6 +108,7 @@
 
 	.gameinfo {
 		font-size: 1.2rem;
+		text-align: center;
 
 		.game {
 			font-weight: bold;