Changed card list style

SpeciesFileGroup · Sep 9, 2020 · bd60749 · bd60749
1 parent eef5c3a
commit bd60749
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 9 deletions.
diff --git a/app/javascript/vue/tasks/dwca_import/components/ImportList.vue b/app/javascript/vue/tasks/dwca_import/components/ImportList.vue
@@ -15,7 +15,7 @@
           class="full_width"
           :progress="item.progress"/>
         <progress-list
-          class="no_bullets"
+          :table-mode="true"
           :progress="item.progress"/>
       </div>
     </div>

diff --git a/app/javascript/vue/tasks/dwca_import/components/ProgressBar.vue b/app/javascript/vue/tasks/dwca_import/components/ProgressBar.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="progress-bar horizontal-left-content">
+  <div
+    class="progress-bar horizontal-left-content"
+    :style="{
+      backgroundColor: 'gray',
+      height: '10px'
+    }">
     <div
       v-for="(value, key) in colors"
       :key="key"

diff --git a/app/javascript/vue/tasks/dwca_import/components/ProgressList.vue b/app/javascript/vue/tasks/dwca_import/components/ProgressList.vue
@@ -1,11 +1,22 @@
 <template>
   <ul class="no_bullets">
-    <li
-      class="flex-separate"
-      v-for="(color, property) in colors"
-      :key="property">
-      <span>{{ property }}: <b :style="{ color: color }">{{ showTotal(progress[property]) }}</b></span>
-    </li>
+    <template v-if="tableMode">
+      <li
+        style="border-bottom: 1px solid #EAEAEA"
+        class="flex-separate padding-small"
+        v-for="(color, property) in colors"
+        :key="property">
+        <span>{{ property }}</span> <b :style="{ color: color }">{{ showTotal(progress[property]) }}</b>
+      </li>
+    </template>
+    <template v-else>
+      <li
+        class="flex-separate"
+        v-for="(color, property) in colors"
+        :key="property">
+        <span>{{ property }}: <b :style="{ color: color }">{{ showTotal(progress[property]) }}</b></span>
+      </li>
+    </template>
   </ul>
 </template>
 
@@ -18,6 +29,10 @@ export default {
     progress: {
       type: Object,
       required: true
+    },
+    tableMode: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

diff --git a/app/javascript/vue/tasks/dwca_import/const/importColors.js b/app/javascript/vue/tasks/dwca_import/const/importColors.js
@@ -1,7 +1,7 @@
 export default {
   Imported: 'blue',
   Ready: 'green',
-  NotReady: 'gray',
+  NotReady: 'black',
   Errored: 'red',
   Failed: 'orange',
   Unsupported: 'brown'