slightly improve js-free Card rendering

This commit is contained in:
Alexander Bocken 2024-01-21 10:34:23 +01:00
parent 27c643ef2b
commit 18e26790ce
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
10 changed files with 39 additions and 67 deletions

View File

@ -1,6 +1,6 @@
<script lang='ts'>
export let href
import "$lib/components/nordtheme.css"
import "$lib/css/nordtheme.css"
import "$lib/css/action_button.css"
</script>

View File

@ -2,7 +2,8 @@
export let recipe
export let current_month
export let icon_override = false;
export let search = "search_me"
export let search = true;
import "$lib/css/nordtheme.css";
import "$lib/css/shake.css";
import "$lib/css/icon.css";
@ -14,14 +15,11 @@ let isloaded = false
import { onMount } from "svelte";
onMount(() => {
const el = document.querySelector("img")
if(el.complete){
isloaded = true
}
isloaded = document.querySelector("img")?.complete ? true : false
})
</script>
<style>
.card{
#card{
--card-width: 300px;
flex-shrink: 0;
transition: 200ms;
@ -40,13 +38,13 @@ import { onMount } from "svelte";
background-color: var(--blue);
box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3);
}
.card #image{
#image{
width: var(--card-width);
height: calc(var(--card-width)*0.85);
object-fit: cover;
transition: 200ms;
backdrop-filter: blur(10px);
filter: blur(10px);
backdrop-filter: blur(10px);
}
.unblur{
filter: blur(0px) !important;
@ -67,8 +65,6 @@ div:has(div #image){
top: 0;
}
@supports(-moz-appearance:none){
#image{
}
#image, #div_image{
border-top-left-radius: 20px;
border-top-right-radius: 20px;
@ -87,19 +83,17 @@ div:has(div #image){
}
}
.card:hover,
.card:focus-within{
#card:hover,
#card:focus-within{
transform: scale(1.02,1.02);
background-color: var(--red);
box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3);
}
.card:focus{
#card:focus{
scale: 0.95 0.95;
}
.card .title {
.title {
position: relative;
box-sizing: border-box;
padding-top: 0.5em;
height: 50%;
width: 100% ;
@ -110,17 +104,17 @@ div:has(div #image){
justify-content: space-between;
transition: 100ms;
}
.card .name{
.name{
font-size: 2em;
color: white;
padding-inline: 0.5em;
padding-block: 0.2em;
}
.card .description{
.description{
padding-inline: 1em;
color: var(--nord4);
}
.card .tags{
.tags{
display: flex;
flex-wrap: wrap-reverse;
overflow: hidden;
@ -130,7 +124,7 @@ div:has(div #image){
margin-bottom:0.5em;
flex-grow: 0;
}
.card .tag{
.tag{
cursor: pointer;
text-decoration: unset;
background-color: var(--nord4);
@ -142,18 +136,18 @@ div:has(div #image){
transition: 100ms;
box-shadow: 0em 0em 0.2em 0.05em rgba(0, 0, 0, 0.3);
}
.card .tag:hover,
.card .tag:focus-visible
.tag:hover,
.tag:focus-visible
{
transform: scale(1.04, 1.04);
background-color: var(--orange);
box-shadow: 0.2em 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.3);
}
.card .tag:focus{
.tag:focus{
transition: 100ms;
scale: 0.9;
}
.card .title .category{
.title .category{
position: absolute;
box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6);
text-decoration: none;
@ -167,25 +161,25 @@ div:has(div #image){
transition: 100ms;
}
.card .title .category:hover,
.card .title .category:focus-within
.title .category:hover,
.title .category:focus-within
{
box-shadow: -0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.6);
background-color: var(--nord3);
transform: scale(1.05, 1.05)
}
.card .category:focus{
.category:focus{
scale: 0.9 0.9;
}
.card:hover .icon,
.card:focus-visible .icon
#card:hover .icon,
#card:focus-visible .icon
{
animation: shake 0.6s;
}
</style>
<a class="card {search}" href="/rezepte/{recipe.short_name}" data-tags=[{recipe.tags}]>
<a id="card" class:search_me={search} href="/rezepte/{recipe.short_name}" data-tags=[{recipe.tags}]>
<div id=div_div_image >
<div id=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})">
<img class:unblur={isloaded} id=image src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy alt="{recipe.alt}" on:load={() => isloaded=true}/>
@ -193,7 +187,7 @@ div:has(div #image){
</div>
{#if icon_override || recipe.season.includes(current_month)}
<a class=icon href="/rezepte/icon/{recipe.icon}">{recipe.icon}</a>
{/if}
{/if}
<div class=title>
<a class=category href="/rezepte/category/{recipe.category}" >{recipe.category}</a>

View File

@ -5,7 +5,7 @@ import Cross from '$lib/assets/icons/Cross.svelte'
import Plus from '$lib/assets/icons/Plus.svelte'
import Check from '$lib/assets/icons/Check.svelte'
import '$lib/components/nordtheme.css'
import '$lib/css/nordtheme.css'
import "$lib/css/action_button.css"
import { do_on_key } from '$lib/components/do_on_key.js'

View File

@ -1,5 +1,5 @@
<script>
import "$lib/components/nordtheme.css"
import "$lib/css/nordtheme.css"
import { onMount } from "svelte";
import Symbol from "./Symbol.svelte"

View File

@ -1,5 +1,5 @@
<script lang="ts">
import '$lib/components/nordtheme.css';
import '$lib/css/nordtheme.css';
import Recipes from '$lib/components/Recipes.svelte';
import Search from './Search.svelte';
export let icons

View File

@ -1,5 +1,5 @@
<script lang="ts">
import '$lib/components/nordtheme.css';
import '$lib/css/nordtheme.css';
import Recipes from '$lib/components/Recipes.svelte';
import Search from './Search.svelte';
let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]

View File

@ -1,5 +1,5 @@
<script lang=ts>
import "$lib/components/nordtheme.css"
import "$lib/css/nordtheme.css"
import { season } from '$lib/js/season_store.js'
import {onMount} from "svelte";
import {do_on_key} from "./do_on_key";

View File

@ -1,3 +1,6 @@
<script>
import "$lib/css/nordtheme.css";
</script>
<style>
:root{
--icon_fill: var(--nord4);

View File

@ -1,7 +1,7 @@
<script lang="ts">
export let tag : string;
export let ref: string;
import '$lib/components/nordtheme.css'
import '$lib/css/nordtheme.css'
</script>
<style>
a{

View File

@ -1,25 +0,0 @@
:root{
--nord0: #2E3440;
--nord1: #3B4252;
--nord2: #434C5E;
--nord3: #4C566A;
--nord4: #D8DEE9;
--nord5: #E5E9F0;
--nord6: #ECEFF4;
--nord7: #8FBCBB;
--nord8: #88C0D0;
--nord9: #81A1C1;
--nord10: #5E81AC;
--nord11: #BF616A;
--nord12: #D08770;
--nord13: #EBCB8B;
--nord14: #A3BE8C;
--nord15: #B48EAD;
--lightblue: var(--nord9);
--blue: var(--nord10);
--red: var(--nord11);
--orange: var(--nord12);
--yellow: var(--nord13);
--green: var(--nord14);
--purple: var(--nord15);
}