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

Add styling to BasketItem

Browse source 
Move footer style to its own file
Make the contact form a bit more intuitive
General cleanup
This commit is contained in:
Michał 2024-05-03 13:10:37 +01:00
parent 764aaa48ea
commit 6f97ad9a4c
9 changed files with 146 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
front/src/App.svelte
View file

@ -95,7 +95,6 @@
<footer>
<div class="footer-section">
<p>TastyBites is not a real restaurant</p>
<p>gwagwa</p>
</div>
<div class="footer-section">
<h4>Find us on:</h4>
@ -107,69 +106,3 @@
</ul>
</div>
</footer>
<style lang="scss">
// ToDo: Move this SCSS to its own _footer.scss file
footer {
padding: 16px;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
border-top: 2px solid #6A9343;
background-color: #443023;
color: #e1dcd3;
overflow: hidden;
}
.footer-section {
padding: 16px;
min-width: 200px;
width: 100%;
max-width: 500px;
> ul {
padding: 0;
display: flex;
flex-direction: row;
> li {
margin: 0 16px 0 0;
list-style: none;
> a {
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 16px;
border-radius: 99999px;
background-color: transparent;
color: #e1dcd3;
&:hover {
background-color: #fffbf4;
color: #33251a;
}
}
}
}
> h4 {
margin-bottom: 10px;
}
}
</style>

42
front/src/components/BasketItem.svelte
View file

@ -16,7 +16,7 @@
<li class="basket-item-name">{item.data.name}</li>
<li class="basket-item-controls">
<button on:click={() => { Cart.addToCart(item.uuid, -1) }}>-</button>
<input type="number" bind:value={item.amount}>
<p>{item.amount}</p>
<button on:click={() => { Cart.addToCart(item.uuid, 1) }}>+</button>
</li>
<li class="basket-item-price">£{item.data.price * item.amount} (£{item.data.price})</li>
@ -65,6 +65,46 @@
.basket-item-controls {
display: flex;
flex-direction: row;
> button {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
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;
}
}
> p {
width: 40px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
font-family: $font-family;
font-size: $font-size-p;
border: 1px solid transparent;
color: $color-on-light;
}
}
.basket-item-price {
font-size: $font-size-p;

14
front/src/lib/test-data.ts
View file

@ -44,13 +44,13 @@ const TestData: Item[] = [
labels: [Labels.nut],
detail: "Example",
},
{
uuid: "gwagwa",
name: "GwaGwa",
price: 69,
labels: [Labels.nut],
image: "/dab.jpg",
},
// {
// uuid: "gwagwa",
// name: "GwaGwa",
// price: 69,
// labels: [Labels.nut],
// image: "/dab.jpg",
// },
{
uuid: "hogmelon",
name: "Hogermellon",

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

@ -28,7 +28,17 @@
}
function onSubmit() {
nameValid = true;
emailValid = true;
messageValid = false;
formMessage = postContactEmail(name, email, message);
formMessage.catch(() => {
validateName();
validateEmail();
validateMessage();
});
}
</script>

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

@ -57,7 +57,7 @@
<p>{item.detail}</p>
</div>
<button on:click={() => { Cart.addToCart(item.uuid, 1) }}>Add to Cart</button>
<button on:click={() => { Cart.addToCart(item.uuid, 1) }} id="add-to-cart">Add to Cart</button>
</div>
{:catch error}
<div id="error">
@ -156,6 +156,30 @@
}
}
#add-to-cart {
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-primary;
color: $color-on-primary;
&:hover, &:focus {
border: 0 solid transparent;
background-color: $color-dark;
color: $color-on-dark;
outline: 0 solid transparent
}
}
.other {
margin-left: auto;
margin-right: auto;

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

@ -133,12 +133,6 @@
Hide Unavailable
</label>
</li>
<li>
<label>
<input type="checkbox">
Hog
</label>
</li>
</ul>
</DropDown>
</div>

61
front/src/styles/_footer.scss Normal file
View file

@ -0,0 +1,61 @@
footer {
padding: $spacing-normal;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
border-top: 3px solid $color-primary;
background-color: $color-dark;
color: $color-on-dark;
overflow: hidden;
}
.footer-section {
padding: $spacing-normal;
min-width: 200px;
width: 100%;
max-width: 500px;
> ul {
padding: 0;
display: flex;
flex-direction: row;
> li {
margin: 0 $spacing-small 0 0;
list-style: none;
> a {
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 16px;
border-radius: $border-radius-circle;
background-color: transparent;
color: $color-on-dark;
&:hover {
background-color: $color-light;
color: $color-on-light;
}
}
}
}
> h4 {
margin-bottom: $spacing-xsmall;
}
}

3
front/src/styles/_navigation_bar.scss
View file

@ -13,11 +13,10 @@ nav {
top: 0;
left: 0;
border-bottom: 2px solid $color-primary;
border-bottom: 3px solid $color-primary;
background-color: $color-dark;
color: $color-light;
//transition: box-shadow 0.05s ease-in-out;
z-index: 9999999;
ul {

1
front/src/styles/main.scss
View file

@ -3,6 +3,7 @@
@import "reset";
@import "loading_bar";
@import "navigation_bar";
@import "footer";
@import "announcement_banner";
@import "container";
@import "menu_item";