From 4f0fc84aef2687f53a4709c166d0eb7935d666d3 Mon Sep 17 00:00:00 2001
From: Jeremy Stucki <dev@jeremystucki.ch>
Date: Fri, 2 Feb 2024 22:11:09 +0100
Subject: [PATCH] wip

---
 src/App.vue                                   |  2 +-
 src/components/BeautifulProgressIndicator.vue | 39 +++++++++----------
 styles/main.scss                              | 39 -------------------
 tailwind.config.js                            |  6 ++-
 4 files changed, 25 insertions(+), 61 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0476bad..b60da9d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <Navigation />
-  <div class="p-2 bg-gray-400">
+  <div class="p-2">
     <router-view />
   </div>
   <PageFooter />
diff --git a/src/components/BeautifulProgressIndicator.vue b/src/components/BeautifulProgressIndicator.vue
index 8c9a6e3..5eb1f9e 100644
--- a/src/components/BeautifulProgressIndicator.vue
+++ b/src/components/BeautifulProgressIndicator.vue
@@ -1,28 +1,27 @@
+<link rel="stylesheet" href="../../styles/main.scss">
 <template>
-  <div class="container">
-    <p class="ratio-label">
-      {{ earned }} / {{ required }}
-    </p>
-    <p
+  <div class="text-xs flex justify-between px-1 py-0.5">
+    <span>{{ earned }} / {{ required }}</span>
+    <span
       v-if="planned > 0"
-      class="planned-label"
+      class="text-gray-400"
     >
       {{ planned }} noch geplant
-    </p>
+    </span>
+  </div>
 
-    <div class="progress-container">
-      <div
-        class="planned-progress"
-        :style="{ width: plannedProgress }"
-      />
-      <div
-        class="earned-progress"
-        :style="{
-          width: earnedProgress,
-          'background-color': color,
-        }"
-      />
-    </div>
+  <div class="bg-gray-200 relative h-5 w-48 rounded-full">
+    <div
+      class="bg-gray-300 h-full absolute rounded-full"
+      :style="{ width: plannedProgress }"
+    />
+    <div
+      class="h-full absolute transition-width duration-1000 rounded-full"
+      :style="{
+        width: earnedProgress,
+        'background-color': color,
+      }"
+    />
   </div>
 </template>
 
diff --git a/styles/main.scss b/styles/main.scss
index 53d3b97..827ec2c 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -105,45 +105,6 @@
   }
 }
 
-/* Beautiful Progress Indicator */
-.container {
-  width: 12em;
-}
-
-.progress-container {
-  position: relative;
-  background-color: lightgray;
-}
-
-.planned-progress {
-  background-color: #A0A0A0;
-}
-
-.earned-progress, .planned-progress {
-  position: absolute;
-  transition: width 1s ease-in-out;
-}
-
-.progress-container, .earned-progress, .planned-progress {
-  height: 20px;
-  border-radius: 10px;
-}
-
-.ratio-label, .planned-label {
-  display: inline;
-  vertical-align: text-bottom;
-
-  font-size: 0.75em;
-
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
-.planned-label {
-  float: right;
-  color: gray;
-}
-
 /* Focus */
 .focus-missing-modules-list {
   padding: 1rem;
diff --git a/tailwind.config.js b/tailwind.config.js
index bd3eb14..e381cb0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,11 @@ export default {
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      transitionProperty: {
+        'width': 'width'
+      },
+    },
   },
   plugins: [],
 }