merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive updates

This commit is contained in:
shubhammehrotra.symfony@webkul.com 2020-01-22 21:23:20 +05:30
parent d48493225c
commit a826937b98
13 changed files with 524 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
packages/Webkul/Velocity/publishable/assets/css/velocity.css vendored
View File

@ -813,6 +813,16 @@
.review-page-container {
padding: 20px;
position: relative;
}
.review-page-container > div:first-child {
top: 40px;
position: -webkit-sticky;
position: sticky;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
}
.review-page-container .category-breadcrumb {
@ -908,28 +918,28 @@
margin: 20px 0;
}
.filters-container > div {
.filters-container .toolbar-wrapper > div {
margin: 0 20px 0 0;
display: inline-block;
}
.filters-container > div label {
.filters-container .toolbar-wrapper > div label {
font-weight: 500;
margin-right: 10px;
}
.filters-container > div select {
.filters-container .toolbar-wrapper > div select {
cursor: pointer;
padding: 6px 16px;
color: rgba(0, 0, 0, 0.83);
background-color: white;
}
.filters-container > div:not(:first-child) {
.filters-container .toolbar-wrapper > div:not(:first-child) {
vertical-align: super;
}
.filters-container .limiter::after {
.filters-container .toolbar-wrapper .limiter::after {
margin-left: 10px;
content: 'per page';
}
@ -2468,7 +2478,9 @@
}
.vc-header {
z-index: 99;
z-index: 10;
margin: 0 !important;
padding: 0 !important;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.23);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.23);
}
@ -3086,7 +3098,7 @@ body::after {
max-width: 1300px !important;
}
.remove-padding-margin {
.remove-padding-margin, .category-page-wrapper {
width: 100% !important;
margin: 0px !important;
padding: 0px !important;
@ -4249,7 +4261,7 @@ button[disabled] {
.product-detail .thumb-list {
left: 15px;
z-index: 1000;
z-index: 99;
padding: 0px;
margin-top: 10px;
position: relative;
@ -4429,16 +4441,13 @@ button[disabled] {
display: block !important;
}
.main-content-wrapper {
position: relative;
z-index: 100;
margin-bottom: 25px;
background-color: #FFFFFF;
}
.main-content-wrapper .vc-header {
top: 0;
margin: 0;
padding: 0;
z-index: 100;
position: -webkit-sticky;
position: sticky;
background-color: #FFFFFF;
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
@ -4463,13 +4472,13 @@ button[disabled] {
position: relative;
}
.main-content-wrapper .vc-header > div.vc-small-screen .right-vc-header {
display: table;
text-align: right;
height: 50px;
}
.main-content-wrapper .vc-header > div.vc-small-screen .right-vc-header > a {
width: 24px;
margin-top: 13px;
margin-right: 10px;
display: table-cell;
vertical-align: middle;
}
#top {
display: none;
@ -4527,9 +4536,6 @@ button[disabled] {
.popular-categories-container .popular-category-wrapper .card .category-image {
height: 100%;
}
.main-content-wrapper {
margin-bottom: 25px;
}
.slides-container .VueCarousel .VueCarousel-pagination button {
width: 5px !important;
height: 5px !important;
@ -4585,7 +4591,14 @@ button[disabled] {
.product-detail .customer-rating > .row > div {
margin-bottom: 30px;
}
.review-page-container > div {
padding: 0;
}
.review-page-container > div:not(:last-child) {
position: relative;
margin-bottom: 60px;
}
.customer-rating > .row > div:not(:last-child) {
margin-bottom: 20px;
}
.nav-container {
@ -4657,9 +4670,50 @@ button[disabled] {
float: right;
padding-right: 15px;
}
.nav-container .wrapper ul li .nested-category {
border-top: unset;
}
.nav-container .wrapper ul li .nested-category li:last-child {
padding-bottom: 0;
}
.nav-container .drawer-section {
padding: 15px;
}
.auth-content > .container {
margin: 0;
width: 100%;
}
.category-page-wrapper .layered-filter-wrapper {
display: none;
}
.category-page-wrapper .category-container {
margin: 0;
padding-left: 0px !important;
padding-right: 0px !important;
}
.category-page-wrapper .category-container > div {
padding: 0 10px;
}
.category-page-wrapper .category-container .filters-container {
padding: 0;
}
.category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4 {
margin: 0;
padding: 0;
display: table;
text-align: center;
}
.category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4 i {
left: 20px;
position: relative;
}
.category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4 * {
display: table-cell;
vertical-align: middle;
}
.category-page-wrapper .category-container .filters-container .toolbar-wrapper > div.col-4:nth-of-type(2) i {
left: 15px;
}
}
/* fallback */

298
packages/Webkul/Velocity/publishable/assets/js/velocity.js vendored
View File

@ -1069,8 +1069,8 @@ module.exports = Cancel;
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(12);
__webpack_require__(69);
module.exports = __webpack_require__(70);
__webpack_require__(72);
module.exports = __webpack_require__(73);
/***/ }),
@ -1111,12 +1111,12 @@ __WEBPACK_IMPORTED_MODULE_0_vue___default.a.component("vue-slider", __webpack_re
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('modal-component', __webpack_require__(45));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('quantity-btn', __webpack_require__(48));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('sidebar-component', __webpack_require__(51));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component("wishlist-component", __webpack_require__(73));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('carousel-component', __webpack_require__(54));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('child-sidebar', __webpack_require__(57));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('card-list-content', __webpack_require__(60));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('card-list-header', __webpack_require__(63));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('magnify-image', __webpack_require__(66));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component("wishlist-component", __webpack_require__(54));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('carousel-component', __webpack_require__(57));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('child-sidebar', __webpack_require__(60));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('card-list-content', __webpack_require__(63));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('card-list-header', __webpack_require__(66));
__WEBPACK_IMPORTED_MODULE_0_vue___default.a.component('magnify-image', __webpack_require__(69));
window.eventBus = new __WEBPACK_IMPORTED_MODULE_0_vue___default.a();
@ -35783,6 +35783,121 @@ var Component = normalizeComponent(
__vue_scopeId__,
__vue_module_identifier__
)
Component.options.__file = "src/Resources/assets/js/UI/components/wishlist.vue"
/* hot reload */
if (false) {(function () {
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-ac965700", Component.options)
} else {
hotAPI.reload("data-v-ac965700", Component.options)
}
module.hot.dispose(function (data) {
disposed = true
})
})()}
module.exports = Component.exports
/***/ }),
/* 55 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
//
//
//
//
//
//
//
//
//
//
/* harmony default export */ __webpack_exports__["default"] = ({
props: ['active'],
data: function data() {
return {
isActive: this.active
};
}
});
/***/ }),
/* 56 */
/***/ (function(module, exports, __webpack_require__) {
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"i",
{
class: "material-icons",
on: {
mouseover: function($event) {
_vm.isActive ? (_vm.isActive = !_vm.isActive) : ""
},
mouseout: function($event) {
_vm.active !== "" && !_vm.isActive
? (_vm.isActive = !_vm.isActive)
: ""
}
}
},
[
_vm._v(
"\n\n " +
_vm._s(_vm.isActive ? "favorite_border" : "favorite") +
"\n"
)
]
)
}
var staticRenderFns = []
render._withStripped = true
module.exports = { render: render, staticRenderFns: staticRenderFns }
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-hot-reload-api") .rerender("data-v-ac965700", module.exports)
}
}
/***/ }),
/* 57 */
/***/ (function(module, exports, __webpack_require__) {
var disposed = false
var normalizeComponent = __webpack_require__(1)
/* script */
var __vue_script__ = __webpack_require__(58)
/* template */
var __vue_template__ = __webpack_require__(59)
/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = null
/* scopeId */
var __vue_scopeId__ = null
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
__vue_script__,
__vue_template__,
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
)
Component.options.__file = "src/Resources/assets/js/UI/components/carousel.vue"
/* hot reload */
@ -35805,7 +35920,7 @@ module.exports = Component.exports
/***/ }),
/* 55 */
/* 58 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@ -35847,7 +35962,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
});
/***/ }),
/* 56 */
/* 59 */
/***/ (function(module, exports, __webpack_require__) {
var render = function() {
@ -35890,15 +36005,15 @@ if (false) {
}
/***/ }),
/* 57 */
/* 60 */
/***/ (function(module, exports, __webpack_require__) {
var disposed = false
var normalizeComponent = __webpack_require__(1)
/* script */
var __vue_script__ = __webpack_require__(58)
var __vue_script__ = __webpack_require__(61)
/* template */
var __vue_template__ = __webpack_require__(59)
var __vue_template__ = __webpack_require__(62)
/* template functional */
var __vue_template_functional__ = false
/* styles */
@ -35937,7 +36052,7 @@ module.exports = Component.exports
/***/ }),
/* 58 */
/* 61 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@ -35967,7 +36082,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
});
/***/ }),
/* 59 */
/* 62 */
/***/ (function(module, exports, __webpack_require__) {
var render = function() {
@ -36013,15 +36128,15 @@ if (false) {
}
/***/ }),
/* 60 */
/* 63 */
/***/ (function(module, exports, __webpack_require__) {
var disposed = false
var normalizeComponent = __webpack_require__(1)
/* script */
var __vue_script__ = __webpack_require__(61)
var __vue_script__ = __webpack_require__(64)
/* template */
var __vue_template__ = __webpack_require__(62)
var __vue_template__ = __webpack_require__(65)
/* template functional */
var __vue_template_functional__ = false
/* styles */
@ -36060,7 +36175,7 @@ module.exports = Component.exports
/***/ }),
/* 61 */
/* 64 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@ -36182,7 +36297,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
});
/***/ }),
/* 62 */
/* 65 */
/***/ (function(module, exports, __webpack_require__) {
var render = function() {
@ -36371,15 +36486,15 @@ if (false) {
}
/***/ }),
/* 63 */
/* 66 */
/***/ (function(module, exports, __webpack_require__) {
var disposed = false
var normalizeComponent = __webpack_require__(1)
/* script */
var __vue_script__ = __webpack_require__(64)
var __vue_script__ = __webpack_require__(67)
/* template */
var __vue_template__ = __webpack_require__(65)
var __vue_template__ = __webpack_require__(68)
/* template functional */
var __vue_template_functional__ = false
/* styles */
@ -36418,7 +36533,7 @@ module.exports = Component.exports
/***/ }),
/* 64 */
/* 67 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@ -36523,7 +36638,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
});
/***/ }),
/* 65 */
/* 68 */
/***/ (function(module, exports, __webpack_require__) {
var render = function() {
@ -36640,15 +36755,15 @@ if (false) {
}
/***/ }),
/* 66 */
/* 69 */
/***/ (function(module, exports, __webpack_require__) {
var disposed = false
var normalizeComponent = __webpack_require__(1)
/* script */
var __vue_script__ = __webpack_require__(67)
var __vue_script__ = __webpack_require__(70)
/* template */
var __vue_template__ = __webpack_require__(68)
var __vue_template__ = __webpack_require__(71)
/* template functional */
var __vue_template_functional__ = false
/* styles */
@ -36687,7 +36802,7 @@ module.exports = Component.exports
/***/ }),
/* 67 */
/* 70 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@ -36752,7 +36867,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
});
/***/ }),
/* 68 */
/* 71 */
/***/ (function(module, exports, __webpack_require__) {
var render = function() {
@ -36782,133 +36897,16 @@ if (false) {
}
/***/ }),
/* 69 */
/* 72 */
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ }),
/* 70 */
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ }),
/* 71 */,
/* 72 */,
/* 73 */
/***/ (function(module, exports, __webpack_require__) {
/***/ (function(module, exports) {
var disposed = false
var normalizeComponent = __webpack_require__(1)
/* script */
var __vue_script__ = __webpack_require__(74)
/* template */
var __vue_template__ = __webpack_require__(75)
/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = null
/* scopeId */
var __vue_scopeId__ = null
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
__vue_script__,
__vue_template__,
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
)
Component.options.__file = "src/Resources/assets/js/UI/components/wishlist.vue"
/* hot reload */
if (false) {(function () {
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-ac965700", Component.options)
} else {
hotAPI.reload("data-v-ac965700", Component.options)
}
module.hot.dispose(function (data) {
disposed = true
})
})()}
module.exports = Component.exports
/***/ }),
/* 74 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
//
//
//
//
//
//
//
//
//
//
/* harmony default export */ __webpack_exports__["default"] = ({
props: ['active'],
data: function data() {
return {
isActive: this.active
};
}
});
/***/ }),
/* 75 */
/***/ (function(module, exports, __webpack_require__) {
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"i",
{
class: "material-icons",
on: {
mouseover: function($event) {
_vm.isActive ? (_vm.isActive = !_vm.isActive) : ""
},
mouseout: function($event) {
_vm.active !== "" && !_vm.isActive
? (_vm.isActive = !_vm.isActive)
: ""
}
}
},
[
_vm._v(
"\n\n " +
_vm._s(_vm.isActive ? "favorite_border" : "favorite") +
"\n"
)
]
)
}
var staticRenderFns = []
render._withStripped = true
module.exports = { render: render, staticRenderFns: staticRenderFns }
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-hot-reload-api") .rerender("data-v-ac965700", module.exports)
}
}
// removed by extract-text-webpack-plugin
/***/ })
/******/ ]);

55
packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss vendored
View File

@ -1,5 +1,12 @@
.review-page-container {
padding: 20px;
position: relative;
> div:first-child {
top: 40px;
position: sticky;
height: max-content;
}
.category-breadcrumb {
margin-bottom: 30px;
@ -102,30 +109,32 @@
.filters-container {
margin: 20px 0;
> div {
margin: 0 20px 0 0;
display: inline-block;
.toolbar-wrapper {
> div {
margin: 0 20px 0 0;
display: inline-block;
label {
font-weight: 500;
margin-right: 10px;
label {
font-weight: 500;
margin-right: 10px;
}
select {
cursor: pointer;
padding: 6px 16px;
color: $font-color;
background-color: white;
}
}
select {
cursor: pointer;
padding: 6px 16px;
color: $font-color;
background-color: white;
> div:not(:first-child) {
vertical-align: super;
}
}
> div:not(:first-child) {
vertical-align: super;
}
.limiter::after {
margin-left: 10px;
content: 'per page';
.limiter::after {
margin-left: 10px;
content: 'per page';
}
}
}
@ -1814,7 +1823,9 @@
}
.vc-header {
z-index: 99;
z-index: 10;
margin: 0 !important;
padding: 0 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.16), 0 1px 3px rgba(0,0,0,0.23);
}
@ -1826,3 +1837,7 @@
.recetly-viewed-products-wrapper {
padding: 2px;
}
.category-page-wrapper {
@extend .remove-padding-margin;
}

99
packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss vendored
View File

@ -52,20 +52,24 @@
@media only screen and (max-width: 992px) {
$header-height: 50px;
.main-container-wrapper {
// position: relative;
}
.vc-small-screen {
display: block !important;
}
.main-content-wrapper {
position: relative;
// top: 0;
z-index: 100;
margin-bottom: 25px;
// position: sticky !important;
background-color: $white-color;
.vc-header {
top: 0;
margin: 0;
padding: 0;
z-index: 100;
position: sticky;
background-color: $white-color;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
> div {
@ -93,13 +97,13 @@
}
.right-vc-header {
display: table;
text-align: right;
height: $header-height;
> a {
width: 24px;
margin-top: 13px;
margin-right: 10px;
display: table-cell;
vertical-align: middle;
}
}
}
@ -204,10 +208,6 @@
}
}
.main-content-wrapper {
margin-bottom: 25px;
}
.slides-container {
.VueCarousel {
.VueCarousel-pagination {
@ -306,8 +306,21 @@
}
.review-page-container {
> div {
padding: 0;
}
> div:not(:last-child) {
margin-bottom: 20px;
position: relative;
margin-bottom: 60px;
}
}
.customer-rating {
> .row {
> div:not(:last-child) {
margin-bottom: 20px;
}
}
}
@ -389,6 +402,14 @@
float: right;
padding-right: 15px;
}
.nested-category {
border-top: unset;
li:last-child {
padding-bottom: 0;
}
}
}
}
}
@ -397,4 +418,56 @@
padding: 15px;
}
}
.auth-content {
> .container {
margin: 0;
width: 100%;
}
}
.category-page-wrapper {
.layered-filter-wrapper {
display: none;
}
.category-container {
margin: 0;
padding-left: 0px !important;
padding-right: 0px !important;
> div {
padding: 0 10px;
}
.filters-container {
padding: 0;
.toolbar-wrapper {
> div.col-4 {
margin: 0;
padding: 0;
display: table;
text-align: center;
i {
left: 20px;
position: relative;
}
* {
display: table-cell;
vertical-align: middle;
}
}
> div.col-4:nth-of-type(2) {
i {
left: 15px;
}
}
}
}
}
}
}

2
packages/Webkul/Velocity/src/Resources/assets/sass/components/product-view.scss vendored
View File

@ -168,7 +168,7 @@
.thumb-list {
left: 15px;
z-index: 1000;
z-index: 99;
padding: 0px;
margin-top: 10px;
position: relative;

68
packages/Webkul/Velocity/src/Resources/views/UI/particals.blade.php
View File

@ -159,7 +159,11 @@
@auth('customer')
{{ __('velocity::app.responsive.header.greeting', ['customer' => auth()->guard('customer')->user()->first_name]) }}
@endauth
<i class="material-icons pull-right" v-on:click="closeDrawer()">cancel</i>
<i
class="material-icons pull-right"
@click="closeDrawer()">
cancel
</i>
</span>
</div>
@ -185,7 +189,11 @@
:href="`${url}/${category['translations'][0].url_path}`">
<span>@{{ category.name }}</span>
</a>
<i class="rango-arrow-right" @click="toggleSubcategories(index, $event)"></i>
<i
class="rango-arrow-right"
@click="toggleSubcategories(index, $event)">
</i>
</li>
</ul>
</div>
@ -193,11 +201,55 @@
<div class="wrapper" v-else-if="subCategory">
<div class="drawer-section">
<i class="rango-arrow-left fs24 text-down-4" @click="toggleSubcategories('root')"></i>
<h4 class="display-inbl">@{{ subCategory.name }}</h4>
<i class="material-icons pull-right" @click="closeDrawer()">
cancel
</i>
</div>
<ul>
<li v-for="(subCategory, index) in subCategory.children">@{{ subCategory.name }}</li>
<ul type="none">
<li
:key="index"
v-for="(nestedSubCategory, index) in subCategory.children">
<div class="category-logo">
<img
class="category-icon"
v-if="nestedSubCategory.category_icon_path"
:src="`${url}/storage/${nestedSubCategory.category_icon_path}`" />
</div>
<a
class="unset"
:href="`${url}/${nestedSubCategory['translations'][0].url_path}`">
<span>@{{ nestedSubCategory.name }}</span>
</a>
<ul
type="none"
class="nested-category"
v-if="nestedSubCategory.children && nestedSubCategory.children.length > 0">
<li
:key="`index-${Math.random()}`"
v-for="(thirdLevelCategory, index) in nestedSubCategory.children">
<div class="category-logo">
<img
class="category-icon"
v-if="thirdLevelCategory.category_icon_path"
:src="`${url}/storage/${thirdLevelCategory.category_icon_path}`" />
</div>
<a
class="unset"
:href="`${url}/${nestedSubCategory['translations'][0].url_path}`">
<span>@{{ thirdLevelCategory.name }}</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
@ -208,7 +260,7 @@
<logo-component></logo-component>
</div>
<div class="row right-vc-header col-4">
<div class="right-vc-header col-4">
<a :href="`${url}/customer/account/wishlist`" class="unset">
<i class="material-icons">favorite_border</i>
</a>
@ -408,7 +460,7 @@
data: function () {
return {
'hamburger': true,
'hamburger': false,
'subCategory': null,
'isSearchbar': false,
'rootCategories': true,
@ -437,7 +489,9 @@
closeDrawer: function() {
$('.nav-container').hide();
this.hamburger = false;
this.rootCategories = true;
},
toggleSubcategories: function (index, event) {
@ -448,7 +502,7 @@
let categories = JSON.parse(this.categories);
this.rootCategories = false;
this.subCategory = categories[0];
this.subCategory = categories[index];
}
}
}

62
packages/Webkul/Velocity/src/Resources/views/UI/shared/subCategories-header.blade.php
View File

@ -1,62 +0,0 @@
@php
$category = app('Webkul\Category\Repositories\CategoryRepository');
$categoryData = $category->find($category_id);
$categoryNestedData = $category->getVisibleCategoryTree($category_id);
@endphp
<child-category></child-category>
<script type="text/x-template" id="child-category-template">
<i class="material-icons">chevron_right</i>
<h1>{{ $categoryData->name }}</h1>
@foreach($categoryNestedData as $index => $childrens)
<li>
{{ $childrens->name }}
@if($childrens->children && sizeof($childrens->children) > 0)
<i class="material-icons"
onclick="showOrHide()">
chevron_right
</i>
@endif
</li>
@endforeach
</script>
@push('scripts')
<script>
Vue.component('child-category', {
template: '#child-category-template',
data: function() {
return {
categoryName: ''
};
},
mounted: function() {
this.categoryName = "menswear";
},
created: function() {
},
methods: {
showOrHide: function(id) {
alert(id);
}
}
});
</script>
<script type=text/javascript>
function showOrHide() {
alert("showOrHide");
}
</script>
@endpush

5
packages/Webkul/Velocity/src/Resources/views/home/new-products.blade.php
View File

@ -62,8 +62,9 @@
</div>
@include ('shop::products.list.recently-viewed', [
'addClass' => 'col-3 new-products-recent',
'addClassWrapper' => 'scrollable max-height-350',
'quantity' => 3,
'addClass' => 'col-3 new-products-recent',
'addClassWrapper' => 'scrollable max-height-350',
])
</div>
@else

12
packages/Webkul/Velocity/src/Resources/views/products/index.blade.php
View File

@ -25,7 +25,7 @@
@endphp
@section('content-wrapper')
<section class="row col-12 velocity-divide-page">
<section class="row col-12 velocity-divide-page category-page-wrapper">
{!! view_render_event('bagisto.shop.productOrCategory.index.before', ['category' => $category]) !!}
@if (in_array($category->display_mode, [null, 'products_only', 'products_and_description']))
@ -34,7 +34,7 @@
<div class="category-container right">
<div class="row">
<div class="col-6">
<div class="col-12">
<h1 class="fw6 mb10">{{ $category->name }}</h1>
@if ($isDisplayMode && $products->count())
@ -46,13 +46,13 @@
@endif
</div>
<div class="col-6">
{{-- <div class="hero-image mb-35">
{{-- <div class="col-6">
<div class="hero-image mb-35">
@if (!is_null($category->image))
<img class="logo" src="{{ $category->image_url }}" />
@endif
</div> --}}
</div>
</div>
</div> --}}
</div>
@if ($products->count())

7
packages/Webkul/Velocity/src/Resources/views/products/list/recently-viewed.blade.php
View File

@ -4,6 +4,7 @@
<recently-viewed
add-class="{{ isset($addClass) ? $addClass : '' }}"
quantity="{{ isset($quantity) ? $quantity : null }}"
add-class-wrapper="{{ isset($addClassWrapper) ? $addClassWrapper : '' }}">
</recently-viewed>
@ -62,7 +63,7 @@
(() => {
Vue.component('recently-viewed', {
template: '#recently-viewed-template',
props: ['addClass', 'addClassWrapper'],
props: ['quantity', 'addClass', 'addClassWrapper'],
data: function () {
return {
@ -73,6 +74,10 @@
var slugs = JSON.parse(storedRecentlyViewed);
var updatedSlugs = {};
if (this.quantity) {
slugs = slugs.slice(0, this.quantity);
}
slugs.forEach(slug => {
updatedSlugs[slug] = {};
});

173
packages/Webkul/Velocity/src/Resources/views/products/list/toolbar.blade.php
View File

@ -1,79 +1,106 @@
@inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
{!! view_render_event('bagisto.shop.products.list.toolbar.before') !!}
<div class="view-mode">
@if (
! ($toolbarHelper->isModeActive('grid')
|| $toolbarHelper->isModeActive('list'))
)
<div class="rango-view-grid-container active">
<span class="rango-view-grid fs24"></span>
</div>
@else
@if ($toolbarHelper->isModeActive('grid'))
<div class="rango-view-grid-container active">
<span class="rango-view-grid fs24"></span>
</div>
@else
<div class="rango-view-grid-container">
<a href="{{ $toolbarHelper->getModeUrl('grid') }}" class="grid-view unset">
<span class="rango-view-grid fs24"></span>
</a>
</div>
@endif
@endif
@if ($toolbarHelper->isModeActive('list'))
<div class="rango-view-list-container active">
<span class="rango-view-list fs24"></span>
</div>
@else
<div class="rango-view-list-container">
<a
href="{{ $toolbarHelper->getModeUrl('list') }}"
class="list-view unset">
<span class="rango-view-list fs24"></span>
</a>
</div>
@endif
</div>
<div class="sorter">
<label>{{ __('shop::app.products.sort-by') }}</label>
<i class="icon fs16 cell rango-arrow-down select-icon-margin down-icon-position"></i>
<select class="selective-div border-normal" onchange="window.location.href = this.value">
@foreach ($toolbarHelper->getAvailableOrders() as $key => $order)
<option value="{{ $toolbarHelper->getOrderUrl($key) }}" {{ $toolbarHelper->isOrderCurrent($key) ? 'selected' : '' }}>
{{ __('shop::app.products.' . $order) }}
</option>
@endforeach
</select>
</div>
<div class="limiter">
<label>{{ __('shop::app.products.show') }}</label>
<i class="icon fs16 cell rango-arrow-down select-icon-show-margin down-icon-position"></i>
<select class="selective-div border-normal" onchange="window.location.href = this.value" style="width: 57px;">
@foreach ($toolbarHelper->getAvailableLimits() as $limit)
<option value="{{ $toolbarHelper->getLimitUrl($limit) }}" {{ $toolbarHelper->isLimitCurrent($limit) ? 'selected' : '' }}>
{{ $limit }}
</option>
@endforeach
</select>
</div>
<toolbar-component></toolbar-component>
{!! view_render_event('bagisto.shop.products.list.toolbar.after') !!}
@push('scripts')
<script type="text/x-template" id="toolbar-template">
<div class="toolbar-wrapper" v-if='!isMobile()'>
<div class="view-mode">
@if (
! ($toolbarHelper->isModeActive('grid')
|| $toolbarHelper->isModeActive('list'))
)
<div class="rango-view-grid-container active">
<span class="rango-view-grid fs24"></span>
</div>
@else
@if ($toolbarHelper->isModeActive('grid'))
<div class="rango-view-grid-container active">
<span class="rango-view-grid fs24"></span>
</div>
@else
<div class="rango-view-grid-container">
<a href="{{ $toolbarHelper->getModeUrl('grid') }}" class="grid-view unset">
<span class="rango-view-grid fs24"></span>
</a>
</div>
@endif
@endif
<div class="responsive-layred-filter mb-20">
{{-- <layered-navigation></layered-navigation> --}}
</div>
@if ($toolbarHelper->isModeActive('list'))
<div class="rango-view-list-container active">
<span class="rango-view-list fs24"></span>
</div>
@else
<div class="rango-view-list-container">
<a
href="{{ $toolbarHelper->getModeUrl('list') }}"
class="list-view unset">
<span class="rango-view-list fs24"></span>
</a>
</div>
@endif
</div>
<div class="sorter">
<label>{{ __('shop::app.products.sort-by') }}</label>
<i class="icon fs16 cell rango-arrow-down select-icon-margin down-icon-position"></i>
<select class="selective-div border-normal" onchange="window.location.href = this.value">
@foreach ($toolbarHelper->getAvailableOrders() as $key => $order)
<option value="{{ $toolbarHelper->getOrderUrl($key) }}" {{ $toolbarHelper->isOrderCurrent($key) ? 'selected' : '' }}>
{{ __('shop::app.products.' . $order) }}
</option>
@endforeach
</select>
</div>
<div class="limiter">
<label>{{ __('shop::app.products.show') }}</label>
<i class="icon fs16 cell rango-arrow-down select-icon-show-margin down-icon-position"></i>
<select class="selective-div border-normal" onchange="window.location.href = this.value" style="width: 57px;">
@foreach ($toolbarHelper->getAvailableLimits() as $limit)
<option value="{{ $toolbarHelper->getLimitUrl($limit) }}" {{ $toolbarHelper->isLimitCurrent($limit) ? 'selected' : '' }}>
{{ $limit }}
</option>
@endforeach
</select>
</div>
</div>
<div class="toolbar-wrapper row" v-else>
<div class="col-4">
<i class="material-icons">filter_list</i>
<span>Filter</span>
</div>
<div class="col-4">
<i class="material-icons">sort_by_alpha</i>
<span>Sort By</span>
</div>
<div class="col-4">
<i class="material-icons">view_module
</i>
<span>View</span>
</div>
</div>
</script>
<script type="text/javascript">
(() => {
Vue.component('toolbar-component', {
template: '#toolbar-template'
})
})()
</script>
@endpush

2
packages/Webkul/Velocity/src/Resources/views/products/reviews/index.blade.php
View File

@ -31,7 +31,7 @@
<div class="row review-page-container">
@include ('shop::products.view.small-view', ['product' => $product])
<div class="col-7 scrollable fs16">
<div class="col-lg-7 col-md-12 fs16">
<h2 class="full-width mb30">Rating and Reviews</h2>
@include ('shop::products.view.reviews')

6
packages/Webkul/Velocity/src/Resources/views/products/view/reviews.blade.php
View File

@ -90,13 +90,13 @@
@for ($i = 5; $i >= 1; $i--)
<div class="row">
<span class="col-lg-3 no-padding fs16 fw6">{{ $i }} Star</span>
<span class="col-3 no-padding fs16 fw6">{{ $i }} Star</span>
<div class="col-lg-7 rating-bar" title="{{ $percentageRatings[$i] }}%">
<div class="col-7 rating-bar" title="{{ $percentageRatings[$i] }}%">
<div style="width: {{ $percentageRatings[$i] }}%"></div>
</div>
<span class="col-lg-2 fs16">{{ $countRatings[$i] }}</span>
<span class="col-2 fs16">{{ $countRatings[$i] }}</span>
</div>
@endfor