Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

only margin-right in MediaScroller

Browse Source
This commit is contained in:
Alexander Bocken 2024-01-24 11:09:54 +01:00
parent 6baaefcfe8
commit 51381c3f3d
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/lib/components/Card.svelte
View File

@ -6,6 +6,7 @@ export let search = true;
import "$lib/css/nordtheme.css";
import "$lib/css/shake.css";
import "$lib/css/icon.css";
export let do_margin_right = false;
if(icon_override){
current_month = recipe.season[0]
@ -25,7 +26,6 @@ onMount(() => {
border-radius: 20px;
}
.card{
margin-right: 2em; /* gap in MediaScroller does not work due to double insertion of a tag on server side */
--card-width: 300px;
position: relative;
flex-shrink: 0;
@ -168,10 +168,13 @@ onMount(() => {
{
animation: shake 0.6s;
}
.margin_right{
margin-right: 2em;
}
</style>
<a class=card_anchor href="/rezepte/{recipe.short_name}" class:search_me={search} data-tags=[{recipe.tags}]>
<div class="card" >
<a class=card_anchor href="/rezepte/{recipe.short_name}" class:search_me={search} data-tags=[{recipe.tags}] >
<div class="card" class:margin_right={do_margin_right}>
<div class=div_div_image >
<div class=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})">
<noscript>

4
src/routes/rezepte/+page.svelte
View File

@ -30,14 +30,14 @@ h1{
<MediaScroller title="In Saison">
{#each data.season as recipe}
<Card {recipe} {current_month}></Card>
<Card {recipe} {current_month} do_margin_right={true}></Card>
{/each}
</MediaScroller>
{#each categories as category}
<MediaScroller title={category}>
{#each data.all_brief.filter(recipe => recipe.category == category) as recipe}
<Card {recipe} {current_month}></Card>
<Card {recipe} {current_month} do_margin_right={true}></Card>
{/each}
</MediaScroller>
{/each}