Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-06-03 17:03:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Create Container style

Browse source 
Make some styles for mobile
Create Logo for the website
Clean up styles for the millionth time
This commit is contained in:
Michał Gdula 2024-04-25 19:18:28 +01:00
parent 7b4a40c861
commit e8493d53f8
14 changed files with 199 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

75
front/src/pages/PageMenu.svelte
View file

@ -8,14 +8,13 @@
</script>
<div class="menu">
<div class="menu-filter">
<div class="menu-filter-header">
<div class="container" id="filter">
<div class="header">
<h2>Filters</h2>
<button><ArrowClockwise /></button>
</div>
<hr>
<div class="menu-filter-section">
<div class="section">
<DropDown name="Meal Prefrences" open={true}>
<ul>
<li>
@ -39,10 +38,8 @@
</ul>
</DropDown>
</div>
<hr>
<div class="menu-filter-section">
<div class="section">
<DropDown name="Allergies" open={true}>
<ul>
<li>
@ -72,10 +69,8 @@
</ul>
</DropDown>
</div>
<hr>
<div class="menu-filter-section">
<div class="section">
<DropDown name="Meal Types" open={true}>
<ul>
<li>
@ -124,8 +119,7 @@
</DropDown>
</div>
<hr>
<div class="menu-filter-section">
<div class="section">
<DropDown name="Other">
<ul>
<li>
@ -151,7 +145,7 @@
</div>
</div>
<div class="menu-list">
<div id="menu-list">
<h2>Main Menu</h2>
<MenuList items={items} />
<div class="spacer"></div>
@ -168,13 +162,6 @@
<style lang="scss">
@import "%/styles/vars";
h2 {
margin-bottom: $spacing-small;
}
.spacer {
height: $spacing-large;
}
.menu {
display: flex;
flex-direction: row;
@ -182,35 +169,17 @@
align-items: flex-start;
}
.menu-list {
#menu-list {
padding-left: $spacing-normal;
}
.menu-filter {
#filter {
min-width: calc(300px - $spacing-normal);
width: 100%;
max-width: calc(300px - $spacing-normal);
position: sticky;
top: calc($sizing-navigation-height + $spacing-normal);
border-radius: $border-radius-normal;
background-image: url('/BackgroundTextureAlt.svg');
background-repeat: no-repeat;
background-size: 200px 250px;
background-position: 5px -43px;
background-color: $color-light;
color: $color-on-light;
h2 {
margin-bottom: 0;
}
hr {
height: 1px;
border: 0 transparent;
background-color: rgba($color-dark, 0.1);
}
button {
height: 32px;
width: 32px;
@ -232,18 +201,6 @@
color: $color-on-primary;
}
}
.menu-filter-header {
padding: $spacing-normal;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.menu-filter-section {
padding: $spacing-normal;
}
}
@media only screen and (max-width: 670px) {
@ -251,14 +208,14 @@
flex-direction: column;
}
.menu-list {
padding-left: 0;
padding-top: $spacing-normal;
}
.menu-filter {
#filter {
max-width: unset;
position: unset;
}
#menu-list {
padding-left: 0;
padding-top: $spacing-normal;
}
}
</style>