Skip to content

Instantly share code, notes, and snippets.

@ikariiin

ikariiin/css_style.css

Created July 30, 2019 07:02
Show Gist options
  • Save ikariiin/e73a4c4cc50e289cdb6d31b52cee2d90 to your computer and use it in GitHub Desktop.
Save ikariiin/e73a4c4cc50e289cdb6d31b52cee2d90 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css_style.css
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap');
body, html {
font-family: "Quicksand", Roboto, sans-serif;
font-size: 13px;
background: #363633;
color: #ededed;
margin: 0;
}
.dashboard-card {
margin: 1rem;
border-radius: 13px;
background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
min-height: 250px;
padding: 1.5rem;
}
.dashboard-card .title {
font-size: 3.5rem;
font-weight: 900;
}
.card-container {
margin-top: 2rem;
}
.section-title {
font-weight: 700;
font-size: 2rem;
}
.card-container .cards {
margin-top: 1rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.card-container .cards .card {
background: #000000;
color: #ffffff;
border-radius: 13px;
padding: 1.5rem;
margin: 0 .75rem;
}
.card-container .cards .card .card-title {
font-size: .9rem;
font-weight: 300;
}
.card-container .cards .card .card-content {
font-weight: 700;
font-size: 3.5rem;
}
main {
margin: 0 3rem;
display: grid;
grid-template-columns: 3fr 3fr 6fr;
}
main .column {
margin: 0 .5rem;
}
main .column .details {
font-weight: 400;
font-size: 1.3rem;
color: rgba(255,255,255,.8);
/* background: rgba(255,255,255,.1); */
border-radius: 4px;
padding: 1rem;
border: dashed 6px #cdcdcd;
}
main .dates .date-item {
font-weight: 300;
font-size: 1.55rem;
cursor: pointer;
padding: .6rem 1.2rem;
border-radius: 4px;
margin: .25rem 0;
transition: 200ms all ease;
user-select: none;
}
main .dates .date-item:hover {
background: rgba(255,255,255,0.05);
}
main .times .time-item {
font-weight: 700;
font-size: 1.35rem;
cursor: pointer;
padding: .6rem 1.2rem;
border-radius: 4px;
margin: .25rem 0;
transition: 200ms all ease;
user-select: none;
}
main .times .time-item:hover {
background: rgba(255,255,255,0.05);
}
.save-display .title {
font-weight: 100;
font-size: 2.4rem;
}
.save-display .card {
background: linear-gradient(to right, #ef3b36, #ffffff);;
padding: 1.75rem;
border-radius: 13px;
color: #fefefe;
margin: 1rem .5rem;
}
.save-display .card .card-title {
font-weight: 700;
font-size: 2rem;
}
.save-display .card .card-content {
font-weight: 100;
font-size: 1.6rem;
margin: .3rem;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stronk - Dashboard</title>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<section class="dashboard-card">
<div class="title">Multimeter Saves</div>
<section class="card-container">
<div class="section-title">Recent Readings</div>
<section class="cards">
<section class="card">
<div class="card-title">
Resistance
</div>
<section class="card-content">
90
</section>
</section>
<section class="card">
<div class="card-title">
Voltage
</div>
<section class="card-content">
5
</section>
</section>
<section class="card">
<div class="card-title">
Continuity
</div>
<section class="card-content">
Yup
</section>
</section>
</section>
</section>
</section>
<main class="main-content">
<section class="column">
<div class="section-title">Dates</div>
<section class="dates" data-dates>
</section>
</section>
<section class="column">
<div class="section-title">Times <span data-date-display></span></div>
<section class="times" data-times>
<section class="details">Open a date to view</section>
</section>
</section>
<section class="column">
<div class="section-title">Details</div>
<section class="save-display" data-saved>
<section class="details">Open a time to view</section>
</section>
</section>
</main>
<script src="js/script.js"></script>
</body>
</html>
Raw
js_script.js
(() => {
"use strict";
const sampleData = [{
date: new Date(),
data: 'Yes',
type: 'continuity'
}, {
date: new Date(1564460269 * 1000),
data: 5.04,
type: 'voltage'
}, {
date: new Date(1564270870 * 1000),
data: 10000,
type: 'resistance'
}];
const groupedDates = {};
sampleData.forEach(data => {
if(!groupedDates[data.date.toLocaleDateString()]) {
groupedDates[data.date.toLocaleDateString()] = [
data
];
} else {
groupedDates[data.date.toLocaleDateString()].push(data);
}
});
function getTitle(type) {
switch(type) {
case 'resistance':
return 'Resistance (Ω)';
case 'voltage':
return 'Volts (V)';
case 'continuity':
return 'Continuity (Yes/No)';
}
}
function openSavedData(savedData) {
const savedDisplay = document.querySelector('[data-saved]');
const saved = `
<section class="title">
Saved Data for ${savedData.date.toLocaleString()}
</section>
<section class="card">
<div class="card-title">
${getTitle(savedData.type)}
</div>
<section class="card-content">
${savedData.data}
</section>
</section>
`;
savedDisplay.innerHTML = saved;
}
function openSpecificDate(items) {
document.querySelector('[data-date-display]').textContent = 'for ' + items[0].date.toLocaleDateString();
const times = document.querySelector('[data-times]');
times.innerHTML = "";
items.forEach(time => {
const timeElement = document.createElement('section');
timeElement.classList.add('time-item');
timeElement.textContent = time.date.toLocaleTimeString();
timeElement.addEventListener('click', (ev) => openSavedData(time));
times.appendChild(timeElement);
});
}
Object.values(groupedDates).sort(
(a, b) => b[0].date - a[0].date
).forEach(data => {
const datesContainer = document.querySelector('[data-dates]');
const date = document.createElement('div');
date.classList.add('date-item');
date.addEventListener('click', (ev) => openSpecificDate(data))
date.textContent = data[0].date.toLocaleDateString();
datesContainer.appendChild(date);
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment