Move form element styling to SCSS

Add time timetable on index page

front/src/lib/utils.js

@@ -0,0 +1,6 @@
+export function expandOnTyping(element) {
+    element.oninput = (event) => {
+        event.target.style.height = "";
+        event.target.style.height = (event.target.scrollHeight + 2) + "px";
+    }
+}

front/src/pages/PageContact.svelte

@@ -1,5 +1,7 @@
 <script>
+    import { PaperPlaneRight } from "phosphor-svelte";
     import DropDown from "%/components/DropDown.svelte";
+    import { expandOnTyping } from "%/lib/utils.js";
 
     const minMessageLength = 150;
 
@@ -11,9 +13,14 @@
     let emailValid = true;
     let messageValid = false;
 
-    function expandTextAera(event) {
+    function validateName() {
-        event.target.style.height = "";
+        nameValid = name.length > 1
-        event.target.style.height = (event.target.scrollHeight + 5) + "px";
+    }
+    function validateEmail() {
+        emailValid = email.length > 1
+    }
+    function validateMessage() {
+        messageValid = message.length > minMessageLength
     }
 
     function onSubmit(event) {
@@ -50,7 +57,8 @@
         <label class="form-label" for="name">Name</label>
         <input
             bind:value={name}
-            on:blur={() => {nameValid = name.length > 1}}
+            on:blur={validateName}
+            on:input={validateName}
             type="text"
             id="name"
             name="name"
@@ -65,7 +73,8 @@
         <label class="form-label" for="email">Email</label>
         <input
             bind:value={email}
-            on:blur={() => {emailValid = email.length > 1}}
+            on:blur={validateEmail}
+            on:input={validateEmail}
             type="text"
             id="email"
             name="email"
@@ -80,8 +89,10 @@
         <label class="form-label" for="message">Message</label>
         <textarea
             bind:value={message}
-            on:input={expandTextAera}
+            on:input={validateMessage}
-            on:input={() => {messageValid = message.length > minMessageLength}}
+            use:expandOnTyping
+            rows="1"
+            cols="50"
             id="message"
             name="message"
             class="form-input"
@@ -91,62 +102,12 @@
         </span>
     </div>
 
-    <button type="submit">Submit</button>
+    <button type="submit">Submit&nbsp;&nbsp;<PaperPlaneRight /></button>
 </form>
 
 <style lang="scss">
     @import "%/styles/vars";
 
-    .form-element {
-        margin-bottom: $spacing-normal;
-
-        width: fit-content;
-
-        overflow: hidden;
-
-        .form-label {
-            padding: $spacing-xsmall;
-
-            display: block;
-            font-size: $font-size-small;
-
-            color: $color-on-background;
-        }
-
-        .form-input {
-            padding: $spacing-small;
-
-            display: block;
-
-            font-family: $font-family;
-            font-size: $font-size-p;
-
-            border: 1px solid rgba($color-dark, 0.2);
-            border-radius: $border-radius-normal;
-            background-color: $color-light;
-            color: $color-on-light;
-
-            &:hover {
-                border: 1px solid rgba($color-dark, 0.4);
-            }
-            &:focus {
-                border: 1px solid rgba($color-primary, 0.9);
-                outline: 0 solid transparent;
-            }
-        }
-
-        .form-notice {
-            padding: 0 $spacing-xsmall;
-            display: block;
-            font-size: $font-size-xsmall;
-            color: rgba($color-on-background, 0.7);
-
-            &.error {
-                color: $color-error;
-            }
-        }
-    }
-
     #name, #email {
         width: 300px;
         max-width: calc(100vw - calc(2 * $spacing-normal));
@@ -156,7 +117,7 @@
     #message {
         min-width: 250px;
         max-width: calc(100vw - calc(2 * $spacing-normal));
-        resize: horizontal;
+        resize: none;
     }
 
     button {

front/src/pages/PageIndex.svelte

@@ -2,24 +2,22 @@
     import { onMount } from "svelte";
     import { link } from 'svelte-spa-router';
     import { ArrowUpRight } from "phosphor-svelte";
+    import { map, tileLayer, marker } from 'leaflet';
+    import { getPopularToday } from "%/lib/APIDEV.js";
     import AnnouncementBanner from "%/pages/elements/AnnouncementBanner.svelte";
     import MenuList from "%/pages/elements/MenuList.svelte";
-    import { getPopularToday } from "%/lib/APIDEV.js";
-    import { map, tileLayer} from 'leaflet';
 
 
     let items = getPopularToday();
 
 
     onMount(() => {
-        let Map = map('map').setView([51.505, -0.09], 13);
+        let Map = map('map').setView([50.82304922105467, -0.432780150496344], 13);
         tileLayer(
             'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-            {
+            {maxZoom: 19, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
-                maxZoom: 19,
-                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-            }
         ).addTo(Map);
+        marker([50.82304922105467, -0.432780150496344]).addTo(Map);
     })
 </script>
 
@@ -38,7 +36,51 @@
     <div id="map"></div>
     <div class="container">
         <h2>Some Title</h2>
-        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis dolore maiores, dolorem unde, illo vero dolores magnam omnis, explicabo vel eos voluptatem libero ullam ipsa molestias laboriosam voluptas nisi sunt.</p>
+        <p>Example text</p>
+        <div id="timetable">
+            <table>
+                <tr>
+                    <th>Day</th>
+                    <th>Opening</th>
+                    <th>Closing</th>
+                </tr>
+                <tr>
+                    <td>Monday</td>
+                    <td>9am</td>
+                    <td>12pm</td>
+                </tr>
+                <tr>
+                    <td>Tuesday</td>
+                    <td>9am</td>
+                    <td>12pm</td>
+                </tr>
+                <tr>
+                    <td>Wednesday</td>
+                    <td>9am</td>
+                    <td>12pm</td>
+                </tr>
+                <tr>
+                    <td>Thursday</td>
+                    <td>9am</td>
+                    <td>12pm</td>
+                </tr>
+                <tr>
+                    <td>Friday</td>
+                    <td>9am</td>
+                    <td>12pm</td>
+                </tr>
+                <tr>
+                    <td>Saturday</td>
+                    <td>11am</td>
+                    <td>2am</td>
+                </tr>
+                <tr>
+                    <td>Sunday</td>
+                    <td>11am</td>
+                    <td>2am</td>
+                </tr>
+            </table>
+        </div>
     </div>
 </div>
 <div class="spacer" />
@@ -58,7 +100,6 @@
 
     a {
         margin-top: 8px;
-
         padding: 0 $spacing-small;
 
         height: 30px;
@@ -83,8 +124,6 @@
 
     #map {
         min-width: 550px;
-        height: 350px;
-
         border-radius: $border-radius-normal;
     }
 
@@ -95,13 +134,54 @@
         .container {
             margin-left: $spacing-small;
             padding: $spacing-normal;
+
+            width: 100%;
+
+            h2, p {
+                padding-bottom: $spacing-xsmall;
+            }
+        }
+    }
+
+    #timetable {
+        border-radius: $border-radius-normal;
+        border: 1px solid rgba(#000, 0.1);
+
+        overflow: hidden;
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+
+            tr {
+                border-bottom: 1px solid rgba(#000, 0.1);
+
+                &:last-of-type {
+                    border: 0 solid transparent;
+                }
+
+                th, td {
+                    padding: $spacing-xsmall $spacing-small;
+                    border-right: 1px solid rgba(#000, 0.1);
+
+                    &:last-of-type {
+                        border: 0 solid transparent;
+                    }
+                }
+
+                th {
+                    font-weight: $font-weight-bolder;
+                }
+                td {
+                    font-weight: $font-weight-normal;
+                }
+            }
         }
     }
 
     @media only screen and (max-width: 900px) {
         #map {
             min-width: 400px;
-            height: 300px;
             border-radius: $border-radius-normal 0 0 $border-radius-normal;
         }
         #contact {

front/src/pages/elements/AnnouncementBanner.svelte

@@ -1,9 +1,10 @@
 <script>
     // import LoadingBar from "%/pages/elements/LoadingBar.svelte";
-    import LoadingImage from '/BannerLoading.svg';
+    // import BannerImage from '/BannerLoading.svg';
+    import BannerImage from '/BannerExampleImage.jpg';
 </script>
 
 <div class="announcement-banner">
 <!--    <LoadingBar bottom={true} />-->
-    <img src={LoadingImage} alt="">
+    <img src={BannerImage} alt="">
 </div>

front/src/pages/elements/MenuItem.svelte

@@ -37,7 +37,7 @@
                 {/if}
             {/each}
         </ul>
-        <a href="/item/{id}" use:link>View <ArrowUpRight /></a>
+        <a href="/item/{id}" use:link>View&nbsp;<ArrowUpRight /></a>
     </div>
 
     <ul class="menu-item-detail">

front/src/styles/_announcement_banner.scss

@@ -13,6 +13,7 @@
 
         display: block;
 
+        aspect-ratio: 16 / 7;
         object-fit: cover;
     }
 }
@@ -22,5 +23,9 @@
         margin: -$spacing-normal;
         margin-bottom: 0;
         border-radius: 0;
+
+        img {
+            aspect-ratio: 16 / 9;
+        }
     }
 }

front/src/styles/_form_element.scss

@@ -0,0 +1,49 @@
+.form-element {
+    margin-bottom: $spacing-normal;
+    width: fit-content;
+    overflow: hidden;
+}
+
+.form-label {
+    padding: $spacing-xsmall;
+
+    display: block;
+    font-size: $font-size-small;
+    text-shadow: 0 1px 0.5px rgba(#000, 0.2);
+
+    color: $color-on-background;
+}
+
+.form-input {
+    padding: $spacing-small;
+
+    display: block;
+
+    font-family: $font-family;
+    font-size: $font-size-p;
+
+    border: 1px solid rgba($color-dark, 0.2);
+    border-radius: $border-radius-normal;
+    background-color: $color-light;
+    color: $color-on-light;
+
+    &:hover {
+        border: 1px solid rgba($color-dark, 0.4);
+    }
+    &:focus {
+        border: 1px solid rgba($color-primary, 0.9);
+        outline: 0 solid transparent;
+    }
+}
+
+.form-notice {
+    padding: 0 $spacing-xsmall;
+    display: block;
+    font-size: $font-size-xsmall;
+    text-shadow: 0 1px 0.5px rgba(#000, 0.2);
+    color: rgba($color-on-background, 0.7);
+
+    &.error {
+        color: $color-error;
+    }
+}

front/src/styles/main.scss

@@ -6,3 +6,5 @@
 @import "announcement_banner";
 @import "container";
 @import "menu_item";
+@import "form_element";
+