Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-06-02 08:23:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Keep the Menu Items square, while filling container

Browse source
This commit is contained in:
Michał Gdula 2024-05-05 14:22:30 +01:00
parent 200aa6b04f
commit 17476d3f2c
4 changed files with 119 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

55
front/src/components/MenuItem.svelte
View file

@ -4,37 +4,50 @@
import { type Item, Labels} from "../lib/types";
import LoadingImage from '/MenuItemLoadingAlt.svg';
import {onMount} from "svelte";
export let item: Item;
let element: HTMLElement;
onMount(() => {
keepSquare();
})
function keepSquare() {
element.style.height = "";
element.style.height = element.offsetWidth + "px";
}
</script>
<div class="menu-item">
<svelte:window on:resize={keepSquare}></svelte:window>
<div class="menu-item" bind:this={element}>
{#if item.images}
<img src={item.images[0]} alt="" class="menu-item-image">
{:else}
<img src={LoadingImage} alt="" class="menu-item-image">
{/if}
<div class="menu-item-header">
<ul>
{#each item.labels as label}
{#if label === Labels.vegan}
<li class="vegan"><Leaf weight="fill" /></li>
{:else if label === Labels.fish}
<li class="fish"><Fish weight="fill" /></li>
{:else if label === Labels.nut}
<li class="nut"><Acorn weight="fill" /></li>
{:else if label === Labels.gluten}
<li class="gluten"><GrainsSlash weight="fill" /></li>
{:else if label === Labels.spicy}
<li class="spicy"><Pepper weight="fill" /></li>
{/if}
{/each}
</ul>
<a href="/item/{item.uuid}" use:link>
View&nbsp;<ArrowUpRight />
</a>
</div>
<ul class="menu-item-labels">
{#each item.labels as label}
{#if label === Labels.vegan}
<li class="vegan"><Leaf weight="fill" /></li>
{:else if label === Labels.fish}
<li class="fish"><Fish weight="fill" /></li>
{:else if label === Labels.nut}
<li class="nut"><Acorn weight="fill" /></li>
{:else if label === Labels.gluten}
<li class="gluten"><GrainsSlash weight="fill" /></li>
{:else if label === Labels.spicy}
<li class="spicy"><Pepper weight="fill" /></li>
{/if}
{/each}
</ul>
<a class="menu-item-link" href="/item/{item.uuid}" use:link>
View&nbsp;<ArrowUpRight />
</a>
<ul class="menu-item-detail">
<li>{item.name}</li>