matt/stratos
1
0
Fork 0
mirror of https://github.com/matt-fidd/stratos.git synced 2026-01-01 22:39:26 +00:00
Code Issues Projects Releases Wiki Activity

Split out dashboard content items into a seperate css component

Browse Source
This commit is contained in:
matt
2022-02-05 23:20:56 +00:00
parent 3a89709908
commit c1da720add
4 changed files with 59 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/stylesheets/components/_admin.scss Normal file
View File

@@ -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%;
}
}
}

1
src/stylesheets/main.scss
View File

@@ -17,6 +17,7 @@
@import 'components/adminHeader'; @import 'components/adminHeader';
@import 'components/adminNav'; @import 'components/adminNav';
@import 'components/adminNavItem'; @import 'components/adminNavItem';
@import 'components/admin';
@import 'pages/index'; @import 'pages/index';
@import 'pages/dashboard'; @import 'pages/dashboard';

47
src/stylesheets/pages/_dashboard.scss
View File

@@ -3,53 +3,6 @@
background-color: #E5E5E5; background-color: #E5E5E5;
padding: .5rem 2rem 0 2rem; 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 { .dashboard__stats {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);

24
views/dashboard.hbs
View File

@@ -1,26 +1,26 @@
<section class='dashboard'> <section class='dashboard'>
<div class='dashboard__row dashboard__stats'> <div class='adminSection dashboard__stats'>
<div class='dashboard__stat dashboard__item'> <div class='dashboard__stat adminItem'>
<h2>5</h2> <h2>5</h2>
<span>Classes</span> <span>Classes</span>
</div> </div>
<div class='dashboard__stat dashboard__item'> <div class='dashboard__stat adminItem'>
<h2>11</h2> <h2>11</h2>
<span>Completed Tests</span> <span>Completed Tests</span>
</div> </div>
<div class='dashboard__stat dashboard__item'> <div class='dashboard__stat adminItem'>
<h2>1</h2> <h2>1</h2>
<span>Upcoming Test</span> <span>Upcoming Test</span>
</div> </div>
<div class='dashboard__stat dashboard__item'> <div class='dashboard__stat adminItem'>
<h2>90%</h2> <h2>90%</h2>
<span>Pass Rate</span> <span>Pass Rate</span>
</div> </div>
</div> </div>
<div class='dashboard__row'> <div class='adminSection'>
<div class='dashboard__item'> <div class='adminItem'>
<h2>Recent Tests</h2> <h2>Recent Tests</h2>
<div class='dashboard__table'> <div class='adminTable'>
<table> <table>
<tr data-id='1'> <tr data-id='1'>
<td> <td>
@@ -50,10 +50,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class='dashboard__row'> <div class='adminSection'>
<div class='dashboard__item'> <div class='adminItem'>
<h2>Upcoming Tests</h2> <h2>Upcoming Tests</h2>
<div class='dashboard__table'> <div class='adminTable'>
<table> <table>
<tr data-id='1'> <tr data-id='1'>
<td> <td>
@@ -99,7 +99,7 @@
toggle.classList.toggle('fa-close'); toggle.classList.toggle('fa-close');
}); });
const tests = document.querySelectorAll('.dashboard__table tr'); const tests = document.querySelectorAll('.adminTable tr');
tests.forEach(test => { tests.forEach(test => {
test.addEventListener('click', () => { test.addEventListener('click', () => {
window.location.href = window.location.href =