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

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

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

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

@ -9,24 +9,18 @@
<h2>Commonly Asked Questions</h2> <h2>Commonly Asked Questions</h2>
</div> </div>
<hr> <hr>
<div class="section"> <DropDown name="Can I refund my order?">
<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 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>
<p>If you reserved a table, you can refund upto 1 hour before your time.</p> </DropDown>
</DropDown>
</div>
<hr> <hr>
<div class="section"> <DropDown name="Where can I find my past orders!">
<DropDown name="Where can I find my past orders!"> <p>Email....</p>
<p>Email....</p> </DropDown>
</DropDown>
</div>
<hr> <hr>
<div class="section"> <DropDown name="Deez nuts">
<DropDown name="Deez nuts"> <p>Gottem</p>
<p>Gottem</p> </DropDown>
</DropDown>
</div>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>

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

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

2
front/src/routes.js
View file

@ -42,7 +42,7 @@ const routes = {
'*': wrap({ '*': wrap({
component: Page404, component: Page404,
conditions: [], 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 { p {
font-size: $font-size-p; font-size: $font-size-p;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
a {
text-decoration: none;
color: $color-primary;
&:hover {
text-decoration: underline;
}
}
} }
small { small {
font-size: $font-size-small; font-size: $font-size-small;