From a2568f91d21e718fbbd8f353dd05b6642808c35f Mon Sep 17 00:00:00 2001 From: Burak Civan Date: Wed, 2 Nov 2022 16:33:59 +0300 Subject: [PATCH] tabs javascript function --- public/css/app.css | 8 ++--- resources/assets/js/views/common/contacts.js | 26 ++++++++++++++ .../contacts/show/content.blade.php | 35 ++++++++----------- .../views/components/tabs/index.blade.php | 14 ++------ .../views/components/tabs/nav-link.blade.php | 3 +- resources/views/components/tabs/nav.blade.php | 3 +- 6 files changed, 51 insertions(+), 38 deletions(-) diff --git a/public/css/app.css b/public/css/app.css index 1424ee98b..40f642430 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -50876,6 +50876,10 @@ body{ width: 8.333333%; } + .lg\:w-auto{ + width: auto; + } + .lg\:w-3\/12{ width: 25%; } @@ -50940,10 +50944,6 @@ body{ width: 1rem; } - .lg\:w-auto{ - width: auto; - } - .lg\:w-2\/4{ width: 50%; } diff --git a/resources/assets/js/views/common/contacts.js b/resources/assets/js/views/common/contacts.js index 4e24f5121..5f0a6904c 100644 --- a/resources/assets/js/views/common/contacts.js +++ b/resources/assets/js/views/common/contacts.js @@ -42,6 +42,32 @@ const app = new Vue({ for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) { item.id = index; + if (document.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 2) { + document.querySelectorAll('[data-tabs-slide]').forEach((item) => { + item.classList.add('swiper-slide'); + }); + + document.querySelector('[data-tabs-swiper]').classList.add('swiper', 'swiper-links'); + document.querySelector('[data-tabs-swiper-wrapper]').classList.add('swiper-wrapper'); + + let html = ` +
+ ${document.querySelector('[data-tabs-swiper]').innerHTML} +
+ +
+ chevron_right +
+
+ chevron_left +
+ `; + + document.querySelector('[data-tabs-swiper]').innerHTML = html; + } + + // console.log(swiper.activeIndex); + new Swiper(".swiper-tabs-container", { loop: false, slidesPerView: Number(item.getAttribute('data-swiper')), diff --git a/resources/views/components/contacts/show/content.blade.php b/resources/views/components/contacts/show/content.blade.php index ea997c791..7140fae54 100644 --- a/resources/views/components/contacts/show/content.blade.php +++ b/resources/views/components/contacts/show/content.blade.php @@ -151,33 +151,26 @@ name="{{ trans_choice('general.transactions', 2) }}" /> + id="first" + > + First + + + id="first" + > + First + + - - - + id="second" + > + Second + @stack('transactions_nav_end') diff --git a/resources/views/components/tabs/index.blade.php b/resources/views/components/tabs/index.blade.php index ab16c695f..2d4dac67e 100644 --- a/resources/views/components/tabs/index.blade.php +++ b/resources/views/components/tabs/index.blade.php @@ -10,19 +10,11 @@ } @endphp -
-
-
    has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}> +
    +
    +
      has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}> {!! $navs !!}
    - -
    - chevron_right -
    - -
    - chevron_left -
    {!! $content !!} diff --git a/resources/views/components/tabs/nav-link.blade.php b/resources/views/components/tabs/nav-link.blade.php index 792e22395..f9d7c3bed 100644 --- a/resources/views/components/tabs/nav-link.blade.php +++ b/resources/views/components/tabs/nav-link.blade.php @@ -1,10 +1,11 @@ @props(['id', 'name', 'href', 'active'])
  • diff --git a/resources/views/components/tabs/nav.blade.php b/resources/views/components/tabs/nav.blade.php index 6f07b3003..6ef180dbd 100644 --- a/resources/views/components/tabs/nav.blade.php +++ b/resources/views/components/tabs/nav.blade.php @@ -1,10 +1,11 @@ @props(['id', 'name', 'active'])