Added classes page

routes/admin.js

@@ -11,6 +11,11 @@ router.get('/dashboard', (req, res) => {
 	});
 });
 
+router.get('/classes', (req, res) => {
+	return res.render('classes', {
+		title: 'Stratos - Classes'
+	});
+});
 
 module.exports = {
 	root: '/admin',

src/stylesheets/components/_class.scss

@@ -0,0 +1,12 @@
+.classes__class {
+	transition: background .25s, color .25s;
+	position: relative;
+	min-height: 10rem;
+	border-top: 10px solid $primary-colour;
+
+	@include on-event() {
+		cursor: pointer;
+		background-color: $primary-colour;
+		color: white;
+	}
+}

src/stylesheets/main.scss

@@ -18,6 +18,8 @@
 @import 'components/adminNav';
 @import 'components/adminNavItem';
 @import 'components/admin';
+@import 'components/class';
 
 @import 'pages/index';
 @import 'pages/dashboard';
+@import 'pages/classes';

src/stylesheets/pages/_classes.scss

@@ -0,0 +1,14 @@
+.classes {
+	display: grid;
+	column-gap: 1rem;
+	row-gap: 1.5rem;
+	margin-top: 1rem;
+
+	@include respond-to('medium') {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	@include respond-to('large') {
+		grid-template-columns: repeat(3, 1fr);
+	}
+}

views/classes.hbs

@@ -0,0 +1,16 @@
+<section class='classes'>
+	{{> class name='13(3) Chemistry' teacher='Dr M Ashley' id=1 }}
+	{{> class name='13(3) Chemistry' teacher='Dr M Ashley' id=2 }}
+	{{> class name='13(3) Chemistry' teacher='Dr M Ashley' id=3 }}
+	{{> class name='13(3) Chemistry' teacher='Dr M Ashley' id=4 }}
+</section>
+
+<script>
+	const classes = document.querySelectorAll('.classes__class');
+	classes.forEach(c => {
+		c.addEventListener('click', () => {
+			window.location.href =
+				`/admin/class/${c.getAttribute('data-id')}`;
+		});
+	});
+</script>

views/partials/class.hbs

@@ -0,0 +1,4 @@
+<div class='classes__class adminItem' data-id={{ id }}>
+	<h2>{{ name }}</h2>
+	<h3>{{ teacher }}</h3>
+</div>