mirror of
https://github.com/Fluffy-Bean/TastyBites.git
synced 2024-12-29 10:56:15 +00:00
Start on Footer Design
Clean up some pages Make style a bit less similar to BurgerKing... oops... dab.jpg
This commit is contained in:
parent
b56c3cc46d
commit
7907972e1c
23
front/public/BannerLoading.svg
Normal file
23
front/public/BannerLoading.svg
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<svg width="968" height="400" viewBox="0 0 968 400" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_2_8)">
|
||||||
|
<rect width="968" height="400" fill="#443023"/>
|
||||||
|
<path d="M788.125 259.125H616.25C614.178 259.125 612.191 259.948 610.726 261.413C609.261 262.878 608.438 264.865 608.438 266.938V313.812C608.461 327.113 611.305 340.258 616.783 352.378C622.261 364.498 630.247 375.319 640.215 384.125H616.25C614.178 384.125 612.191 384.948 610.726 386.413C609.261 387.878 608.438 389.865 608.438 391.938C608.438 394.01 609.261 395.997 610.726 397.462C612.191 398.927 614.178 399.75 616.25 399.75H788.125C790.197 399.75 792.184 398.927 793.649 397.462C795.114 395.997 795.938 394.01 795.938 391.938C795.938 389.865 795.114 387.878 793.649 386.413C792.184 384.948 790.197 384.125 788.125 384.125H764.16C776.125 373.52 785.198 360.048 790.527 344.975C800.45 344.363 809.767 339.991 816.578 332.75C823.39 325.508 827.184 315.942 827.188 306V298.188C827.188 287.827 823.072 277.892 815.746 270.566C808.421 263.241 798.485 259.125 788.125 259.125ZM811.562 306C811.559 311.054 809.922 315.972 806.895 320.02C803.868 324.068 799.613 327.029 794.766 328.461C795.54 323.616 795.932 318.718 795.938 313.812V276.098C800.506 277.713 804.461 280.704 807.26 284.66C810.058 288.616 811.561 293.342 811.562 298.188V306ZM694.375 235.688V204.438C694.375 202.365 695.198 200.378 696.663 198.913C698.128 197.448 700.115 196.625 702.188 196.625C704.26 196.625 706.247 197.448 707.712 198.913C709.177 200.378 710 202.365 710 204.438V235.688C710 237.76 709.177 239.747 707.712 241.212C706.247 242.677 704.26 243.5 702.188 243.5C700.115 243.5 698.128 242.677 696.663 241.212C695.198 239.747 694.375 237.76 694.375 235.688ZM725.625 235.688V204.438C725.625 202.365 726.448 200.378 727.913 198.913C729.378 197.448 731.365 196.625 733.438 196.625C735.51 196.625 737.497 197.448 738.962 198.913C740.427 200.378 741.25 202.365 741.25 204.438V235.688C741.25 237.76 740.427 239.747 738.962 241.212C737.497 242.677 735.51 243.5 733.438 243.5C731.365 243.5 729.378 242.677 727.913 241.212C726.448 239.747 725.625 237.76 725.625 235.688ZM663.125 235.688V204.438C663.125 202.365 663.948 200.378 665.413 198.913C666.878 197.448 668.865 196.625 670.938 196.625C673.01 196.625 674.997 197.448 676.462 198.913C677.927 200.378 678.75 202.365 678.75 204.438V235.688C678.75 237.76 677.927 239.747 676.462 241.212C674.997 242.677 673.01 243.5 670.938 243.5C668.865 243.5 666.878 242.677 665.413 241.212C663.948 239.747 663.125 237.76 663.125 235.688Z" fill="#E1DCD3"/>
|
||||||
|
<rect x="62" y="211" width="175" height="178" fill="#CCC2AE"/>
|
||||||
|
<rect x="36" y="211" width="175" height="68" fill="#CCC2AE"/>
|
||||||
|
<path d="M235.563 200.312H63.375C52.9698 200.319 42.8839 203.906 34.8115 210.471C26.7391 217.037 21.1722 226.18 19.0461 236.366C16.9199 246.552 18.364 257.159 23.1358 266.405C27.9076 275.652 35.7163 282.974 45.25 287.143V381.562C45.25 386.37 47.1596 390.98 50.5587 394.379C53.9578 397.778 58.568 399.688 63.375 399.688H235.563C240.37 399.688 244.98 397.778 248.379 394.379C251.778 390.98 253.688 386.37 253.688 381.562V287.143C263.221 282.974 271.03 275.652 275.802 266.405C280.574 257.159 282.018 246.552 279.891 236.366C277.765 226.18 272.198 217.037 264.126 210.471C256.054 203.906 245.968 200.319 235.563 200.312ZM172.125 272.812C169.721 272.812 167.416 273.767 165.717 275.467C164.017 277.166 163.063 279.471 163.063 281.875C163.063 284.279 164.017 286.584 165.717 288.283C167.416 289.983 169.721 290.938 172.125 290.938V381.562H63.375V290.938C65.7785 290.938 68.0836 289.983 69.7832 288.283C71.4827 286.584 72.4375 284.279 72.4375 281.875C72.4375 279.471 71.4827 277.166 69.7832 275.467C68.0836 273.767 65.7785 272.812 63.375 272.812C56.1644 272.812 49.2492 269.948 44.1505 264.849C39.0519 259.751 36.1875 252.836 36.1875 245.625C36.1875 238.414 39.0519 231.499 44.1505 226.401C49.2492 221.302 56.1644 218.438 63.375 218.438H172.125C179.336 218.438 186.251 221.302 191.349 226.401C196.448 231.499 199.313 238.414 199.313 245.625C199.313 252.836 196.448 259.751 191.349 264.849C186.251 269.948 179.336 272.812 172.125 272.812Z" fill="#E1DCD3"/>
|
||||||
|
<g clip-path="url(#clip1_2_8)">
|
||||||
|
<rect x="828" y="331.408" width="71.0494" height="33.6982" rx="16.8491" transform="rotate(-27.1381 828 331.408)" fill="#CCC2AE"/>
|
||||||
|
<rect x="879" y="305.739" width="19.159" height="17.1488" rx="8.5744" transform="rotate(-27.1381 879 305.739)" fill="#CCC2AE"/>
|
||||||
|
<rect x="815" y="355" width="33.0474" height="49.5265" rx="16.5237" transform="rotate(-27.1381 815 355)" fill="#CCC2AE"/>
|
||||||
|
<path d="M865.996 332.545C865.49 331.441 865.323 330.211 865.516 329.012C865.708 327.813 866.252 326.698 867.079 325.808C867.905 324.918 868.977 324.293 870.158 324.012C871.34 323.732 872.578 323.807 873.717 324.23C874.855 324.653 875.843 325.404 876.554 326.389C877.266 327.373 877.67 328.546 877.715 329.759C877.76 330.973 877.444 332.173 876.807 333.207C876.17 334.241 875.241 335.063 874.137 335.569C872.656 336.247 870.967 336.31 869.44 335.743C867.913 335.176 866.675 334.025 865.996 332.545ZM902.439 284.323C903.575 286.805 903.978 289.56 903.602 292.263C903.225 294.966 902.084 297.506 900.313 299.583C903.981 309.289 903.831 320.025 899.894 329.625C895.957 339.224 888.525 346.973 879.098 351.308L864.211 358.13C862.731 358.808 861.58 360.047 861.013 361.574C860.446 363.1 860.509 364.79 861.187 366.27C861.866 367.751 863.104 368.901 864.631 369.469C866.158 370.036 867.847 369.973 869.328 369.295L895.379 357.357C896.366 356.904 897.492 356.863 898.51 357.241C899.528 357.619 900.353 358.386 900.806 359.373C901.258 360.36 901.3 361.486 900.922 362.504C900.544 363.521 899.777 364.347 898.79 364.8L876.46 375.032L879.871 382.476L894.757 375.654C895.744 375.201 896.871 375.16 897.888 375.538C898.906 375.916 899.732 376.683 900.184 377.67C900.637 378.657 900.678 379.783 900.3 380.801C899.922 381.819 899.155 382.645 898.168 383.097L872.117 395.035C862.247 399.558 850.984 399.975 840.806 396.194C830.629 392.413 822.37 384.744 817.847 374.874C813.324 365.003 812.907 353.741 816.688 343.563C820.469 333.385 828.138 325.126 838.008 320.603L891.971 295.874C893.452 295.196 894.602 293.957 895.169 292.43C895.736 290.904 895.674 289.214 894.995 287.734C894.317 286.253 893.078 285.103 891.551 284.536C890.025 283.969 888.335 284.031 886.855 284.71L847.778 302.617C844.817 303.974 841.438 304.099 838.385 302.964C835.332 301.83 832.854 299.529 831.497 296.568C831.045 295.581 831.003 294.455 831.381 293.437C831.759 292.419 832.526 291.594 833.513 291.141C834.5 290.689 835.626 290.647 836.644 291.025C837.662 291.403 838.488 292.17 838.94 293.157C839.392 294.144 840.218 294.911 841.236 295.289C842.254 295.668 843.38 295.626 844.367 295.174L883.444 277.266C886.899 275.683 890.84 275.537 894.403 276.861C897.965 278.184 900.855 280.868 902.439 284.323ZM856.718 374.06C856.252 373.792 855.738 373.619 855.204 373.55C854.671 373.482 854.13 373.519 853.611 373.659C853.092 373.8 852.606 374.041 852.18 374.37C851.755 374.698 851.398 375.107 851.13 375.574L846.33 383.965C845.847 384.902 845.745 385.99 846.044 387C846.343 388.011 847.02 388.868 847.935 389.392C848.85 389.915 849.931 390.066 850.954 389.813C851.977 389.559 852.863 388.921 853.428 388.03L858.228 379.639C858.766 378.698 858.909 377.583 858.626 376.537C858.343 375.492 857.657 374.601 856.718 374.06ZM848.427 357.809L826.69 357.875C826.144 357.862 825.6 357.958 825.091 358.159C824.583 358.36 824.119 358.66 823.729 359.043C823.338 359.425 823.028 359.882 822.817 360.387C822.606 360.891 822.498 361.433 822.499 361.979C822.501 362.526 822.612 363.067 822.826 363.57C823.04 364.073 823.353 364.528 823.746 364.909C824.139 365.289 824.604 365.587 825.114 365.784C825.624 365.982 826.168 366.075 826.714 366.059L848.454 365.998C848.992 365.996 849.524 365.887 850.02 365.679C850.516 365.47 850.966 365.166 851.344 364.784C851.722 364.401 852.022 363.948 852.225 363.449C852.428 362.951 852.531 362.418 852.527 361.88C852.521 360.797 852.086 359.761 851.318 358.998C850.549 358.235 849.51 357.807 848.427 357.809ZM893.289 304.277L852.584 322.93L864.522 348.981L875.687 343.865C882.932 340.534 888.716 334.678 891.955 327.391C895.195 320.105 895.669 311.887 893.289 304.277Z" fill="#E1DCD3"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_2_8">
|
||||||
|
<rect width="968" height="400" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
<clipPath id="clip1_2_8">
|
||||||
|
<rect width="131" height="131" fill="white" transform="translate(778 307.574) rotate(-24.62)"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 8.2 KiB |
BIN
front/public/dab.jpg
Normal file
BIN
front/public/dab.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
|
|
@ -3,6 +3,7 @@
|
||||||
import { replace } from 'svelte-spa-router';
|
import { replace } from 'svelte-spa-router';
|
||||||
import routes from '%/routes.js';
|
import routes from '%/routes.js';
|
||||||
import NavigationBar from "%/pages/components/NavigationBar.svelte";
|
import NavigationBar from "%/pages/components/NavigationBar.svelte";
|
||||||
|
import FooterBar from "%/pages/components/FooterBar.svelte";
|
||||||
|
|
||||||
let oldLocation = undefined;
|
let oldLocation = undefined;
|
||||||
let showNavBar = false;
|
let showNavBar = false;
|
||||||
|
|
@ -37,6 +38,4 @@
|
||||||
on:conditionsFailed={conditionFailure}
|
on:conditionsFailed={conditionFailure}
|
||||||
/>
|
/>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<FooterBar />
|
||||||
<p>TastyBites is a fake restaurant</p>
|
|
||||||
</footer>
|
|
||||||
|
|
|
||||||
|
|
@ -4,5 +4,31 @@
|
||||||
export let params = {};
|
export let params = {};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1>404</h1>
|
<div>
|
||||||
<p>Could not find resource you've searched for. <a href="/" use:link>Go Back</a></p>
|
<h1>404</h1>
|
||||||
|
<p>Could not find resource you've searched for. <a href="/" use:link>Go Back</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
padding: 16px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #6A9343;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,38 +1,93 @@
|
||||||
<script>
|
<script>
|
||||||
import { link } from 'svelte-spa-router';
|
import { link } from 'svelte-spa-router';
|
||||||
|
import { ArrowUpRight } from "phosphor-svelte";
|
||||||
import AnnouncementBanner from "%/pages/components/AnnouncementBanner.svelte";
|
import AnnouncementBanner from "%/pages/components/AnnouncementBanner.svelte";
|
||||||
import MenuList from "%/pages/components/MenuList.svelte";
|
import MenuList from "%/pages/components/MenuList.svelte";
|
||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
{name: "Breakfast", price: 69.99},
|
{
|
||||||
{name: "Dinner", price: 21},
|
name: "Breakfast",
|
||||||
{name: "Brick", price: 0},
|
price: 69.99,
|
||||||
{name: "Toast", price: 4382749832743},
|
labels: ["vegan", "spicy",],
|
||||||
{name: "water", price: 1},
|
},
|
||||||
{name: "half eaten mouldy bread", price: -9999},
|
{
|
||||||
|
name: "Dinner",
|
||||||
|
price: 21,
|
||||||
|
labels: ["vegan", "fish", "nut", "spicy",],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Brick",
|
||||||
|
price: 0,
|
||||||
|
labels: ["spicy",],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Toast",
|
||||||
|
price: 4382749832743,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "water",
|
||||||
|
price: 1,
|
||||||
|
labels: ["fish"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "half eaten mouldy bread",
|
||||||
|
price: -9999,
|
||||||
|
labels: ["nut"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "GwaGwa",
|
||||||
|
price: "Priceless",
|
||||||
|
labels: ["nut"],
|
||||||
|
image: "/dab.jpg",
|
||||||
|
}
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<AnnouncementBanner />
|
<div>
|
||||||
<a href="/annoucements" use:link style="float: right">Learn More</a>
|
<AnnouncementBanner />
|
||||||
|
<a href="/annoucements" use:link style="float: right">Learn More <ArrowUpRight /></a>
|
||||||
|
<div class="spacer"></div>
|
||||||
|
|
||||||
<div class="spacer"></div>
|
<h2>Popular Today</h2>
|
||||||
|
<MenuList {items} />
|
||||||
|
<a href="/menu" use:link style="float: right">See All <ArrowUpRight /></a>
|
||||||
|
<div class="spacer"></div>
|
||||||
|
|
||||||
<h2>Menu</h2>
|
<h2>About Us</h2>
|
||||||
<MenuList {items} />
|
<p>Want to know the story of the restaurant?</p>
|
||||||
<a href="/menu" use:link style="float: right">See All</a>
|
<a href="/about" use:link style="float: right">Continue reading <ArrowUpRight /></a>
|
||||||
|
</div>
|
||||||
<div class="spacer"></div>
|
|
||||||
|
|
||||||
<h2>About Us</h2>
|
|
||||||
<p>Want to know the story of the restaurant?</p>
|
|
||||||
<a href="/about" use:link style="float: right">Continue reading</a>
|
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
h2 {
|
h2 {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spacer {
|
.spacer {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-top: 8px;
|
||||||
|
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
|
||||||
|
height: 30px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
border-radius: 9999px;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #33251a;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #fffbf4;
|
||||||
|
color: #33251a;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
86
front/src/pages/PageMenu.svelte
Normal file
86
front/src/pages/PageMenu.svelte
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
<script>
|
||||||
|
import MenuList from "%/pages/components/MenuList.svelte";
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
name: "Breakfast",
|
||||||
|
price: 69.99,
|
||||||
|
labels: ["vegan", "spicy",],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Dinner",
|
||||||
|
price: 21,
|
||||||
|
labels: ["vegan", "fish", "nut", "spicy",],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Brick",
|
||||||
|
price: 0,
|
||||||
|
labels: ["spicy",],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Toast",
|
||||||
|
price: 4382749832743,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "water",
|
||||||
|
price: 1,
|
||||||
|
labels: ["fish"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "half eaten mouldy bread",
|
||||||
|
price: -9999,
|
||||||
|
labels: ["nut"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "GwaGwa",
|
||||||
|
price: "Priceless",
|
||||||
|
labels: ["nut"],
|
||||||
|
image: "/dab.jpg",
|
||||||
|
}
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h2>Menu</h2>
|
||||||
|
<MenuList {items} />
|
||||||
|
<div class="spacer"></div>
|
||||||
|
|
||||||
|
<h2>Menu</h2>
|
||||||
|
<MenuList {items} />
|
||||||
|
<div class="spacer"></div>
|
||||||
|
|
||||||
|
<h2>Menu</h2>
|
||||||
|
<MenuList {items} />
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer {
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-top: 8px;
|
||||||
|
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
|
||||||
|
height: 30px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
border-radius: 9999px;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #33251a;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #fffbf4;
|
||||||
|
color: #33251a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
import LoadingBar from "%/pages/components/LoadingBar.svelte";
|
import LoadingBar from "%/pages/components/LoadingBar.svelte";
|
||||||
|
import LoadingImage from '/BannerLoading.svg';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="announcement-banner">
|
<div class="announcement-banner">
|
||||||
<LoadingBar bottom={true} />
|
<LoadingBar bottom={true} />
|
||||||
|
<img src={LoadingImage} alt="">
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
83
front/src/pages/components/FooterBar.svelte
Normal file
83
front/src/pages/components/FooterBar.svelte
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
<script>
|
||||||
|
import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from "phosphor-svelte"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<ul>
|
||||||
|
<li><a href="www.twitter.com"><TwitterLogo weight="fill"/></a></li>
|
||||||
|
<li><a href="www.twitter.com"><FacebookLogo weight="fill"/></a></li>
|
||||||
|
<li><a href="www.twitter.com"><InstagramLogo weight="fill"/></a></li>
|
||||||
|
<li><a href="www.twitter.com"><TiktokLogo weight="fill"/></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
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>
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
<script>
|
<script>
|
||||||
import { link } from 'svelte-spa-router';
|
import { link } from 'svelte-spa-router';
|
||||||
import { Acorn, Fish, Leaf, Flame } from "phosphor-svelte"
|
import {Acorn, Fish, Leaf, Flame, ArrowUpRight } from "phosphor-svelte"
|
||||||
import LoadingImage from '/MenuItemLoadingAlt.svg';
|
import LoadingImage from '/MenuItemLoadingAlt.svg';
|
||||||
|
|
||||||
export let id;
|
export let id;
|
||||||
export let labels = [
|
|
||||||
"vegan",
|
|
||||||
"fish",
|
|
||||||
"nut",
|
|
||||||
"spicy",
|
|
||||||
]
|
|
||||||
export let name;
|
export let name;
|
||||||
export let price;
|
export let price;
|
||||||
|
export let image;
|
||||||
|
export let labels = []
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="menu-item">
|
<div class="menu-item">
|
||||||
<img src={LoadingImage} alt="" class="menu-item-image">
|
{#if !image}
|
||||||
|
<img src={LoadingImage} alt="" class="menu-item-image">
|
||||||
|
{:else}
|
||||||
|
<img src={image} alt="" class="menu-item-image">
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div class="menu-item-header">
|
<div class="menu-item-header">
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
<a href="/item/{id}" use:link>View</a>
|
<a href="/item/{id}" use:link>View <ArrowUpRight /></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="menu-item-detail">
|
<ul class="menu-item-detail">
|
||||||
|
|
@ -42,3 +42,4 @@
|
||||||
<li>£{price}</li>
|
<li>£{price}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,15 @@
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
{#each items as item}
|
{#each items as item}
|
||||||
<li><MenuItem name={item.name} price={item.price} id={item.name} /></li>
|
<li>
|
||||||
|
<MenuItem
|
||||||
|
id={item.name}
|
||||||
|
name={item.name}
|
||||||
|
price={item.price}
|
||||||
|
image={item.image}
|
||||||
|
labels={item.labels}
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,12 @@ const routes = {
|
||||||
conditions: [],
|
conditions: [],
|
||||||
userData: { showNavBar: true },
|
userData: { showNavBar: true },
|
||||||
}),
|
}),
|
||||||
|
"/menu": wrap({
|
||||||
|
asyncComponent: () => import("%/pages/PageMenu.svelte"),
|
||||||
|
loadingComponent: PageLoading,
|
||||||
|
conditions: [],
|
||||||
|
userData: { showNavBar: true },
|
||||||
|
}),
|
||||||
"/contact": wrap({
|
"/contact": wrap({
|
||||||
asyncComponent: () => import("%/pages/PageContact.svelte"),
|
asyncComponent: () => import("%/pages/PageContact.svelte"),
|
||||||
loadingComponent: PageLoading,
|
loadingComponent: PageLoading,
|
||||||
|
|
@ -22,7 +28,7 @@ const routes = {
|
||||||
userData: { showNavBar: true },
|
userData: { showNavBar: true },
|
||||||
}),
|
}),
|
||||||
"/cart": wrap({
|
"/cart": wrap({
|
||||||
asyncComponent: () => import("%/pages/PageShoppingCart.svelte"),
|
asyncComponent: () => import("%/pages/PageCart.svelte"),
|
||||||
loadingComponent: PageLoading,
|
loadingComponent: PageLoading,
|
||||||
conditions: [],
|
conditions: [],
|
||||||
userData: { showNavBar: true },
|
userData: { showNavBar: true },
|
||||||
|
|
|
||||||
|
|
@ -13,8 +13,10 @@ nav {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
border-bottom: 2px solid $color-primary;
|
||||||
background-color: $color-dark;
|
background-color: $color-dark;
|
||||||
color: $color-light;
|
color: $color-light;
|
||||||
|
|
||||||
z-index: 9999999;
|
z-index: 9999999;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue