FIX: Progressbar labels now centered & black (closes #165)

frontend/src/components/BCDList.vue

@@ -21,13 +21,13 @@
           <template v-slot:cell(usage)="data">
             <div v-for="subnet in bcd2subnets[data.item.name]"
                  :key="subnet.cidr" class="same-height">
-              <b-progress style="height: 1.5rem; margin-bottom: 1rem;"
+              <b-progress style="height: 1.5rem; margin-bottom: 1rem; position: relative"
                           v-if="isIPv4(subnet.cidr)"
-                          show-progress :max="IPAddressCount(subnet.cidr)">
+                          :max="IPAddressCount(subnet.cidr)">
                 <b-progress-bar
-                  :label="usagePercentage(subnet) +'%'"
                   :variant="progressVariant(usagePercentage(subnet))"
-                  :value="subnet.dns_addr_rr_count"></b-progress-bar>
+                  :value="subnet.dns_addr_rr_count"/>
+                <div class="better-progress-label">{{ usagePercentage(subnet) +'%' }}</div>
               </b-progress>
               <p v-else class="text-center"><i>N/A</i></p>
             </div>
@@ -227,4 +227,13 @@ export default {
 </script>
 
 <style scoped>
+.better-progress-label {
+  position: absolute;
+  top:0;
+  left:0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 1.5rem;
+}
 </style>