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

src/App.vue

@@ -62,6 +62,10 @@ h1 {
     color: #3a3a3a;
 }
 
+a {
+    color: brown;
+}
+
 .light {
     font-weight: 200;
 }

src/assets/search.svg

@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48px" height="48px"><path d="M 13.261719 14.867188 L 15.742188 17.347656 C 15.363281 18.070313 15.324219 18.789063 15.722656 19.1875 L 20.25 23.714844 C 20.820313 24.285156 22.0625 23.972656 23.015625 23.015625 C 23.972656 22.058594 24.285156 20.820313 23.714844 20.25 L 19.191406 15.722656 C 18.789063 15.324219 18.070313 15.363281 17.347656 15.738281 L 14.867188 13.261719 Z M 8.5 0 C 3.804688 0 0 3.804688 0 8.5 C 0 13.195313 3.804688 17 8.5 17 C 13.195313 17 17 13.195313 17 8.5 C 17 3.804688 13.195313 0 8.5 0 Z M 8.5 15 C 4.910156 15 2 12.089844 2 8.5 C 2 4.910156 4.910156 2 8.5 2 C 12.089844 2 15 4.910156 15 8.5 C 15 12.089844 12.089844 15 8.5 15 Z"/></svg>

src/components/Card.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="card" v-on:click='expanded=!expanded'>
+    <div v-if="item.name.toLowerCase().includes(query.toLowerCase())" class="card" v-on:click='expanded=!expanded'>
         <h4>{{ item.name }}</h4>
         <p>{{ item.mainIng }}</p>
         <p v-if=expanded class="light">{{ item.ing }}</p>
@@ -20,7 +20,8 @@
 export default {
     name: "Card",
     props: {
-        item: Object
+        item: Object,
+        query: String
     },
     data() {
         return {

src/views/Contact.vue

@@ -1,21 +1,65 @@
 <template>
-    <div>
-        Телефон: 642-06-38; e-mail: info@fvolchek.ru 
+    <div class="main">
+        <div class="side-col">
+            <h2>Свяжитесь с нами</h2>
+            642-06-38<br />
+            <a href="mailto:info@fvolchek.ru">info@fvolchek.ru</a><br />
 
-        ОТДЕЛ ПЕРСОНАЛА:
-        e-mail: hr@fvolchek.com 
+            <h2>Отдел персонала</h2>
+            <a href="mailto:hr@fvolchek.ru">hr@fvolchek.com</a><br />
 
-        ХОТИТЕ КУПИТЬ НАШУ ПРОДУКЦИЮ ОПТОМ:
-        e-mail: sales-b2b@fvolchek.com 
+            <h2>Хотите купить нашу продукцию оптом?</h2>
+            <a href="mailto:sales-b2b@fvolchek.ru">sales-b2b@fvolchek.com</a><br />
 
-        ПРЕДЛОЖИТЕ НАМ:
-        Товары и услуги: zakupki@fvolchek.com 
-        Предложения по аренде помещений: arenda@fvolchek.com 
+            <h2>Предложите нам</h2>
+            Товары и услуги: <a href="mailto:zakupki@fvolchek.ru">zakupki@fvolchek.com</a><br />
+            Предложения по аренде помещений: <a href="mailto:arenda@fvolchek.ru">arenda@fvolchek.com</a><br />
 
-        ЗАДАТЬ ВОПРОС:
-        e-mail: info@fvolchek.ru 
-
-        ПО ЛЮБЫМ ВОПРОСАМ: 
-        e-mail: flv@fvolchek.ru, Филипп Вольчек
+            <h2>По любым вопросам</h2>
+            Филипп Вольчек<br />
+            <a href="mailto:flv@fvolchek.ru">flv@fvolchek.ru</a>
+        </div>
     </div>
-</template>
+</template>
+
+<script>
+export default {
+    name: "Contact",
+}
+</script>
+
+<style scoped>
+.main {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 70px;
+    padding-left: 100px;
+}
+
+h2 {
+    font-family: 'Playfair Display', serif;
+    font-weight: 500;
+}
+
+.side-col {
+    text-align: left;
+    color: #3a3a3a;
+}
+
+img {
+    width: 40%;
+    height: auto;
+    margin: 30px;
+    border: rgb(253, 253, 253) solid;
+    border-radius: 100%;
+    border-width: 8px;
+    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.4));
+}
+
+@media screen and (max-width: 1024px) {
+    .main {
+        padding-left: 10vw;
+    }
+}
+</style>

src/views/Goods.vue

@@ -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 {