scenario edited
This commit is contained in:
parent
cabcdcb7df
commit
15e2c71f47
41
public/akaunting-js/generalAction.js
vendored
41
public/akaunting-js/generalAction.js
vendored
@ -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
17
public/css/app.css
vendored
@ -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)));
|
||||||
|
11
resources/assets/sass/app.css
vendored
11
resources/assets/sass/app.css
vendored
@ -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;
|
||||||
|
@ -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">
|
||||||
|
@ -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')
|
||||||
|
@ -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')
|
||||||
|
@ -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')
|
||||||
|
@ -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
|
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user