Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-05-28 22:33:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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ł Gdula 2024-05-02 22:56:59 +01:00
parent 350528ca2e
commit f7321ed338
3 changed files with 44 additions and 17 deletions
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'}, cart: {path: '/cart', className: 'active'},
} }
let cartLen = 0; let cartItemCount = 0;
Cart.subscribe(() => { Cart.subscribe(() => {
cartLen = Cart.getLength(); cartItemCount = Cart.getLength();
}); });
let scrollY = 0; let scrollY = 0;
@ -43,12 +43,22 @@
} }
</script> </script>
<svelte:window <svelte:window
bind:scrollY={scrollY} bind:scrollY={scrollY}
bind:innerWidth={width} bind:innerWidth={width}
/> />
<svelte:head> <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> </svelte:head>
@ -59,21 +69,17 @@
<li use:active={links.home}><a href="/" use:link>Home</a></li> <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.menu}><a href="/menu" use:link>Menu</a></li>
</ul> </ul>
<span><img src={Logo} alt="TastyBites"></span> <span class="nav-logo"><img src={Logo} alt="TastyBites"></span>
<ul style="justify-content: flex-start"> <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.contact}><a href="/contact" use:link>Contact&nbsp;Us</a></li>
<li use:active={links.cart}><a href="/cart" use:link> <li use:active={links.cart}><a href="/cart" use:link>Cart&nbsp;<span class="nav-basket">{cartItemCount}</span></a></li>
Cart&nbsp;{#if cartLen}({cartLen}){/if}
</a></li>
</ul> </ul>
{:else} {:else}
<ul> <ul>
<li use:active={links.home}><a href="/" use:link>Home</a></li> <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.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.contact}><a href="/contact" use:link>Contact&nbsp;Us</a></li>
<li use:active={links.cart}><a href="/cart" use:link> <li use:active={links.cart}><a href="/cart" use:link>Cart&nbsp;<span class="nav-basket">{cartItemCount}</span></a></li>
Cart&nbsp;{#if cartLen}({cartLen}){/if}
</a></li>
</ul> </ul>
{/if} {/if}
</nav> </nav>

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

@ -22,10 +22,6 @@
}); });
</script> </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 /> <AnnouncementBanner />
<a href="/annoucements" use:link>Learn More <ArrowUpRight /></a> <a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
<div class="spacer" /> <div class="spacer" />

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

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