From c1da720addec94b582cafa1a2d928bcd8172be39 Mon Sep 17 00:00:00 2001
From: matt <matt@fiddaman.net>
Date: Sat, 5 Feb 2022 23:20:56 +0000
Subject: [PATCH] Split out dashboard content items into a seperate css
 component

---
 src/stylesheets/components/_admin.scss | 46 +++++++++++++++++++++++++
 src/stylesheets/main.scss              |  1 +
 src/stylesheets/pages/_dashboard.scss  | 47 --------------------------
 views/dashboard.hbs                    | 24 ++++++-------
 4 files changed, 59 insertions(+), 59 deletions(-)
 create mode 100644 src/stylesheets/components/_admin.scss

diff --git a/src/stylesheets/components/_admin.scss b/src/stylesheets/components/_admin.scss
new file mode 100644
index 0000000..5959e85
--- /dev/null
+++ b/src/stylesheets/components/_admin.scss
@@ -0,0 +1,46 @@
+.adminItem {
+	padding: .7rem;
+	background-color: white;
+	border-radius: 15px;
+}
+
+.adminSection {
+	margin: 1rem 0;
+
+	&:last-child {
+		margin-bottom: 0;
+		padding-bottom: 1rem;
+	}
+
+	h2 {
+		color: $text-colour;
+		font-weight: normal;
+		margin-left: .5rem;
+	}
+}
+
+.adminTable {
+	background-color: #E5E5E5;
+	padding: 1rem;
+	border-radius: 15px;
+
+	table {
+		width: 100%;
+
+	}
+
+	tr {
+		@include on-event() {
+			background-color: white;
+			cursor: pointer;
+		}
+	}
+
+	td {
+		padding: .5rem;
+
+		&:last-child {
+			width: 100%;
+		}
+	}
+}
diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
index aa9a137..e2b9458 100644
--- a/src/stylesheets/main.scss
+++ b/src/stylesheets/main.scss
@@ -17,6 +17,7 @@
 @import 'components/adminHeader';
 @import 'components/adminNav';
 @import 'components/adminNavItem';
+@import 'components/admin';
 
 @import 'pages/index';
 @import 'pages/dashboard';
diff --git a/src/stylesheets/pages/_dashboard.scss b/src/stylesheets/pages/_dashboard.scss
index 2593125..28db43a 100644
--- a/src/stylesheets/pages/_dashboard.scss
+++ b/src/stylesheets/pages/_dashboard.scss
@@ -3,53 +3,6 @@
 	background-color: #E5E5E5;
 	padding: .5rem 2rem 0 2rem;
 
-	.dashboard__item {
-		padding: .7rem;
-		background-color: white;
-		border-radius: 15px;
-	}
-
-	.dashboard__row {
-		margin: 1rem 0;
-
-		&:last-child {
-			margin-bottom: 0;
-			padding-bottom: 1rem;
-		}
-
-		h2 {
-			color: $text-colour;
-			font-weight: normal;
-			margin-left: .5rem;
-		}
-	}
-
-	.dashboard__table {
-		background-color: #E5E5E5;
-		padding: 1rem;
-		border-radius: 15px;
-
-		table {
-			width: 100%;
-
-		}
-
-		tr {
-			@include on-event() {
-				background-color: white;
-				cursor: pointer;
-			}
-		}
-
-		td {
-			padding: .5rem;
-
-			&:last-child {
-				width: 100%;
-			}
-		}
-	}
-
 	.dashboard__stats {
 		display: grid;
 		grid-template-columns: repeat(2, 1fr);
diff --git a/views/dashboard.hbs b/views/dashboard.hbs
index 695f4ab..0a64e2d 100644
--- a/views/dashboard.hbs
+++ b/views/dashboard.hbs
@@ -1,26 +1,26 @@
 <section class='dashboard'>
-	<div class='dashboard__row dashboard__stats'>
-		<div class='dashboard__stat dashboard__item'>
+	<div class='adminSection dashboard__stats'>
+		<div class='dashboard__stat adminItem'>
 			<h2>5</h2>
 			<span>Classes</span>
 		</div>
-		<div class='dashboard__stat dashboard__item'>
+		<div class='dashboard__stat adminItem'>
 			<h2>11</h2>
 			<span>Completed Tests</span>
 		</div>
-		<div class='dashboard__stat dashboard__item'>
+		<div class='dashboard__stat adminItem'>
 			<h2>1</h2>
 			<span>Upcoming Test</span>
 		</div>
-		<div class='dashboard__stat dashboard__item'>
+		<div class='dashboard__stat adminItem'>
 			<h2>90%</h2>
 			<span>Pass Rate</span>
 		</div>
 	</div>
-	<div class='dashboard__row'>
-		<div class='dashboard__item'>
+	<div class='adminSection'>
+		<div class='adminItem'>
 			<h2>Recent Tests</h2>
-			<div class='dashboard__table'>
+			<div class='adminTable'>
 				<table>
 					<tr data-id='1'>
 						<td>
@@ -50,10 +50,10 @@
 			</div>
 		</div>
 	</div>
-	<div class='dashboard__row'>
-		<div class='dashboard__item'>
+	<div class='adminSection'>
+		<div class='adminItem'>
 			<h2>Upcoming Tests</h2>
-			<div class='dashboard__table'>
+			<div class='adminTable'>
 				<table>
 					<tr data-id='1'>
 						<td>
@@ -99,7 +99,7 @@
 		toggle.classList.toggle('fa-close');
 	});
 
-	const tests = document.querySelectorAll('.dashboard__table tr');
+	const tests = document.querySelectorAll('.adminTable tr');
 	tests.forEach(test => {
 		test.addEventListener('click', () => {
 			window.location.href =