From 17476d3f2c1df777869d053ab622771dc78d77e1 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Sun, 5 May 2024 14:22:30 +0100 Subject: [PATCH] Keep the Menu Items square, while filling container --- front/src/components/MenuItem.svelte | 55 +++++++----- front/src/components/MenuList.svelte | 20 +++-- front/src/pages/PageMenu.svelte | 9 +- front/src/styles/_menu_item.scss | 125 ++++++++++++++------------- 4 files changed, 119 insertions(+), 90 deletions(-) diff --git a/front/src/components/MenuItem.svelte b/front/src/components/MenuItem.svelte index 23e8a09..6c9fb30 100644 --- a/front/src/components/MenuItem.svelte +++ b/front/src/components/MenuItem.svelte @@ -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"; + } -