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>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<link rel="stylesheet" type="text/css" href="/global.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/variables.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
<body data-sveltekit-prefetch>
|
||||
<div>%sveltekit.body%</div>
|
||||
</body>
|
||||
<body data-sveltekit-prefetch>
|
||||
<div>%sveltekit.body%</div>
|
||||
</body>
|
||||
</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>
|
||||
|
||||
<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">
|
||||
import { fly } from 'svelte/transition';
|
||||
import Navigation from './Navigation.svelte';
|
||||
import Navigation from './Navigation.svelte';
|
||||
import GithubIcon from '../icons/Github.svelte';
|
||||
|
||||
let open: boolean = false;
|
||||
let open: boolean = false;
|
||||
|
||||
function toggleMenu() {
|
||||
open = !open;
|
||||
}
|
||||
function toggleMenu() {
|
||||
open = !open;
|
||||
}
|
||||
|
||||
function close() {
|
||||
open = false;
|
||||
}
|
||||
|
||||
$: headerText = !open ? 'Menu' : 'Close';
|
||||
$: headerText = !open ? 'Menu' : 'Close';
|
||||
</script>
|
||||
|
||||
{#if open}
|
||||
<div class="slideout-menu" transition:fly="{{ x: 550, duration: 300 }}">
|
||||
<h1>Navigation</h1>
|
||||
|
||||
<Navigation on:click={close} />
|
||||
<Navigation on:click="{close}" />
|
||||
|
||||
<ul class="bottom-content">
|
||||
<li>
|
||||
<a href="https://github.com/kevinmidboe/brewpi">
|
||||
<GithubIcon />
|
||||
<span class="meta">View on Github</span>
|
||||
</a>
|
||||
<a href="https://github.com/kevinmidboe/brewpi">
|
||||
<GithubIcon />
|
||||
<span class="meta">View on Github</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<header>
|
||||
<div on:click={toggleMenu} class:open aria-label="Open menu" class="menu">
|
||||
{#if !open}
|
||||
<span class="page-header-buttons__open">
|
||||
<span /> <span /> <span />
|
||||
</span>
|
||||
{:else}
|
||||
<span class="page-header-buttons__close">
|
||||
<span />
|
||||
<span />
|
||||
</span>
|
||||
{/if}
|
||||
<div on:click="{toggleMenu}" class:open="{open}" aria-label="Open menu" class="menu">
|
||||
{#if !open}
|
||||
<span class="page-header-buttons__open">
|
||||
<span></span> <span></span> <span></span>
|
||||
</span>
|
||||
{:else}
|
||||
<span class="page-header-buttons__close">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<span class="page-header-text">{headerText}</span>
|
||||
</div>
|
||||
<span class="page-header-text">{headerText}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style lang="scss" module="scoped">
|
||||
.slideout-menu {
|
||||
position: fixed;
|
||||
.slideout-menu {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
max-width: 550px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
max-width: 550px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
|
||||
background-color: #fff3f6;
|
||||
background-color: #fff3f6;
|
||||
color: black;
|
||||
padding: calc(100px + 2rem) 2rem 1rem;
|
||||
padding: calc(100px + 2rem) 2rem 1rem;
|
||||
border-top-left-radius: 4rem;
|
||||
|
||||
h1 {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
h1 {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
padding: 100px 2rem 2rem;
|
||||
@@ -78,116 +78,117 @@
|
||||
.bottom-content {
|
||||
margin-top: auto;
|
||||
|
||||
li, li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
li,
|
||||
li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.meta {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.meta {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
li:not(:last-of-type) {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
header {
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
padding: 0 1rem;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: var(--header-height);
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
padding: 0 1rem;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: var(--header-height);
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
background-color: var(--green);
|
||||
.menu {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
background-color: var(--green);
|
||||
color: #fff3f6;
|
||||
padding: 14px 20px;
|
||||
border-radius: 25px;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
padding: 14px 20px;
|
||||
border-radius: 25px;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
&.open {
|
||||
background-color: salmon;
|
||||
color: black;
|
||||
}
|
||||
&.open {
|
||||
background-color: salmon;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
}
|
||||
|
||||
.page-header-text {
|
||||
padding-left: 11px;
|
||||
display: inline-block;
|
||||
}
|
||||
.page-header-text {
|
||||
padding-left: 11px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.page-header-buttons__open {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.page-header-buttons__open {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
span {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
|
||||
&:first-child {
|
||||
top: 4px;
|
||||
}
|
||||
&:first-child {
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
top: 11px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
top: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
top: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-header-buttons__close {
|
||||
position: relative;
|
||||
.page-header-buttons__close {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
place-items: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
span {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
|
||||
&:first-child {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&:first-child {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
&:nth-child(2) {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="relays-container">
|
||||
<div class="card">
|
||||
<h1>Manual relay controls</h1>
|
||||
|
||||
<div class="vertical-sensor-display">
|
||||
@@ -41,28 +41,15 @@
|
||||
<style lang="scss" module="scoped">
|
||||
@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 {
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include desktop {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
</script>
|
||||
|
||||
|
||||
<div class="vertical-sensor-display">
|
||||
<div class="card">
|
||||
<CardButton>
|
||||
<Activity on:click={flipCard} />
|
||||
</CardButton>
|
||||
@@ -76,18 +76,6 @@
|
||||
<style lang="scss" module="scoped">
|
||||
@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 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1.5rem;
|
||||
@@ -104,13 +92,17 @@ h2 {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.75rem;
|
||||
|
||||
font-size: 3rem;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
color: var(--text-color);
|
||||
|
||||
@include tablet {
|
||||
font-size: 4.5rem;
|
||||
font-size: 2.9rem;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.unit {
|
||||
@@ -132,4 +124,4 @@ h2 {
|
||||
color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
<script lang="ts">
|
||||
import HeaderComponent from '$lib/components/Header.svelte';
|
||||
// import Darkmode from '$lib/components/Darkmode.svelte'
|
||||
import '../styles/global.css';
|
||||
</script>
|
||||
|
||||
<HeaderComponent />
|
||||
<!-- <Darkmode/> -->
|
||||
|
||||
<div class="page-content">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -16,14 +17,11 @@
|
||||
.page-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
padding: 2.5em;
|
||||
margin-top: var(--header-height);
|
||||
min-height: calc(100vh - var(--header-height));
|
||||
margin: var(--header-height) 2.5rem 0;
|
||||
|
||||
@include mobile {
|
||||
padding: 1em;
|
||||
margin: var(--header-height) 1rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import Display from '$lib/components/display.svelte'
|
||||
import VerticalSensorDisplay from '$lib/components/VerticalSensorDisplay.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 RelayControls from '../lib/components/RelayControls.svelte';
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<PageHeader />
|
||||
|
||||
<div class="vertical-grid">
|
||||
<Navigation />
|
||||
<BrewProgress />
|
||||
|
||||
<VerticalSensorDisplay {inside} {outside} />
|
||||
|
||||
@@ -31,10 +31,10 @@
|
||||
grid-template-columns: 1fr;
|
||||
column-gap: 2rem;
|
||||
row-gap: 15px;
|
||||
margin: 1rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
@include desktop {
|
||||
grid-template-columns: 1fr 2fr 3fr;
|
||||
grid-template-columns: 2fr 2fr 3fr;
|
||||
margin: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
</script>
|
||||
|
||||
<main class="page-content">
|
||||
<main class="card">
|
||||
<h1>Past brews</h1>
|
||||
|
||||
<ul>
|
||||
@@ -20,7 +20,8 @@
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
main.page-content {
|
||||
main.card {
|
||||
height: calc(100vh - var(--header-height) * 2);
|
||||
|
||||
ul {
|
||||
margin-left: 1.2em;
|
||||
@@ -31,6 +32,7 @@
|
||||
line-height: 1.5;
|
||||
|
||||
a {
|
||||
font-size: 1.2rem;
|
||||
color: #19A786;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
<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 brew = {
|
||||
@@ -9,6 +12,14 @@
|
||||
|
||||
export let data;
|
||||
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 dateString = new Date(Number(brew.date * 1000)).toLocaleDateString('no-NB', dateFormat);
|
||||
@@ -16,9 +27,9 @@
|
||||
const wizards = brew.by.join(', ');
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<section class="card">
|
||||
<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 class="beer-container" bind:clientHeight="{height}">
|
||||
@@ -34,28 +45,28 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><b>Brygget:</b></td>
|
||||
<td>{ dateString }</td>
|
||||
<td>{dateString}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><b>Laget av:</b></td>
|
||||
<td>{ wizards }</td>
|
||||
<td>{wizards}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><b>Kategori:</b></td>
|
||||
<td>{ brew.beer.category }</td>
|
||||
<td>{brew.beer.category}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><b>Alkoholprosent:</b></td>
|
||||
<td>~ { brew.abv }%</td>
|
||||
<td>~ {brew.abv}%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<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>
|
||||
|
||||
<h3>Historie</h3>
|
||||
@@ -64,6 +75,20 @@
|
||||
ble Tuborg Bryggeri en del av Carlsberg.
|
||||
</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>
|
||||
<p>
|
||||
Tuborg Sommerøl er en nordisk pilsner med en svært lys strågul farge. Aromaen er preget av
|
||||
@@ -88,9 +113,27 @@
|
||||
section {
|
||||
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@200;300;400;500;600;700;800&display=swap');
|
||||
font-family: 'Epilogue', sans-serif;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
padding: unset !important;
|
||||
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 {
|
||||
@@ -120,7 +163,7 @@
|
||||
}
|
||||
|
||||
.beer-container {
|
||||
background-color: rgba(215, 224, 223, 0.6);
|
||||
background-color: rgba(215, 224, 223, 0.8);
|
||||
padding: 2rem 1rem;
|
||||
|
||||
@include tablet {
|
||||
@@ -178,5 +221,17 @@
|
||||
line-height: 1.2;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.graph {
|
||||
width: 100%;
|
||||
max-height: 50vh;
|
||||
margin-bottom: 5rem;
|
||||
|
||||
@include desktop {
|
||||
float: left;
|
||||
max-height: 450px;
|
||||
max-width: 48%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</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 {
|
||||
margin: 0;
|
||||
font-family: 'Roboto';
|
||||
background-color: var(--backdrop);
|
||||
color: var(--text-color);
|
||||
@@ -9,6 +34,40 @@ body {
|
||||
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 */
|
||||
@font-face {
|
||||
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