Improved spacing of layout for better visiblity

hotwax · Oct 4, 2023 · b7e899b · b7e899b
1 parent 0bab469
commit b7e899b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/src/theme/variables.css b/src/theme/variables.css
@@ -279,15 +279,15 @@ ion-thumbnail > img {
 }
 
 .filters ion-item:first-child {
-  margin-left: var(--spacer-xs);
+  margin-left: var(--spacer-sm);
 }
 
 .filters ion-item:last-child {
-  margin-right: var(--spacer-xs);
+  margin-right: var(--spacer-sm);
 }
 
 .bulk-action {
-  margin: var(--spacer-sm) var(--spacer-sm) var(--spacer-xl);
+  margin: var(--spacer-xl) var(--spacer-sm) var(--spacer-lg);
 }
 
 img {
@@ -372,12 +372,19 @@ img {
 
 @media (min-width: 991px) {
   /* shipment card desktop layout start */
+  ion-searchbar.better-name-here {
+    padding-top: var(--spacer-base);
+    padding-inline: var(--spacer-sm)
+  }
+
   .results {
     max-width: 1100px;
     margin-inline: auto;
   }
 
   .order {
+    margin-inline: var(--spacer-sm);
+    margin-block-end: var(--spacer-lg);
     box-shadow: 3px 8px 18px -2px rgba(0,0,0, .2), -2px -2px 13px -6px rgba(0,0,0, .2);
   }
 

diff --git a/src/views/Completed.vue b/src/views/Completed.vue
@@ -17,7 +17,7 @@
     </ion-header>
 
     <ion-content id="view-size-selector">
-      <ion-searchbar :value="completedOrders.query.queryString" @keyup.enter="updateQueryString($event.target.value)" />
+      <ion-searchbar class="better-name-here" :value="completedOrders.query.queryString" @keyup.enter="updateQueryString($event.target.value)" />
 
       <div v-if="completedOrders.total">
 

diff --git a/src/views/InProgress.vue b/src/views/InProgress.vue
@@ -21,7 +21,7 @@
     </ion-header>
 
     <ion-content id="view-size-selector">
-      <ion-searchbar v-model="inProgressOrders.query.queryString" @keyup.enter="updateQueryString($event.target.value)"/>
+      <ion-searchbar class="better-name-here" v-model="inProgressOrders.query.queryString" @keyup.enter="updateQueryString($event.target.value)"/>
       <div v-if="inProgressOrders.total">
         <ion-radio-group v-model="selectedPicklistId" @ionChange="updateSelectedPicklist($event.detail.value)">
           <ion-row class="filters">

diff --git a/src/views/OpenOrders.vue b/src/views/OpenOrders.vue
@@ -20,7 +20,7 @@
     </ion-header>
 
     <ion-content id="view-size-selector">
-      <ion-searchbar :value="openOrders.query.queryString" @keyup.enter="updateQueryString($event.target.value)"/>
+      <ion-searchbar class="better-name-here" :value="openOrders.query.queryString" @keyup.enter="updateQueryString($event.target.value)"/>
       <div v-if="openOrders.total">
         <div class="filters">
           <ion-item lines="none" v-for="method in shipmentMethods" :key="method.val">
@@ -33,7 +33,7 @@
         </div>
 
         <div class="results">
-          <ion-button class="bulk-action desktop-only" fill="outline" size="large" @click="assignPickers">{{ $t("Print Picksheet") }}</ion-button>
+          <ion-button class="bulk-action desktop-only" size="large" @click="assignPickers">{{ $t("Print Picksheet") }}</ion-button>
 
           <ion-card class="order" v-for="(orders, index) in getOpenOrders()" :key="index">
             <div class="order-header">