mirror of
https://github.com/Fluffy-Bean/TastyBites.git
synced 2025-05-29 23:03:13 +00:00
Add contact form
Fake API Make Index resize to mobile better Add error colour
This commit is contained in:
parent
8ab0957a85
commit
04adf38b46
11 changed files with 248 additions and 59 deletions
22
front/src/lib/APIDEV.js
Normal file
22
front/src/lib/APIDEV.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import Items from '%/lib/testData.js';
|
||||
|
||||
export function getPopularToday() {
|
||||
return Items;
|
||||
}
|
||||
|
||||
export function getMenuItems() {
|
||||
return [
|
||||
{
|
||||
name: "Main Menu",
|
||||
items: Items,
|
||||
},
|
||||
{
|
||||
name: "Breakfast",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
name: "Seasonal",
|
||||
items: Items,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -32,22 +32,22 @@ export default Items = [
|
|||
price: -9999,
|
||||
labels: ["nut"],
|
||||
},
|
||||
{
|
||||
name: "GwaGwa",
|
||||
price: "Priceless",
|
||||
labels: ["nut"],
|
||||
// image: "/dab.jpg",
|
||||
},
|
||||
// {
|
||||
// name: "GwaGwa",
|
||||
// price: "Priceless",
|
||||
// labels: ["nut"],
|
||||
// image: "/dab.jpg",
|
||||
// },
|
||||
{
|
||||
name: "Hogermellon",
|
||||
price: "balls",
|
||||
price: "1111",
|
||||
labels: ["fish"],
|
||||
image: "/wathog.jpg",
|
||||
},
|
||||
{
|
||||
name: "Blue HOGGGGG",
|
||||
price: "ARUGH",
|
||||
labels: ["nut", "gluten", "spicy"],
|
||||
image: "/sonichog.jpg",
|
||||
},
|
||||
// {
|
||||
// name: "Blue HOGGGGG",
|
||||
// price: "ARUGH",
|
||||
// labels: ["nut", "gluten", "spicy"],
|
||||
// image: "/sonichog.jpg",
|
||||
// },
|
||||
];
|
||||
|
|
@ -13,6 +13,3 @@
|
|||
<div class="spacer"></div>
|
||||
|
||||
<p>Looking past orders? Check out the <a href="/contact" use:link>commonly asked questions</a></p>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,5 +1,24 @@
|
|||
<script>
|
||||
import DropDown from "%/components/DropDown.svelte";
|
||||
|
||||
const minMessageLength = 150;
|
||||
|
||||
let name = "";
|
||||
let email = "";
|
||||
let message = "";
|
||||
|
||||
let nameValid = true;
|
||||
let emailValid = true;
|
||||
let messageValid = false;
|
||||
|
||||
function expandTextAera(event) {
|
||||
event.target.style.height = "";
|
||||
event.target.style.height = (event.target.scrollHeight + 5) + "px";
|
||||
}
|
||||
|
||||
function onSubmit(event) {
|
||||
console.log(name, email, message);
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1>Contact us</h1>
|
||||
|
|
@ -26,6 +45,141 @@
|
|||
<div class="spacer" />
|
||||
|
||||
<h2>Contact From</h2>
|
||||
<form>
|
||||
<form on:submit|preventDefault={onSubmit}>
|
||||
<div class="form-element">
|
||||
<label class="form-label" for="name">Name</label>
|
||||
<input
|
||||
bind:value={name}
|
||||
on:blur={() => {nameValid = name.length > 1}}
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
class="form-input"
|
||||
/>
|
||||
{#if !nameValid}
|
||||
<span class="form-notice error">Enter a name</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<div class="form-element">
|
||||
<label class="form-label" for="email">Email</label>
|
||||
<input
|
||||
bind:value={email}
|
||||
on:blur={() => {emailValid = email.length > 1}}
|
||||
type="text"
|
||||
id="email"
|
||||
name="email"
|
||||
class="form-input"
|
||||
/>
|
||||
{#if !emailValid}
|
||||
<span class="form-notice error">Email not valid</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="form-element">
|
||||
<label class="form-label" for="message">Message</label>
|
||||
<textarea
|
||||
bind:value={message}
|
||||
on:input={expandTextAera}
|
||||
on:input={() => {messageValid = message.length > minMessageLength}}
|
||||
id="message"
|
||||
name="message"
|
||||
class="form-input"
|
||||
/>
|
||||
<span class="form-notice" class:error={!messageValid}>
|
||||
({message.length}/{minMessageLength})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button type="submit">Submit</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));
|
||||
|
||||
}
|
||||
|
||||
#message {
|
||||
min-width: 250px;
|
||||
max-width: calc(100vw - calc(2 * $spacing-normal));
|
||||
resize: horizontal;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 $spacing-normal;
|
||||
|
||||
height: 30px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
text-shadow: 0 1px 0.5px rgba($color-dark, 0.3);;
|
||||
|
||||
border: 0 solid transparent;
|
||||
border-radius: 9999px;
|
||||
background-color: $color-dark;
|
||||
color: $color-on-dark;
|
||||
|
||||
&:hover, &:focus {
|
||||
border: 0 solid transparent;
|
||||
background-color: $color-primary;
|
||||
color: $color-on-primary;
|
||||
outline: 0 solid transparent
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,10 +4,12 @@
|
|||
import { ArrowUpRight } from "phosphor-svelte";
|
||||
import AnnouncementBanner from "%/pages/elements/AnnouncementBanner.svelte";
|
||||
import MenuList from "%/pages/elements/MenuList.svelte";
|
||||
import Items from '%/testData.js';
|
||||
import { getPopularToday } from "%/lib/APIDEV.js";
|
||||
import { map, tileLayer} from 'leaflet';
|
||||
|
||||
let items = Items;
|
||||
|
||||
let items = getPopularToday();
|
||||
|
||||
|
||||
onMount(() => {
|
||||
let Map = map('map').setView([51.505, -0.09], 13);
|
||||
|
|
@ -57,8 +59,7 @@
|
|||
a {
|
||||
margin-top: 8px;
|
||||
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding: 0 $spacing-small;
|
||||
|
||||
height: 30px;
|
||||
|
||||
|
|
@ -80,16 +81,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
#contact {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.container {
|
||||
margin-left: $spacing-normal;
|
||||
padding: $spacing-normal;
|
||||
}
|
||||
}
|
||||
|
||||
#map {
|
||||
min-width: 550px;
|
||||
height: 350px;
|
||||
|
|
@ -97,25 +88,42 @@
|
|||
border-radius: $border-radius-normal;
|
||||
}
|
||||
|
||||
#contact {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.container {
|
||||
margin-left: $spacing-small;
|
||||
padding: $spacing-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 {
|
||||
.container {
|
||||
margin-left: 0;
|
||||
border-radius: 0 $border-radius-normal $border-radius-normal 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 750px) {
|
||||
#map {
|
||||
min-width: unset;
|
||||
height: 350px;
|
||||
border-radius: $border-radius-normal $border-radius-normal 0 0;
|
||||
}
|
||||
#contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.container {
|
||||
margin-left: 0;
|
||||
margin-top: $spacing-normal;
|
||||
border-radius: 0 0 $border-radius-normal $border-radius-normal;
|
||||
}
|
||||
}
|
||||
#map {
|
||||
min-width: unset;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
import MenuList from "%/pages/elements/MenuList.svelte";
|
||||
import LoadingImage from "/MenuItemLoading.svg";
|
||||
import Items from '%/testData.js';
|
||||
import Items from '%/lib/testData.js';
|
||||
|
||||
let items = Items;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
import { ArrowClockwise } from "phosphor-svelte";
|
||||
import MenuList from "%/pages/elements/MenuList.svelte";
|
||||
import DropDown from "%/components/DropDown.svelte";
|
||||
import Items from '%/testData.js';
|
||||
import { getMenuItems } from "%/lib/APIDEV.js";
|
||||
|
||||
let items = Items;
|
||||
let items = getMenuItems();
|
||||
</script>
|
||||
|
||||
<div class="menu">
|
||||
|
|
@ -138,16 +138,15 @@
|
|||
</div>
|
||||
|
||||
<div id="menu-list">
|
||||
<h2>Main Menu</h2>
|
||||
<MenuList items={items} />
|
||||
<div class="spacer"></div>
|
||||
|
||||
<h2>Pies</h2>
|
||||
<MenuList items={items} />
|
||||
<div class="spacer"></div>
|
||||
|
||||
<h2>Drinks</h2>
|
||||
<MenuList items={items} />
|
||||
{#each items as section}
|
||||
<h2>{section.name}</h2>
|
||||
{#if section.items.length > 0}
|
||||
<MenuList items={section.items} />
|
||||
{:else}
|
||||
<p>No results</p>
|
||||
{/if}
|
||||
<div class="spacer" />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ nav {
|
|||
background-color: $color-dark;
|
||||
color: $color-light;
|
||||
|
||||
//transition: box-shadow 0.05s ease-in-out;
|
||||
z-index: 9999999;
|
||||
|
||||
ul {
|
||||
|
|
@ -39,6 +40,7 @@ nav {
|
|||
padding: $spacing-xsmall $spacing-normal;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0.5px rgba(#000, 0.8);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -66,7 +68,7 @@ nav {
|
|||
}
|
||||
|
||||
&.scrolled {
|
||||
//box-shadow: 0 0 15px 1px $color-background;
|
||||
box-shadow: 0 0 3px 1px rgba(#000, 0.8);
|
||||
}
|
||||
|
||||
&.mobile {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
text-rendering: optimizeLegibility;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -23,6 +24,7 @@ body {
|
|||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
padding-bottom: $spacing-small;
|
||||
text-shadow: 0 1px 0.5px rgba($color-dark, 0.3);
|
||||
}
|
||||
h1 {
|
||||
font-size: $font-size-h1;
|
||||
|
|
@ -51,9 +53,11 @@ h6 {
|
|||
p {
|
||||
font-size: $font-size-p;
|
||||
font-weight: $font-weight-normal;
|
||||
text-shadow: 0 1px 0.5px rgba($color-dark, 0.3);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0.5px rgba($color-dark, 0.3);
|
||||
color: $color-primary;
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ $color-light: #fff8eb;
|
|||
$color-on-light: #33251a;
|
||||
$color-primary: #6A9343;
|
||||
$color-on-primary: #fffbf4;
|
||||
$color-error: #ab5642;
|
||||
$color-on-error: #fffbf4;
|
||||
|
||||
$color-vegan: #75a446;
|
||||
$color-fish: #487fa6;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue