anatolykopyl/bakery
1
0
Fork 0
mirror of https://github.com/anatolykopyl/bakery.git synced 2026-03-26 21:14:26 +00:00
Code Issues Projects Releases Wiki Activity

Поиск по ассортименту

Browse Source
This commit is contained in:
Anatoly Kopyl
2020-08-05 02:10:37 +03:00
parent a64fa39e0b
commit 6d2a2a3032
7 changed files with 170 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
src/views/Goods.vue
View File

@@ -1,87 +1,59 @@
<template>
<div class="goods">
<a id="top"></a>
<a class="jump-to-top" href="#top"><img src="@/assets/down.png"></a>
<div id="sneakpeek">
<a href="#pastry">
<img src="@/assets/pastry-tab.png">
<h4>Кондитерские изделия</h4>
</a>
<a href="#singles">
<img src="@/assets/singles-tab.png">
<h4>Мелкоштучные изделия</h4>
</a>
<a href="#pies">
<img src="@/assets/pies-tab.png">
<h4>Пироги</h4>
</a>
<a href="#bread">
<img src="@/assets/bread-tab.png">
<h4>Хлеба и багеты</h4>
</a>
<a href="#drinks">
<img src="@/assets/drinks-tab.png">
<h4>Напитки</h4>
</a>
<a class="jump-to-top" href="#router-view"><img src="@/assets/down.png"></a>
<div id="menu">
<div class="buttons">
<a href="#pastry">
<img src="@/assets/pastry-tab.png">
<h4>Кондитерские изделия</h4>
</a>
<a href="#singles">
<img src="@/assets/singles-tab.png">
<h4>Мелкоштучные изделия</h4>
</a>
<a href="#pies">
<img src="@/assets/pies-tab.png">
<h4>Пироги</h4>
</a>
<a href="#bread">
<img src="@/assets/bread-tab.png">
<h4>Хлеба и багеты</h4>
</a>
<a href="#drinks">
<img src="@/assets/drinks-tab.png">
<h4>Напитки</h4>
</a>
</div>
<input type="text" placeholder="Поиск..." v-model="query"/>
</div>
<h2 id="pastry">Кондитерские изделия:</h2>
<div class="category">
<div class="col">
<Card v-for="item in itemsSubset(1, ['Кондитерские изделия', 'Леденцы', 'Печенье'])" v-bind:key=item.nameEng :item=item />
</div>
<div class="col">
<Card v-for="item in itemsSubset(2, ['Кондитерские изделия', 'Леденцы', 'Печенье'])" v-bind:key=item.nameEng :item=item />
</div>
<div class="col">
<Card v-for="item in itemsSubset(3, ['Кондитерские изделия', 'Леденцы', 'Печенье'])" v-bind:key=item.nameEng :item=item />
<h2 v-if="categoryLength(['Кондитерские изделия', 'Леденцы', 'Печенье'])" id="pastry">Кондитерские изделия:</h2>
<div v-if="categoryLength(['Кондитерские изделия', 'Леденцы', 'Печенье'])" class="category">
<div v-for="n in 3" v-bind:key=n class="col">
<Card v-for="item in itemsSubset(n, ['Кондитерские изделия', 'Леденцы', 'Печенье'])" v-bind:key=item.nameEng :item=item :query=query />
</div>
</div>
<h2 id="singles">Мелкоштучные изделия:</h2>
<div class="category">
<div class="col">
<Card v-for="item in itemsSubset(1, 'Мелкоштучные изделия')" v-bind:key=item.nameEng :item=item />
</div>
<div class="col">
<Card v-for="item in itemsSubset(2, 'Мелкоштучные изделия')" v-bind:key=item.nameEng :item=item />
</div>
<div class="col">
<Card v-for="item in itemsSubset(3, 'Мелкоштучные изделия')" v-bind:key=item.nameEng :item=item />
<h2 v-if="categoryLength('Мелкоштучные изделия')" id="singles">Мелкоштучные изделия:</h2>
<div v-if="categoryLength('Мелкоштучные изделия')" class="category">
<div v-for="n in 3" v-bind:key=n class="col">
<Card v-for="item in itemsSubset(n, 'Мелкоштучные изделия')" v-bind:key=item.nameEng :item=item :query=query />
</div>
</div>
<h2 id="pies">Пироги:</h2>
<div class="category">
<div class="col">
<Card v-for="item in itemsSubset(1, 'Пироги')" v-bind:key=item.nameEng :item=item />
</div>
<div class="col">
<Card v-for="item in itemsSubset(2, 'Пироги')" v-bind:key=item.nameEng :item=item />
</div>
<div class="col">
<Card v-for="item in itemsSubset(3, 'Пироги')" v-bind:key=item.nameEng :item=item />
<h2 v-if="categoryLength('Пироги')" id="pies">Пироги:</h2>
<div v-if="categoryLength('Пироги')" class="category">
<div v-for="n in 3" v-bind:key=n class="col">
<Card v-for="item in itemsSubset(n, 'Пироги')" v-bind:key=item.nameEng :item=item :query=query />
</div>
</div>
<h2 id="bread">Хлеба и багеты:</h2>
<div class="category">
<div class="col">
<Card v-for="item in itemsSubset(1, ['Хлеба, багеты', 'Сухарики'])" v-bind:key=item.nameEng :item=item />
</div>
<div class="col">
<Card v-for="item in itemsSubset(2, ['Хлеба, багеты', 'Сухарики'])" v-bind:key=item.nameEng :item=item />
</div>
<div class="col">
<Card v-for="item in itemsSubset(3, ['Хлеба, багеты', 'Сухарики'])" v-bind:key=item.nameEng :item=item />
<h2 v-if="categoryLength(['Хлеба, багеты', 'Сухарики'])" id="bread">Хлеба и багеты:</h2>
<div v-if="categoryLength(['Хлеба, багеты', 'Сухарики'])" class="category">
<div v-for="n in 3" v-bind:key=n class="col">
<Card v-for="item in itemsSubset(n, ['Хлеба, багеты', 'Сухарики'])" v-bind:key=item.nameEng :item=item :query=query />
</div>
</div>
<h2 id="drinks">Напитки:</h2>
<div class="category">
<div class="col">
<Card v-for="item in itemsSubset(1, 'Напитки')" v-bind:key=item.nameEng :item=item />
</div>
<div class="col">
<Card v-for="item in itemsSubset(2, 'Напитки')" v-bind:key=item.nameEng :item=item />
</div>
<div class="col">
<Card v-for="item in itemsSubset(3, 'Напитки')" v-bind:key=item.nameEng :item=item />
<h2 v-if="categoryLength('Напитки')" id="drinks">Напитки:</h2>
<div v-if="categoryLength('Напитки')" class="category">
<div v-for="n in 3" v-bind:key=n class="col">
<Card v-for="item in itemsSubset(n, 'Напитки')" v-bind:key=item.nameEng :item=item :query=query />
</div>
</div>
</div>
@@ -98,19 +70,58 @@ export default {
},
data() {
return {
items: items
items: items,
query: ''
}
},
methods: {
itemsSubset: function(col, category) {
return this.items.filter((v, i) => (i % 3 === col-1) && category.includes(v.category));
},
categoryLength: function(category) {
let cropped = this.items.filter((v) => category.includes(v.category));
let result = cropped.filter((v) => v.name.toLowerCase().includes(this.query.toLowerCase()));
return result.length;
}
}
}
</script>
<style scoped>
#sneakpeek {
#menu {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
padding-top: 80px;
padding-bottom: 40px;
margin-bottom: 60px;
}
#menu input {
color: #b4a89c;
background-color: #F8F3E7;
font-size: 16px;
font-weight: 700;
text-align: center;
padding: 12px;
width: 40em;
border: none;
border-bottom: 2px solid #F8F3E7;
border-radius: 6px;
background-image: url("../assets/search.svg");
background-repeat: no-repeat;
background-position: center left;
background-size: 2em;
background-position-x: 20px;
}
#menu input:focus {
outline: none;
border-bottom: 2px solid #b4a89c;
color: #3a3a3a;
}
.buttons {
max-width: 100%;
display: flex;
flex-wrap: wrap;
@@ -118,33 +129,28 @@ export default {
justify-content: space-evenly;
padding-left: 10%;
padding-right: 10%;
margin-bottom: 60px;
padding-top: 80px;
padding-bottom: 80px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
margin-bottom: 30px;
}
#sneakpeek h4 {
.buttons h4 {
font-family: 'Playfair Display', serif;
font-size: 17px;
font-weight: 100;
color: #3a3a3a;
}
#sneakpeek a {
.buttons a {
width: 204.8px;
transition: transform .2s;
cursor: pointer;
text-decoration: none;
}
#sneakpeek a:hover {
.buttons a:hover {
transform: scale(1.05);
}
#sneakpeek img {
.buttons img {
width: 70%;
border: rgb(253, 253, 253) solid;
border-radius: 100%;
@@ -195,16 +201,23 @@ h2::before {
}
@media screen and (max-width: 1024px) {
#sneakpeek {
#menu {
padding-top: 4vh;
padding-bottom: 4vh;
}
#menu input {
width: 85%;
}
.buttons {
padding: 0px;
padding-top: 2vh;
}
.category {
display: inline-block;
padding: 0px;
padding-left: 5vh;
padding-right: 5vh;
width: 90%;
}
.col {