From eeb3379e8077f44fc69ca9e2b5adfa2233c90624 Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Mon, 14 Nov 2022 09:23:45 +0300
Subject: [PATCH] two column header controlled

---
 public/akaunting-js/generalAction.js          | 36 +++++++++++++++++++
 public/css/app.css                            |  3 ++
 resources/assets/sass/app.css                 |  5 +++
 .../components/layouts/admin/header.blade.php | 24 ++++++-------
 resources/views/components/title.blade.php    | 10 +++---
 .../views/livewire/menu/favorite.blade.php    |  2 +-
 safelist.txt                                  |  1 +
 7 files changed, 62 insertions(+), 19 deletions(-)

diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index cbf0431bc..73cade366 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -440,3 +440,39 @@ document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
 //disable/enable icons ejected from data-truncate-marquee
 
 //margue animation for truncated text
+
+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 (title_truncate.clientWidth > first.clientWidth) {
+                title_truncate.style.width = first.clientWidth + 'px';
+                let subtract = title_truncate.clientWidth - 40;
+                title_truncate.style.width = subtract + 'px';
+            }
+
+            if (second.clientHeight > 44) {
+                first.classList.add('w-full', 'sm:w-6/12');
+            } else {
+                first.classList.remove('sm:w-6/12');
+            }
+
+            if (title_truncate.clientWidth > first.clientWidth) { 
+                let marquee = first.querySelector('[data-title-truncate]');
+
+                marquee.addEventListener('mouseover', function () {
+                    marquee.classList.add('animate-marquee');
+                    marquee.classList.remove('truncate');
+                    marquee.style.animationPlayState = 'running';
+                });
+    
+                marquee.addEventListener('mouseout', function () {
+                    marquee.style.animationPlayState = 'paused';
+                    marquee.classList.remove('animate-marquee');
+                    marquee.classList.add('truncate');
+                });
+            }
+        }
+    });
+});
diff --git a/public/css/app.css b/public/css/app.css
index 9fcc9e415..e89528355 100644
--- a/public/css/app.css
+++ b/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;
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index a1c665be5..a6c484e43 100644
--- a/resources/assets/sass/app.css
+++ b/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;
     }
diff --git a/resources/views/components/layouts/admin/header.blade.php b/resources/views/components/layouts/admin/header.blade.php
index 86f67f256..b92cb33b2 100644
--- a/resources/views/components/layouts/admin/header.blade.php
+++ b/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 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>
diff --git a/resources/views/components/title.blade.php b/resources/views/components/title.blade.php
index 13d910f79..68eccf90b 100644
--- a/resources/views/components/title.blade.php
+++ b/resources/views/components/title.blade.php
@@ -5,11 +5,11 @@
 @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>
+<div class="overflow-x-hidden">
+    <div data-title-truncate class="truncate">
+        {!! $slot !!}
+    </div>
+</div>
 @else 
     {!! $slot !!}
 @endif
\ No newline at end of file
diff --git a/resources/views/livewire/menu/favorite.blade.php b/resources/views/livewire/menu/favorite.blade.php
index 3df621411..7a02147ea 100644
--- a/resources/views/livewire/menu/favorite.blade.php
+++ b/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,
             ])
diff --git a/safelist.txt b/safelist.txt
index af51a9e1a..b6d71623c 100644
--- a/safelist.txt
+++ b/safelist.txt
@@ -18,6 +18,7 @@ sm:min-h-500
 sm:max-w-4xl
 md:grid-cols-2
 lg:mt-2
+lg:mt-4
 lg:pl-24
 lg:my-12
 lg:mt-4