KevinMidboe/brewpi
1
0
Fork 0
mirror of https://github.com/KevinMidboe/brewPi.git synced 2025-10-29 16:50:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Linting & minor style changes

Browse Source
This commit is contained in:
Kevin
2023-05-29 12:31:34 +02:00
parent 316cd14ed2
commit bbb072fa83
4 changed files with 154 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
src/lib/components/Header.svelte
View File

@@ -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>

9
src/routes/+layout.svelte
View File

@@ -17,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>

1
src/routes/brews/+page.svelte
View File

@@ -32,6 +32,7 @@
line-height: 1.5; line-height: 1.5;
a { a {
font-size: 1.2rem;
color: #19A786; color: #19A786;
} }
} }

38
src/routes/brews/[date]/+page.svelte
View File

@@ -18,7 +18,7 @@
<section class="card"> <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 +34,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>
@@ -88,9 +88,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 +138,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 {