AMP-3162:

- remove extra div for filter buttons - fine tune margin/padding
AudiovisualMetadataPlatform · May 29, 2024 · cd02d4d · cd02d4d
1 parent dfbbc1b
commit cd02d4d
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 43 deletions.
diff --git a/src/components/dashboard/Dashboard.vue b/src/components/dashboard/Dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="collections w-100">
+  <div class="collections w-100 px-0">
     <div
       class="container-fluid"
       :class="{
@@ -21,15 +21,15 @@
                   'mb-0': parent === 'NewTest' || parent === 'TestResults',
                 }"
               >
-                <div class="card-body">
+                <div class="card-body px-2">
                   <h1
                     v-if="parent !== 'NewTest' && parent !== 'TestResults'"
                     class="card-title pb-3"
                   >
                     AMP Dashboard
                   </h1>
                   <div v-if="filterCount > 0">
-                    <div class="col d-flex flex-wrap">
+                    <div class="col d-flex flex-wrap px-0">
                       <div class="col-sm-2 label-bold">
                         CURRENTLY FILTERED BY
                       </div>
@@ -540,7 +540,7 @@
                     </div>
                   </div>
 
-                  <div class="col d-flex flex-wrap filter-btns">
+                  <div class="col d-flex flex-wrap filter-btns px-0">
                     <DateFilter
                       :parent="parent"
                       v-if="parent === 'TestResults'"
@@ -615,38 +615,34 @@
                       @click="onOpenModal('status')"
                       >Status</b-button
                     >
-                  </div>   
-                  <div class="col d-flex flex-wrap py-2">
                     <search-filter
                       v-if="parent !== 'Deliverables'"
                       :parent="parent"
-                      class="col-xl-3 col-md-3 col-sm-12 col-xs-12 px-2 my-0"
-                    />                        
-                    <span
+                      class="px-2 my-1"
+                    />                 
+                    <span 
                       v-if="parent !== 'NewTest' && parent !== 'TestResults'"
-                      class="relevant-togggle"
-                      >
-                      <span class="txt-v pr-2"
-                        >Show Relevant Results Only</span
-                      >
+                      class="px-2 my-2"
+                    >
+                      <span class="txt-v px-1 py-2">
+                        Show Relevant Results Only
+                      </span>
                       <label class="switch my-0" title="Relevant Result">
                         <span class="sr-only">Relevant Result</span>
                         <input
                           type="checkbox"
-                          v-model="
-                            workflowDashboard.searchQuery.filterByRelevant
-                          "
+                          v-model="workflowDashboard.searchQuery.filterByRelevant"
                         />
                         <span class="slider round"></span>
                       </label>
                     </span>
-                    <div
+                    <span
                       v-if="
                         parent !== 'NewTest' &&
                           parent !== 'TestResults' &&
                           parent !== 'Deliverables'
                         "
-                        class="export-row ml-auto px-2"
+                        class="ml-auto px-2 my-2"
                       >
                       <input
                         id="export-results"
@@ -655,7 +651,7 @@
                         v-on:click="exportResults"
                         value="Export to CSV"
                       />
-                    </div>
+                    </span>
                   </div>                        
 
                   <DashboardTable
@@ -669,7 +665,7 @@
                       <div
                         v-if="parent !== 'NewTest' && parent !== 'Deliverables'"
                         id="btn-show-hide"
-                        class="dropdown mt-2"
+                        class="dropdown mb-2"
                       >
                         <b-dropdown id="dropdown-form">
                             <template #button-content>
@@ -1321,10 +1317,6 @@ export default {
   border-color: #17a2b8 !important;
 }
 
-.relevant-togggle {
-  margin-right: 0;
-}
-
 .filter-gap {
   height: 18px !important;
 }

diff --git a/src/components/dashboard/DashboardFilters/SearchFilter.vue b/src/components/dashboard/DashboardFilters/SearchFilter.vue
@@ -1,6 +1,6 @@
 <template>
-  <div id="myTable_filter" class="dataTables_filter">
-      <form
+  <span id="myTable_filter" class="dataTables_filter">
+    <form
       @submit="
         $event.preventDefault();
         onSearchChange();
@@ -13,7 +13,7 @@
         class="form-control customSearchWidth"
       />
     </form>
-  </div>
+  </span>
 </template>
 
 <script>
@@ -99,12 +99,6 @@ export default {
 #search-input {
   display: inline;
 }
-.spacer {
-  height: 24px;
-}
-.submitter {
-  margin: 0.2rem;
-}
 .bootstrap-typeahead {
   height: calc(2.25rem + 1px);
   padding: 0rem 0rem;

diff --git a/src/components/dashboard/DashboardTable.vue b/src/components/dashboard/DashboardTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="dataTables_wrapper no-footer">
     <loader :show="workflowDashboard.loading" />
-    <div v-if="parent !== 'Deliverables'" class="col d-flex flex-wrap justify-content-between">
+    <div v-if="parent !== 'Deliverables'" class="col d-flex flex-wrap px-0 justify-content-between">
       <div
         class="
           col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12
@@ -272,7 +272,7 @@
       </table>
     </div>     
 
-    <div v-if="parent !== 'Deliverables'" class="col d-flex flex-wrap">
+    <div v-if="parent !== 'Deliverables'" class="col d-flex flex-wrap justify-content-between">
       <label>{{ totalText }}</label>
       <b-pagination
         class="col-xl-6 col-lg-6 col-md-6 col-sm-12 w-100"
@@ -669,10 +669,6 @@ th {
   width: 200px;
   margin: 10px 0 10px 15px;
 }
-.export-row {
-  display: flex;
-  justify-content: flex-end;
-}
 .btn-blue:hover,
 .btn-blue:active,
 .btn-blue:visited {

diff --git a/src/components/evaluation/MGMevaluation.vue b/src/components/evaluation/MGMevaluation.vue
@@ -6,7 +6,7 @@
         <div class="container-fluid p-0">
           <div class="row expand-h">
             <div class="col-12 p-0">
-              <main>
+              <main class="m-2">
                 <h1>MGM Evaluation</h1>
                 <b-overlay v-if="mgmCategoryId" rounded="sm" class="mt-4">
                   <div>
@@ -92,15 +92,18 @@
                       </b-navbar>
 
                       <dl
-                        class="d-flex col-12 mt-3 mb-0 pr-0"
+                        class="d-flex col-12 mt-3 mb-0 p-0"
                         v-if="selectedTab === 0"
                       >
                         <TestResults
                           :mgmCategory="mgmCategoryDetails"
                           :mgmCategoryId="mgmCategoryId"
                         />
                       </dl>
-                      <dl class="d-flex col-12 mt-3 mb-0 pr-0" v-else>
+                      <dl 
+                        class="d-flex col-12 mt-3 mb-0 pr-0" 
+                        v-else
+                      >
                         <div class="w-100 row div-test">
                           <NewTest
                             :mgmCategory="mgmCategoryDetails"