TPS/elektronika_bagisto
TPS
/
elektronika_bagisto
6
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

languages moved outside from burger in mobile.

This commit is contained in:
Kakabay 2024-07-01 14:47:11 +05:00
parent e0fa2e66a7
commit d8ee19e037
3 changed files with 245 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
packages/TPS/Shop/publishable/assets/styles/style.css vendored
View File

@ -2135,6 +2135,10 @@ p.phone-number {
background: #000; background: #000;
} }
.burger-item-title.active.lang-dropdown-title {
background-color: none;
}
.burger-list { .burger-list {
height: 100%; height: 100%;
} }
@ -2189,6 +2193,7 @@ p.phone-number {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 2rem; padding: 0 2rem;
list-style: none;
} }
.burger-list-inner-inner a { .burger-list-inner-inner a {
@ -2847,6 +2852,7 @@ p.phone-number {
display: -ms-flexbox; display: -ms-flexbox;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
align-items: flex-start;
justify-content: space-between; justify-content: space-between;
-webkit-box-align: center; -webkit-box-align: center;
-moz-box-align: center; -moz-box-align: center;
@ -2928,6 +2934,89 @@ p.phone-number {
} }
@media screen and (max-width: 780px) { @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 { .slider-initial img {
height: 34rem; height: 34rem;
object-fit: contain; object-fit: contain;
@ -3227,15 +3316,6 @@ p.phone-number {
} }
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.logo-wrapper-mobile {
max-width: 70%;
width: 100%;
}
.logo-wrapper-mobile img {
width: inherit;
}
.swiper-slide { .swiper-slide {
height: 23rem; height: 23rem;
} }

166
packages/TPS/Shop/src/Resources/assets/js/app.js vendored
View File

@ -2,7 +2,7 @@ import $ from 'jquery';
import Vue from 'vue'; import Vue from 'vue';
import VeeValidate from 'vee-validate'; import VeeValidate from 'vee-validate';
import ru from 'vee-validate/dist/locale/ru'; import ru from 'vee-validate/dist/locale/ru';
import tm from './lang/tm' import tm from './lang/tm';
import axios from 'axios'; import axios from 'axios';
import VueSlider from 'vue-slider-component'; import VueSlider from 'vue-slider-component';
import OverlayLoader from './components/overlay-loader'; import OverlayLoader from './components/overlay-loader';
@ -25,19 +25,21 @@ window.axios = axios;
Vue.use(VeeValidate, { Vue.use(VeeValidate, {
dictionary: { dictionary: {
ru: ru, ru: ru,
tm: tm, tm: tm,
}, },
events: 'input|change|blur', events: 'input|change|blur',
}); });
Vue.prototype.$http = axios Vue.prototype.$http = axios;
window.eventBus = new Vue(); window.eventBus = new Vue();
// Vue.component('image-slider', ImageSlider); // Vue.component('image-slider', ImageSlider);
Vue.component('vue-slider', VueSlider); 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('wishlist-component-with-badge', require('./components/header-compare-with-badge').default);
Vue.component('go-top', require('@inotom/vue-go-top').default); Vue.component('go-top', require('@inotom/vue-go-top').default);
Vue.component('flash-wrapper', FlashWrapper); Vue.component('flash-wrapper', FlashWrapper);
@ -49,13 +51,13 @@ Vue.component('overlay-loader', OverlayLoader);
$(document).ready(function () { $(document).ready(function () {
const app = new Vue({ const app = new Vue({
el: "#app", el: '#app',
data: { data: {
modalIds: {}, modalIds: {},
// data: [], // data: [],
show_loader: false, show_loader: false,
baseUrl: document.querySelector('meta[name="base-url"]').content baseUrl: document.querySelector('meta[name="base-url"]').content,
}, },
mounted: function () { mounted: function () {
@ -69,32 +71,31 @@ $(document).ready(function () {
onSubmit: function (e) { onSubmit: function (e) {
this.toggleButtonDisable(true); this.toggleButtonDisable(true);
if(typeof tinyMCE !== 'undefined') if (typeof tinyMCE !== 'undefined') tinyMCE.triggerSave();
tinyMCE.triggerSave();
this.$validator.validateAll().then(result => { this.$validator.validateAll().then((result) => {
if (result) { if (result) {
e.target.submit(); e.target.submit();
} else { } else {
this.toggleButtonDisable(false); this.toggleButtonDisable(false);
eventBus.$emit('onFormError') eventBus.$emit('onFormError');
} }
}); });
}, },
validateForm(e,scope) { validateForm(e, scope) {
this.$validator.validateAll(scope).then((result) => { this.$validator.validateAll(scope).then((result) => {
if (result) { if (result) {
scope.target.submit(); scope.target.submit();
} else { } else {
this.toggleButtonDisable(false); this.toggleButtonDisable(false);
eventBus.$emit('onFormError') eventBus.$emit('onFormError');
} }
}); });
}, },
toggleButtonDisable (value) { toggleButtonDisable(value) {
var buttons = document.getElementsByTagName("button"); var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) { for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = value; buttons[i].disabled = value;
@ -104,26 +105,26 @@ $(document).ready(function () {
addServerErrors: function (scope = null) { addServerErrors: function (scope = null) {
for (var key in serverErrors) { for (var key in serverErrors) {
var inputNames = []; var inputNames = [];
key.split('.').forEach(function(chunk, index) { key.split('.').forEach(function (chunk, index) {
if(index) { if (index) {
inputNames.push('[' + chunk + ']') inputNames.push('[' + chunk + ']');
} else { } else {
inputNames.push(chunk) inputNames.push(chunk);
} }
}) });
var inputName = inputNames.join(''); var inputName = inputNames.join('');
const field = this.$validator.fields.find({ const field = this.$validator.fields.find({
name: inputName, name: inputName,
scope: scope scope: scope,
}); });
if (field) { if (field) {
this.$validator.errors.add({ this.$validator.errors.add({
id: field.id, id: field.id,
field: inputName, field: inputName,
msg: serverErrors[key][0], msg: serverErrors[key][0],
scope: scope scope: scope,
}); });
} }
} }
@ -137,7 +138,7 @@ $(document).ready(function () {
}, this); }, this);
}, },
responsiveHeader: function () { }, responsiveHeader: function () {},
showModal(id) { showModal(id) {
this.$set(this.modalIds, id, true); this.$set(this.modalIds, id, true);
@ -160,7 +161,7 @@ $(document).ready(function () {
// this.busy = false; // this.busy = false;
// }, 1000); // }, 1000);
// } // }
} },
}); });
window.app = app; window.app = app;
@ -174,9 +175,29 @@ $(document).ready(function () {
langBlock.addEventListener('mouseout', function () { langBlock.addEventListener('mouseout', function () {
langList.classList.add('hidden'); langList.classList.add('hidden');
}); });
// DESKTOP LANGUAGE SELECT end ===================
// ACCORDION SCRIPT ========================== // 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 ========================== //
let accordionTrigger = document.querySelectorAll('.footer-title-wrapper'); let accordionTrigger = document.querySelectorAll('.footer-title-wrapper');
let accordionElement = document.querySelectorAll('.footer-content'); let accordionElement = document.querySelectorAll('.footer-content');
@ -197,46 +218,49 @@ $(document).ready(function () {
}); });
} }
// ACCORDION SCRIPT end ========================== const languageDropdown = document.getElementById('language-dropdown');
console.log(languageDropdown);
// BURGER SCRIPT =============================== // ACCORDION SCRIPT end ==========================
// let burgerTrigger = document.querySelector('.burger');
// let burgerElement = document.querySelector('.nav-inner-burger-container');
// let body = document.querySelector('body');
// let brokenTitle = document.querySelector('.burger-title-wrapper');
// let hrBurger = document.querySelector('.hr-line-burger');
// burgerTrigger.addEventListener('click', function () { // BURGER SCRIPT ===============================
// burgerElement.classList.remove('hidden-burger'); // let burgerTrigger = document.querySelector('.burger');
// body.style.overflow = 'hidden'; // let burgerElement = document.querySelector('.nav-inner-burger-container');
// brokenTitle.style.opacity = '100'; // let body = document.querySelector('body');
// hrBurger.style.opacity = '100'; // let brokenTitle = document.querySelector('.burger-title-wrapper');
// }); // let hrBurger = document.querySelector('.hr-line-burger');
//
// let burgerTriggerClose = document.querySelector('.burger-close');
//
// burgerTriggerClose.addEventListener('click', function () {
// burgerElement.classList.add('hidden-burger');
// body.style.overflow = 'auto';
// brokenTitle.style.opacity = '0';
// hrBurger.style.opacity = '0';
// });
// BURGER LANGUAGE ================================ // burgerTrigger.addEventListener('click', function () {
// let langTrig = document.querySelector('.language-trig'); // burgerElement.classList.remove('hidden-burger');
// langTrig.addEventListener('click', () => { // body.style.overflow = 'hidden';
// langTrig.classList.toggle('triggered'); // brokenTitle.style.opacity = '100';
// currencyTrig.classList.remove('triggered'); // hrBurger.style.opacity = '100';
// }); // });
//
// let burgerTriggerClose = document.querySelector('.burger-close');
//
// burgerTriggerClose.addEventListener('click', function () {
// burgerElement.classList.add('hidden-burger');
// body.style.overflow = 'auto';
// brokenTitle.style.opacity = '0';
// hrBurger.style.opacity = '0';
// });
// BURGER LANGUAGE ================================
// let langTrig = document.querySelector('.language-trig');
// langTrig.addEventListener('click', () => {
// langTrig.classList.toggle('triggered');
// currencyTrig.classList.remove('triggered');
// });
// let currencyTrig = document.querySelector('.price-view'); // let currencyTrig = document.querySelector('.price-view');
// currencyTrig.addEventListener('click', () => { // currencyTrig.addEventListener('click', () => {
// langTrig.classList.remove('triggered'); // langTrig.classList.remove('triggered');
// currencyTrig.classList.toggle('triggered'); // currencyTrig.classList.toggle('triggered');
// }); // });
// BURGER LANGUAGE end =========================== // BURGER LANGUAGE end ===========================
// BURGER SCRIPT end =============================== // BURGER SCRIPT end ===============================
// CAT DROPDOWN // CAT DROPDOWN
// const catParent = document.querySelector('.service-li.active'); // const catParent = document.querySelector('.service-li.active');
// const cat = document.querySelector('.cat-dropdown'); // const cat = document.querySelector('.cat-dropdown');
@ -271,20 +295,20 @@ $(document).ready(function () {
// }); // });
// catParent.addEventListener('click', () => { // catParent.addEventListener('click', () => {
// cat.classList.toggle('active'); // cat.classList.toggle('active');
// if (checker) { // if (checker) {
// catBlock[0].classList.toggle('active'); // catBlock[0].classList.toggle('active');
// lis[0].classList.toggle('active'); // lis[0].classList.toggle('active');
// checker = false; // checker = false;
// } else { // } else {
// if (last) { // if (last) {
// catBlock[last].classList.toggle('active'); // catBlock[last].classList.toggle('active');
// lis[last].classList.toggle('active'); // lis[last].classList.toggle('active');
// } else { // } else {
// catBlock[0].classList.toggle('active'); // catBlock[0].classList.toggle('active');
// lis[0].classList.toggle('active'); // lis[0].classList.toggle('active');
// } // }
// } // }
// }); // });
// lis.forEach((el) => { // lis.forEach((el) => {

97
packages/TPS/Shop/src/Resources/views/shop/layouts/header/search-nav.blade.php
View File

@ -127,42 +127,7 @@
</li> </li>
@endauth @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> </ul>
</div> </div>
@ -245,6 +210,63 @@
@endif @endif
</a> </a>
</div> </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"> <a href="{{ route('shop.checkout.cart.index') }}" class="nav-link">
<div class="icon-wrapper"> <div class="icon-wrapper">
<img src="{{ bagisto_asset('icons/cart.svg') }}" alt="cart" /> <img src="{{ bagisto_asset('icons/cart.svg') }}" alt="cart" />
@ -285,6 +307,9 @@
</div> </div>
</nav> </nav>
</script> </script>
<script>
</script>
<script> <script>
Vue.component('profile-btn', { Vue.component('profile-btn', {