css fixes

refact0r · Feb 26, 2022 · b63a86f · b63a86f
1 parent 902efaf
commit b63a86f
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 22 deletions.
diff --git a/src/lib/parseData.js b/src/lib/parseData.js
@@ -64,7 +64,7 @@ export function parseData(session, json) {
 					}
 				}
 			} else {
-				course.scoreTypes.all = {
+				course.scoreTypes.All = {
 					score: 0,
 					total: 0,
 					weight: 100
@@ -105,8 +105,8 @@ export function parseData(session, json) {
 								course.scoreTypes[assignment.Type].total += totalValue
 							}
 						} else {
-							course.scoreTypes.all.score += scoreValue
-							course.scoreTypes.all.total += totalValue
+							course.scoreTypes.All.score += scoreValue
+							course.scoreTypes.All.total += totalValue
 						}
 
 						let date = new Date(assignment.DueDate)

diff --git a/src/routes/course/[courseIndex].svelte b/src/routes/course/[courseIndex].svelte
@@ -164,23 +164,27 @@
 		</div>
 	</div>
 	<div class="summary">
-		<h2>Summary</h2>
-		<table>
-			{#each Object.entries(course.scoreTypes) as [name, type]}
+		<div class="scroll">
+			<h2>Summary</h2>
+			<table>
+				{#each Object.entries(course.scoreTypes) as [name, type]}
+					<tr>
+						<td class="type-name">{name}</td>
+						<td class="type-points" style={type.style}>{type.score} / {type.total}</td>
+						<td class="type-weight">{type.weight}%</td>
+						<td class="type-score" style={type.style}>{type.scorePercent}%</td>
+					</tr>
+				{/each}
 				<tr>
-					<td>{name}</td>
-					<td>{type.score} / {type.total}</td>
-					<td>{type.weight}%</td>
-					<td style={type.style}>{type.scorePercent}%</td>
+					<td class="type-name">Total</td>
+					<td class="type-points" />
+					<td class="type-weight">100%</td>
+					<td class="type-score" style={course.style}>
+						{course.scorePercent.toFixed(1)}%
+					</td>
 				</tr>
-			{/each}
-			<tr>
-				<td>Total</td>
-				<td />
-				<td>100%</td>
-				<td>{course.scorePercent.toFixed(1)}%</td>
-			</tr>
-		</table>
+			</table>
+		</div>
 	</div>
 	<div class="assignments">
 		<div class="scroll">
@@ -192,7 +196,7 @@
 							<td class="assignment-name">{assignment.Measure}</td>
 							<td class="assignment-course">{assignment.Type}</td>
 							<td class="assignment-date">{assignment.DueDate}</td>
-							<td class="assignment-score" style={assignment.style}>
+							<td class="assignment-points" style={assignment.style}>
 								{assignment.score}
 							</td>
 							<td class="assignment-percentage" style={assignment.style}>
@@ -256,6 +260,9 @@
 		@include box;
 		grid-row: 2;
 		grid-column: 3;
+		padding: 0;
+		max-height: 300px;
+		overflow: auto;
 	}
 
 	.scroll {
@@ -270,16 +277,19 @@
 		padding-bottom: 10px;
 	}
 
-	.assignment-score,
+	.assignment-points,
 	.assignment-date {
 		padding: 10px 20px;
 	}
 
-	.assignment-score {
+	.assignment-points,
+	.type-points {
 		text-align: center;
 	}
 
-	.assignment-percentage {
+	.assignment-percentage,
+	.type-weight,
+	.type-score {
 		padding-left: 20px;
 		text-align: right;
 	}