From 17476d3f2c1df777869d053ab622771dc78d77e1 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
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";
+    }
 </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>
diff --git a/front/src/components/MenuList.svelte b/front/src/components/MenuList.svelte
index b0e8dd1..e155075 100644
--- a/front/src/components/MenuList.svelte
+++ b/front/src/components/MenuList.svelte
@@ -14,16 +14,24 @@
 </ul>
 
 <style lang="scss">
+    @import "../styles/vars";
+
     ul {
         list-style-type: none;
         padding: 0;
         margin: 0;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 16px
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: $spacing-small;
+
+        > li {
+            margin: 0;
+        }
     }
-    li {
-        margin: 0;
+
+    @media only screen and (max-width: 900px) {
+        ul {
+            grid-template-columns: 1fr 1fr 1fr;
+        }
     }
 </style>
diff --git a/front/src/pages/PageMenu.svelte b/front/src/pages/PageMenu.svelte
index bffe986..29897cf 100644
--- a/front/src/pages/PageMenu.svelte
+++ b/front/src/pages/PageMenu.svelte
@@ -202,7 +202,14 @@
         }
     }
 
-    @media only screen and (max-width: 670px) {
+    @media only screen and (max-width: 900px) {
+        #filter {
+            min-width: calc(250px - $spacing-normal);
+            max-width: calc(250px - $spacing-normal);
+        }
+    }
+
+    @media only screen and (max-width: 700px) {
         .menu {
             flex-direction: column;
         }
diff --git a/front/src/styles/_menu_item.scss b/front/src/styles/_menu_item.scss
index 40c3e27..83a95eb 100644
--- a/front/src/styles/_menu_item.scss
+++ b/front/src/styles/_menu_item.scss
@@ -1,15 +1,8 @@
 .menu-item {
     padding: $spacing-normal;
 
-    width: 200px;
-    height: 200px;
-
     position: relative;
 
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
     border-radius: $border-radius-large;
     background-color: $color-dark;
 
@@ -28,84 +21,89 @@
     z-index: 1;
 }
 
-.menu-item-header {
-    position: relative;
+.menu-item-link {
+    padding-left: 10px;
+    padding-right: 10px;
+
+    height: 30px;
+
+    position: absolute;
+    top: $spacing-small;
+    right: $spacing-small;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    text-decoration: none;
+    font-size: 14px;
+
+    border-radius: $border-radius-circle;
+    background-color: $color-dark;
+    color: $color-on-dark;
+
+    z-index: +2;
+
+    &:hover {
+        background-color: $color-light;
+        color: $color-on-light;
+    }
+}
+
+.menu-item-labels {
+    padding: 0;
+
+    position: absolute;
+    top: $spacing-small;
+    left: calc($spacing-normal + $spacing-small);
 
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
 
-    z-index: 2;
+    z-index: +2;
 
-    > ul {
-        padding: 0 0 0 $spacing-normal;
-
-        display: flex;
-        flex-direction: row;
-
-        > li {
-            margin: 0 0 0 -15px;
-
-            width: 30px;
-            height: 30px;
-
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            border-radius: $border-radius-circle;
-            background-color: $color-dark;
-            color: $color-on-dark;
-
-            list-style: none;
-
-            &.vegan {
-                background-color: $color-vegan;
-            }
-            &.fish {
-                background-color: $color-fish;
-            }
-            &.nut {
-                background-color: $color-nut;
-            }
-            &.gluten {
-                background-color: $color-gluten;
-            }
-            &.spicy {
-                background-color: $color-spicy;
-            }
-        }
-    }
-
-    > a {
-        padding-left: 10px;
-        padding-right: 10px;
+    > li {
+        margin: 0 0 0 -15px;
 
+        width: 30px;
         height: 30px;
 
         display: flex;
         justify-content: center;
         align-items: center;
 
-        text-decoration: none;
-        font-size: 14px;
-
         border-radius: $border-radius-circle;
         background-color: $color-dark;
         color: $color-on-dark;
 
-        &:hover {
-            background-color: $color-light;
-            color: $color-on-light;
+        list-style: none;
+
+        &.vegan {
+            background-color: $color-vegan;
+        }
+        &.fish {
+            background-color: $color-fish;
+        }
+        &.nut {
+            background-color: $color-nut;
+        }
+        &.gluten {
+            background-color: $color-gluten;
+        }
+        &.spicy {
+            background-color: $color-spicy;
         }
     }
 }
 
 .menu-item-detail {
-    margin: -$spacing-normal;
     padding: $spacing-normal;
 
-    position: relative;
+    width: 100%;
+
+    position: absolute;
+    left: 0;
+    bottom: 0;
 
     display: flex;
     flex-direction: column;
@@ -119,5 +117,8 @@
 
     > li {
         list-style: none;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 }