Merge pull request #2800 from brkcvn/head

Loading styling converted to custom css

public/css/custom_loading.css

@@ -0,0 +1,99 @@
+@media (min-width: 1024px) {
+  .lg\:w-4\/5 {
+    width: 80%;
+  }
+
+  .lg\:-mt-16 {
+    margin-top: -4rem;
+  }
+
+  .lg\:flex {
+    display: flex;
+  }
+}
+
+[dir="ltr"] .ltr\:right-0 {
+  right: 0px;
+}
+
+[dir="rtl"] .ltr\:left-0 {
+  left: 0px;
+}
+
+.bg-body {
+  background-color: #fcfcfc;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.-mx-1 {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.right-0 {
+  right: 0px;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.w-28 {
+  width: 7rem;
+}
+
+.h-28 {
+    height: 7rem;
+}
+
+.material-icons-outlined {
+  font-family: 'Material Icons Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  }
+  

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

@@ -16,6 +16,8 @@
 
     <x-layouts.pwa.head />
     
+    <link rel="stylesheet" href="{{ asset('public/css/custom_loading.css?v=' . version('short')) }}" type="text/css">
+
     <!-- Favicon -->
     <link rel="icon" href="{{ asset('public/img/favicon.ico') }}" type="image/png">
 

resources/views/components/layouts/auth/head.blade.php

@@ -16,6 +16,8 @@
 
     <x-layouts.pwa.head />
 
+    <link rel="stylesheet" href="{{ asset('public/css/custom_loading.css?v=' . version('short')) }}" type="text/css">
+
     <!-- Favicon -->
     <link rel="icon" href="{{ asset('public/img/favicon.ico') }}" type="image/png">
 

resources/views/components/layouts/modules/head.blade.php

@@ -16,6 +16,8 @@
 
     <x-layouts.pwa.head />
 
+    <link rel="stylesheet" href="{{ asset('public/css/custom_loading.css?v=' . version('short')) }}" type="text/css">
+    
     <!-- Favicon -->
     <link rel="icon" href="{{ asset('public/img/favicon.ico') }}" type="image/png">
 

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

@@ -16,6 +16,8 @@
 
     <x-layouts.pwa.head />
 
+    <link rel="stylesheet" href="{{ asset('public/css/custom_loading.css?v=' . version('short')) }}" type="text/css">
+
     <!-- Favicon -->
     <link rel="icon" href="{{ asset('public/img/favicon.ico') }}" type="image/png">
 

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

@@ -16,6 +16,8 @@
 
     <x-layouts.pwa.head />
 
+    <link rel="stylesheet" href="{{ asset('public/css/custom_loading.css?v=' . version('short')) }}" type="text/css">
+
     <!-- Favicon -->
     <link rel="icon" href="{{ asset('public/img/favicon.ico') }}" type="image/png">
 

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

@@ -16,6 +16,8 @@
 
     <x-layouts.pwa.head />
 
+    <link rel="stylesheet" href="{{ asset('public/css/custom_loading.css?v=' . version('short')) }}" type="text/css">
+
     <!-- Favicon -->
     <link rel="icon" href="{{ asset('public/img/favicon.ico') }}" type="image/png">
 

resources/views/components/loading/absolute.blade.php

@@ -2,7 +2,7 @@
   x-data="{ }"
   x-init="document.querySelector('[data-modal-handle]') ? document.querySelectorAll('[data-modal-handle]').forEach((item) => { item.classList.add('invisible') }) : null, setTimeout(() => $refs.loadingAbsoluteContent.remove(), 1000), setTimeout(() => document.querySelector('[data-modal-handle]') ? document.querySelectorAll('[data-modal-handle]').forEach((item) => { item.classList.remove('invisible') }) : null , 1010)"
   x-ref="loadingAbsoluteContent"
-  class="absolute w-full lg:flex items-start justify-center bg-body top-0 bottom-0 left-0 right-0"
+  class="absolute w-full lg:flex items-start justify-center bg-body top-0 bottom-0 left-0 right-0 z-50"
   style="z-index: 60;"
 >
   <img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28" alt="Akaunting" />

resources/views/components/loading/content.blade.php

@@ -2,8 +2,8 @@
   x-data="{ }"
   x-init="document.querySelector('[data-modal-handle]') ? document.querySelectorAll('[data-modal-handle]').forEach((item) => { item.classList.add('invisible') }) : null, setTimeout(() => $refs.loadingContent.remove(), 1000), setTimeout(() => document.querySelector('[data-modal-handle]') ? document.querySelectorAll('[data-modal-handle]').forEach((item) => { item.classList.remove('invisible') }) : null , 1010)"
   x-ref="loadingContent"
-  class="fixed w-full lg:w-4/5 h-screen flex items-center justify-center bg-body top-0 bottom-0 ltr:right-0 rtl:left-0 -mx-1"
+  class="fixed w-full lg:w-4/5 h-screen flex items-center justify-center bg-body top-0 bottom-0 ltr:right-0 rtl:left-0 -mx-1 z-50"
-  style="position:fixed; z-index:60; top:0; bottom:0; background-color: #fcfcfc;"
+  style="z-index: 60;"
 >
   <img src="{{ asset('public/img/akaunting-loading.gif') }}" class="w-28 h-28 lg:-mt-16" alt="Akaunting" />
 </div>