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

responsive

This commit is contained in:
rahul shukla 2018-10-06 15:04:23 +05:30
parent 217f57abc0
commit c1d73dfb32
12 changed files with 663 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/Webkul/Shop/src/Resources/assets/js/app.js vendored
View File

@ -11,6 +11,8 @@ Vue.component("category-item", require("./components/category-item.vue"));
Vue.component("image-slider", require("./components/image-slider.vue"));
Vue.component("vue-slider", require("vue-slider-component"));
Vue.component("cart-dropdown", require("./components/cart-dropdown.vue"));
Vue.component("res-category-nav", require("./components/res-category-nav.vue"));
Vue.component("res-category-item", require("./components/res-category-item.vue"));
$(document).ready(function () {

4
packages/Webkul/Shop/src/Resources/assets/js/components/category-item.vue
View File

@ -12,21 +12,17 @@
</li>
</template>
<script>
// define the item component
export default {
props: {
item: Object,
url: String,
},
data(){
return {
items_count:0
};
},
computed: {
haveChildren() {
return this.item.children.length ? true : false;

4
packages/Webkul/Shop/src/Resources/assets/js/components/category-nav.vue
View File

@ -17,10 +17,8 @@
</template>
<script>
// define the item component
export default {
props: {
categories: {
type: [Array, String, Object],
@ -29,13 +27,11 @@ export default {
},
url: String
},
data(){
return {
items_count:0
};
},
computed: {
items () {
return JSON.parse(this.categories)

25
packages/Webkul/Shop/src/Resources/assets/js/components/res-category-item.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<li>
</li>
</template>
<script>
// define the item component
export default {
props: {
item: Object,
url: String,
},
data(){
return {
items_count:0
};
},
computed: {
haveChildren() {
console.log(this.item.name);
return this.item.children.length ? true : false;
}
}
}
</script>

41
packages/Webkul/Shop/src/Resources/assets/js/components/res-category-nav.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<ul class="nav">
<category-item
v-for="(item, index) in items"
:key="index"
:url="url"
:item="item"
:parent="index">
</category-item>
<li>
<img src="http://localhost/bagisto/public/vendor/webkul/shop/assets/images/offer-zone.svg"/>
<span>Offer Zone</span>
</li>
</ul>
</template>
<script>
// define the item component
export default {
props: {
categories: {
type: [Array, String, Object],
required: false,
default: () => ([])
},
url: String
},
data(){
return {
items_count:0
};
},
computed: {
items () {
return JSON.parse(this.categories)
}
},
}
</script>

131
packages/Webkul/Shop/src/Resources/assets/sass/app.scss vendored
View File

@ -213,8 +213,35 @@ section.slider-block {
margin-bottom: 21px;
user-select: none;
.search-suggestion {
.search-responsive {
display: none;
.search-content {
border-bottom: 1px solid #e8e8e8;
height: 48px;
.search {
width: 70%;
margin-left: 20px;
height: 30px;
border: none;
font-size: 16px;
position: absolute;
}
.right {
float: right;
}
.suggestion {
position: absolute;
margin-left:20px;
}
}
.search-content:first-child {
border-top: 1px solid #e8e8e8;
}
}
.header-top {
@ -497,6 +524,10 @@ section.slider-block {
margin-bottom: 1px;
}
.nav > li > a .icon{
display: none;
}
.nav > li:last-child {
display:flex; align-items:center;
border-radius: 0 0 4px 0;
@ -558,14 +589,109 @@ section.slider-block {
.nav li li:hover > a:first-child:nth-last-child(2):before {
right: 10px;
}
}
.responsive-nav {
height: 300px;
margin-top: 50px;
.nav a {
display:block;
color: $font-color;
text-decoration: none;
padding: 0.8em 0.3em 0.8em 0.5em;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
width: 50%;
}
.nav span {
display:block;
color: $font-color;
text-decoration: none;
padding: 0.8em 0.3em 0.8em 0.5em;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
float: right;
width: 50%;
}
.nav > li > a .icon{
display: none;
}
.nav > li:last-child {
display:flex; align-items:center;
border-radius: 0 0 4px 0;
float:none;
height: 45px;
img {
margin-right:6px;
}
}
.nav > li:last-child > a {
border-radius: 0 4px 0 0;
}
/* submenu positioning*/
.nav ul {
display: none;
white-space: nowrap;
border: 1px solid #B1B1B1;
background-color:white;
z-index: 1;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
background-color: red;
display: block;
}
.nav > li li:hover > ul {
left: 20%;
margin-left: 1px;
top: 48px;
background-color:red;
display: block;
}
}
}
@media all and (max-width: 720px) {
.header-bottom {
display: none !important;
}
// .header .header-bottom .nav > li {
// float: none;
// }
// .header .header-bottom .nav > li:last-child {
// float: none;
// }
// .header .header-bottom .nav > li li:hover > ul {
// left: 20%;
// margin-left: 1px;
// top: 45px;
// }
ul.search-container {
display: none !important;
}
@ -582,6 +708,9 @@ section.slider-block {
display: flex !important;
}
.responsive-nav {
display: none;
}
}
//footer responsive with out media query.

4
packages/Webkul/Shop/src/Resources/assets/sass/icons.scss vendored
View File

@ -13,8 +13,8 @@
.icon-menu-close {
background-image:URL('../images/icon-menu-close.svg');
width: 8px;
height: 8px;
width: 24px;
height: 24px;
margin-left:auto;
margin-bottom: 2px;
}

5
packages/Webkul/Shop/src/Resources/assets/sass/override.scss vendored
View File

@ -71,6 +71,10 @@ body {
//margin-top
.mt-5 {
margin-top: 5px;
}
.mt-10 {
margin-top: 10px;
}
@ -300,3 +304,4 @@ body {
float: none;
padding-right: 0px;
}

101
packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
View File

@ -247,18 +247,35 @@
</li>
</ul>
{{-- <li class="cart-box"><span class="icon cart-icon"></span></li> --}}
<li class="menu-box" ><span class="icon sortable-icon" id="sortable"></span></li>
<li class="menu-box" ><span class="icon sortable-icon" id="hammenu"></span></li>
</ul>
</div>
</div>
<div class="search-responsive">
<div class="search-content">
<i class="icon search-icon mt-10"></i>
<input class="search mt-5">
<i class="icon icon-menu-back right mt-10"></i>
</div>
<div class="search-content">
<i class="icon search-icon mt-10"></i>
<span class="suggestion mt-15">Designer sarees</span>
</div>
</div>
<div class="header-bottom" id="header-bottom">
@include('shop::layouts.header.nav-menu.navmenu')
</div>
<div class="responsive-nav">
<res-category-nav categories='@json($categories)' url="{{url()->to('/')}}"></res-category-nav>
</div>
{{-- @push('scripts')
</div>
@push('scripts')
<script>
@ -266,21 +283,22 @@
var hamMenu = document.getElementById("hammenu");
var search = document.getElementById("search");
var searchSuggestion = document.getElementsByClassName('search-suggestion')[0];
var headerBottom = document.getElementsByClassName('header-bottom')[0];
var nav= document.getElementsByClassName('nav-responsive')[0];
var sort = document.getElementById("sort");
var filter = document.getElementById("filter");
var searchResponsive = document.getElementsByClassName('search-responsive')[0];
var sortLimit = document.getElementsByClassName('reponsive-sorter-limiter')[0];
var layerFilter = document.getElementsByClassName('responsive-layred-filter')[0];
var navResponsive = document.getElementsByClassName('responsive-nav')[0];
search.addEventListener("click", header);
hamMenu.addEventListener("click", header);
window.addEventListener('scroll', function() {
if(window.pageYOffset > 70){
headerBottom.style.visibility = "hidden";
}else{
headerBottom.style.visibility = "visible";
if(sort && filter){
sort.addEventListener("click", sortFilter);
filter.addEventListener("click", sortFilter);
}
});
function header(){
@ -288,28 +306,57 @@
if(className === 'icon search-icon' ){
search.classList.remove("search-icon");
search.classList.add("cross-icon");
searchSuggestion.style.display = 'block';
document.body.style.overflow = 'hidden';
nav.style.display = 'none';
search.classList.add("icon-menu-close");
hamMenu.classList.remove("icon-menu-close");
hamMenu.classList.add("sortable-icon");
searchResponsive.style.display = 'block';
navResponsive.style.display = 'none';
}else if(className === 'icon sortable-icon'){
hamMenu.classList.remove("sortable-icon");
hamMenu.classList.add("cross-icon");
searchSuggestion.style.display = 'none';
nav.style.display = 'block';
document.body.style.overflow = 'hidden';
}else{
search.classList.remove("cross-icon");
hamMenu.classList.add("icon-menu-close");
search.classList.remove("icon-menu-close");
search.classList.add("search-icon");
hamMenu.classList.remove("cross-icon");
searchResponsive.style.display = 'none';
navResponsive.style.display = 'block';
}else{
search.classList.remove("icon-menu-close");
search.classList.add("search-icon");
hamMenu.classList.remove("icon-menu-close");
hamMenu.classList.add("sortable-icon");
searchSuggestion.style.display = 'none';
nav.style.display = 'none';
document.body.style.overflow = "scroll";
searchResponsive.style.display = 'none';
navResponsive.style.display = 'none';
}
}
function sortFilter(){
var className = document.getElementById(this.id).className;
if(className === 'icon sort-icon' ){
sort.classList.remove("sort-icon");
sort.classList.add("icon-menu-close");
filter.classList.remove("icon-menu-close");
filter.classList.add("filter-icon");
sortLimit.style.display ="flex";
sortLimit.style.justifyContent="space-between";
layerFilter.style.display ="none";
}else if(className === 'icon filter-icon'){
filter.classList.remove("filter-icon");
filter.classList.add("icon-menu-close");
sort.classList.remove("icon-menu-close");
sort.classList.add("sort-icon");
layerFilter.style.display ="block";
sortLimit.style.display ="none";
}else{
sort.classList.remove("icon-menu-close");
sort.classList.add("sort-icon");
filter.classList.remove("icon-menu-close");
filter.classList.add("filter-icon");
sortLimit.style.display ="none";
layerFilter.style.display ="none";
}
}
}
</script>
@endpush --}}
@endpush

43
packages/Webkul/Shop/src/Resources/views/products/index.blade.php
View File

@ -54,48 +54,5 @@
@stop
@push('scripts')
<script>
window.onload = function() {
var sort = document.getElementById("sort");
var filter = document.getElementById("filter");
var sortLimit = document.getElementsByClassName('reponsive-sorter-limiter')[0];
var layerFilter = document.getElementsByClassName('responsive-layred-filter')[0];
sort.addEventListener("click", sortFilter);
filter.addEventListener("click", sortFilter);
function sortFilter(){
var className = document.getElementById(this.id).className;
if(className === 'icon sort-icon' ){
sort.classList.remove("sort-icon");
sort.classList.add("cross-icon");
filter.classList.remove("cross-icon");
filter.classList.add("filter-icon");
sortLimit.style.display ="flex";
sortLimit.style.justifyContent="space-between";
layerFilter.style.display ="none";
}else if(className === 'icon filter-icon'){
filter.classList.remove("filter-icon");
filter.classList.add("cross-icon");
sort.classList.remove("cross-icon");
sort.classList.add("sort-icon");
layerFilter.style.display ="block";
sortLimit.style.display ="none";
}else{
sort.classList.remove("cross-icon");
sort.classList.add("sort-icon");
filter.classList.remove("cross-icon");
filter.classList.add("filter-icon");
sortLimit.style.display ="none";
layerFilter.style.display ="none";
}
}
}
</script>
@endpush

120
public/themes/default/assets/css/shop.css vendored
View File

@ -13,8 +13,8 @@
.icon-menu-close {
background-image: URL("../images/icon-menu-close.svg");
width: 8px;
height: 8px;
width: 24px;
height: 24px;
margin-left: auto;
margin-bottom: 2px;
}
@ -277,6 +277,10 @@ body {
margin-bottom: 90px;
}
.mt-5 {
margin-top: 5px;
}
.mt-10 {
margin-top: 10px;
}
@ -686,10 +690,37 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
user-select: none;
}
.header .search-suggestion {
.header .search-responsive {
display: none;
}
.header .search-responsive .search-content {
border-bottom: 1px solid #e8e8e8;
height: 48px;
}
.header .search-responsive .search-content .search {
width: 70%;
margin-left: 20px;
height: 30px;
border: none;
font-size: 16px;
position: absolute;
}
.header .search-responsive .search-content .right {
float: right;
}
.header .search-responsive .search-content .suggestion {
position: absolute;
margin-left: 20px;
}
.header .search-responsive .search-content:first-child {
border-top: 1px solid #e8e8e8;
}
.header .header-top {
margin-bottom: 16px;
display: -webkit-box;
@ -1033,6 +1064,10 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
margin-bottom: 1px;
}
.header .header-bottom .nav > li > a .icon {
display: none;
}
.header .header-bottom .nav > li:last-child {
display: -webkit-box;
display: -ms-flexbox;
@ -1098,6 +1133,82 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
right: 10px;
}
.header .responsive-nav {
height: 300px;
margin-top: 50px;
/* submenu positioning*/
}
.header .responsive-nav .nav a {
display: block;
color: #242424;
text-decoration: none;
padding: 0.8em 0.3em 0.8em 0.5em;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
width: 50%;
}
.header .responsive-nav .nav span {
display: block;
color: #242424;
text-decoration: none;
padding: 0.8em 0.3em 0.8em 0.5em;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
float: right;
width: 50%;
}
.header .responsive-nav .nav > li > a .icon {
display: none;
}
.header .responsive-nav .nav > li:last-child {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 0 0 4px 0;
float: none;
height: 45px;
}
.header .responsive-nav .nav > li:last-child img {
margin-right: 6px;
}
.header .responsive-nav .nav > li:last-child > a {
border-radius: 0 4px 0 0;
}
.header .responsive-nav .nav ul {
display: none;
white-space: nowrap;
border: 1px solid #B1B1B1;
background-color: white;
z-index: 1;
}
.header .responsive-nav .nav > li:hover > ul {
left: auto;
min-width: 100%;
background-color: red;
display: block;
}
.header .responsive-nav .nav > li li:hover > ul {
left: 20%;
margin-left: 1px;
top: 48px;
background-color: red;
display: block;
}
@media all and (max-width: 720px) {
.header-bottom {
display: none !important;
@ -1116,6 +1227,9 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
display: -ms-flexbox !important;
display: flex !important;
}
.responsive-nav {
display: none;
}
}
.footer {

257
public/themes/default/assets/js/shop.js vendored
View File

@ -1076,7 +1076,7 @@ module.exports = Cancel;
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(11);
module.exports = __webpack_require__(54);
module.exports = __webpack_require__(60);
/***/ }),
@ -1096,6 +1096,8 @@ Vue.component("category-item", __webpack_require__(39));
Vue.component("image-slider", __webpack_require__(42));
Vue.component("vue-slider", __webpack_require__(50));
Vue.component("cart-dropdown", __webpack_require__(51));
Vue.component("res-category-nav", __webpack_require__(54));
Vue.component("res-category-item", __webpack_require__(57));
$(document).ready(function () {
@ -30701,10 +30703,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
//
//
// define the item component
/* harmony default export */ __webpack_exports__["default"] = ({
props: {
categories: {
type: [Array, String, Object],
@ -30715,14 +30715,12 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
},
url: String
},
data: function data() {
return {
items_count: 0
};
},
computed: {
items: function items() {
return JSON.parse(this.categories);
@ -30847,22 +30845,18 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
//
//
// define the item component
/* harmony default export */ __webpack_exports__["default"] = ({
props: {
item: Object,
url: String
},
data: function data() {
return {
items_count: 0
};
},
computed: {
haveChildren: function haveChildren() {
return this.item.children.length ? true : false;
@ -31740,6 +31734,251 @@ if (false) {
/***/ }),
/* 54 */
/***/ (function(module, exports, __webpack_require__) {
var disposed = false
var normalizeComponent = __webpack_require__(1)
/* script */
var __vue_script__ = __webpack_require__(55)
/* template */
var __vue_template__ = __webpack_require__(56)
/* 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/components/res-category-nav.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-1555b7ad", Component.options)
} else {
hotAPI.reload("data-v-1555b7ad", 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 });
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
// define the item component
/* harmony default export */ __webpack_exports__["default"] = ({
props: {
categories: {
type: [Array, String, Object],
required: false,
default: function _default() {
return [];
}
},
url: String
},
data: function data() {
return {
items_count: 0
};
},
computed: {
items: function items() {
return JSON.parse(this.categories);
}
}
});
/***/ }),
/* 56 */
/***/ (function(module, exports, __webpack_require__) {
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"ul",
{ staticClass: "nav" },
[
_vm._l(_vm.items, function(item, index) {
return _c("category-item", {
key: index,
attrs: { url: _vm.url, item: item, parent: index }
})
}),
_vm._v(" "),
_vm._m(0)
],
2
)
}
var staticRenderFns = [
function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c("li", [
_c("img", {
attrs: {
src:
"http://localhost/bagisto/public/vendor/webkul/shop/assets/images/offer-zone.svg"
}
}),
_vm._v(" "),
_c("span", [_vm._v("Offer Zone")])
])
}
]
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-1555b7ad", 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/components/res-category-item.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-616674f9", Component.options)
} else {
hotAPI.reload("data-v-616674f9", Component.options)
}
module.hot.dispose(function (data) {
disposed = true
})
})()}
module.exports = Component.exports
/***/ }),
/* 58 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
//
//
//
//
//
// define the item component
/* harmony default export */ __webpack_exports__["default"] = ({
props: {
item: Object,
url: String
},
data: function data() {
return {
items_count: 0
};
},
computed: {
haveChildren: function haveChildren() {
return this.item.children.length ? true : false;
}
}
});
/***/ }),
/* 59 */
/***/ (function(module, exports, __webpack_require__) {
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c("li")
}
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-616674f9", module.exports)
}
}
/***/ }),
/* 60 */
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin