diff --git a/src/stylesheets/base/_typography.scss b/src/stylesheets/base/_typography.scss index 5ec0b73..9ca7aa5 100644 --- a/src/stylesheets/base/_typography.scss +++ b/src/stylesheets/base/_typography.scss @@ -12,7 +12,7 @@ a { } } -span.hl { +.hl { color: $primary-colour; font-weight: bold; } diff --git a/src/stylesheets/components/_admin.scss b/src/stylesheets/components/_admin.scss index fbc22da..70afe95 100644 --- a/src/stylesheets/components/_admin.scss +++ b/src/stylesheets/components/_admin.scss @@ -76,3 +76,86 @@ padding: .5rem 1rem; } } + +.adminOverview { + @include space-contents; + + &__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; + } +} + +.adminStats { + @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); + } +} diff --git a/src/stylesheets/pages/_class.scss b/src/stylesheets/pages/_class.scss index 1c59664..4d45e9e 100644 --- a/src/stylesheets/pages/_class.scss +++ b/src/stylesheets/pages/_class.scss @@ -3,11 +3,7 @@ font-size: 1.1em; } - &__overview { - display: flex; - flex-direction: column; - gap: 1rem; - + .adminOverview { &__members { display: grid; grid-template-columns: 1fr 1fr; @@ -16,85 +12,6 @@ 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 { diff --git a/views/class.hbs b/views/class.hbs index 2d5e7db..9a5edea 100644 --- a/views/class.hbs +++ b/views/class.hbs @@ -2,18 +2,18 @@

Class Overview - {{ className }}

-
-
+
+

Teachers

{{#each teachers}} {{> classTeacher name=shortName email=email }} {{/each}}
-
+

Members

{{> classMembers members=members }}
-
+
{{> button style='full' colour='primary' to=contactLink content='Contact'}} {{> button style='full' colour='primary' to=testsLink content='View Tests'}}
@@ -21,17 +21,17 @@
-
+

Statistics and Reports

{{> button style='full' colour='primary' to=reportsLink content='View All'}}
-
+
{{#each stats}} - {{> classStat value=value text=text }} + {{> adminStat value=value text=text }} {{/each}}
-
+
{{> graph }} {{> graph }}
diff --git a/views/partials/classStat.hbs b/views/partials/adminStat.hbs similarity index 100% rename from views/partials/classStat.hbs rename to views/partials/adminStat.hbs