From 2eafa45b9d6140c64abe20b280682e3fd63154c7 Mon Sep 17 00:00:00 2001
From: matt <matt@fiddaman.net>
Date: Thu, 3 Mar 2022 02:08:44 +0000
Subject: [PATCH] Added styling for individual class page

---
 src/stylesheets/main.scss         |   1 +
 src/stylesheets/pages/_class.scss | 120 ++++++++++++++++++++++++++++++
 2 files changed, 121 insertions(+)
 create mode 100644 src/stylesheets/pages/_class.scss

diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
index 48c7daa..96fe9e5 100644
--- a/src/stylesheets/main.scss
+++ b/src/stylesheets/main.scss
@@ -24,3 +24,4 @@
 @import 'pages/dashboard';
 @import 'pages/classes';
 @import 'pages/tests';
+@import 'pages/class';
diff --git a/src/stylesheets/pages/_class.scss b/src/stylesheets/pages/_class.scss
new file mode 100644
index 0000000..1c59664
--- /dev/null
+++ b/src/stylesheets/pages/_class.scss
@@ -0,0 +1,120 @@
+.classPage {
+	.btn {
+		font-size: 1.1em;
+	}
+
+	&__overview {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+
+		&__members {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+
+			@include respond-to('medium') {
+				gap: .5rem;
+			}
+		}
+
+		&__buttons {
+			display: flex;
+			justify-content: center;
+			gap: 1rem;
+
+			@include respond-to('medium') {
+				flex-direction: column;
+				justify-content: space-around;
+				text-align: center;
+			}
+		}
+
+		@include respond-to('medium') {
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+		}
+	}
+
+	&__stats {
+		@include space-contents;
+
+		&__stats {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			gap: .5rem;
+
+			div {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				text-align: center;
+				background: $admin-bg;
+				padding: .5rem;
+				border-radius: 10px;
+
+				h3 {
+					color: $primary-colour;
+					font-size: 1.3em;
+				}
+
+				&:nth-child(odd):last-child {
+					grid-column-end: span 2;
+
+					@include respond-to('medium') {
+						grid-column-end: span 1;
+					}
+				}
+			}
+
+			@include respond-to('medium') {
+				grid-template-columns: repeat(5, 1fr);
+			}
+
+		}
+
+		&__graphs {
+			display: flex;
+			flex-direction: column;
+			gap: 1rem;
+
+			div {
+				box-sizing: border-box;
+				background: $admin-bg;
+				padding: 10rem 0;
+				width: 100%;
+				text-align: center;
+				border-radius: 20px;
+			}
+
+			@include respond-to('medium') {
+				flex-direction: row;
+			}
+		}
+
+		@include respond-to('medium') {
+			@include space-contents(1rem);
+		}
+	}
+
+	&__tests {
+		@include space-contents;
+
+		&__container {
+			display: flex;
+			flex-direction: column;
+			gap: 1rem;
+		}
+
+		@include respond-to('medium') {
+			&__container {
+				flex-direction: row;
+				justify-content: space-between;
+
+				div {
+					width: 100%;
+				}
+			}
+		}
+	}
+}