Merge pull request #4099 from devansh-webkul/velocity_responsive_issue
Velocity Responsive Issue #4195
This commit is contained in:
Glenn Hermans
GitHub
commit
dd37cf00a9
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"/js/velocity.js": "/js/velocity.js?id=ec2fcac08b9c220c4ec6",
|
||||
"/js/velocity.js": "/js/velocity.js?id=d8c35e4b86332dde5ebb",
|
||||
"/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
|
||||
"/css/velocity.css": "/css/velocity.css?id=deeefa4677371b494de3"
|
||||
"/css/velocity.css": "/css/velocity.css?id=e454953a6e8dd17fecdb"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="magnifier col-12 text-center no-padding">
|
||||
<div class="magnifier">
|
||||
<img
|
||||
:src="src"
|
||||
:data-zoom-image="src"
|
||||
|
|
|
|||
|
|
@ -241,7 +241,7 @@
|
|||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 190px;
|
||||
height: auto;
|
||||
max-height: 190px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,25 @@
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
/* large devices */
|
||||
@media only screen and (max-width: 1192px) {
|
||||
|
||||
.sticky-header {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.vc-full-screen {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.vc-small-screen {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#main-category {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.footer {
|
||||
.footer-content {
|
||||
.newsletter-subscription {
|
||||
|
|
@ -30,6 +48,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* medium devices */
|
||||
@media only screen and (max-width: 992px) {
|
||||
$header-height: 50px;
|
||||
|
||||
|
|
@ -41,14 +60,33 @@
|
|||
}
|
||||
}
|
||||
|
||||
.main-container-wrapper {
|
||||
// position: relative;
|
||||
#webheader {
|
||||
display: none !important;
|
||||
position: fixed;
|
||||
background-color: $white-color;
|
||||
}
|
||||
|
||||
#main-category {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#home-right-bar-container {
|
||||
position: relative;
|
||||
top: -48px;
|
||||
}
|
||||
|
||||
.vc-full-screen {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.vc-small-screen {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.force-center {
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
.main-content-wrapper {
|
||||
z-index: 100;
|
||||
margin-bottom: 25px;
|
||||
|
|
@ -444,6 +482,7 @@
|
|||
}
|
||||
|
||||
#search-form {
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
|
||||
.selectdiv {
|
||||
|
|
@ -496,16 +535,11 @@
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.main-product-image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-detail {
|
||||
#product-form {
|
||||
.form-container {
|
||||
.left {
|
||||
top: 0px;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
|
||||
|
|
@ -513,10 +547,6 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -959,7 +989,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* small devices */
|
||||
@media only screen and (max-width: 768px) {
|
||||
.sticky-header {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#home-right-bar-container {
|
||||
position: unset;
|
||||
top: unset;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
left: 10%;
|
||||
max-width: 80%;
|
||||
|
|
@ -1023,3 +1063,15 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* very small devices */
|
||||
@media only screen and (max-width: 320px) {
|
||||
.sticky-header {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#home-right-bar-container {
|
||||
position: unset;
|
||||
top: unset;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
@push('scripts')
|
||||
<script type="text/x-template" id="content-header-template">
|
||||
<header class="row velocity-divide-page vc-header header-shadow active">
|
||||
<div class="vc-small-screen container" v-if="isMobile()">
|
||||
<div class="vc-small-screen container">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div v-if="hamburger" class="nav-container scrollable">
|
||||
|
|
@ -370,7 +370,7 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
id="main-category"
|
||||
@mouseout="toggleSidebar('0', $event, 'mouseout')"
|
||||
@mouseover="toggleSidebar('0', $event, 'mouseover')"
|
||||
:class="`main-category fs16 unselectable fw6 ${($root.sharedRootCategories.length > 0) ? 'cursor-pointer' : 'cursor-not-allowed'} left`">
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@
|
|||
class="btn-toolbar full-width"
|
||||
role="toolbar">
|
||||
|
||||
<div class="btn-group full-width">
|
||||
<div class="btn-group full-width force-center">
|
||||
<div class="selectdiv">
|
||||
<select class="form-control fs13 styled-select" name="category" @change="focusInput($event)" aria-label="Category">
|
||||
<option value="">
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-7 col-md-12">
|
||||
<div class="col-lg-7 col-md-12 vc-full-screen">
|
||||
{!! view_render_event('bagisto.shop.layout.header.cart-item.before') !!}
|
||||
@include('shop::checkout.cart.mini-cart')
|
||||
{!! view_render_event('bagisto.shop.layout.header.cart-item.after') !!}
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@
|
|||
@push('scripts')
|
||||
<script type="text/x-template" id="featured-products-template">
|
||||
<div class="container-fluid featured-products">
|
||||
<shimmer-component v-if="isLoading && !isMobileView"></shimmer-component>
|
||||
<shimmer-component v-if="isLoading"></shimmer-component>
|
||||
|
||||
<template v-else-if="featuredProducts.length > 0">
|
||||
<card-list-header heading="{{ __('shop::app.home.featured-products') }}">
|
||||
</card-list-header>
|
||||
|
||||
<div class="carousel-products vc-full-screen {{ $direction }}" v-if="!isMobileView">
|
||||
<div class="carousel-products vc-full-screen {{ $direction }}">
|
||||
<carousel-component
|
||||
slides-per-page="6"
|
||||
navigation-enabled="hide"
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
</carousel-component>
|
||||
</div>
|
||||
|
||||
<div class="carousel-products vc-small-screen {{ $direction }}" v-else>
|
||||
<div class="carousel-products vc-small-screen {{ $direction }}">
|
||||
<carousel-component
|
||||
slides-per-page="2"
|
||||
navigation-enabled="hide"
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
@push('scripts')
|
||||
<script type="text/x-template" id="new-products-template">
|
||||
<div class="container-fluid">
|
||||
<shimmer-component v-if="isLoading && !isMobileView"></shimmer-component>
|
||||
<shimmer-component v-if="isLoading"></shimmer-component>
|
||||
|
||||
<template v-else-if="newProducts.length > 0">
|
||||
<card-list-header heading="{{ __('shop::app.home.new-products') }}">
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
@endpush
|
||||
|
||||
<div class="row {{ $direction }}">
|
||||
<div class="col-9 no-padding carousel-products vc-full-screen with-recent-viewed" v-if="!isMobileView">
|
||||
<div class="col-9 no-padding carousel-products vc-full-screen with-recent-viewed">
|
||||
<carousel-component
|
||||
slides-per-page="5"
|
||||
navigation-enabled="hide"
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
</carousel-component>
|
||||
</div>
|
||||
|
||||
<div class="col-12 no-padding carousel-products vc-small-screen" v-else>
|
||||
<div class="col-12 no-padding carousel-products vc-small-screen">
|
||||
<carousel-component
|
||||
slides-per-page="2"
|
||||
navigation-enabled="hide"
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
])
|
||||
</div>
|
||||
@else
|
||||
<div class="carousel-products vc-full-screen {{ $direction }}" v-if="!isMobileView">
|
||||
<div class="carousel-products vc-full-screen {{ $direction }}">
|
||||
<carousel-component
|
||||
slides-per-page="6"
|
||||
navigation-enabled="hide"
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
</carousel-component>
|
||||
</div>
|
||||
|
||||
<div class="carousel-products vc-small-screen {{ $direction }}" v-else>
|
||||
<div class="carousel-products vc-small-screen {{ $direction }}">
|
||||
<carousel-component
|
||||
slides-per-page="2"
|
||||
navigation-enabled="hide"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<header class="sticky-header" v-if="!isMobile()">
|
||||
<header class="sticky-header">
|
||||
<div class="row remove-padding-margin velocity-divide-page">
|
||||
<logo-component add-class="navbar-brand"></logo-component>
|
||||
<searchbar-component></searchbar-component>
|
||||
|
|
|
|||
|
|
@ -87,94 +87,96 @@
|
|||
|
||||
<input type="hidden" name="product_id" value="{{ $product->product_id }}">
|
||||
|
||||
{{-- product-gallery --}}
|
||||
<div class="left col-lg-5">
|
||||
@include ('shop::products.view.gallery')
|
||||
</div>
|
||||
<div class="row">
|
||||
{{-- product-gallery --}}
|
||||
<div class="left col-lg-5 col-md-6">
|
||||
@include ('shop::products.view.gallery')
|
||||
</div>
|
||||
|
||||
{{-- right-section --}}
|
||||
<div class="right col-lg-7">
|
||||
{{-- product-info-section --}}
|
||||
<div class="row info">
|
||||
<h2 class="col-lg-12">{{ $product->name }}</h2>
|
||||
{{-- right-section --}}
|
||||
<div class="right col-lg-7 col-md-6">
|
||||
{{-- product-info-section --}}
|
||||
<div class="row info">
|
||||
<h2 class="col-12">{{ $product->name }}</h2>
|
||||
|
||||
@if ($total)
|
||||
<div class="reviews col-lg-12">
|
||||
<star-ratings
|
||||
push-class="mr5"
|
||||
:ratings="{{ $avgStarRating }}"
|
||||
></star-ratings>
|
||||
@if ($total)
|
||||
<div class="reviews col-lg-12">
|
||||
<star-ratings
|
||||
push-class="mr5"
|
||||
:ratings="{{ $avgStarRating }}"
|
||||
></star-ratings>
|
||||
|
||||
<div class="reviews">
|
||||
<span>
|
||||
{{ __('shop::app.reviews.ratingreviews', [
|
||||
'rating' => $avgRatings,
|
||||
'review' => $total])
|
||||
}}
|
||||
</span>
|
||||
<div class="reviews">
|
||||
<span>
|
||||
{{ __('shop::app.reviews.ratingreviews', [
|
||||
'rating' => $avgRatings,
|
||||
'review' => $total])
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@include ('shop::products.view.stock', ['product' => $product])
|
||||
|
||||
<div class="col-12 price">
|
||||
@include ('shop::products.price', ['product' => $product])
|
||||
</div>
|
||||
|
||||
<div class="product-actions">
|
||||
@include ('shop::products.add-to-cart', [
|
||||
'form' => false,
|
||||
'product' => $product,
|
||||
'showCartIcon' => false,
|
||||
'showCompare' => core()->getConfigData('general.content.shop.compare_option') == "1"
|
||||
? true : false,
|
||||
])
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!! view_render_event('bagisto.shop.products.view.short_description.before', ['product' => $product]) !!}
|
||||
|
||||
@if ($product->short_description)
|
||||
<div class="description">
|
||||
<h3 class="col-lg-12">{{ __('velocity::app.products.short-description') }}</h3>
|
||||
|
||||
{!! $product->short_description !!}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@include ('shop::products.view.stock', ['product' => $product])
|
||||
{!! view_render_event('bagisto.shop.products.view.short_description.after', ['product' => $product]) !!}
|
||||
|
||||
<div class="col-12 price">
|
||||
@include ('shop::products.price', ['product' => $product])
|
||||
</div>
|
||||
|
||||
<div class="product-actions">
|
||||
@include ('shop::products.add-to-cart', [
|
||||
'form' => false,
|
||||
'product' => $product,
|
||||
'showCartIcon' => false,
|
||||
'showCompare' => core()->getConfigData('general.content.shop.compare_option') == "1"
|
||||
? true : false,
|
||||
])
|
||||
</div>
|
||||
{!! view_render_event('bagisto.shop.products.view.quantity.before', ['product' => $product]) !!}
|
||||
|
||||
@if ($product->getTypeInstance()->showQuantityBox())
|
||||
<div>
|
||||
<quantity-changer></quantity-changer>
|
||||
</div>
|
||||
@else
|
||||
<input type="hidden" name="quantity" value="1">
|
||||
@endif
|
||||
|
||||
{!! view_render_event('bagisto.shop.products.view.quantity.after', ['product' => $product]) !!}
|
||||
|
||||
@include ('shop::products.view.configurable-options')
|
||||
|
||||
@include ('shop::products.view.downloadable')
|
||||
|
||||
@include ('shop::products.view.grouped-products')
|
||||
|
||||
@include ('shop::products.view.bundle-options')
|
||||
|
||||
@include ('shop::products.view.attributes', [
|
||||
'active' => true
|
||||
])
|
||||
|
||||
{{-- product long description --}}
|
||||
@include ('shop::products.view.description')
|
||||
|
||||
{{-- reviews count --}}
|
||||
@include ('shop::products.view.reviews', ['accordian' => true])
|
||||
</div>
|
||||
|
||||
{!! view_render_event('bagisto.shop.products.view.short_description.before', ['product' => $product]) !!}
|
||||
|
||||
@if ($product->short_description)
|
||||
<div class="description">
|
||||
<h3 class="col-lg-12">{{ __('velocity::app.products.short-description') }}</h3>
|
||||
|
||||
{!! $product->short_description !!}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{!! view_render_event('bagisto.shop.products.view.short_description.after', ['product' => $product]) !!}
|
||||
|
||||
|
||||
{!! view_render_event('bagisto.shop.products.view.quantity.before', ['product' => $product]) !!}
|
||||
|
||||
@if ($product->getTypeInstance()->showQuantityBox())
|
||||
<div>
|
||||
<quantity-changer></quantity-changer>
|
||||
</div>
|
||||
@else
|
||||
<input type="hidden" name="quantity" value="1">
|
||||
@endif
|
||||
|
||||
{!! view_render_event('bagisto.shop.products.view.quantity.after', ['product' => $product]) !!}
|
||||
|
||||
@include ('shop::products.view.configurable-options')
|
||||
|
||||
@include ('shop::products.view.downloadable')
|
||||
|
||||
@include ('shop::products.view.grouped-products')
|
||||
|
||||
@include ('shop::products.view.bundle-options')
|
||||
|
||||
@include ('shop::products.view.attributes', [
|
||||
'active' => true
|
||||
])
|
||||
|
||||
{{-- product long description --}}
|
||||
@include ('shop::products.view.description')
|
||||
|
||||
{{-- reviews count --}}
|
||||
@include ('shop::products.view.reviews', ['accordian' => true])
|
||||
</div>
|
||||
</div>
|
||||
</product-view>
|
||||
|
|
|
|||
|
|
@ -12,20 +12,22 @@
|
|||
{!! view_render_event('bagisto.shop.products.view.gallery.before', ['product' => $product]) !!}
|
||||
|
||||
<div class="product-image-group">
|
||||
<div class="row col-12">
|
||||
<magnify-image src="{{ $images[0]['large_image_url'] }}" v-if="!isMobile()">
|
||||
</magnify-image>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<magnify-image src="{{ $images[0]['large_image_url'] }}" v-if="!isMobile()">
|
||||
</magnify-image>
|
||||
|
||||
<img
|
||||
v-else
|
||||
class="vc-small-product-image"
|
||||
src="{{ $images[0]['large_image_url'] }}" alt="" />
|
||||
<img
|
||||
v-else
|
||||
class="vc-small-product-image"
|
||||
src="{{ $images[0]['large_image_url'] }}" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
<product-gallery></product-gallery>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<product-gallery></product-gallery>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{!! view_render_event('bagisto.shop.products.view.gallery.after', ['product' => $product]) !!}
|
||||
|
|
@ -156,7 +158,6 @@
|
|||
|
||||
<script>
|
||||
$(document).ready(() => {
|
||||
|
||||
/* waiting for the window to appear */
|
||||
let waitForEl = function(selector, callback) {
|
||||
if (jQuery(selector).length) {
|
||||
|
|
@ -168,8 +169,11 @@
|
|||
|
||||
/* positioning when .zoomWindow div available */
|
||||
waitForEl('.zoomWindow', function() {
|
||||
let zoomContainer = $('.zoomContainer');
|
||||
zoomContainer.css('z-index', 'unset');
|
||||
|
||||
if ($('body').hasClass("rtl")) {
|
||||
let widthOfImage = $('.zoomContainer').width();
|
||||
let widthOfImage = zoomContainer.width();
|
||||
$('.zoomWindow').css('right', `${widthOfImage}px`);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue