Project and report display improvements

overshard · Jan 25, 2019 · bfa5d8e · bfa5d8e
1 parent 8bdd14a
commit bfa5d8e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 deletions.
diff --git a/client/static_src/components/projects/project.vue b/client/static_src/components/projects/project.vue
@@ -4,24 +4,26 @@
   @modal="$emit('modal')"
   @delete="deleteProject(project)">
   <template slot="card-body">
-    <div class="card-title h5 font-weight-bold">
-      {{ project.name }}
-    </div>
-    <div v-if="project.client_details" class="card-subtitle h6 text-muted mb-4">
-      for <strong>{{ project.client_details.name }}</strong>
-    </div>
-    <div v-if="project.total_duration && project.total_entries" class="card-subtitle h6 mb-5">
-      <icon :icon="['fas', 'list']" class="mr-1 text-muted"/>
-      {{ project.total_entries }}
-      <icon :icon="['fas', 'clock']" class="ml-3 mr-1 text-muted"/>
-      {{ project.total_duration }}
-    </div>
-    <div v-if="project.percent_done" class="card-subtitle h6 w-100">
-      <div class="progress w-100">
-        <div
-          :class="['progress-bar', [project.percent_done > 100 ? 'bg-danger' : '']]"
-          :style="{ width: project.percent_done + '%' }">
-          {{ project.percent_done }}%
+    <div class="d-flex flex-column h-100">
+      <div class="card-title h5 font-weight-bold">
+        {{ project.name }}
+      </div>
+      <div v-if="project.client_details" class="card-subtitle h6 text-muted mb-4">
+        for <strong>{{ project.client_details.name }}</strong>
+      </div>
+      <div v-if="project.total_duration && project.total_entries" class="card-subtitle h6 mb-5 flex-grow-1">
+        <icon :icon="['fas', 'list']" class="mr-1 text-muted"/>
+        {{ project.total_entries }}
+        <icon :icon="['fas', 'clock']" class="ml-3 mr-1 text-muted"/>
+        {{ project.total_duration }}
+      </div>
+      <div v-if="project.percent_done" class="card-subtitle h6 w-100">
+        <div class="progress w-100">
+          <div
+            :class="['progress-bar', [project.percent_done > 100 ? 'bg-danger' : '']]"
+            :style="{ width: project.percent_done + '%' }">
+            {{ project.percent_done }}%
+          </div>
         </div>
       </div>
     </div>

diff --git a/client/static_src/components/reports/reports.vue b/client/static_src/components/reports/reports.vue
@@ -82,7 +82,7 @@
                   id="report-filter-min-date"
                   v-model="minDate"
                   type="text"
-                  class="form-control form-control-sm date-input"
+                  class="form-control date-input"
                   placeholder="Min. date"
                   allowclear/>
               </div>
@@ -92,7 +92,7 @@
                   id="report-filter-max-date"
                   v-model="maxDate"
                   type="text"
-                  class="form-control form-control-sm date-input"
+                  class="form-control date-input"
                   placeholder="Max. date"
                   allowclear/>
               </div>