feat: Added animation, also fixed custom styles mess

Gwardia-Czapli · Apr 28, 2024 · f2f1885 · f2f1885
1 parent f94e37d
commit f2f1885
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 23 deletions.
diff --git a/core/templates/core/profile.html b/core/templates/core/profile.html
@@ -23,7 +23,7 @@ <h1 class="text-2xl mt-4">Doświadczenie</h1>
                 <p>Doświadczenie: {{ user.exp }}</p>
             </div>
             <div class="border-2 border-gray-600 rounded-2xl h-[3svh] overflow-hidden">
-                <div class="bg-fixed bg-gradient-to-r from-[#663dff] from-[0%] via-[#aa00ff] via-[37%] to-[#cc4499] to-[100%] h-full rounded-s-2xl w-[{{ user.exp|calculate_percentage:user.max_exp }}%]"></div>
+                <div class="bg-fixed bg-gradient-to-r from-[#663dff] from-[0%] via-[#aa00ff] via-[37%] to-[#cc4499] to-[100%] h-full rounded-s-2xl w-[{{ user.exp|calculate_percentage:user.max_exp }}%] animate-levelBarSlideIn "></div>
             </div>
             {# those max values are just placeholders, we will set it while adding lvl handling #}
         </div>

diff --git a/static/GwardiaHub/tailwind_custom_styles.js b/static/GwardiaHub/tailwind_custom_styles.js
diff --git a/static/tailwind_custom_styles.js b/static/tailwind_custom_styles.js
@@ -1,14 +1,23 @@
 // Used for custom styles in templates
 
 tailwind.config = {
-      theme: {
+    theme: {
         extend: {
-          borderWidth: {
-            '12': '12px',
-          },
-          width: {
-              "1/8": "12.5%",
-          }
+            borderWidth: {
+                '12': '12px',
+            },
+            width: {
+                "1/8": "12.5%",
+            },
+            keyframes: {
+                levelBarSlideIn: {
+                    '0%': { transform: 'translateX(-100%)' },
+                    '100%': { transform: 'translateX(0)' },
+                }
+            },
+            animation: {
+                levelBarSlideIn: 'levelBarSlideIn 0.9s ease-in-out'
+            },
         },
       },
-}
+}