From 07f80bdc7a03e54a579e1db27274b187d6b2ea1d Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Mon, 24 Oct 2022 14:15:06 +0300
Subject: [PATCH] refactoring for timing

---
 presets.js                           |  7 ++++++-
 public/akaunting-js/generalAction.js | 10 +++++++++-
 public/css/app.css                   | 28 ++++++++++++++++++++++++++++
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/presets.js b/presets.js
index 5d701e8a2..8b8f7c482 100644
--- a/presets.js
+++ b/presets.js
@@ -234,6 +234,10 @@ module.exports = {
               marquee: {
                 '0%': { transform: 'translateX(0%)' },
                 '100%': { transform: 'translateX(-100%)' },
+              },
+              marquee_long: {
+                '0%': { transform: 'translateX(0%)' },
+                '100%': { transform: 'translateX(-350%)' },
               }
           },
 
@@ -244,7 +248,8 @@ module.exports = {
               spin: 'spin 1000ms infinite',
               submit: 'submit 0.7s ease alternate infinite',
               submit_second: 'submit_second 0.7s ease alternate infinite',
-              marquee: 'marquee 9s linear infinite'
+              marquee: 'marquee 9s linear infinite',
+              marquee_long: 'marquee_long 14s linear infinite'
           },
 
           transitionProperty: {
diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index fa0ab1d43..090449efe 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -370,7 +370,14 @@ function marqueeAnimation(truncate) {
     if (truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.parentElement.clientWidth) {        
         truncate.addEventListener('mouseover', function () {
             truncate.parentElement.style.animationPlayState = 'running';
-            truncate.parentElement.classList.add('animate-marquee');
+
+            if (truncate.offsetWidth > 400 && truncate.parentElement.clientWidth < 150) {
+                truncate.parentElement.classList.remove('animate-marquee');
+                truncate.parentElement.classList.add('animate-marquee_long');
+            } else {
+                truncate.parentElement.classList.remove('animate-marquee_long');
+                truncate.parentElement.classList.add('animate-marquee');
+            }
     
             if (truncate.parentElement.classList.contains('truncate')) {
                 truncate.parentElement.classList.remove('truncate');
@@ -380,6 +387,7 @@ function marqueeAnimation(truncate) {
         truncate.addEventListener('mouseout', function () {
             truncate.parentElement.style.animationPlayState = 'paused';
             truncate.parentElement.classList.remove('animate-marquee');
+            truncate.parentElement.classList.remove('animate-marquee_long');
             truncate.parentElement.classList.add('truncate');
         });
 
diff --git a/public/css/app.css b/public/css/app.css
index 853582455..032dc448a 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10039,6 +10039,34 @@ input[type="date"]::-webkit-inner-spin-button,
   -webkit-animation: marquee 9s linear infinite;
           animation: marquee 9s linear infinite;
 }
+@-webkit-keyframes marquee_long{
+
+  0%{
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+
+  100%{
+    -webkit-transform: translateX(-350%);
+            transform: translateX(-350%);
+  }
+}
+@keyframes marquee_long{
+
+  0%{
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+
+  100%{
+    -webkit-transform: translateX(-350%);
+            transform: translateX(-350%);
+  }
+}
+.animate-marquee_long{
+  -webkit-animation: marquee_long 14s linear infinite;
+          animation: marquee_long 14s linear infinite;
+}
 .cursor-auto{
   cursor: auto;
 }