Fix exercise progress bar not filling up correctly

project-spectra · Oct 12, 2019 · c56624d · c56624d
1 parent 675b76f
commit c56624d
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/app/components/UIControls/SpectraProgressBox.vue b/app/components/UIControls/SpectraProgressBox.vue
@@ -1,7 +1,7 @@
 <!--Spectra-themed progress box-->
 
 <template>
-    <Label text="" width="200" height="50" backgroundColor="transparent" :style="style"/>
+    <Label text="" width="250" height="50" backgroundColor="transparent" :style="style"/>
 </template>
 
 <script>
@@ -14,21 +14,28 @@
         },
         computed: {
             style() {
-                let percentage = this.percentage ? 100 - this.percentage : '0';
+                let pct_gradient = this.percentage ? 100 - this.percentage : '0';
 
-                if (percentage == 0) {
+                if (this.percentage == 0) {
                   return {
                       'background': `${Config.mutedColor}`,
-                      'border-radius': '7dp',
+                      'border-radius': '5dp',
                       'border-color': `${Config.primaryColor}`,
                       'border-width': `2dp`
                   };
-                } else {
+                } else if (this.percentage == 100) {
                   return {
+                      'background': `${Config.primaryColor}`,
+                      'border-radius': '5dp',
+                      'border-color': `${Config.primaryColor}`,
+                      'border-width': `2dp`
+                  };
+                } else {
+                    return {
                       'background': this.percentage ?
-                          `linear-gradient(to bottom left, #E8E8E8 ${percentage}%, ${Config.primaryColor} ${percentage}%)`:
+                          `linear-gradient(to bottom left, #E8E8E8 ${pct_gradient}%, ${Config.primaryColor} ${pct_gradient}%)`:
                           Config.primaryColor,
-                      'border-radius': '7dp',
+                      'border-radius': '5dp',
                       'border-color': `${Config.primaryColor}`,
                       'border-width': `2dp`
                   };