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

nav-responsive

This commit is contained in:
rahul shukla 2018-10-08 13:46:17 +05:30
parent 79a4c85a1a 05a4f84882
commit e887b27e7d
9 changed files with 389 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,11 @@
<li>
<a :href="this.item['translations'][0].slug">{{ this.item['translations'][0].name }}&emsp;<i class="icon dropdown-right-icon"
v-if="haveChildren && item.parent_id != null"></i></a>
<ul v-if="haveChildren">
<i :class="[show ? 'icon arrow-down-icon mt-15' : 'icon dropdown-right-icon mt-15']"
v-if="haveChildren || item.parent_id == null" @click="showOrHide"></i>
<ul v-if="haveChildren && show">
<category-item
v-for="(child, index) in item.children"
:key="index"
@ -12,25 +16,35 @@
</li>
</template>
<script>
// define the item component
export default {
props: {
item: Object,
url: String,
},
data(){
return {
items_count:0
items_count:0,
show: false,
};
},
mounted: function() {
if(window.innerWidth > 770){
this.show = true;
}
},
computed: {
haveChildren() {
return this.item.children.length ? true : false;
}
},
methods: {
showOrHide: function() {
this.show = !this.show;
}
}
}
</script>
</script>

6
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,17 +27,15 @@ export default {
},
url: String
},
data(){
return {
items_count:0
};
},
computed: {
items () {
return JSON.parse(this.categories)
}
},
}
</script>
</script>

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

@ -213,10 +213,6 @@ section.slider-block {
margin-bottom: 21px;
user-select: none;
.search-suggestion {
display: none;
}
.header-top {
margin-bottom: 16px;
display: flex;
@ -421,7 +417,6 @@ section.slider-block {
}
}
}
ul.right-responsive {
display: none;
@ -478,6 +473,10 @@ section.slider-block {
position: relative;
}
.nav li > .icon{
display: none;
}
.nav {
vertical-align: top;
display: inline-block;
@ -498,6 +497,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;
@ -560,9 +563,45 @@ section.slider-block {
right: 10px;
}
}
.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;
}
}
.responsive-nav {
display: none;
}
}
@media all and (max-width: 720px) {
.header-bottom {
display: none !important;
}
@ -583,6 +622,48 @@ section.slider-block {
display: flex !important;
}
.responsive-nav {
margin-top: 20px;
display: none;
.nav a {
display:inline-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: 90%;
}
.nav li > .icon{
float: right;
}
.nav li a > .icon{
display: none;
}
.nav > li {
border-bottom: 1px solid $border-color;
}
.nav li:first-child {
border-top: 1px solid $border-color;
}
.nav > li:last-child {
display:flex; align-items:center;
border-radius: 0 0 4px 0;
float:none;
height: 45px;
img {
margin-right:6px;
}
}
}
}
//footer responsive with out media query.
@ -1051,20 +1132,28 @@ section.product-detail {
max-height: 480px;
}
.wishlist-icon {
position: absolute;
height: 32px;
width: 32px;
top: 15px;
right: 15px;
.whishlist-icon {
margin-top: -480px;
float: right;
margin-right: 10px;
}
.share-icon {
margin-top: -480px;
float: right;
margin-right: 40px;
}
.wishlist {
position: absolute;
height: 32px;
width: 32px;
top: 15px;
right: 48px;
top: 10px;
right: 12px;
}
.share {
position: absolute;
top: 10px;
right: 45px;
}
}
}
@ -1339,11 +1428,7 @@ section.cart {
.towishlist {
color : $brand-color;
}
}
.error-message {
color: #ff5656;
margin-top: 17px;
}
}
}
@ -1583,14 +1668,6 @@ section.cart {
}
// checkout ends here
.order-success-content {
padding: 40px 0;
.btn {
display: inline-block;
}
}
// checkout responsive start here
@media only screen and (max-width: 770px) {
@ -1874,4 +1951,3 @@ section.review {
}
}
// customer section css end here

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;
}

7
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;
}
@ -299,4 +303,5 @@ body {
width: 100%;
float: none;
padding-right: 0px;
}
}

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

@ -85,7 +85,7 @@
<ul class="cart-dropdown-container">
<?php $cart = cart()->getCart(); ?>
@inject ('productImageHelper', 'Webkul\Product\Product\ProductImage')
<li class="cart-dropdown">
@ -279,13 +279,126 @@
</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="header-bottom" id="header-bottom">
@include('shop::layouts.header.nav-menu.navmenu')
@include('shop::layouts.header.nav-menu.navmenu')
</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="responsive-nav">
<category-nav categories='@json($categories)' url="{{url()->to('/')}}"></category-nav>
</div>
</div>
@push('scripts')
<script>
window.onload = function() {
var hamMenu = document.getElementById("hammenu");
var search = document.getElementById("search");
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);
if(sort && filter){
sort.addEventListener("click", sortFilter);
filter.addEventListener("click", sortFilter);
}
window.addEventListener('resize', function(){
if(window.innerWidth > 720){
searchResponsive.style.display = 'none';
navResponsive.style.display = 'none';
layerFilter.style.display ="none";
sortLimit.style.display ="none";
}
});
function header(){
var className = document.getElementById(this.id).className;
if(className === 'icon search-icon' ){
search.classList.remove("search-icon");
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("icon-menu-close");
search.classList.remove("icon-menu-close");
search.classList.add("search-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");
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

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

136
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;
}
@ -342,6 +342,10 @@ body {
margin-bottom: 90px;
}
.mt-5 {
margin-top: 5px;
}
.mt-10 {
margin-top: 10px;
}
@ -751,10 +755,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
user-select: none;
}
.header .search-suggestion {
display: none;
}
.header .header-top {
margin-bottom: 16px;
display: -webkit-box;
@ -1079,6 +1079,10 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
position: relative;
}
.header .header-bottom .nav li > .icon {
display: none;
}
.header .header-bottom .nav {
vertical-align: top;
display: inline-block;
@ -1098,6 +1102,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;
@ -1163,6 +1171,41 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
right: 10px;
}
.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 .responsive-nav {
display: none;
}
@media all and (max-width: 720px) {
.header-bottom {
display: none !important;
@ -1181,6 +1224,46 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
display: -ms-flexbox !important;
display: flex !important;
}
.responsive-nav {
margin-top: 20px;
display: none;
}
.responsive-nav .nav a {
display: inline-block;
color: #242424;
text-decoration: none;
padding: 0.8em 0.3em 0.8em 0.5em;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
width: 90%;
}
.responsive-nav .nav li > .icon {
float: right;
}
.responsive-nav .nav li a > .icon {
display: none;
}
.responsive-nav .nav > li {
border-bottom: 1px solid #E8E8E8;
}
.responsive-nav .nav li:first-child {
border-top: 1px solid #E8E8E8;
}
.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;
}
.responsive-nav .nav > li:last-child img {
margin-right: 6px;
}
}
.footer {
@ -1687,20 +1770,28 @@ section.product-detail div.layouter form div.product-image-group div .product-he
max-height: 480px;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image .wishlist-icon {
position: absolute;
height: 32px;
width: 32px;
top: 15px;
right: 15px;
section.product-detail div.layouter form div.product-image-group div .product-hero-image .whishlist-icon {
margin-top: -480px;
float: right;
margin-right: 10px;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image .share-icon {
margin-top: -480px;
float: right;
margin-right: 40px;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image .wishlist {
position: absolute;
height: 32px;
width: 32px;
top: 15px;
right: 48px;
top: 10px;
right: 12px;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image .share {
position: absolute;
top: 10px;
right: 45px;
}
section.product-detail div.layouter form div.product-image-group .add-to-buttons {
@ -1998,11 +2089,6 @@ section.cart .cart-content .right-side {
color: #0041FF;
}
.cart-item-list .item .item-details .error-message {
color: #ff5656;
margin-top: 17px;
}
.order-summary h3 {
font-size: 16px;
margin-top: 0;
@ -2233,14 +2319,6 @@ section.cart .cart-content .right-side {
padding-left: 40px;
}
.order-success-content {
padding: 40px 0;
}
.order-success-content .btn {
display: inline-block;
}
@media only screen and (max-width: 770px) {
.checkout-process .col-main {
width: 100%;

49
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__(60);
module.exports = __webpack_require__(54);
/***/ }),
@ -30701,10 +30701,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 +30713,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);
@ -30846,27 +30842,41 @@ 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
items_count: 0,
show: false
};
},
mounted: function mounted() {
if (window.innerWidth > 770) {
this.show = true;
}
},
computed: {
haveChildren: function haveChildren() {
return this.item.children.length ? true : false;
}
},
methods: {
showOrHide: function showOrHide() {
this.show = !this.show;
}
}
});
@ -30886,7 +30896,18 @@ var render = function() {
: _vm._e()
]),
_vm._v(" "),
_vm.haveChildren
_vm.haveChildren || _vm.item.parent_id == null
? _c("i", {
class: [
_vm.show
? "icon arrow-down-icon mt-15"
: "icon dropdown-right-icon mt-15"
],
on: { click: _vm.showOrHide }
})
: _vm._e(),
_vm._v(" "),
_vm.haveChildren && _vm.show
? _c(
"ul",
_vm._l(_vm.item.children, function(child, index) {
@ -31739,13 +31760,7 @@ if (false) {
}
/***/ }),
/* 54 */,
/* 55 */,
/* 56 */,
/* 57 */,
/* 58 */,
/* 59 */,
/* 60 */
/* 54 */
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin