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

Add MenuItem page

Browse source 
Add some information to Contact page
This commit is contained in:
Michał Gdula 2024-04-24 17:43:08 +01:00
parent f61fb472e2
commit ec2696fc1f
7 changed files with 221 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

106
front/src/pages/PageItem.svelte Normal file
View file

@ -0,0 +1,106 @@
<script>
import MenuList from "%/pages/elements/MenuList.svelte";
import LoadingImage from "/MenuItemLoading.svg";
import Items from '%/testData.js';
let items = Items;
export let params = {};
</script>
<div class="main">
<div class="images">
<div>
<img src={LoadingImage} alt="">
</div>
<ul>
<li><img src={LoadingImage} alt=""></li>
<li><img src={LoadingImage} alt=""></li>
<li><img src={LoadingImage} alt=""></li>
<li><img src={LoadingImage} alt=""></li>
<li><img src={LoadingImage} alt=""></li>
</ul>
</div>
<div class="info">
<h2>{params.name}</h2>
</div>
</div>
<div class="spacer"></div>
<div class="other">
<h2>Popular</h2>
<MenuList items={items} />
</div>
<div class="spacer"></div>
<div class="other">
<h2>Popular</h2>
<MenuList items={items} />
</div>
<style lang="scss">
@import "%/styles/vars";
h2 {
margin-bottom: $spacing-small;
}
.spacer {
height: $spacing-large;
}
.main {
display: flex;
flex-direction: row;
.images {
display: flex;
flex-direction: column;
> div {
margin-bottom: $spacing-small;
width: 650px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
//border-radius: $border-radius-large;
//background-color: $color-light;
overflow: hidden;
> img {
max-width: 650px;
max-height: 500px;
border-radius: $border-radius-normal;
}
}
> ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
> li {
list-style: none;
> img {
margin-right: $spacing-small;
width: 100px;
border-radius: $border-radius-normal;
}
}
}
}
}
.other {
margin: 0 auto;
max-width: $sizing-default-width;
}
</style>