Merge pull request #2742 from brkcvn/two-column-header

Settings of page header

public/akaunting-js/generalAction.js

@@ -461,3 +461,46 @@ document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
 //disable/enable icons ejected from data-truncate-marquee
 
 //margue animation for truncated text
+
+// set with for page header
+document.querySelectorAll('[data-page-title-first]').forEach((first) => {
+    document.querySelectorAll('[data-page-title-second]').forEach((second) => {
+        let title_truncate = first.querySelector('[data-title-truncate]');
+
+        if (title_truncate !== null) {
+            if (first.clientWidth < title_truncate.clientWidth && second.clientHeight > 0) {
+                // added specific width styling for truncate text
+                title_truncate.style.width = first.clientWidth + 'px';
+                let subtract = title_truncate.clientWidth - 40;
+                title_truncate.style.width = subtract + 'px';
+                title_truncate.classList.add('truncate');
+                // added specific width styling for truncate text
+    
+                // added specific width styling into the parent title element for truncate text
+                first.classList.add('w-full', 'sm:w-6/12');
+                // added specific width styling into the parent title element for truncate text
+    
+                title_truncate.parentNode.classList.add('overflow-x-hidden', 'hide-scroll-bar');
+        
+                // added truncate animation for truncated text
+                title_truncate.addEventListener('mouseover', function () {
+                    this.classList.add('animate-marquee');
+                    this.classList.remove('truncate');
+                    this.style.animationPlayState = 'running';
+                });
+        
+                title_truncate.addEventListener('mouseout', function () {
+                    this.style.animationPlayState = 'paused';
+                    this.classList.remove('animate-marquee');
+                    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

public/css/app.css

@@ -53411,6 +53411,9 @@ button, input, optgroup, select, textarea{
   border-bottom-left-radius: 0.5rem;
   border-right-width: 0px;
 }
+.suggestion-buttons > a:first-child, .suggestion-buttons > button:first-child{
+  margin-top: 0.5rem;
+}
 [data-dropdown-actions] {
         -webkit-transform: unset !important;
                 transform: unset !important;
@@ -54088,6 +54091,17 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
   }
   /* 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) {
     .small-table-width {
         width: 550px;
@@ -57027,6 +57041,12 @@ body{
     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]){
     --tw-space-y-reverse: 0;
     margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));

resources/assets/sass/app.css

@@ -21,6 +21,11 @@
     .index-actions {
         @apply ltr:[&:nth-child(2)]:border-l ltr:[&:nth-child(3)]:border-l-0 rtl:[&:nth-child(2)]:border-r rtl:[&:nth-child(3)]:border-r-0 ltr:[&:first-child]:rounded-tl-lg ltr:[&:first-child]:rounded-bl-lg ltr:[&:first-child]:border-r-0 rtl:[&:first-child]:rounded-tr-lg rtl:[&:first-child]:rounded-br-lg rtl:[&:first-child]:border-l-0 ltr:[&:last-child]:rounded-tr-lg ltr:[&:last-child]:rounded-br-lg ltr:[&:last-child]:border-l-0 rtl:[&:last-child]:rounded-tl-lg rtl:[&:last-child]:rounded-bl-lg rtl:[&:last-child]:border-r-0;
     }
+
+    .suggestion-buttons > a:first-child, .suggestion-buttons > button:first-child {
+        @apply mt-2;
+    }
+
     [data-dropdown-actions] {
         transform: unset !important;
     }
@@ -600,6 +605,17 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
   }
   /* 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) {
     .small-table-width {
         width: 550px;

resources/views/components/layouts/admin/header.blade.php

@@ -1,10 +1,10 @@
 @stack('header_start')
 
-<div id="header" class="xl:pt-6">
-    <div class="flex flex-col sm:flex-row flex-wrap items-start justify-between hide-empty-page">
-        <div class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
+<div id="header" class="xl:pt-6 -mt-2">
+    <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 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 !!}
                     </x-title>
@@ -24,20 +24,18 @@
             </div>
         </div>
 
-        <div class="w-full sm:w-6/12">
-            <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')
+        <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">
+            @stack('header_button_start')
 
-                {!! $buttons !!}
+            {!! $buttons !!}
 
-                @stack('header_button_end')
+            @stack('header_button_end')
 
-                <x-suggestions />
+            <x-suggestions />
 
-                @stack('header_suggestion_end')
+            @stack('header_suggestion_end')
 
-                {!! $moreButtons !!}
-            </div>
+            {!! $moreButtons !!}
         </div>
     </div>
 </div>

resources/views/components/layouts/portal/header.blade.php

@@ -1,11 +1,13 @@
 @stack('header_start')
 
-<div id="header" class="xl:pt-6">
-    <div class="flex flex-col sm:flex-row flex-wrap items-start justify-between hide-empty-page">
-        <div class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
+<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 data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
             <div class="flex items-center">
-                <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5">
-                    {!! $title !!}
+                <h1 class="flex items-center text-2xl xl:text-5xl text-black font-light -ml-0.5 mt-2 whitespace-nowrap">
+                    <x-title>
+                        {!! $title !!}
+                    </x-title>
 
                     @yield('dashboard_action')
                 </h1>
@@ -22,16 +24,14 @@
             </div>
         </div>
 
-        <div class="w-full sm:w-6/12">
-            <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')
+        <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">
+            @stack('header_button_start')
 
-                {!! $buttons !!}
+            {!! $buttons !!}
 
-                @stack('header_button_end')
+            @stack('header_button_end')
 
-                {!! $moreButtons !!}
-            </div>
+            {!! $moreButtons !!}
         </div>
     </div>
 </div>

resources/views/components/layouts/preview/header.blade.php

@@ -1,10 +1,10 @@
 @stack('header_start')
 
-<div id="header" class="xl:pt-6">
-    <div class="flex flex-col sm:flex-row flex-wrap items-start justify-between hide-empty-page">
-        <div class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
+<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 data-page-title-first class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
             <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 !!}
                     </x-title>
@@ -24,16 +24,14 @@
             </div>
         </div>
 
-        <div class="w-full sm:w-6/12">
-            <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')
+        <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">
+            @stack('header_button_start')
 
-                {!! $buttons !!}
+            {!! $buttons !!}
 
-                @stack('header_button_end')
+            @stack('header_button_end')
 
-                {!! $moreButtons !!}
-            </div>
+            {!! $moreButtons !!}
         </div>
     </div>
 </div>

resources/views/components/layouts/signed/header.blade.php

@@ -1,10 +1,10 @@
 @stack('header_start')
 
-<div id="header" class="xl:pt-6">
-    <div class="flex flex-col sm:flex-row flex-wrap items-start justify-between hide-empty-page">
-        <div class="w-full sm:w-6/12 items-center mb-3 sm:mb-0">
+<div id="header" class="xl:pt-6 -mt-2">
+    <div lass="flex flex-col sm:flex-row items-start justify-between 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 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 !!}
                     </x-title>
@@ -24,16 +24,14 @@
             </div>
         </div>
 
-        <div class="w-full sm:w-6/12">
-            <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')
+        <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">
+            @stack('header_button_start')
 
-                {!! $buttons !!}
+            {!! $buttons !!}
 
-                @stack('header_button_end')
+            @stack('header_button_end')
 
-                {!! $moreButtons !!}
-            </div>
+            {!! $moreButtons !!}
         </div>
     </div>
 </div>

resources/views/components/suggestions.blade.php

@@ -8,4 +8,4 @@
     >
         {{ $suggestion->name }}
     </x-link>
-@endforeach
+@endforeach

resources/views/components/title.blade.php

@@ -4,12 +4,8 @@
     $slot_is_string = strval(strlen($slot));
 @endphp
 
-@if ($slot_is_string >= $textSize && ! $slot_isHtml)
-    <x-tooltip id="page-title" placement="bottom" message="{!! $slot !!}">
-        <div class="truncate" style="width: 22rem;">
-            {!! $slot !!}
-        </div>
-    </x-tooltip>
-@else 
-    {!! $slot !!}
-@endif
+<div>
+    <div data-title-truncate>
+        {!! $slot !!}
+    </div>
+</div>

resources/views/livewire/menu/favorite.blade.php

@@ -3,7 +3,7 @@
         <span
             id="{{ $favorited ? 'remove-from-favorite' : 'add-to-favorite' }}"
             @class([
-                'flex items-center text-purple text-2xl ltr:ml-2 rtl:mr-2 lg:mt-2 cursor-pointer',
+                'flex items-center text-purple text-2xl ltr:ml-2 rtl:mr-2 lg:mt-4 cursor-pointer',
                 'material-icons-outlined transform transition-all hover:scale-125' => ($favorited) ? false : true,
                 'material-icons' => (! $favorited) ? false : true,
             ])

safelist.txt

@@ -16,9 +16,11 @@ sm:rtl:left-4
 sm:w-500
 sm:min-h-500
 sm:max-w-4xl
+sm:space-x-4
 sm:text-purple
 md:grid-cols-2
 lg:mt-2
+lg:mt-4
 lg:pl-24
 lg:my-12
 lg:mt-4