languages moved outside from burger in mobile.
This commit is contained in:
Kakabay
parent
e0fa2e66a7
commit
d8ee19e037
|
|
@ -2135,6 +2135,10 @@ p.phone-number {
|
|||
background: #000;
|
||||
}
|
||||
|
||||
.burger-item-title.active.lang-dropdown-title {
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
.burger-list {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -2189,6 +2193,7 @@ p.phone-number {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.burger-list-inner-inner a {
|
||||
|
|
@ -2847,6 +2852,7 @@ p.phone-number {
|
|||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: center;
|
||||
-moz-box-align: center;
|
||||
|
|
@ -2928,6 +2934,89 @@ p.phone-number {
|
|||
}
|
||||
|
||||
@media screen and (max-width: 780px) {
|
||||
.logo-wrapper-mobile {
|
||||
max-width: 70%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo-wrapper-mobile img {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.nav-top-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#language-dropdown {
|
||||
width: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.language-dropdown.active {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.lang-dropdown-title {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lang-item-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.lang-active {
|
||||
}
|
||||
|
||||
// .lang-img {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// height: 24px;
|
||||
// width: 24px;
|
||||
// }
|
||||
|
||||
// .lang-img > img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
.lang-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
.lang-arrow > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.language-dropdown {
|
||||
top: 150%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
background: white;
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.lang-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown-title {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.slider-initial img {
|
||||
height: 34rem;
|
||||
object-fit: contain;
|
||||
|
|
@ -3227,15 +3316,6 @@ p.phone-number {
|
|||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.logo-wrapper-mobile {
|
||||
max-width: 70%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo-wrapper-mobile img {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
height: 23rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import $ from 'jquery';
|
|||
import Vue from 'vue';
|
||||
import VeeValidate from 'vee-validate';
|
||||
import ru from 'vee-validate/dist/locale/ru';
|
||||
import tm from './lang/tm'
|
||||
import tm from './lang/tm';
|
||||
import axios from 'axios';
|
||||
import VueSlider from 'vue-slider-component';
|
||||
import OverlayLoader from './components/overlay-loader';
|
||||
|
|
@ -30,14 +30,16 @@ Vue.use(VeeValidate, {
|
|||
events: 'input|change|blur',
|
||||
});
|
||||
|
||||
Vue.prototype.$http = axios
|
||||
|
||||
Vue.prototype.$http = axios;
|
||||
|
||||
window.eventBus = new Vue();
|
||||
|
||||
// Vue.component('image-slider', ImageSlider);
|
||||
Vue.component('vue-slider', VueSlider);
|
||||
Vue.component('proceed-to-checkout', require('./components/checkout/proceed-to-checkout').default);
|
||||
Vue.component(
|
||||
'proceed-to-checkout',
|
||||
require('./components/checkout/proceed-to-checkout').default
|
||||
);
|
||||
// Vue.component('wishlist-component-with-badge', require('./components/header-compare-with-badge').default);
|
||||
Vue.component('go-top', require('@inotom/vue-go-top').default);
|
||||
Vue.component('flash-wrapper', FlashWrapper);
|
||||
|
|
@ -49,13 +51,13 @@ Vue.component('overlay-loader', OverlayLoader);
|
|||
|
||||
$(document).ready(function () {
|
||||
const app = new Vue({
|
||||
el: "#app",
|
||||
el: '#app',
|
||||
|
||||
data: {
|
||||
modalIds: {},
|
||||
// data: [],
|
||||
show_loader: false,
|
||||
baseUrl: document.querySelector('meta[name="base-url"]').content
|
||||
baseUrl: document.querySelector('meta[name="base-url"]').content,
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
|
|
@ -69,16 +71,15 @@ $(document).ready(function () {
|
|||
onSubmit: function (e) {
|
||||
this.toggleButtonDisable(true);
|
||||
|
||||
if(typeof tinyMCE !== 'undefined')
|
||||
tinyMCE.triggerSave();
|
||||
if (typeof tinyMCE !== 'undefined') tinyMCE.triggerSave();
|
||||
|
||||
this.$validator.validateAll().then(result => {
|
||||
this.$validator.validateAll().then((result) => {
|
||||
if (result) {
|
||||
e.target.submit();
|
||||
} else {
|
||||
this.toggleButtonDisable(false);
|
||||
|
||||
eventBus.$emit('onFormError')
|
||||
eventBus.$emit('onFormError');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -89,12 +90,12 @@ $(document).ready(function () {
|
|||
} else {
|
||||
this.toggleButtonDisable(false);
|
||||
|
||||
eventBus.$emit('onFormError')
|
||||
eventBus.$emit('onFormError');
|
||||
}
|
||||
});
|
||||
},
|
||||
toggleButtonDisable(value) {
|
||||
var buttons = document.getElementsByTagName("button");
|
||||
var buttons = document.getElementsByTagName('button');
|
||||
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].disabled = value;
|
||||
|
|
@ -106,24 +107,24 @@ $(document).ready(function () {
|
|||
var inputNames = [];
|
||||
key.split('.').forEach(function (chunk, index) {
|
||||
if (index) {
|
||||
inputNames.push('[' + chunk + ']')
|
||||
inputNames.push('[' + chunk + ']');
|
||||
} else {
|
||||
inputNames.push(chunk)
|
||||
inputNames.push(chunk);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
var inputName = inputNames.join('');
|
||||
|
||||
const field = this.$validator.fields.find({
|
||||
name: inputName,
|
||||
scope: scope
|
||||
scope: scope,
|
||||
});
|
||||
if (field) {
|
||||
this.$validator.errors.add({
|
||||
id: field.id,
|
||||
field: inputName,
|
||||
msg: serverErrors[key][0],
|
||||
scope: scope
|
||||
scope: scope,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -160,7 +161,7 @@ $(document).ready(function () {
|
|||
// this.busy = false;
|
||||
// }, 1000);
|
||||
// }
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
window.app = app;
|
||||
|
|
@ -174,6 +175,26 @@ $(document).ready(function () {
|
|||
langBlock.addEventListener('mouseout', function () {
|
||||
langList.classList.add('hidden');
|
||||
});
|
||||
|
||||
const languageTriger = document.getElementById('language-dropdown');
|
||||
const languageDropdownContent = document.getElementById(
|
||||
'language-dropdown-content'
|
||||
);
|
||||
|
||||
languageTriger.addEventListener('click', (event) => {
|
||||
languageDropdownContent.classList.toggle('active');
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
if (
|
||||
!languageTriger.contains(event.target) &&
|
||||
!languageDropdownContent.contains(event.target)
|
||||
) {
|
||||
languageDropdownContent.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// DESKTOP LANGUAGE SELECT end ===================
|
||||
|
||||
// ACCORDION SCRIPT ========================== //
|
||||
|
|
@ -197,6 +218,9 @@ $(document).ready(function () {
|
|||
});
|
||||
}
|
||||
|
||||
const languageDropdown = document.getElementById('language-dropdown');
|
||||
console.log(languageDropdown);
|
||||
|
||||
// ACCORDION SCRIPT end ==========================
|
||||
|
||||
// BURGER SCRIPT ===============================
|
||||
|
|
|
|||
|
|
@ -127,42 +127,7 @@
|
|||
|
||||
</li>
|
||||
@endauth
|
||||
<li>
|
||||
<div class="burger-item-title">
|
||||
<div class="burger-item-name lang">
|
||||
<span>{{ core()->getCurrentLocale()->name }}</span>
|
||||
<div class="burger-lang">
|
||||
<img src="{{ core()->getCurrentLocale()->image_url }}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="arrow black">
|
||||
<img src="{{ bagisto_asset('icons/burger-arrow-black.svg') }}" alt="burger arrow black">
|
||||
</div>
|
||||
<div class="arrow white">
|
||||
<img src="{{ bagisto_asset('icons/burger-arrow-white.svg') }}" alt="burger arrow white">
|
||||
</div>
|
||||
</div>
|
||||
<div class="burger-dropdown">
|
||||
<ul class="burger-list-inner-inner" onchange="window.location.href = this.value">
|
||||
@foreach (core()->getCurrentChannel()->locales as $locale)
|
||||
<li>
|
||||
<a
|
||||
@if (isset($serachQuery))
|
||||
href="?{{ $serachQuery }}&locale={{ $locale->code }}" class="burger-item-name lang lang-second"
|
||||
@else
|
||||
href="?locale={{ $locale->code }}" class="burger-item-name lang lang-second"
|
||||
@endif
|
||||
>
|
||||
<span>{{ $locale->name }}</span>
|
||||
<div class="burger-lang">
|
||||
<img src="{{ $locale->image_url }}" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
@ -245,6 +210,63 @@
|
|||
@endif
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{-- Language dropdown start --}}
|
||||
<div clas="nav-inner-top-lang lang-active" id="language-dropdown">
|
||||
<div class="burger-item-title lang-dropdown-title">
|
||||
<div class="burger-item-name lang">
|
||||
{{-- <span>{{ core()->getCurrentLocale()->name }}</span> --}}
|
||||
<div class="burger-lang">
|
||||
<img src="{{ core()->getCurrentLocale()->image_url }}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="arrow black">
|
||||
<img src="{{ bagisto_asset('icons/burger-arrow-black.svg') }}" alt="burger arrow black">
|
||||
</div>
|
||||
<div class="arrow white">
|
||||
<img src="{{ bagisto_asset('icons/burger-arrow-white.svg') }}" alt="burger arrow white">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- <div class="burger-dropdown active" id="language-dropdown-content">
|
||||
<ul class="burger-list-inner-inner lang-list" onchange="window.location.href = this.value">
|
||||
@foreach (core()->getCurrentChannel()->locales as $locale)
|
||||
<li>
|
||||
<a
|
||||
@if (isset($serachQuery))
|
||||
href="?{{ $serachQuery }}&locale={{ $locale->code }}" class="burger-item-name lang lang-second"
|
||||
@else
|
||||
href="?locale={{ $locale->code }}" class="burger-item-name lang lang-second"
|
||||
@endif
|
||||
>
|
||||
<div class="burger-lang">
|
||||
<img src="{{ $locale->image_url }}" alt="">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div> --}}
|
||||
|
||||
<div class="language-dropdown" id="language-dropdown-content" onchange="window.location.href = this.value">
|
||||
@foreach (core()->getCurrentChannel()->locales as $locale)
|
||||
<a
|
||||
@if (isset($serachQuery))
|
||||
href="?{{ $serachQuery }}&locale={{ $locale->code }}" class="burger-item-name lang lang-second"
|
||||
@else
|
||||
href="?locale={{ $locale->code }}" class="burger-item-name lang lang-second"
|
||||
@endif
|
||||
>
|
||||
<div class="burger-lang">
|
||||
<img src="{{ $locale->image_url }}" alt="">
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
{{-- Language dropdown end --}}
|
||||
|
||||
|
||||
<a href="{{ route('shop.checkout.cart.index') }}" class="nav-link">
|
||||
<div class="icon-wrapper">
|
||||
<img src="{{ bagisto_asset('icons/cart.svg') }}" alt="cart" />
|
||||
|
|
@ -285,6 +307,9 @@
|
|||
</div>
|
||||
</nav>
|
||||
</script>
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('profile-btn', {
|
||||
|
|
|
|||
Loading…
Reference in New Issue