scenario edited

This commit is contained in:
Burak Civan 2022-11-14 11:54:09 +03:00
parent cabcdcb7df
commit 15e2c71f47
10 changed files with 93 additions and 67 deletions

View File

@ -441,38 +441,43 @@ document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
//margue animation for truncated text //margue animation for truncated text
// set with for page header
document.querySelectorAll('[data-page-title-first]').forEach((first) => { document.querySelectorAll('[data-page-title-first]').forEach((first) => {
document.querySelectorAll('[data-page-title-second]').forEach((second) => { document.querySelectorAll('[data-page-title-second]').forEach((second) => {
let title_truncate = first.querySelector('[data-title-truncate]'); let title_truncate = first.querySelector('[data-title-truncate]');
if (title_truncate !== null) { if (first.clientWidth < title_truncate.clientWidth) {
if (title_truncate.clientWidth > first.clientWidth) { // added specific width styling for truncate text
title_truncate.style.width = first.clientWidth + 'px'; title_truncate.style.width = first.clientWidth + 'px';
let subtract = title_truncate.clientWidth - 40; let subtract = title_truncate.clientWidth - 40;
title_truncate.style.width = subtract + 'px'; title_truncate.style.width = subtract + 'px';
} title_truncate.classList.add('truncate');
// added specific width styling for truncate text
if (second.clientHeight > 44) { // added specific width styling into the parent title element for truncate text
first.classList.add('w-full', 'sm:w-6/12'); first.classList.add('w-full', 'sm:w-6/12');
} else { // added specific width styling into the parent title element for truncate text
first.classList.remove('sm:w-6/12');
}
if (title_truncate.clientWidth > first.clientWidth) { title_truncate.parentNode.classList.add('overflow-x-hidden', 'hide-scroll-bar');
let marquee = first.querySelector('[data-title-truncate]');
marquee.addEventListener('mouseover', function () { // added truncate animation for truncated text
marquee.classList.add('animate-marquee'); title_truncate.addEventListener('mouseover', function () {
marquee.classList.remove('truncate'); this.classList.add('animate-marquee');
marquee.style.animationPlayState = 'running'; this.classList.remove('truncate');
this.style.animationPlayState = 'running';
}); });
marquee.addEventListener('mouseout', function () { title_truncate.addEventListener('mouseout', function () {
marquee.style.animationPlayState = 'paused'; this.style.animationPlayState = 'paused';
marquee.classList.remove('animate-marquee'); this.classList.remove('animate-marquee');
marquee.classList.add('truncate'); this.classList.add('truncate');
}); });
// added truncate animation for truncated text
} }
}
// remove width class name for extend the right side
first.classList.remove('w-full', 'sm:w-6/12');
// remove width class name for extend the right side
}); });
}); });
// set with for page header

17
public/css/app.css vendored
View File

@ -54091,6 +54091,17 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
} }
/* plans page accordion */ /* plans page accordion */
/* hidden scroll-bar */
.hide-scroll-bar::-webkit-scrollbar {
display: none;
}
.hide-scroll-bar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* hidden scroll-bar */
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
.small-table-width { .small-table-width {
width: 550px; width: 550px;
@ -57030,6 +57041,12 @@ body{
gap: 0px; gap: 0px;
} }
.sm\:space-x-4 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.sm\:space-y-2 > :not([hidden]) ~ :not([hidden]){ .sm\:space-y-2 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0; --tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));

View File

@ -605,6 +605,17 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
} }
/* plans page accordion */ /* plans page accordion */
/* hidden scroll-bar */
.hide-scroll-bar::-webkit-scrollbar {
display: none;
}
.hide-scroll-bar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* hidden scroll-bar */
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
.small-table-width { .small-table-width {
width: 550px; width: 550px;

View File

@ -1,7 +1,7 @@
@stack('header_start') @stack('header_start')
<div id="header" class="xl:pt-6 -mt-2"> <div id="header" class="xl:pt-6 -mt-2">
<div class="flex flex-col sm:flex-row items-start justify-between space-x-4 hide-empty-page"> <div class="flex flex-col sm:flex-row items-start justify-between sm:space-x-4 hide-empty-page">
<div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0"> <div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
<div class="flex items-center"> <div class="flex items-center">
<h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap"> <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">

View File

@ -1,11 +1,13 @@
@stack('header_start') @stack('header_start')
<div id="header" class="xl:pt-6"> <div id="header" class="xl:pt-6 -mt-2">
<div class="flex flex-col sm:flex-row flex-wrap items-start justify-between hide-empty-page"> <div class="flex flex-col sm:flex-row items-start justify-between space-x-4 hide-empty-page">
<div class="w-full sm:w-6/12 items-center mb-3 sm:mb-0"> <div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
<div class="flex items-center"> <div class="flex items-center">
<h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5"> <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
<x-title>
{!! $title !!} {!! $title !!}
</x-title>
@yield('dashboard_action') @yield('dashboard_action')
</h1> </h1>
@ -22,8 +24,7 @@
</div> </div>
</div> </div>
<div class="w-full sm:w-6/12"> <div data-page-title-second class="w-full flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse space-y-2 suggestion-buttons">
<div class="flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse">
@stack('header_button_start') @stack('header_button_start')
{!! $buttons !!} {!! $buttons !!}
@ -33,7 +34,6 @@
{!! $moreButtons !!} {!! $moreButtons !!}
</div> </div>
</div> </div>
</div>
</div> </div>
@stack('header_end') @stack('header_end')

View File

@ -1,10 +1,10 @@
@stack('header_start') @stack('header_start')
<div id="header" class="xl:pt-6"> <div id="header" class="xl:pt-6 -mt-2">
<div class="flex flex-col sm:flex-row flex-wrap items-start justify-between hide-empty-page"> <div class="flex flex-col sm:flex-row items-start justify-between space-x-4 hide-empty-page">
<div class="w-full sm:w-6/12 items-center mb-3 sm:mb-0"> <div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
<div class="flex items-center"> <div class="flex items-center">
<h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5"> <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
<x-title> <x-title>
{!! $title !!} {!! $title !!}
</x-title> </x-title>
@ -24,8 +24,7 @@
</div> </div>
</div> </div>
<div class="w-full sm:w-6/12"> <div data-page-title-second class="w-full flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse space-y-2 suggestion-buttons">
<div class="flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse">
@stack('header_button_start') @stack('header_button_start')
{!! $buttons !!} {!! $buttons !!}
@ -35,7 +34,6 @@
{!! $moreButtons !!} {!! $moreButtons !!}
</div> </div>
</div> </div>
</div>
</div> </div>
@stack('header_end') @stack('header_end')

View File

@ -1,10 +1,10 @@
@stack('header_start') @stack('header_start')
<div id="header" class="xl:pt-6"> <div id="header" class="xl:pt-6 -mt-2">
<div class="flex flex-col sm:flex-row flex-wrap items-start justify-between hide-empty-page"> <div lass="flex flex-col sm:flex-row items-start justify-between space-x-4 hide-empty-page">
<div class="w-full sm:w-6/12 items-center mb-3 sm:mb-0"> <div data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
<div class="flex items-center"> <div class="flex items-center">
<h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5"> <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
<x-title> <x-title>
{!! $title !!} {!! $title !!}
</x-title> </x-title>
@ -24,8 +24,7 @@
</div> </div>
</div> </div>
<div class="w-full sm:w-6/12"> <div data-page-title-second class="w-full flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse space-y-2 suggestion-buttons">
<div class="flex flex-wrap flex-col sm:flex-row sm:items-center justify-end sm:space-x-2 sm:rtl:space-x-reverse">
@stack('header_button_start') @stack('header_button_start')
{!! $buttons !!} {!! $buttons !!}
@ -35,7 +34,6 @@
{!! $moreButtons !!} {!! $moreButtons !!}
</div> </div>
</div> </div>
</div>
</div> </div>
@stack('header_end') @stack('header_end')

View File

@ -4,12 +4,8 @@
$slot_is_string = strval(strlen($slot)); $slot_is_string = strval(strlen($slot));
@endphp @endphp
@if ($slot_is_string >= $textSize && ! $slot_isHtml) <div>
<div class="overflow-x-hidden"> <div data-title-truncate>
<div data-title-truncate class="truncate">
{!! $slot !!} {!! $slot !!}
</div> </div>
</div> </div>
@else
{!! $slot !!}
@endif

View File

@ -16,6 +16,7 @@ sm:rtl:left-4
sm:w-500 sm:w-500
sm:min-h-500 sm:min-h-500
sm:max-w-4xl sm:max-w-4xl
sm:space-x-4
md:grid-cols-2 md:grid-cols-2
lg:mt-2 lg:mt-2
lg:mt-4 lg:mt-4