Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-01-15 11:05:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve touchtarget for DropDown

Browse source 
Improve FourOhFour page
This commit is contained in:
Michał 2024-04-25 19:48:12 +01:00
parent e8493d53f8
commit 4433d7cc19
6 changed files with 162 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
front/src/components/DropDown.svelte
View file

@ -12,24 +12,24 @@
<CaretDown />
</button>
</div>
{#if open }
<div class="dropdown-content">
<slot></slot>
</div>
{/if}
<div class="dropdown-content">
<slot></slot>
</div>
</div>
<style lang="scss">
@import "%/styles/vars";
.dropdown {
//padding: $spacing-normal;
border-bottom: 1px solid transparent;
//background-color: $color-light;
color: $color-on-light;
.dropdown-header {
padding: $spacing-normal;
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
@ -41,8 +41,14 @@
}
button {
height: 25px;
width: 30px;
padding: 0;
height: 100%;
width: 60px;
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
@ -64,14 +70,13 @@
}
.dropdown-content {
//padding-top: $spacing-small;
padding: 0 $spacing-normal $spacing-normal;
display: none;
}
&.open {
.dropdown-header {
padding-bottom: $spacing-small;
//border-bottom: 1px solid rgba($color-dark, 0.1);
//padding: $spacing-normal $spacing-normal $spacing-small;
button {
transform: rotate(-180deg);

18
front/src/pages/Page404.svelte
View file

@ -1,12 +1,12 @@
<script>
import { link } from 'svelte-spa-router';
import { SmileySad } from "phosphor-svelte";
export let params = {};
</script>
<div>
<h1>404</h1>
<p>Could not find resource you've searched for. <a href="/" use:link>Go Back</a></p>
<h1>You're lost!&nbsp;<SmileySad weight="fill" /></h1>
<p>Error 404</p>
</div>
<style lang="scss">
@ -21,18 +21,14 @@
flex-direction: column;
}
h1 {
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
text-align: center;
}
p {
text-align: center;
}
a {
text-decoration: none;
color: $color-primary;
&:hover {
text-decoration: underline;
}
}
</style>

26
front/src/pages/PageContact.svelte
View file

@ -9,24 +9,18 @@
<h2>Commonly Asked Questions</h2>
</div>
<hr>
<div class="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>
<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>
<hr>
<div class="section">
<DropDown name="Where can I find my past orders!">
<p>Email....</p>
</DropDown>
</div>
<DropDown name="Where can I find my past orders!">
<p>Email....</p>
</DropDown>
<hr>
<div class="section">
<DropDown name="Deez nuts">
<p>Gottem</p>
</DropDown>
</div>
<DropDown name="Deez nuts">
<p>Gottem</p>
</DropDown>
</div>
<div class="spacer"></div>

244
front/src/pages/PageMenu.svelte
View file

@ -14,135 +14,127 @@
<button><ArrowClockwise /></button>
</div>
<hr>
<div class="section">
<DropDown name="Meal Prefrences" open={true}>
<ul>
<li>
<label>
<input type="checkbox">
Vegan
</label>
</li>
<li>
<label>
<input type="checkbox">
Vegetarian
</label>
</li>
<li>
<label>
<input type="checkbox">
Pescatarian
</label>
</li>
</ul>
</DropDown>
</div>
<DropDown name="Meal Prefrences" open={true}>
<ul>
<li>
<label>
<input type="checkbox">
Vegan
</label>
</li>
<li>
<label>
<input type="checkbox">
Vegetarian
</label>
</li>
<li>
<label>
<input type="checkbox">
Pescatarian
</label>
</li>
</ul>
</DropDown>
<hr>
<div class="section">
<DropDown name="Allergies" open={true}>
<ul>
<li>
<label>
<input type="checkbox">
Deez Nut
</label>
</li>
<li>
<label>
<input type="checkbox">
Sea
</label>
</li>
<li>
<label>
<input type="checkbox">
Dairy
</label>
</li>
<li>
<label>
<input type="checkbox">
Gluten
</label>
</li>
</ul>
</DropDown>
</div>
<DropDown name="Allergies" open={true}>
<ul>
<li>
<label>
<input type="checkbox">
Deez Nut
</label>
</li>
<li>
<label>
<input type="checkbox">
Sea
</label>
</li>
<li>
<label>
<input type="checkbox">
Dairy
</label>
</li>
<li>
<label>
<input type="checkbox">
Gluten
</label>
</li>
</ul>
</DropDown>
<hr>
<div class="section">
<DropDown name="Meal Types" open={true}>
<ul>
<li>
<label>
<input type="checkbox">
Breakfast
</label>
</li>
<li>
<label>
<input type="checkbox">
Main
</label>
</li>
<li>
<label>
<input type="checkbox">
Dinner
</label>
</li>
<li>
<label>
<input type="checkbox">
Alcoholic Drinks
</label>
</li>
<li>
<label>
<input type="checkbox">
Non-Alcoholic Drinks
</label>
</li>
<li>
<label>
<input type="checkbox">
Sides
</label>
</li>
<li>
<label>
<input type="checkbox">
Sweet
</label>
</li>
</ul>
</DropDown>
</div>
<DropDown name="Meal Types" open={true}>
<ul>
<li>
<label>
<input type="checkbox">
Breakfast
</label>
</li>
<li>
<label>
<input type="checkbox">
Main
</label>
</li>
<li>
<label>
<input type="checkbox">
Dinner
</label>
</li>
<li>
<label>
<input type="checkbox">
Alcoholic Drinks
</label>
</li>
<li>
<label>
<input type="checkbox">
Non-Alcoholic Drinks
</label>
</li>
<li>
<label>
<input type="checkbox">
Sides
</label>
</li>
<li>
<label>
<input type="checkbox">
Sweet
</label>
</li>
</ul>
</DropDown>
<hr>
<div class="section">
<DropDown name="Other">
<ul>
<li>
<label>
<input type="checkbox">
Hide Seasonal
</label>
</li>
<li>
<label>
<input type="checkbox">
Hide Unavailable
</label>
</li>
<li>
<label>
<input type="checkbox">
Hog
</label>
</li>
</ul>
</DropDown>
</div>
<DropDown name="Other">
<ul>
<li>
<label>
<input type="checkbox">
Hide Seasonal
</label>
</li>
<li>
<label>
<input type="checkbox">
Hide Unavailable
</label>
</li>
<li>
<label>
<input type="checkbox">
Hog
</label>
</li>
</ul>
</DropDown>
</div>
<div id="menu-list">

2
front/src/routes.js
View file

@ -42,7 +42,7 @@ const routes = {
'*': wrap({
component: Page404,
conditions: [],
userData: { showNavBar: false, fullWidth: false, },
userData: { showNavBar: true, fullWidth: false, },
})
}

9
front/src/styles/_reset.scss
View file

@ -51,6 +51,15 @@ h6 {
p {
font-size: $font-size-p;
font-weight: $font-weight-normal;
a {
text-decoration: none;
color: $color-primary;
&:hover {
text-decoration: underline;
}
}
}
small {
font-size: $font-size-small;