Styling fixes

CaptainIRS · Jul 11, 2024 · f404bee · f404bee
1 parent 0e8894b
commit f404bee
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 25 deletions.
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -104,11 +104,6 @@ td {
     position: absolute;
 }
 
-.lds-spinner-bottom {
-    bottom: 40px;
-    left: 0;
-}
-
 .overlay-visible {
     opacity: 1;
 }

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1,11 +1,12 @@
 import {
     Livewire,
-    Alpine,
+    // Alpine,
 } from "../../vendor/livewire/livewire/dist/livewire.esm";
 
-import SelectFormComponentAlpinePlugin from "../../vendor/filament/forms/resources/js/components/select";
+// import SelectFormComponentAlpinePlugin from "../../vendor/filament/forms/resources/js/components/select";
+// import TextInputFormComponentAlpinePlugin from "../../vendor/filament/forms/resources/js/components/text-input";
 
-Alpine.plugin(SelectFormComponentAlpinePlugin);
+// Alpine.plugin(SelectFormComponentAlpinePlugin);
 // Alpine.plugin(TextInputFormComponentAlpinePlugin);
 
 Livewire.start();

diff --git a/resources/js/chart.js b/resources/js/chart.js
@@ -97,11 +97,17 @@ window.addEventListener("load", () => {
                 show: true,
                 type: "scroll",
                 orient: "horizontal",
-                height: 100,
+                height: 50,
                 top: 0,
                 textStyle: {
                     width: 200,
                     overflow: "break",
+                    fontSize: 10,
+                },
+                pageIconColor: isDarkMode() ? "#fff" : "#000",
+                pageIconInactiveColor: isDarkMode() ? "#666" : "#ddd",
+                pageTextStyle: {
+                    color: isDarkMode() ? "#fff" : "#000",
                 },
             },
             grid: {

diff --git a/resources/views/livewire/chart.blade.php b/resources/views/livewire/chart.blade.php
@@ -17,7 +17,22 @@
 @endpush
 
 <div class="relative flex flex-col-reverse">
-    <main id="chartContainer" class="block">
+    <main id="chartContainer" class="block relative">
+        <div class="lds-spinner overlay-centered z-50 opacity-0 transition-opacity duration-500"
+            wire:loading.class="opacity-100">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
         <h2 class="text-xl font-bold m-4 text-center">{{ $title }}</h2>
         <div wire:ignore id="legend"></div>
         <div wire:ignore id="myChart"></div>
@@ -38,21 +53,6 @@
             {{ $this->form }}
         </div>
     </div>
-    <div class="lds-spinner lds-spinner-bottom opacity-0 transition-opacity duration-500"
-        wire:loading.class="opacity-100">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-    </div>
     @vite('resources/js/chart.js')
 
 </div>