From f6ffa7b5266a54b7fb0fa4679a50f459af5e3245 Mon Sep 17 00:00:00 2001 From: "shubhammehrotra.symfony@webkul.com" Date: Mon, 6 Jan 2020 21:14:01 +0530 Subject: [PATCH] hot-categories, popular-categories, sidebar & other --- .../publishable/assets/css/velocity.css | 436 ++++++++++++------ .../publishable/assets/js/velocity.js | 303 ++++++++---- .../assets/js/UI/components/card-header.vue | 4 +- .../js/UI/components/content-header.vue | 26 +- .../assets/js/UI/components/sidebar.vue | 65 +-- .../Velocity/src/Resources/assets/js/app.js | 54 ++- .../src/Resources/assets/sass/_variables.scss | 2 + .../src/Resources/assets/sass/app.scss | 57 ++- .../Resources/assets/sass/components/app.scss | 77 +++- .../assets/sass/components/home.scss | 293 +++++++----- .../assets/sass/components/product-view.scss | 1 + .../assets/sass/components/shared.scss | 42 +- .../Velocity/src/Resources/lang/en/app.php | 12 +- .../Resources/views/UI/particals.blade.php | 2 +- .../views/admin/meta-info/meta-data.blade.php | 20 +- .../views/checkout/onepage.blade.php | 1 - .../advertisement-four.blade.php | 63 +++ .../advertisement-three.blade.php | 28 +- .../advertisement-two.blade.php | 38 +- .../Resources/views/home/category.blade.php | 4 +- .../views/home/featured-products.blade.php | 11 +- .../views/home/hot-categories.blade.php | 38 ++ .../home/in-progress/hot-categories.blade.php | 121 ----- .../in-progress/popular-categories.blade.php | 96 ---- .../views/home/new-products.blade.php | 6 +- .../views/home/popular-categories.blade.php | 36 ++ .../views/layouts/header/index.blade.php | 107 +++-- .../Resources/views/layouts/master.blade.php | 17 +- .../layouts/top-nav/login-section.blade.php | 177 ++++--- .../Resources/views/products/index.blade.php | 4 +- .../list/layered-navigation.blade.php | 12 +- 31 files changed, 1247 insertions(+), 906 deletions(-) create mode 100644 packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-four.blade.php create mode 100644 packages/Webkul/Velocity/src/Resources/views/home/hot-categories.blade.php delete mode 100644 packages/Webkul/Velocity/src/Resources/views/home/in-progress/hot-categories.blade.php delete mode 100644 packages/Webkul/Velocity/src/Resources/views/home/in-progress/popular-categories.blade.php create mode 100644 packages/Webkul/Velocity/src/Resources/views/home/popular-categories.blade.php diff --git a/packages/Webkul/Velocity/publishable/assets/css/velocity.css b/packages/Webkul/Velocity/publishable/assets/css/velocity.css index 75f7a7513..2780b4d56 100644 --- a/packages/Webkul/Velocity/publishable/assets/css/velocity.css +++ b/packages/Webkul/Velocity/publishable/assets/css/velocity.css @@ -1200,8 +1200,8 @@ .mini-cart-container #mini-cart .badge { border-radius: 50%; - top: -15px; - left: -10px; + top: -7px; + left: -13px; padding: 4px; min-width: 20px; position: relative; @@ -1209,8 +1209,8 @@ } .mini-cart-container #mini-cart .cart-text { - top: -2px; - left: -10px; + top: 0px; + left: -14px; position: relative; } @@ -1821,18 +1821,50 @@ background-color: #141516; } -#sidebar .category-content { +.sidebar { + width: 230px; +} + +.sidebar .category-content { margin-bottom: 10px; } -#sidebar .category-content .category-title { +.sidebar .category-content .category-title { top: -1px; font-weight: 600; position: relative; } -#sidebar li:hover { - color: #4D7EA8; +.sidebar .category-content .rango-arrow-right { + top: 4px; + float: right; + position: relative; +} + +.sidebar .category-content .category-icon { + width: 18px; + height: 18px; + padding-right: 5px; + display: inline-block; +} + +.sidebar .category-content .category-icon img { + width: 100%; + height: 100%; + vertical-align: text-top; +} + +.sidebar li:hover > a > span { + color: #28557B; +} + +.sidebar .sub-categories { + display: none; +} + +#sidebar-level-0 { + display: none; + border-top: 1px solid #CCCCCC; } .grouped-product-container .grouped-product-list { @@ -1880,12 +1912,13 @@ } .grouped-product-container .grouped-product-list ul li .qty .control-group { - max-width: initial; + height: 45px; width: auto; - text-align: center; - margin-bottom: 0; border-top: 0; padding-top: 0; + margin-bottom: 0; + max-width: initial; + text-align: center; } .grouped-product-container .grouped-product-list ul li .qty .control-group label { @@ -1893,12 +1926,15 @@ } .grouped-product-container .grouped-product-list ul li .qty .control-group .control { - height: 38px; width: 60px; text-align: center; line-height: 38px; } +.grouped-product-container .grouped-product-list ul li .qty .control-group > * { + height: 100%; +} + .bundle-options-wrapper .bundle-option-list { padding: 15px 0; border-top: solid 1px rgba(162, 162, 162, 0.2); @@ -2040,6 +2076,7 @@ } .category-container { + margin-left: 15px; padding: 40px 15px !important; } @@ -2118,11 +2155,6 @@ position: absolute; } -.slides-container .VueCarousel-pagination button { - width: 15px !important; - height: 15px !important; -} - .slides-container .VueCarousel-pagination button:focus, .slides-container .VueCarousel-pagination button:active { outline: none; @@ -2130,6 +2162,10 @@ box-shadow: none; } +.slides-container .VueCarousel-dot--active { + background-color: #26A37C !important; +} + .filter-attributes-item { margin-bottom: 10px; border-bottom: 1px solid #CCCCCC; @@ -2162,6 +2198,10 @@ margin-left: 7px; } +.layered-filter-wrapper { + padding: 42px 10px 0 10px; +} + /* @author Shubham Mehrotra */ body { overflow-x: hidden; @@ -2188,8 +2228,10 @@ body .container-margin { } .category-list-container { - padding-left: 0px; - display: inline-block; + z-index: 10; + padding: 0px !important; + background: #FFFFFF; + position: absolute !important; -webkit-box-shadow: inset -1px 0 0 0 #ECECEC; box-shadow: inset -1px 0 0 0 #ECECEC; } @@ -2213,16 +2255,18 @@ body .container-margin { background: #ECECEC; } +.category-list-container .sub-category-container { + position: relative; +} + .category-list-container .sub-categories { - top: 0px; + top: -50px; left: 100%; - width: 240px; z-index: 100; - height: 100%; - display: none; - padding: 10px 20px; + padding-top: 10px; position: absolute; background: #FFFFFF; + border-left: 1px solid #CCCCCC; -webkit-box-shadow: inset -1px 0 0 0 #ECECEC; box-shadow: inset -1px 0 0 0 #ECECEC; } @@ -2240,7 +2284,7 @@ body .container-margin { } .banner-icon { - height: 450px; + height: 525px; display: inline-block; } @@ -2354,72 +2398,58 @@ header #search-form > *:focus { font-size: 14px; } -/* advertisement-one */ -.advertisement-one .offers-lt-panel { - height: 400px; - background-image: url("../images/big-sale-banner.png"); -} - -.advertisement-one .offers-ct-panel > .row { +/* advertisements */ +.advertisement-four-container .offers-ct-panel > .row { padding: 0 10px; } -.advertisement-one .offers-ct-panel .offers-ct-top { - height: 145px; - background-image: url("../images/seasons.png"); +.advertisement-four-container .offers-ct-panel .offers-ct-top { + height: 180px; } -.advertisement-one .offers-ct-panel .offers-ct-bottom { - height: 245px; - background-image: url("../images/deals.png"); +.advertisement-four-container .offers-ct-panel .offers-ct-bottom { + height: 220px; } -.advertisement-one .offers-rt-panel { - height: 400px; - background-image: url("../images/kids.png"); +.advertisement-four-container > .row:first-child { + padding: 0 10px !important; } -/* advertisement-one */ -/* advertisement-two */ -.advertisement-two-container { - max-width: 100%; +.advertisement-four-container .col-4:nth-child(2) { + padding-left: 10px; + padding-right: 10px; } -.advertisement-two-container .ad-2-lt { - height: 450px; - background-position: top; - background-image: url("../images/headphones.png"); +.advertisement-four-container img { + width: 100%; + height: 100%; + max-height: 425px; } -.advertisement-two-container .ad-2-rt .top-container > div { - height: 185px; - background-position: top; - background-image: url("../images/watch.png"); +.advertisement-four-container img:nth-of-type(1), +.advertisement-four-container img:last-child { + padding: 0; } -.advertisement-two-container .ad-2-rt .bottom-container > div { - bottom: 0px; - height: 185px; - position: absolute; - background-position: top; - background-image: url("../images/kids-2.png"); +.advertisement-two-container img { + width: 100%; + height: 500px; } -/* advertisement-two */ -/* advertisement-three */ -.advertisement-three-container .ad-3-lt { - height: 400px; - background-size: 100% 100%; - background-image: url("../images/toster.png"); +.advertisement-three-container .col-6:first-child img { + height: 100%; } -.advertisement-three-container .ad-3-rt { - height: 400px; - background-size: 100% 100%; - background-image: url("../images/trimmer.png"); +.advertisement-three-container .top-container img, +.advertisement-three-container .bottom-container img { + height: 225px; } -/* advertisement-three */ +.advertisement-three-container .bottom-container { + padding-top: 15px; +} + +/* advertisements */ .recetly-viewed-items { padding-left: 10px !important; padding: 0px !important; @@ -2509,11 +2539,11 @@ header #search-form > *:focus { /* category with custom option */ /* hot & popular categories */ -.hot-categories-container .col-sm-3 { - padding-top: 15px; +.hot-categories-container .hot-category-wrapper { + padding: 15px 10px 15px 0; } -.hot-categories-container .col-sm-3 .card { +.hot-categories-container .hot-category-wrapper .card { height: 100%; padding: 20px; border: none; @@ -2521,6 +2551,29 @@ header #search-form > *:focus { -webkit-box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14); } +.hot-categories-container .hot-category-wrapper .velocity-divide-page .left { + width: 30px; + height: 30px; + margin-left: 10px; +} + +.hot-categories-container .hot-category-wrapper .velocity-divide-page .left img { + width: 100%; + height: 100%; +} + +.hot-categories-container .hot-category-wrapper .velocity-divide-page .right { + padding-left: 50px !important; +} + +.hot-categories-container .hot-category-wrapper:nth-last-child(2) { + padding: 15px 0 15px 0px; +} + +.hot-categories-container .hot-category-wrapper:last-child { + padding: 15px 0 15px 10px; +} + .hot-categories-container ul, .popular-categories-container ul { line-height: 2.5rem; @@ -2531,17 +2584,50 @@ header #search-form > *:focus { font-size: 16px; } -.popular-categories-container .card-image { +.popular-categories-container .popular-category-wrapper { + padding: 0 8px; +} + +.popular-categories-container .popular-category-wrapper .card { + height: 100%; + border: none; + box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14); + -webkit-box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14); +} + +.popular-categories-container .popular-category-wrapper .card .category-image { + height: 180px; +} + +.popular-categories-container .popular-category-wrapper .card .category-image img { + width: 100%; + height: 100%; +} + +.popular-categories-container .popular-category-wrapper .card-image { height: 180px; background-size: 100% 100%; background-image: url("../images/man.png"); } -.popular-categories-container .card-description { +.popular-categories-container .popular-category-wrapper .card-description { padding: 25px; margin-top: 15px; } +.popular-categories-container .popular-category-wrapper:first-child { + padding-left: 0; +} + +.popular-categories-container .popular-category-wrapper:nth-last-child(2) { + padding-right: 0px; +} + +.popular-categories-container .popular-category-wrapper:last-child { + padding-left: 16px; + padding-right: 0px; +} + /* hot & popular categories */ /* Customer Reviews */ .reviews-container .card { @@ -2594,9 +2680,56 @@ header #search-form > *:focus { } .categories-sidebar-container .main-category { + padding: 8px 15px; border-bottom: 1px solid #CCCCCC; } +.categories-sidebar-container .content-list { + margin: 0; + width: 100%; + text-align: left; + list-style: none; + position: relative; + vertical-align: top; + display: inline-block; +} + +.categories-sidebar-container .content-list ul { + width: 100%; + height: 100%; + padding-left: 10px; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + background-color: #4D7EA8; +} + +.categories-sidebar-container .content-list ul li a { + display: block; + cursor: pointer; + font-size: 16px; + color: #FFFFFF; + letter-spacing: 0; + position: relative; + text-decoration: none; + padding: 8px 20px 8px 5px; +} + +.velocity-divide-page { + position: relative; +} + +.velocity-divide-page .left { + z-index: 1; + width: 230px; + position: absolute; +} + +.velocity-divide-page .right { + width: 100%; + padding-left: 230px !important; +} + .container-right { width: 100%; display: inline-block; @@ -2606,37 +2739,6 @@ header #search-form > *:focus { width: 100%; } -.content-list { - margin: 0; - width: 100%; - padding: 5px; - height: auto; - min-height: 40px; - text-align: left; - list-style: none; - position: relative; - vertical-align: top; - display: inline-block; - background-color: #4D7EA8; -} - -.content-list ul { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.content-list ul li a { - display: block; - cursor: pointer; - font-size: 16px; - color: #FFFFFF; - letter-spacing: 0; - position: relative; - text-decoration: none; - padding: 5px 20px 5px 5px; -} - .home-base { margin-bottom: 60px; } @@ -2757,7 +2859,7 @@ body::after { } .container { - max-width: 1440px !important; + max-width: 1300px !important; } .remove-padding-margin { @@ -2861,14 +2963,14 @@ body::after { display: block; } -.footer .footer-content > .row .footer-rt-content .row .bg-image, .footer .footer-content > .row .footer-rt-content .row .advertisement-one .offers-ct-panel .offers-ct-top, .advertisement-one .offers-ct-panel .footer .footer-content > .row .footer-rt-content .row .offers-ct-top, .footer .footer-content > .row .footer-rt-content .row .advertisement-one .offers-ct-panel .offers-ct-bottom, .advertisement-one .offers-ct-panel .footer .footer-content > .row .footer-rt-content .row .offers-ct-bottom, .footer .footer-content > .row .footer-rt-content .row .advertisement-one .offers-rt-panel, .advertisement-one .footer .footer-content > .row .footer-rt-content .row .offers-rt-panel, .footer .footer-content > .row .footer-rt-content .row .advertisement-two-container .ad-2-lt, .advertisement-two-container .footer .footer-content > .row .footer-rt-content .row .ad-2-lt, .footer .footer-content > .row .footer-rt-content .row .advertisement-two-container .ad-2-rt .top-container > div, .advertisement-two-container .ad-2-rt .footer .footer-content > .row .footer-rt-content .row .top-container > div, .footer .footer-content > .row .footer-rt-content .row .advertisement-two-container .ad-2-rt .bottom-container > div, .advertisement-two-container .ad-2-rt .footer .footer-content > .row .footer-rt-content .row .bottom-container > div, .footer .footer-content > .row .footer-rt-content .row .small-card-container .product-image, .small-card-container .footer .footer-content > .row .footer-rt-content .row .product-image { +.footer .footer-content > .row .footer-rt-content .row .bg-image, .footer .footer-content > .row .footer-rt-content .row .small-card-container .product-image, .small-card-container .footer .footer-content > .row .footer-rt-content .row .product-image { width: 42px; height: 30px; display: inline-block; background-position: left; } -.footer .footer-content > .row .footer-rt-content .row .bg-image:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .advertisement-one .offers-ct-panel .offers-ct-top:not(:last-child), .advertisement-one .offers-ct-panel .footer .footer-content > .row .footer-rt-content .row .offers-ct-top:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .advertisement-one .offers-ct-panel .offers-ct-bottom:not(:last-child), .advertisement-one .offers-ct-panel .footer .footer-content > .row .footer-rt-content .row .offers-ct-bottom:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .advertisement-one .offers-rt-panel:not(:last-child), .advertisement-one .footer .footer-content > .row .footer-rt-content .row .offers-rt-panel:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .advertisement-two-container .ad-2-lt:not(:last-child), .advertisement-two-container .footer .footer-content > .row .footer-rt-content .row .ad-2-lt:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .advertisement-two-container .ad-2-rt .top-container > div:not(:last-child), .advertisement-two-container .ad-2-rt .footer .footer-content > .row .footer-rt-content .row .top-container > div:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .advertisement-two-container .ad-2-rt .bottom-container > div:not(:last-child), .advertisement-two-container .ad-2-rt .footer .footer-content > .row .footer-rt-content .row .bottom-container > div:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .small-card-container .product-image:not(:last-child), .small-card-container .footer .footer-content > .row .footer-rt-content .row .product-image:not(:last-child) { +.footer .footer-content > .row .footer-rt-content .row .bg-image:not(:last-child), .footer .footer-content > .row .footer-rt-content .row .small-card-container .product-image:not(:last-child), .small-card-container .footer .footer-content > .row .footer-rt-content .row .product-image:not(:last-child) { margin-right: 3px; } @@ -3034,14 +3136,14 @@ body::after { padding-top: 20px !important; } -.pt42 { - padding-top: 42px !important; -} - .pl0 { padding-left: 0px !important; } +.pl5 { + padding-left: 5px !important; +} + .pl15 { padding-left: 15px !important; } @@ -3066,6 +3168,10 @@ body::after { padding-right: 0px !important; } +.pr5 { + padding-right: 5px !important; +} + .pr15 { padding-right: 15px !important; } @@ -3158,7 +3264,7 @@ body::after { margin-left: 10px !important; } -.ml15, .advertisement-two-container .ad-2-rt { +.ml15 { margin-left: 15px !important; } @@ -3167,11 +3273,11 @@ body::after { -webkit-filter: blur(4px); } -.no-margin, .advertisement-two-container .ad-2-rt .top-container > div, .advertisement-two-container .ad-2-rt .bottom-container > div { +.no-margin { margin: 0px !important; } -.no-padding, .advertisement-one .offers-ct-panel .offers-ct-top, .advertisement-one .offers-ct-panel .offers-ct-bottom, .advertisement-two-container .ad-2-lt, .product-view .left .main-product-image, .product-view .right h3, .product-detail .right h3 { +.no-padding, .product-view .left .main-product-image, .product-view .right h3, .product-detail .right h3 { padding: 0px !important; } @@ -3222,7 +3328,7 @@ body::after { height: 100%; } -.full-back-size, .card-product-image-container .background-image-group, .advertisement-one .offers-lt-panel, .advertisement-one .offers-ct-panel .offers-ct-top, .advertisement-one .offers-ct-panel .offers-ct-bottom, .advertisement-one .offers-rt-panel, .advertisement-two-container .ad-2-lt, .advertisement-two-container .ad-2-rt .top-container > div, .advertisement-two-container .ad-2-rt .bottom-container > div { +.full-back-size, .card-product-image-container .background-image-group { background-size: 100% 100% !important; } @@ -3234,7 +3340,7 @@ body::after { border: none !important; } -.back-pos-rt, .advertisement-two-container .ad-2-rt .top-container > div, .advertisement-two-container .ad-2-rt .bottom-container > div { +.back-pos-rt { background-position: right; } @@ -3276,7 +3382,7 @@ body::after { background-color: #26A37C; } -.bg-image, .advertisement-one .offers-ct-panel .offers-ct-top, .advertisement-one .offers-ct-panel .offers-ct-bottom, .advertisement-one .offers-rt-panel, .advertisement-two-container .ad-2-lt, .advertisement-two-container .ad-2-rt .top-container > div, .advertisement-two-container .ad-2-rt .bottom-container > div, .small-card-container .product-image { +.bg-image, .small-card-container .product-image { width: 100%; background-size: contain; background-repeat: no-repeat; @@ -3295,7 +3401,7 @@ body::after { user-select: none; } -.unselectable * { +.unselectable *, #top #account .welcome-content * { -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; @@ -3391,8 +3497,8 @@ body::after { float: left; width: 30%; height: 270px; - max-width: 150px; - max-height: 150px; + max-width: 200px; + max-height: 200px; background: #f2f2f2; } @@ -3504,11 +3610,6 @@ body::after { box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14); } -.text-up { - top: -6px; - position: relative; -} - .text-down-3 { top: 3px; position: relative; @@ -3519,6 +3620,11 @@ body::after { position: relative; } +.text-up-1 { + top: -1px; + position: relative; +} + .text-up-4 { top: -4px; position: relative; @@ -3613,6 +3719,10 @@ a.default { cursor: pointer; } +.VueCarousel .VueCarousel-slide:nth-of-type(1) #product-card-new { + margin-left: 0px; +} + .navigation-hide .VueCarousel-navigation { display: none; } @@ -3659,12 +3769,25 @@ button[disabled] { } .select-icon { - top: 1px; + top: 5px; left: -7px; font-size: 16px; position: relative; } +.normal-text { + color: #141516; +} + +.display-table { + display: table; +} + +.display-table .cell { + display: table-cell; + vertical-align: middle; +} + .product-view { padding: 20px; } @@ -3851,13 +3974,14 @@ button[disabled] { .product-detail .thumb-list .thumb-frame { padding: 1px; + border: 1px solid transparent; } .product-detail .thumb-list .thumb-frame.active { border: 1px solid #26A37C; } -.product-detail .thumb-list .thumb-frame > .bg-image, .product-detail .thumb-list .advertisement-one .offers-ct-panel .thumb-frame > .offers-ct-top, .advertisement-one .offers-ct-panel .product-detail .thumb-list .thumb-frame > .offers-ct-top, .product-detail .thumb-list .advertisement-one .offers-ct-panel .thumb-frame > .offers-ct-bottom, .advertisement-one .offers-ct-panel .product-detail .thumb-list .thumb-frame > .offers-ct-bottom, .product-detail .thumb-list .advertisement-one .thumb-frame > .offers-rt-panel, .advertisement-one .product-detail .thumb-list .thumb-frame > .offers-rt-panel, .product-detail .thumb-list .advertisement-two-container .thumb-frame > .ad-2-lt, .advertisement-two-container .product-detail .thumb-list .thumb-frame > .ad-2-lt, .product-detail .thumb-list .advertisement-two-container .ad-2-rt .top-container.thumb-frame > div, .advertisement-two-container .ad-2-rt .product-detail .thumb-list .top-container.thumb-frame > div, .product-detail .thumb-list .advertisement-two-container .ad-2-rt .bottom-container.thumb-frame > div, .advertisement-two-container .ad-2-rt .product-detail .thumb-list .bottom-container.thumb-frame > div, .product-detail .thumb-list .small-card-container .thumb-frame > .product-image, .small-card-container .product-detail .thumb-list .thumb-frame > .product-image { +.product-detail .thumb-list .thumb-frame > .bg-image, .product-detail .thumb-list .small-card-container .thumb-frame > .product-image, .small-card-container .product-detail .thumb-list .thumb-frame > .product-image { width: 100%; height: 110px; background-size: 100% 100%; @@ -11960,13 +12084,12 @@ body { } #top { - border-bottom: 1px solid #CCCCCC; - padding: 4px 0px 3px 0; - margin: 0; - min-height: 40px; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.24); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.24); + margin: 0; + min-height: 32px; color: rgba(0, 0, 0, 0.83); + border-bottom: 1px solid #CCCCCC; } #top .btn, #top .quantity button, .quantity #top button, @@ -12023,7 +12146,6 @@ body { #top .btn-link { color: rgba(0, 0, 0, 0.83); - padding: 0px 5px 6px 5px; } #top .dropdown-menu-large { @@ -12038,14 +12160,43 @@ body { color: rgba(0, 0, 0, 0.83); } -#top .welcome-content { - display: inline-block; - position: relative; - width: 140px; - padding-top: 2px; +#top #account { + font-size: 14px; +} + +#top #account .select-icon { + top: 0px; + left: -3px; +} + +#top #account .welcome-content { + width: 150px; + cursor: pointer; text-align: right; } +#top #account + .account-modal { + height: 135px; +} + +#top > div:last-child { + height: 32px; +} + +#top > div:last-child * { + height: 100%; +} + +#top > div:last-child .welcome-content { + float: right; + display: table; +} + +#top > div:last-child .welcome-content * { + display: table-cell; + vertical-align: middle; +} + .dropdown-menu { border-top: 3px solid #269c77; border-radius: 0px; @@ -12069,7 +12220,7 @@ body { color: #FFFFFF; } -.no-padding, .advertisement-one .offers-ct-panel .offers-ct-top, .advertisement-one .offers-ct-panel .offers-ct-bottom, .advertisement-two-container .ad-2-lt, .product-view .left .main-product-image, .product-view .right h3, .product-detail .right h3 { +.no-padding, .product-view .left .main-product-image, .product-view .right h3, .product-detail .right h3 { padding: 0px !important; } @@ -12152,7 +12303,6 @@ body { } header .logo { - width: 200px; height: 50px; } @@ -12176,7 +12326,7 @@ header #search-form .selectdiv { header #search-form .selectdiv:before { top: 13px; - left: 160px; + right: 72%; z-index: 10; font-size: 16px; content: "\E906"; @@ -12420,7 +12570,7 @@ header .dropdown-menu-large .dropdown-footer .checkout-link { background: #FFF; left: 0; width: 100%; - height: 450px; + height: 525px; } #nav-menu .navbar .category-dropdown li.category-list { diff --git a/packages/Webkul/Velocity/publishable/assets/js/velocity.js b/packages/Webkul/Velocity/publishable/assets/js/velocity.js index c2e25a015..abb07d21b 100644 --- a/packages/Webkul/Velocity/publishable/assets/js/velocity.js +++ b/packages/Webkul/Velocity/publishable/assets/js/velocity.js @@ -1127,24 +1127,53 @@ $(document).ready(function () { route ? window.location.href = route : ''; }, - toggleSidebar: function toggleSidebar() { - var rightBarContainer = document.getElementById('home-right-bar-container'); - var categoryListContainer = document.getElementById('sidebar'); + toggleSidebar: function toggleSidebar(id, _ref, type) { + var target = _ref.target; - if (categoryListContainer) { - categoryListContainer.classList.toggle('hide'); - } + if (Array.from(target.classList)[0] == "main-category" || Array.from(target.parentElement.classList)[0] == "main-category") { + var sidebar = $('#sidebar-level-' + id); + if (sidebar && sidebar.length > 0) { + if (type == "mouseover") { + this.show(sidebar); + } else if (type == "mouseout") { + this.hide(sidebar); + } + } + } else if (Array.from(target.classList)[0] == "category" || Array.from(target.classList)[0] == "category-icon" || Array.from(target.classList)[0] == "category-title" || Array.from(target.classList)[0] == "category-content" || Array.from(target.classList)[0] == "rango-arrow-right") { + var parentItem = target.closest('li'); + if (target.id || parentItem.id.match('category-')) { + var subCategories = $('#' + (target.id ? target.id : parentItem.id) + ' .sub-categories'); - if (rightBarContainer.className.search('col-10') > -1) { - rightBarContainer.className = rightBarContainer.className.replace('col-10', 'col-12'); - } else { - rightBarContainer.className = rightBarContainer.className.replace('col-12', 'col-10'); + if (subCategories && subCategories.length > 0) { + var subCategories1 = Array.from(subCategories)[0]; + subCategories1 = $(subCategories1); + + if (type == "mouseover") { + // this.show(subCategories1); + } else if (type == "mouseout") { + this.hide(subCategories1); + } + } + } } }, - toggleButtonDisability: function toggleButtonDisability(_ref) { - var event = _ref.event, - actionType = _ref.actionType; + show: function show(element) { + element.show(); + element.mouseleave(function (_ref2) { + var target = _ref2.target; + + $(target.closest('.sidebar')).hide(); + }); + }, + + hide: function hide(element) { + element.hide(); + }, + + toggleButtonDisability: function toggleButtonDisability(_ref3) { + var event = _ref3.event, + actionType = _ref3.actionType; var button = event.target.querySelector('button[type=submit]'); @@ -35492,9 +35521,24 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); // // // +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// /* harmony default export */ __webpack_exports__["default"] = ({ - props: ['url', 'addClass', 'categories', 'mainSidebar', 'categoryCount'], + props: ['id', 'url', 'addClass', 'categories', 'mainSidebar', 'categoryCount'], data: function data() { var slicedCategories = this.categories; @@ -35509,16 +35553,14 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); }; }, - mounted: function mounted() { - var checkLocale = window.location.href.slice(0, (this.url + '/?locale=').length); - var checkCurrency = window.location.href.slice(0, (this.url + '/?currency=').length); - - if (checkLocale == this.url + '/?locale=' || checkCurrency == this.url + '/?currency=') {} else if (window.location.href !== this.url + '/' && this.mainSidebar || this.categories && this.categories.length == 0) { - this.toggleSidebar(); - } - }, - methods: { + remainBar: function remainBar(id) { + var sidebar = $('#' + id); + if (sidebar && sidebar.length > 0) { + sidebar.show(); + } + }, + hover: function hover(index, actionType) { var category = this.categories[index]; @@ -35564,8 +35606,13 @@ var render = function() { ? _c( "nav", { - class: "" + (_vm.addClass ? _vm.addClass : ""), - attrs: { id: "sidebar" } + class: "sidebar " + (_vm.addClass ? _vm.addClass : ""), + attrs: { id: _vm.id }, + on: { + mouseover: function($event) { + return _vm.remainBar(_vm.id) + } + } }, [ _c( @@ -35576,8 +35623,16 @@ var render = function() { "li", { key: index, - staticClass: "category-content", - attrs: { id: "category-" + category.id } + staticClass: "category-content cursor-pointer", + attrs: { id: "category-" + category.id }, + on: { + mouseout: function($event) { + return _vm.toggleSidebar(_vm.id, $event, "mouseout") + }, + mouseover: function($event) { + return _vm.toggleSidebar(_vm.id, $event, "mouseover") + } + } }, [ _c( @@ -35587,26 +35642,57 @@ var render = function() { class: category.children.length > 0 ? "fw6" : "", attrs: { href: _vm.url + "/" + category["translations"][0].slug - }, - on: { - mouseover: function($event) { - return _vm.hover(index, "mouseover") - }, - mouseleave: function($event) { - return _vm.hover(index, "mouseleave") - } } }, [ + _c( + "div", + { + staticClass: "category-icon", + on: { + mouseout: function($event) { + return _vm.toggleSidebar( + _vm.id, + $event, + "mouseout" + ) + }, + mouseover: function($event) { + return _vm.toggleSidebar( + _vm.id, + $event, + "mouseover" + ) + } + } + }, + [ + category.image + ? _c("img", { + attrs: { + src: _vm.url + "/storage/" + category.image + } + }) + : _vm._e() + ] + ), + _vm._v(" "), _c("span", { staticClass: "category-title" }, [ _vm._v(_vm._s(category["name"])) ]), _vm._v(" "), _c("i", { - staticClass: "angle-right-icon", + staticClass: "rango-arrow-right pr15", on: { - click: function($event) { - return _vm.toggleSubCategory(index) + mouseout: function($event) { + return _vm.toggleSidebar(_vm.id, $event, "mouseout") + }, + mouseover: function($event) { + return _vm.toggleSidebar( + _vm.id, + $event, + "mouseover" + ) } } }) @@ -35614,19 +35700,22 @@ var render = function() { ), _vm._v(" "), category.children.length && category.children.length > 0 - ? _c( - "div", - { staticClass: "sub-categories" }, - [ - _c("sidebar-component", { - attrs: { - url: _vm.url, - categories: category.children - } - }) - ], - 1 - ) + ? _c("div", { staticClass: "sub-category-container" }, [ + _c( + "div", + { staticClass: "sub-categories" }, + [ + _c("sidebar-component", { + attrs: { + url: _vm.url, + id: "sidebar-level-" + Math.random(), + categories: category.children + } + }) + ], + 1 + ) + ]) : _vm._e() ] ) @@ -36488,16 +36577,16 @@ var render = function() { ] : _vm._e(), _vm._v(" "), - !(_vm.viewAll == "false" || _vm.viewAll == "") + !(_vm.viewAll == "false" || _vm.viewAll == "") && _vm.viewAll ? [ _c("div", { staticClass: "mr15" }, [ _c( "a", { - staticClass: "default", + staticClass: "remove-decoration normal-text", attrs: { href: _vm.viewAll, - title: "View all " + _vm.headerHeading + title: "View all " + _vm.headerHeading + " products" } }, [ @@ -36751,6 +36840,12 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); // // // +// +// +// +// +// +// /* harmony default export */ __webpack_exports__["default"] = ({ props: ['heading', 'headerContent', 'isEnabled'] @@ -36764,50 +36859,64 @@ var render = function() { var _vm = this var _h = _vm.$createElement var _c = _vm._self._c || _h - return _c("div", { staticClass: "row col-12 remove-padding-margin" }, [ - _c("div", { staticClass: "main-category fs20 pt10 col-2 unselectable" }, [ - _c("i", { - class: - "rango-view-list " + - (_vm.isEnabled == "0" ? "" : "cursor-pointer") + - " align-vertical-top", - on: { - click: function($event) { - _vm.isEnabled == "0" ? "" : _vm.toggleSidebar() - } - } - }), - _vm._v(" "), - _c("span", { - staticClass: "text-up", - domProps: { textContent: _vm._s(_vm.heading) } - }) - ]), - _vm._v(" "), - _c("div", { staticClass: "content-list row no-margin col-10" }, [ + return _c( + "div", + { staticClass: "row velocity-divide-page remove-padding-margin" }, + [ _c( - "ul", - { staticClass: "no-margin", attrs: { type: "none" } }, - _vm._l(_vm.headerContent, function(content, index) { - return _c("li", { key: index }, [ - content["content_type"] == "link" - ? _c("a", { - attrs: { - href: content["page_link"], - target: content["link_target"] ? "_blank" : "_self" - }, - domProps: { textContent: _vm._s(content.title) } - }) - : _c("a", { - attrs: { href: "#" }, - domProps: { textContent: _vm._s(content.title) } - }) - ]) - }), - 0 - ) - ]) - ]) + "div", + { + staticClass: + "main-category fs16 unselectable fw6 cursor-pointer left", + on: { + mouseout: function($event) { + return _vm.toggleSidebar("0", $event, "mouseout") + }, + mouseover: function($event) { + return _vm.toggleSidebar("0", $event, "mouseover") + } + } + }, + [ + _c("i", { class: "rango-view-list text-down-4 align-vertical-top" }), + _vm._v(" "), + _c("span", { + staticClass: "pl5", + domProps: { textContent: _vm._s(_vm.heading) }, + on: { + mouseover: function($event) { + return _vm.toggleSidebar("0", $event, "mouseover") + } + } + }) + ] + ), + _vm._v(" "), + _c("div", { staticClass: "content-list right" }, [ + _c( + "ul", + { staticClass: "no-margin", attrs: { type: "none" } }, + _vm._l(_vm.headerContent, function(content, index) { + return _c("li", { key: index }, [ + content["content_type"] == "link" + ? _c("a", { + attrs: { + href: content["page_link"], + target: content["link_target"] ? "_blank" : "_self" + }, + domProps: { textContent: _vm._s(content.title) } + }) + : _c("a", { + attrs: { href: "#" }, + domProps: { textContent: _vm._s(content.title) } + }) + ]) + }), + 0 + ) + ]) + ] + ) } var staticRenderFns = [] render._withStripped = true diff --git a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/card-header.vue b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/card-header.vue index ef46c3a23..7714b6860 100644 --- a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/card-header.vue +++ b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/card-header.vue @@ -39,9 +39,9 @@ -