Skip to content

Commit ce41c8f

Browse files
saaqisaaqi
committed
refactor layout and navigation components; enhance FetchEaternalData and loading animations
1 parent 728a727 commit ce41c8f

File tree

10 files changed

+240
-87
lines changed

10 files changed

+240
-87
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"type": "module",
66
"scripts": {
77
"dev": "vite dev",
8-
"build": "prettier --write . && vite build --emptyOutDir",
8+
"build": "vite build --emptyOutDir",
99
"preview": "vite preview",
1010
"prepare": "svelte-kit sync || echo ''",
1111
"format": "prettier --write .",

‎src/lib/components/FetchEaternalData.svelte

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
2-
const {
3-
externalJson = `https://raw.githubusercontent.com/saaqi/restaurant-mobile-app-react-native/refs/heads/main/src/menu.json`
4-
} = $props();
2+
const {
3+
externalJson = `https://raw.githubusercontent.com/saaqi/restaurant-mobile-app-react-native/refs/heads/main/src/menu.json`
4+
} = $props();
55
66
// Import Externam JSON File
77
const restaurantMenu = async () => {
@@ -11,15 +11,41 @@
1111
</script>
1212

1313
{#snippet resMenu(data)}
14-
{#each data.menu as { name, price, description, image, category }, index ('resmenu-' + index)}
15-
<div>
16-
{name} - {price} - {description} - {category}
17-
</div>
18-
{/each}
14+
<div class="container mt-4">
15+
<div class="row g-3">
16+
{#each data.menu as { name, price, description, image, category }, index ('resmenu-' + index)}
17+
<div class="col-12 col-md-6 col-lg-4">
18+
<div class="card h-100">
19+
<img
20+
src="https://raw.githubusercontent.com/saaqi/restaurant-mobile-app-react-native/refs/heads/main/assets/menu/{image}"
21+
class="card-img-top"
22+
alt={name}
23+
/>
24+
<div class="card-body">
25+
<h4 class="card-title mb-3">{name}</h4>
26+
<div class="row align-items-center">
27+
<div class="col-6">
28+
<h5 class="card-subtitle text-capitalize mb-4">{category}</h5>
29+
</div>
30+
<div class="col-6">
31+
<h5
32+
class="card-subtitle text-capitalize mb-4 text-center py-2 px-1 rounded bg-body-tertiary"
33+
>
34+
${price}
35+
</h5>
36+
</div>
37+
</div>
38+
<p class="card-text mt-auto">{description}</p>
39+
</div>
40+
</div>
41+
</div>
42+
{/each}
43+
</div>
44+
</div>
1945
{/snippet}
2046

2147
{#await restaurantMenu()}
22-
<p>Getting Restaurent Menu ...</p>
48+
<p>Loading External Menu ...</p>
2349
{:then menu}
2450
{@render resMenu(menu)}
2551
{:catch error}

‎src/lib/components/Footer.svelte

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,20 @@
22
const year = new Date().getFullYear();
33
</script>
44

5-
<div class="position-fixed bottom-0 w-100">
6-
<div class="bg-body-tertiary py-3">
7-
<div class="container flex-wrap d-flex justify-content-between gap-2">
8-
<div class="copyright">Copyright© {year} - SvelteKit + Bootstrap by Saaqi</div>
9-
<div class="powered">
10-
Designed By <a
11-
class="link-primary"
12-
href="https://saqibtech.com"
13-
target="_blank"
14-
title="Saqib Islam - UI/UX Designer &amp; Fullstack Developer.">Saaqi</a
15-
>
5+
<footer>
6+
<div class="w-100">
7+
<div class="bg-body-tertiary py-3">
8+
<div class="container flex-wrap d-flex justify-content-between gap-2">
9+
<div class="copyright">Copyright© {year} - SvelteKit + Bootstrap by Saaqi</div>
10+
<div class="powered">
11+
Designed By <a
12+
class="link-primary"
13+
href="https://saqibtech.com"
14+
target="_blank"
15+
title="Saqib Islam - UI/UX Designer &amp; Fullstack Developer.">Saaqi</a
16+
>
17+
</div>
1618
</div>
1719
</div>
1820
</div>
19-
</div>
21+
</footer>

‎src/lib/components/Navigation.svelte

Lines changed: 39 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -38,54 +38,60 @@
3838
{/each}
3939
{/snippet}
4040

41-
<nav class="navbar navbar-expand-sm bg-body-tertiary sticky-top shadow-sm">
42-
<div class="container px-3 py-2">
43-
<a
44-
onclick={collapseBootstrapMenu}
45-
class="navbar-brand me-5"
46-
href="{base}/"
47-
aria-label="Svelte + Bootstrap by Saaqi"
48-
>
49-
<img src={logo} class="img-fluid navLogo" alt="Svelte + Bootstrap by Saaqi" />
50-
</a>
51-
<button
52-
class="navbar-toggler"
53-
type="button"
54-
data-bs-toggle="collapse"
55-
data-bs-target="#navbarNavDropdown"
56-
aria-controls="navbarNavDropdown"
57-
aria-expanded="false"
58-
aria-label="Toggle navigation"
59-
>
60-
<span class="navbar-toggler-icon"></span>
61-
</button>
62-
<div class="collapse navbar-collapse" id="navbarNavDropdown">
63-
<ul class="navbar-nav gap-3 pt-lg-0 pt-3">
64-
{@render navigationLinks(navLinks)}
65-
<!-- <li class="nav-item dropdown">
41+
<header>
42+
<nav class="navbar navbar-expand-sm bg-body-tertiary shadow-sm fixed-top">
43+
<div class="container px-3 py-2">
44+
<a
45+
onclick={collapseBootstrapMenu}
46+
class="navbar-brand me-5"
47+
href="{base}/"
48+
aria-label="Svelte + Bootstrap by Saaqi"
49+
>
50+
<img src={logo} class="img-fluid navLogo" alt="Svelte + Bootstrap by Saaqi" />
51+
</a>
52+
<button
53+
class="navbar-toggler"
54+
type="button"
55+
data-bs-toggle="collapse"
56+
data-bs-target="#navbarNavDropdown"
57+
aria-controls="navbarNavDropdown"
58+
aria-expanded="false"
59+
aria-label="Toggle navigation"
60+
>
61+
<span class="navbar-toggler-icon"></span>
62+
</button>
63+
<div class="collapse navbar-collapse" id="navbarNavDropdown">
64+
<ul class="navbar-nav gap-3 pt-lg-0 pt-3">
65+
{@render navigationLinks(navLinks)}
66+
<!-- <li class="nav-item dropdown">
6667
<a
6768
class="nav-link dropdown-toggle"
68-
href="#home"
69+
href="#top"
6970
role="button"
7071
data-bs-toggle="dropdown"
7172
aria-expanded="false"
7273
>
7374
Dropdown link
7475
</a>
7576
<ul class="dropdown-menu">
76-
<li><a class="dropdown-item" href="#home">Action</a></li>
77-
<li><a class="dropdown-item" href="#home">Another action</a></li>
78-
<li><a class="dropdown-item" href="#home">Something else here</a></li>
77+
<li><a class="dropdown-item" href="#top">Action</a></li>
78+
<li><a class="dropdown-item" href="#top">Another action</a></li>
79+
<li><a class="dropdown-item" href="#top">Something else here</a></li>
7980
</ul>
80-
</li> -->
81-
</ul>
81+
</li> -->
82+
</ul>
83+
</div>
8284
</div>
83-
</div>
84-
</nav>
85+
</nav>
86+
<div class="navSpacer"></div>
87+
</header>
8588

8689
<style>
8790
.navLogo {
8891
width: 60px;
8992
height: auto;
9093
}
94+
.navSpacer {
95+
min-height: 80px;
96+
}
9197
</style>

‎src/lib/styles/style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.svh-100 {
22
align-items: center;
33
display: flex;
4-
height: 100svh;
4+
min-height: calc(100svh - 80px - 56px);
55
}

‎src/routes/+layout.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export const prerender = true;
2+
// export const trailingSlash = 'always';

‎src/routes/+layout.svelte

Lines changed: 108 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,119 @@
22
import '$lib/styles/bootstrap.css';
33
import '$lib/styles/style.scss';
44
5-
export const prerender = true;
6-
// export const trailingSlash = 'always';
7-
8-
let { children } = $props();
5+
const { children } = $props();
96
import Navigation from '$lib/components/Navigation.svelte';
107
import Footer from '$lib/components/Footer.svelte';
8+
9+
// Loading Animation
10+
/** Hide Preloader */
11+
import { onMount } from 'svelte';
12+
let hidePreloader = $state();
13+
let nonePreloader = $state();
14+
onMount(() => {
15+
hidePreloader = 'hide-preloader';
16+
setTimeout(() => {
17+
nonePreloader = 'none-preloader';
18+
}, 301);
19+
});
1120
</script>
1221

22+
<div class="atf-preloader {hidePreloader} {nonePreloader}" id="atf-preloader">
23+
<div class="atf-status">
24+
<div class="atf-lds-roller">
25+
<div></div>
26+
<div></div>
27+
<div></div>
28+
<div></div>
29+
</div>
30+
</div>
31+
</div>
32+
1333
<Navigation />
14-
<div class="h-100">
34+
35+
<div class="svh-100">
1536
{@render children()}
1637
</div>
1738
<Footer />
39+
40+
<style>
41+
#atf-preloader {
42+
transition: all ease-in-out 1s;
43+
}
44+
.hide-preloader {
45+
opacity: 0 !important;
46+
visibility: hidden !important;
47+
transition: all ease-out 0.3s;
48+
}
49+
.none-preloader {
50+
display: none !important;
51+
}
52+
.atf-preloader {
53+
background: rgba(0, 0, 0, 0.97);
54+
bottom: 0;
55+
left: 0;
56+
position: fixed;
57+
right: 0;
58+
top: 0;
59+
z-index: 99999999;
60+
}
61+
.atf-lds-roller {
62+
display: inline-block;
63+
position: absolute;
64+
width: 96px;
65+
height: 96px;
66+
top: 50%;
67+
left: 50%;
68+
margin: -40px 0 0 -40px;
69+
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
70+
}
71+
.atf-lds-roller div {
72+
position: absolute;
73+
top: 33px;
74+
width: 13px;
75+
height: 13px;
76+
border-radius: 50%;
77+
background: #fff;
78+
animation-timing-function: cubic-bezier(0, 1, 1, 0);
79+
}
80+
.atf-lds-roller div:nth-child(1) {
81+
left: 8px;
82+
animation: atf-lds-roller1 0.6s infinite;
83+
}
84+
.atf-lds-roller div:nth-child(2) {
85+
left: 8px;
86+
animation: atf-lds-roller2 0.6s infinite;
87+
}
88+
.atf-lds-roller div:nth-child(3) {
89+
left: 32px;
90+
animation: atf-lds-roller2 0.6s infinite;
91+
}
92+
.atf-lds-roller div:nth-child(4) {
93+
left: 56px;
94+
animation: atf-lds-roller3 0.6s infinite;
95+
}
96+
@keyframes atf-lds-roller1 {
97+
0% {
98+
transform: scale(0);
99+
}
100+
100% {
101+
transform: scale(1);
102+
}
103+
}
104+
@keyframes atf-lds-roller3 {
105+
0% {
106+
transform: scale(1);
107+
}
108+
100% {
109+
transform: scale(0);
110+
}
111+
}
112+
@keyframes atf-lds-roller2 {
113+
0% {
114+
transform: translate(0, 0);
115+
}
116+
100% {
117+
transform: translate(24px, 0);
118+
}
119+
}
120+
</style>

0 commit comments

Comments
 (0)