wip

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <Navigation />
-  <div class="p-2 bg-gray-400">
+  <div class="p-2">
     <router-view />
   </div>
   <PageFooter />

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>
 

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;

tailwind.config.js

@@ -5,7 +5,11 @@ export default {
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      transitionProperty: {
+        'width': 'width'
+      },
+    },
   },
   plugins: [],
 }