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

Improve basket count

Browse source 
Move leaflet css resource link to App.svelte
make cartLen a more sensible name
This commit is contained in:
Michał 2024-05-02 22:56:59 +01:00
parent 350528ca2e
commit f7321ed338
3 changed files with 44 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
front/src/App.svelte
View file

@ -15,9 +15,9 @@
cart: {path: '/cart', className: 'active'},
}
let cartLen = 0;
let cartItemCount = 0;
Cart.subscribe(() => {
cartLen = Cart.getLength();
cartItemCount = Cart.getLength();
});
let scrollY = 0;
@ -43,12 +43,22 @@
}
</script>
<svelte:window
bind:scrollY={scrollY}
bind:innerWidth={width}
/>
<svelte:head>
<link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=erode@300,301,400,401,500,501,600,601,700,701,1,2&display=swap">
<link
rel="stylesheet"
href="https://api.fontshare.com/v2/css?f[]=erode@300,301,400,401,500,501,600,601,700,701,1,2&display=swap"
/>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
</svelte:head>
@ -59,21 +69,17 @@
<li use:active={links.home}><a href="/" use:link>Home</a></li>
<li use:active={links.menu}><a href="/menu" use:link>Menu</a></li>
</ul>
<span><img src={Logo} alt="TastyBites"></span>
<span class="nav-logo"><img src={Logo} alt="TastyBites"></span>
<ul style="justify-content: flex-start">
<li use:active={links.contact}><a href="/contact" use:link>Contact&nbsp;Us</a></li>
<li use:active={links.cart}><a href="/cart" use:link>
Cart&nbsp;{#if cartLen}({cartLen}){/if}
</a></li>
<li use:active={links.cart}><a href="/cart" use:link>Cart&nbsp;<span class="nav-basket">{cartItemCount}</span></a></li>
</ul>
{:else}
<ul>
<li use:active={links.home}><a href="/" use:link>Home</a></li>
<li use:active={links.menu}><a href="/menu" use:link>Menu</a></li>
<li use:active={links.contact}><a href="/contact" use:link>Contact&nbsp;Us</a></li>
<li use:active={links.cart}><a href="/cart" use:link>
Cart&nbsp;{#if cartLen}({cartLen}){/if}
</a></li>
<li use:active={links.cart}><a href="/cart" use:link>Cart&nbsp;<span class="nav-basket">{cartItemCount}</span></a></li>
</ul>
{/if}
</nav>

4
front/src/pages/PageIndex.svelte
View file

@ -22,10 +22,6 @@
});
</script>
<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
</svelte:head>
<AnnouncementBanner />
<a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
<div class="spacer" />

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

@ -38,10 +38,31 @@ nav {
a {
padding: $spacing-xsmall $spacing-normal;
display: block;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-decoration: none;
text-shadow: 0 1px 0.5px rgba(#000, 0.8);
color: inherit;
.nav-basket {
padding: 0 $spacing-xsmall;
min-width: 17px;
min-height: 17px;
display: inline-block;
font-size: $font-size-small;
border-radius: $border-radius-circle;
background-color: $color-light;
color: $color-on-light;
}
}
&:hover {
@ -50,11 +71,16 @@ nav {
&.active {
color: $color-primary !important;
.nav-basket {
background-color: $color-primary;
color: $color-on-primary;
}
}
}
}
span {
.nav-logo {
padding: 0 $spacing-normal;
font-weight: $font-weight-black;
font-size: $font-size-h1;
@ -64,7 +90,6 @@ nav {
display: block;
}
}
&.scrolled {