Add MenuItem page

Add some information to Contact page

front/src/components/DropDown.svelte

@@ -12,9 +12,11 @@
             <CaretDown />
         </button>
     </div>
+    {#if open }
         <div class="dropdown-content">
             <slot></slot>
         </div>
+    {/if}
 </div>
 
 <style lang="scss">

front/src/pages/PageContact.svelte

@@ -1,2 +1,97 @@
+<script>
+    import { ArrowClockwise } from "phosphor-svelte";
+    import DropDown from "%/components/DropDown.svelte";
+</script>
+
 <h1>Contact us</h1>
-<p>Nuh uh</p>
+
+<div class="menu-filter">
+    <div class="menu-filter-header">
+        <h2>Commonly Asked Questions</h2>
+    </div>
+    <hr>
+
+    <div class="menu-filter-section">
+        <DropDown name="Can I refund my order?">
+            <p>If you ordered online, if we haven't started making your food yet, a refund is possible.</p>
+            <p>If you reserved a table, you can refund upto 1 hour before your time.</p>
+        </DropDown>
+    </div>
+
+    <hr>
+
+    <div class="menu-filter-section">
+        <DropDown name="Deez nuts">
+            <p>Gotten</p>
+        </DropDown>
+    </div>
+</div>
+
+<div class="spacer"></div>
+
+<h2>Contact From</h2>
+
+<style lang="scss">
+    @import "%/styles/vars";
+
+    h1, h2 {
+        margin-bottom: $spacing-small;
+    }
+    .spacer {
+        height: $spacing-large;
+    }
+
+    .menu-filter {
+        border-radius: $border-radius-normal;
+        background-image: url('/BackgroundTextureAlt.svg');
+        background-repeat: no-repeat;
+        background-size: 200px 250px;
+        background-position: 5px -43px;
+        background-color: $color-light;
+        color: $color-on-light;
+
+        h2 {
+            margin-bottom: 0;
+        }
+
+        hr {
+            height: 1px;
+            border: 0 transparent;
+            background-color: rgba($color-dark, 0.1);
+        }
+
+        button {
+            height: 32px;
+            width: 32px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            text-decoration: none;
+            font-size: $font-size-p;
+
+            border-radius: $border-radius-circle;
+            border: 0 solid transparent;
+            background-color: $color-dark;
+            color: $color-on-dark;
+
+            &:hover {
+                background-color: $color-primary;
+                color: $color-on-primary;
+            }
+        }
+
+        .menu-filter-header {
+            padding: $spacing-normal;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .menu-filter-section {
+            padding: $spacing-normal;
+        }
+    }
+</style>

front/src/pages/PageIndex.svelte

@@ -5,20 +5,19 @@
     import AnnouncementBanner from "%/pages/elements/AnnouncementBanner.svelte";
     import MenuList from "%/pages/elements/MenuList.svelte";
     import Items from '%/testData.js';
-    import L from 'leaflet';
+    import { map, tileLayer} from 'leaflet';
 
     let items = Items;
 
-    let map;
     onMount(() => {
-        map = L.map('map').setView([51.505, -0.09], 13);
+        let Map = map('map').setView([51.505, -0.09], 13);
-        L.tileLayer(
+        tileLayer(
             'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
             {
                 maxZoom: 19,
                 attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
             }
-        ).addTo(map);
+        ).addTo(Map);
     })
 </script>
 

front/src/pages/PageItem.svelte

@@ -0,0 +1,106 @@
+<script>
+    import MenuList from "%/pages/elements/MenuList.svelte";
+    import LoadingImage from "/MenuItemLoading.svg";
+    import Items from '%/testData.js';
+
+    let items = Items;
+
+    export let params = {};
+</script>
+
+<div class="main">
+    <div class="images">
+        <div>
+            <img src={LoadingImage} alt="">
+        </div>
+        <ul>
+            <li><img src={LoadingImage} alt=""></li>
+            <li><img src={LoadingImage} alt=""></li>
+            <li><img src={LoadingImage} alt=""></li>
+            <li><img src={LoadingImage} alt=""></li>
+            <li><img src={LoadingImage} alt=""></li>
+        </ul>
+    </div>
+    <div class="info">
+        <h2>{params.name}</h2>
+    </div>
+</div>
+
+<div class="spacer"></div>
+<div class="other">
+    <h2>Popular</h2>
+    <MenuList items={items} />
+</div>
+
+<div class="spacer"></div>
+<div class="other">
+    <h2>Popular</h2>
+    <MenuList items={items} />
+</div>
+
+<style lang="scss">
+    @import "%/styles/vars";
+
+    h2 {
+        margin-bottom: $spacing-small;
+    }
+    .spacer {
+        height: $spacing-large;
+    }
+
+    .main {
+        display: flex;
+        flex-direction: row;
+
+        .images {
+            display: flex;
+            flex-direction: column;
+
+            > div {
+                margin-bottom: $spacing-small;
+
+                width: 650px;
+                height: 500px;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                //border-radius: $border-radius-large;
+                //background-color: $color-light;
+
+                overflow: hidden;
+
+                > img {
+                    max-width: 650px;
+                    max-height: 500px;
+
+                    border-radius: $border-radius-normal;
+                }
+            }
+
+            > ul {
+                margin: 0;
+                padding: 0;
+
+                display: flex;
+                flex-direction: row;
+
+                > li {
+                    list-style: none;
+
+                    > img {
+                        margin-right: $spacing-small;
+                        width: 100px;
+                        border-radius: $border-radius-normal;
+                    }
+                }
+            }
+        }
+    }
+
+    .other {
+        margin: 0 auto;
+        max-width: $sizing-default-width;
+    }
+</style>

front/src/pages/PageMenu.svelte

@@ -181,8 +181,6 @@
     }
 
     .menu-filter {
-        padding: $spacing-normal;
-
         width: 100%;
         max-width: calc(300px - $spacing-normal);
 
@@ -202,8 +200,6 @@
         }
 
         hr {
-            margin-left: -$spacing-normal;
-            margin-right: -$spacing-normal;
             height: 1px;
             border: 0 transparent;
             background-color: rgba($color-dark, 0.1);
@@ -232,7 +228,7 @@
         }
 
         .menu-filter-header {
-            padding-bottom: $spacing-normal;
+            padding: $spacing-normal;
             display: flex;
             flex-direction: row;
             justify-content: space-between;
@@ -240,12 +236,7 @@
         }
 
         .menu-filter-section {
-            padding-bottom: $spacing-small;
+            padding: $spacing-normal;
-            padding-top: $spacing-small;
-
-            &:last-of-type {
-                margin-bottom: -$spacing-normal;
-            }
         }
     }
 

front/src/routes.js

@@ -15,6 +15,12 @@ const routes = {
         conditions: [],
         userData: { showNavBar: true, fullWidth: true, },
     }),
+    "/item/:name": wrap({
+        asyncComponent: () => import("%/pages/PageItem.svelte"),
+        loadingComponent: PageLoading,
+        conditions: [],
+        userData: { showNavBar: true, fullWidth: true, },
+    }),
     "/contact": wrap({
         asyncComponent: () => import("%/pages/PageContact.svelte"),
         loadingComponent: PageLoading,

front/src/styles/vars.scss

@@ -3,7 +3,7 @@ $color-background: #e8e1ce; // #ccc2ae;
 $color-on-background: #33251a;
 $color-dark: #443023;
 $color-on-dark: #e1dcd3;
-$color-light: #fffbf4;
+$color-light: #fff8eb;
 $color-on-light: #33251a;
 $color-primary: #6A9343;
 $color-on-primary: #fffbf4;
@@ -25,7 +25,7 @@ $sizing-full-width: 1200px;
 $sizing-navigation-height: 55px;
 
 // PADDING/MARGIN
-$spacing-small: 14px;
+$spacing-small: 10px;
 $spacing-normal: 16px;
 $spacing-large: 32px;