mirror of
https://github.com/KevinMidboe/brewPi.git
synced 2025-10-29 16:50:12 +00:00
Merge pull request #1 from KevinMidboe/fix/styles-structure
Fix: Styles structure
This commit is contained in:
GitHub
24
src/app.html
24
src/app.html
@@ -1,19 +1,15 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="description" content="" />
|
<meta name="description" content="" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
<link rel="stylesheet" type="text/css" href="/global.css" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link rel="stylesheet" type="text/css" href="/variables.css" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
|
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body data-sveltekit-prefetch>
|
<body data-sveltekit-prefetch>
|
||||||
<div>%sveltekit.body%</div>
|
<div>%sveltekit.body%</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<style lang="scss"></style>
|
|
||||||
|
|||||||
201
src/lib/components/BrewProgress.svelte
Normal file
201
src/lib/components/BrewProgress.svelte
Normal file
@@ -0,0 +1,201 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface IStep {
|
||||||
|
icon: string;
|
||||||
|
name: string;
|
||||||
|
date: string;
|
||||||
|
state: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IBrew {
|
||||||
|
name: string;
|
||||||
|
by: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const brew: IBrew = {
|
||||||
|
name: 'Kveldsbris',
|
||||||
|
by: 'Kinn Bryggeri'
|
||||||
|
};
|
||||||
|
|
||||||
|
const steps: Array<IStep> = [
|
||||||
|
{
|
||||||
|
icon: 'M9.94 8.007l3.983 3.983 1.06 1.06 1.06-1.06 6.93-6.93-2.12-2.12-6.93 6.93h2.12l-3.982-3.984-2.12 2.12z',
|
||||||
|
name: 'Brew',
|
||||||
|
date: 'March 19',
|
||||||
|
state: 'completed'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'M19.803 5h1.572c.226 0 .443.244.603.404l1.772 1.85c.16.16.25.453.25.68v2.832c0 .015 0 .234-1 .234-.415-.854-1.116-1.287-2.124-1.287-.426 0-1.05.173-1.403.356-.14.072-.473.086-.473-.07V5.803c0-.442.36-.803.803-.803zM9.263 3h7.83c.5 0 .907.406.907.906v6.188c0 .5-.406.906-.906.906h-2.138c-.115 0-.214.206-.26.1-.397-.9-1.297-1.387-2.338-1.387-1.04 0-1.94.418-2.338 1.32-.046.104-.145-.033-.26-.033H8.672c-.37 0-.672-.3-.672-.672V4.265C8 3.57 8.57 3 9.264 3zm11.676 7.978c.828 0 1.5.67 1.5 1.5 0 .828-.672 1.5-1.5 1.5-.83 0-1.5-.672-1.5-1.5 0-.83.67-1.5 1.5-1.5zm-8.582-.07c.828 0 1.5.67 1.5 1.5 0 .828-.672 1.5-1.5 1.5s-1.5-.672-1.5-1.5c0-.83.672-1.5 1.5-1.5z',
|
||||||
|
name: 'Ferment',
|
||||||
|
date: 'March 23',
|
||||||
|
state: 'completed'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'M23.45 10.99c-.162-.307-.54-.42-.84-.257l-4.582 2.45-6.557-11.93H8.62c-.347 0-.62.283-.62.628 0 .346.273.628.62.628h2.118l4.825 8.783c-.037-.006-.074-.006-.112-.006-1.37 0-2.482 1.123-2.482 2.508s1.11 2.508 2.483 2.508c1.038 0 1.92-.64 2.293-1.543l5.445-2.92c.304-.164.422-.54.26-.847zm-8 3.874c-.59 0-1.06-.476-1.06-1.072 0-.596.47-1.072 1.06-1.072.59 0 1.063.476 1.063 1.072 0 .596-.472 1.072-1.062 1.072zm8.994-6.698l-5.848 3.288-2.718-4.93 5.847-3.287 2.72 4.93zm-4.288-5.482l-4.882 2.744-1.48-2.683L18.675 0l1.48 2.684z',
|
||||||
|
name: 'Bottle',
|
||||||
|
date: 'April 1',
|
||||||
|
state: 'in-progress'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'M15.623 5.014l-4.29 3.577c-.196.168-.327.362-.327.62v6.206c0 .322.335.584.656.584h2.004c.32 0 .584-.262.584-.584l-.033-3.115c0-.16.13-.29.29-.29h2.918c.16 0 .292.13.292.29l.033 3.116c0 .322.263.584.584.584h2.09c.322 0 .585-.262.585-.584V9.48c0-.257-.172-.626-.37-.792l-4.263-3.674c-.218-.184-.536-.184-.754 0zm7.17 2.374l-5.967-5.046C16.606 2.122 16.312 2 16 2c-.312 0-.606.123-.79.31L9.207 7.388c-.245.208-.276.576-.068.822.115.136.28.206.446.206.133 0 .266-.044.376-.137l5.69-4.847c.208-.155.49-.157.697-.002 1.286.962 5.693 4.85 5.693 4.85.246.206.614.177.822-.07.208-.246.177-.614-.068-.822z',
|
||||||
|
name: 'Carbonate',
|
||||||
|
date: 'April 14',
|
||||||
|
state: ''
|
||||||
|
}
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h1>Brew progress</h1>
|
||||||
|
|
||||||
|
<ol class="os-timeline">
|
||||||
|
{#each steps as step}
|
||||||
|
<li class="os-timeline-step {step.state}">
|
||||||
|
<svg
|
||||||
|
width="32"
|
||||||
|
height="17"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="os-timeline-step__icon"
|
||||||
|
aria-hidden="true"
|
||||||
|
focusable="false"
|
||||||
|
>
|
||||||
|
<path d="{step.icon}"></path>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<span class="visually-hidden">Past step: </span>
|
||||||
|
<span class="os-timeline-step__title">{step.name}</span>
|
||||||
|
<span class="os-timeline-step__date">{step.date}</span>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<div class="description">
|
||||||
|
<h2>{brew.name} <span class="company">av {brew.by}</span></h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.description {
|
||||||
|
margin-top: 1em;
|
||||||
|
border-top: 1px solid #d9d9d9;
|
||||||
|
|
||||||
|
.company {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
opacity: 0.8;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
list-style: none;
|
||||||
|
margin-left: 0;
|
||||||
|
padding: 1rem 0;
|
||||||
|
padding-left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 25%;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 20px;
|
||||||
|
|
||||||
|
&.completed::before {
|
||||||
|
background: var(--green) !important;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.in-progress:before {
|
||||||
|
z-index: 2;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
#e6e6e6,
|
||||||
|
#e6e6e6 5%,
|
||||||
|
var(--green) 5%,
|
||||||
|
var(--green) 10%
|
||||||
|
);
|
||||||
|
|
||||||
|
background-size: 150px 150px;
|
||||||
|
animation: move-it 12s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes move-it {
|
||||||
|
0% {
|
||||||
|
background-position: initial;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 150px 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background: #e6e6e6;
|
||||||
|
z-index: 1;
|
||||||
|
width: 2000px;
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 4px;
|
||||||
|
position: absolute;
|
||||||
|
top: 8.5px;
|
||||||
|
right: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
&::after {
|
||||||
|
background: #fff;
|
||||||
|
left: 0;
|
||||||
|
z-index: 4;
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 4px;
|
||||||
|
position: absolute;
|
||||||
|
top: 8.5px;
|
||||||
|
right: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.completed svg {
|
||||||
|
fill: var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
background: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 5;
|
||||||
|
fill: #737373;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visually-hidden {
|
||||||
|
border: 0;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
width: 2px;
|
||||||
|
height: 2px;
|
||||||
|
margin: -2px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.os-timeline-step__title {
|
||||||
|
color: var(-green);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.os-timeline-step__date {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.85em;
|
||||||
|
color: #737373;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -196,4 +196,5 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<canvas id="{name}" bind:this="{chartCanvas}" width="400" height="400"></canvas>
|
<canvas class="card" id="{name}" bind:this="{chartCanvas}" width="400" height="400"></canvas>
|
||||||
|
|
||||||
|
|||||||
@@ -1,75 +1,75 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from 'svelte/transition';
|
||||||
import Navigation from './Navigation.svelte';
|
import Navigation from './Navigation.svelte';
|
||||||
import GithubIcon from '../icons/Github.svelte';
|
import GithubIcon from '../icons/Github.svelte';
|
||||||
|
|
||||||
let open: boolean = false;
|
let open: boolean = false;
|
||||||
|
|
||||||
function toggleMenu() {
|
function toggleMenu() {
|
||||||
open = !open;
|
open = !open;
|
||||||
}
|
}
|
||||||
|
|
||||||
function close() {
|
function close() {
|
||||||
open = false;
|
open = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
$: headerText = !open ? 'Menu' : 'Close';
|
$: headerText = !open ? 'Menu' : 'Close';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if open}
|
{#if open}
|
||||||
<div class="slideout-menu" transition:fly="{{ x: 550, duration: 300 }}">
|
<div class="slideout-menu" transition:fly="{{ x: 550, duration: 300 }}">
|
||||||
<h1>Navigation</h1>
|
<h1>Navigation</h1>
|
||||||
|
|
||||||
<Navigation on:click={close} />
|
<Navigation on:click="{close}" />
|
||||||
|
|
||||||
<ul class="bottom-content">
|
<ul class="bottom-content">
|
||||||
<li>
|
<li>
|
||||||
<a href="https://github.com/kevinmidboe/brewpi">
|
<a href="https://github.com/kevinmidboe/brewpi">
|
||||||
<GithubIcon />
|
<GithubIcon />
|
||||||
<span class="meta">View on Github</span>
|
<span class="meta">View on Github</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<div on:click={toggleMenu} class:open aria-label="Open menu" class="menu">
|
<div on:click="{toggleMenu}" class:open="{open}" aria-label="Open menu" class="menu">
|
||||||
{#if !open}
|
{#if !open}
|
||||||
<span class="page-header-buttons__open">
|
<span class="page-header-buttons__open">
|
||||||
<span /> <span /> <span />
|
<span></span> <span></span> <span></span>
|
||||||
</span>
|
</span>
|
||||||
{:else}
|
{:else}
|
||||||
<span class="page-header-buttons__close">
|
<span class="page-header-buttons__close">
|
||||||
<span />
|
<span></span>
|
||||||
<span />
|
<span></span>
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<span class="page-header-text">{headerText}</span>
|
<span class="page-header-text">{headerText}</span>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<style lang="scss" module="scoped">
|
<style lang="scss" module="scoped">
|
||||||
.slideout-menu {
|
.slideout-menu {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
max-width: 550px;
|
max-width: 550px;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 1;
|
z-index: 10;
|
||||||
|
|
||||||
background-color: #fff3f6;
|
background-color: #fff3f6;
|
||||||
color: black;
|
color: black;
|
||||||
padding: calc(100px + 2rem) 2rem 1rem;
|
padding: calc(100px + 2rem) 2rem 1rem;
|
||||||
border-top-left-radius: 4rem;
|
border-top-left-radius: 4rem;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
padding-bottom: 4rem;
|
padding-bottom: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 640px) {
|
@media screen and (max-width: 640px) {
|
||||||
padding: 100px 2rem 2rem;
|
padding: 100px 2rem 2rem;
|
||||||
@@ -78,116 +78,117 @@
|
|||||||
.bottom-content {
|
.bottom-content {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
|
|
||||||
li, li a {
|
li,
|
||||||
display: flex;
|
li a {
|
||||||
align-items: center;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.meta {
|
.meta {
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li:not(:last-of-type) {
|
li:not(:last-of-type) {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: var(--header-height);
|
height: var(--header-height);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
display: flex;
|
display: flex;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
background-color: var(--green);
|
background-color: var(--green);
|
||||||
color: #fff3f6;
|
color: #fff3f6;
|
||||||
padding: 14px 20px;
|
padding: 14px 20px;
|
||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
-webkit-transition: all 0.3s ease;
|
-webkit-transition: all 0.3s ease;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
|
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
&.open {
|
&.open {
|
||||||
background-color: salmon;
|
background-color: salmon;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.04);
|
transform: scale(1.04);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header-text {
|
.page-header-text {
|
||||||
padding-left: 11px;
|
padding-left: 11px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header-buttons__open {
|
.page-header-buttons__open {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
display: block;
|
display: block;
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1px;
|
left: 1px;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
top: 4px;
|
top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
top: 11px;
|
top: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(3) {
|
&:nth-child(3) {
|
||||||
top: 18px;
|
top: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header-buttons__close {
|
.page-header-buttons__close {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: grid;
|
display: grid;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
display: block;
|
display: block;
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1px;
|
left: 1px;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="relays-container">
|
<div class="card">
|
||||||
<h1>Manual relay controls</h1>
|
<h1>Manual relay controls</h1>
|
||||||
|
|
||||||
<div class="vertical-sensor-display">
|
<div class="vertical-sensor-display">
|
||||||
@@ -41,28 +41,15 @@
|
|||||||
<style lang="scss" module="scoped">
|
<style lang="scss" module="scoped">
|
||||||
@import '../../styles/media-queries.scss';
|
@import '../../styles/media-queries.scss';
|
||||||
|
|
||||||
.relays-container {
|
|
||||||
height: fit-content;
|
|
||||||
border-radius: 12px;
|
|
||||||
background-color: var(--background);
|
|
||||||
transition: background-color var(--color-transition-duration) ease-in-out;
|
|
||||||
padding: 2.25rem 1rem;
|
|
||||||
|
|
||||||
@include tablet {
|
|
||||||
padding: 2.25rem 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-sensor-display {
|
.vertical-sensor-display {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: fit-content;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-around;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
@include desktop {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<div class="vertical-sensor-display">
|
<div class="card">
|
||||||
<CardButton>
|
<CardButton>
|
||||||
<Activity on:click={flipCard} />
|
<Activity on:click={flipCard} />
|
||||||
</CardButton>
|
</CardButton>
|
||||||
@@ -76,18 +76,6 @@
|
|||||||
<style lang="scss" module="scoped">
|
<style lang="scss" module="scoped">
|
||||||
@import '../../styles/media-queries.scss';
|
@import '../../styles/media-queries.scss';
|
||||||
|
|
||||||
.vertical-sensor-display {
|
|
||||||
position: relative;
|
|
||||||
padding: 2.25rem 1rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
background-color: var(--background);
|
|
||||||
transition: background-color var(--color-transition-duration) ease-in-out;
|
|
||||||
|
|
||||||
@include tablet {
|
|
||||||
padding: 2.25rem 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
@@ -104,13 +92,17 @@ h2 {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 1.75rem;
|
margin-bottom: 1.75rem;
|
||||||
|
|
||||||
font-size: 3rem;
|
font-size: 2.2rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
|
||||||
@include tablet {
|
@include tablet {
|
||||||
font-size: 4.5rem;
|
font-size: 2.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include desktop {
|
||||||
|
font-size: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.unit {
|
.unit {
|
||||||
|
|||||||
@@ -1,13 +1,14 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import HeaderComponent from '$lib/components/Header.svelte';
|
import HeaderComponent from '$lib/components/Header.svelte';
|
||||||
// import Darkmode from '$lib/components/Darkmode.svelte'
|
// import Darkmode from '$lib/components/Darkmode.svelte'
|
||||||
|
import '../styles/global.css';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<HeaderComponent />
|
<HeaderComponent />
|
||||||
<!-- <Darkmode/> -->
|
<!-- <Darkmode/> -->
|
||||||
|
|
||||||
<div class="page-content">
|
<div class="page-content">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@@ -16,14 +17,11 @@
|
|||||||
.page-content {
|
.page-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
min-height: calc(100vh - var(--header-height));
|
||||||
min-height: 100vh;
|
margin: var(--header-height) 2.5rem 0;
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2.5em;
|
|
||||||
margin-top: var(--header-height);
|
|
||||||
|
|
||||||
@include mobile {
|
@include mobile {
|
||||||
padding: 1em;
|
margin: var(--header-height) 1rem 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
import Display from '$lib/components/display.svelte'
|
import Display from '$lib/components/display.svelte'
|
||||||
import VerticalSensorDisplay from '$lib/components/VerticalSensorDisplay.svelte'
|
import VerticalSensorDisplay from '$lib/components/VerticalSensorDisplay.svelte'
|
||||||
import Livestream from '$lib/components/Livestream.svelte'
|
import Livestream from '$lib/components/Livestream.svelte'
|
||||||
import Navigation from '$lib/components/Navigation.svelte';
|
import BrewProgress from '$lib/components/BrewProgress.svelte';
|
||||||
import type { PageData } from './$types';
|
import type { PageData } from './$types';
|
||||||
import RelayControls from '../lib/components/RelayControls.svelte';
|
import RelayControls from '../lib/components/RelayControls.svelte';
|
||||||
|
|
||||||
@@ -14,7 +14,7 @@
|
|||||||
<PageHeader />
|
<PageHeader />
|
||||||
|
|
||||||
<div class="vertical-grid">
|
<div class="vertical-grid">
|
||||||
<Navigation />
|
<BrewProgress />
|
||||||
|
|
||||||
<VerticalSensorDisplay {inside} {outside} />
|
<VerticalSensorDisplay {inside} {outside} />
|
||||||
|
|
||||||
@@ -31,10 +31,10 @@
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
column-gap: 2rem;
|
column-gap: 2rem;
|
||||||
row-gap: 15px;
|
row-gap: 15px;
|
||||||
margin: 1rem;
|
margin: 1rem 0;
|
||||||
|
|
||||||
@include desktop {
|
@include desktop {
|
||||||
grid-template-columns: 1fr 2fr 3fr;
|
grid-template-columns: 2fr 2fr 3fr;
|
||||||
margin: 2rem;
|
margin: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main class="page-content">
|
<main class="card">
|
||||||
<h1>Past brews</h1>
|
<h1>Past brews</h1>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
@@ -20,7 +20,8 @@
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
main.page-content {
|
main.card {
|
||||||
|
height: calc(100vh - var(--header-height) * 2);
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin-left: 1.2em;
|
margin-left: 1.2em;
|
||||||
@@ -31,6 +32,7 @@
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
font-size: 1.2rem;
|
||||||
color: #19A786;
|
color: #19A786;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import Graph from '../../../lib/components/Graph.svelte';
|
||||||
|
import { fetchTemperature, fetchHumidity } from '../../../lib/graphQueryGenerator';
|
||||||
|
import IChartFrame from '../../../lib/interfaces/IChartFrame';
|
||||||
let height: number;
|
let height: number;
|
||||||
|
|
||||||
// let brew = {
|
// let brew = {
|
||||||
@@ -9,6 +12,14 @@
|
|||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let brew = data.brew;
|
let brew = data.brew;
|
||||||
|
let temperatureData: IChartFrame[];
|
||||||
|
let humidityData: IChartFrame[];
|
||||||
|
|
||||||
|
const from: Date = new Date();
|
||||||
|
const to = new Date(1684872000000);
|
||||||
|
const size = 40;
|
||||||
|
fetchTemperature(from, to, size, fetch).then((resp) => (temperatureData = resp));
|
||||||
|
fetchHumidity(from, to, size, fetch).then((resp) => (humidityData = resp));
|
||||||
|
|
||||||
const dateFormat = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
|
const dateFormat = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
|
||||||
const dateString = new Date(Number(brew.date * 1000)).toLocaleDateString('no-NB', dateFormat);
|
const dateString = new Date(Number(brew.date * 1000)).toLocaleDateString('no-NB', dateFormat);
|
||||||
@@ -16,9 +27,9 @@
|
|||||||
const wizards = brew.by.join(', ');
|
const wizards = brew.by.join(', ');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section>
|
<section class="card">
|
||||||
<div class="desktop-only image-container" style="height: {height}px">
|
<div class="desktop-only image-container" style="height: {height}px">
|
||||||
<img src="/images/{ brew.image }" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
|
<img src="/images/{brew.image}" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="beer-container" bind:clientHeight="{height}">
|
<div class="beer-container" bind:clientHeight="{height}">
|
||||||
@@ -34,28 +45,28 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><b>Brygget:</b></td>
|
<td><b>Brygget:</b></td>
|
||||||
<td>{ dateString }</td>
|
<td>{dateString}</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td><b>Laget av:</b></td>
|
<td><b>Laget av:</b></td>
|
||||||
<td>{ wizards }</td>
|
<td>{wizards}</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td><b>Kategori:</b></td>
|
<td><b>Kategori:</b></td>
|
||||||
<td>{ brew.beer.category }</td>
|
<td>{brew.beer.category}</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td><b>Alkoholprosent:</b></td>
|
<td><b>Alkoholprosent:</b></td>
|
||||||
<td>~ { brew.abv }%</td>
|
<td>~ {brew.abv}%</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<div class="mobile-only image-container">
|
<div class="mobile-only image-container">
|
||||||
<img src="/images/{ brew.image }" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
|
<img src="/images/{brew.image}" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Historie</h3>
|
<h3>Historie</h3>
|
||||||
@@ -64,6 +75,20 @@
|
|||||||
ble Tuborg Bryggeri en del av Carlsberg.
|
ble Tuborg Bryggeri en del av Carlsberg.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
{#if temperatureData}
|
||||||
|
<div class="graph">
|
||||||
|
<h3>Temperature during fermentation</h3>
|
||||||
|
<Graph dataFrames="{temperatureData}" name="Temperature" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if humidityData}
|
||||||
|
<div class="graph">
|
||||||
|
<h3>Humidity during carbonation</h3>
|
||||||
|
<Graph dataFrames="{humidityData}" name="Humidity" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<h3>Smak</h3>
|
<h3>Smak</h3>
|
||||||
<p>
|
<p>
|
||||||
Tuborg Sommerøl er en nordisk pilsner med en svært lys strågul farge. Aromaen er preget av
|
Tuborg Sommerøl er en nordisk pilsner med en svært lys strågul farge. Aromaen er preget av
|
||||||
@@ -88,9 +113,27 @@
|
|||||||
section {
|
section {
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@200;300;400;500;600;700;800&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@200;300;400;500;600;700;800&display=swap');
|
||||||
font-family: 'Epilogue', sans-serif;
|
font-family: 'Epilogue', sans-serif;
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
padding: unset !important;
|
||||||
left: 0;
|
margin-bottom: 3rem;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
.beer-container {
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include tablet {
|
||||||
|
.beer-container {
|
||||||
|
border-top-right-radius: inherit;
|
||||||
|
border-bottom-right-radius: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container {
|
||||||
|
border-top-left-radius: inherit;
|
||||||
|
border-bottom-left-radius: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-container {
|
.image-container {
|
||||||
@@ -120,7 +163,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.beer-container {
|
.beer-container {
|
||||||
background-color: rgba(215, 224, 223, 0.6);
|
background-color: rgba(215, 224, 223, 0.8);
|
||||||
padding: 2rem 1rem;
|
padding: 2rem 1rem;
|
||||||
|
|
||||||
@include tablet {
|
@include tablet {
|
||||||
@@ -178,5 +221,17 @@
|
|||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.graph {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 50vh;
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
|
||||||
|
@include desktop {
|
||||||
|
float: left;
|
||||||
|
max-height: 450px;
|
||||||
|
max-width: 48%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,4 +1,29 @@
|
|||||||
|
:root {
|
||||||
|
--mobile-width: 768px;
|
||||||
|
--tablet-width: 1200px;
|
||||||
|
--background: white;
|
||||||
|
--backdrop: #f5f5f7;
|
||||||
|
--text-color: black;
|
||||||
|
--red: #ff97a3;
|
||||||
|
--blue: #9ad9ff;
|
||||||
|
--green: #19a786;
|
||||||
|
|
||||||
|
--header-height: 80px;
|
||||||
|
--color-transition-duration: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: black;
|
||||||
|
--backdrop: #202124;
|
||||||
|
--text-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
margin: 0;
|
||||||
font-family: 'Roboto';
|
font-family: 'Roboto';
|
||||||
background-color: var(--backdrop);
|
background-color: var(--backdrop);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
@@ -9,6 +34,40 @@ body {
|
|||||||
font-family var(--color-transition-duration) ease-in-out;
|
font-family var(--color-transition-duration) ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit; /* blue colors for links too */
|
||||||
|
text-decoration: inherit; /* no underline */
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
li {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
height: fit-content;
|
||||||
|
padding: 2.25rem 1rem;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
background-color: var(--background);
|
||||||
|
transition: all 0.2s ease, background-color var(--color-transition-duration) ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: var(--mobile-width)) {
|
||||||
|
.card {
|
||||||
|
padding: 2.25rem 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Nunito regular */
|
/* Nunito regular */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Nunito';
|
font-family: 'Nunito';
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
:root {
|
|
||||||
--background: white;
|
|
||||||
--backdrop: #f5f5f7;
|
|
||||||
--text-color: black;
|
|
||||||
--red: #ff97a3;
|
|
||||||
--blue: #9ad9ff;
|
|
||||||
--header-height: 200px;
|
|
||||||
|
|
||||||
--color-transition-duration: 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark {
|
|
||||||
--background: pink;
|
|
||||||
--backdrop: #202124;
|
|
||||||
--text-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit; /* blue colors for links too */
|
|
||||||
text-decoration: inherit; /* no underline */
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
:root {
|
|
||||||
--background: white;
|
|
||||||
--backdrop: #f5f5f7;
|
|
||||||
--text-color: black;
|
|
||||||
--red: #ff97a3;
|
|
||||||
--blue: #9ad9ff;
|
|
||||||
--green: #19a786;
|
|
||||||
|
|
||||||
--header-height: 70px;
|
|
||||||
|
|
||||||
--color-transition-duration: 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark {
|
|
||||||
--background: black;
|
|
||||||
--backdrop: #202124;
|
|
||||||
--text-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit; /* blue colors for links too */
|
|
||||||
text-decoration: inherit; /* no underline */
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user