Merge pull request #128 from ymaheshwari1/fix/ui

Improved: UI to update the width for the order routing filters section and added slots for filter selector icon
hotwax · Feb 21, 2024 · bcbaad0 · bcbaad0
2 parents f114bf8 + 8b2e06c
commit bcbaad0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
@@ -29,7 +29,7 @@
           <ion-item-group>
             <ion-item-divider color="light">
               <ion-label>{{ translate("Filters") }}</ion-label>
-              <ion-button fill="clear" @click="addOrderRouteFilterOptions('ORD_FILTER_PRM_TYPE', 'ENTCT_FILTER', 'Filters')">
+              <ion-button slot="end" fill="clear" @click="addOrderRouteFilterOptions('ORD_FILTER_PRM_TYPE', 'ENTCT_FILTER', 'Filters')">
                 <ion-icon slot="icon-only" :icon="optionsOutline"/>
               </ion-button>
             </ion-item-divider>
@@ -68,7 +68,7 @@
           <ion-item-group>
             <ion-item-divider color="light">
               <ion-label>{{ translate("Sort") }}</ion-label>
-              <ion-button fill="clear" @click="addOrderRouteFilterOptions('ORD_SORT_PARAM_TYPE', 'ENTCT_SORT_BY', 'Sort')">
+              <ion-button slot="end" fill="clear" @click="addOrderRouteFilterOptions('ORD_SORT_PARAM_TYPE', 'ENTCT_SORT_BY', 'Sort')">
                 <ion-icon slot="icon-only" :icon="optionsOutline"/>
               </ion-button>
             </ion-item-divider>
@@ -125,11 +125,11 @@
             </div>
           </ion-card>
           <section class="filters">
-            <ion-card class="ion-padding-vertical">
+            <ion-card>
               <ion-item>
                 <ion-icon slot="start" :icon="filterOutline"/>
                 <h4>{{ translate("Filters") }}</h4>
-                <ion-button fill="clear" @click="addInventoryFilterOptions('INV_FILTER_PRM_TYPE', 'ENTCT_FILTER', 'Filters')">
+                <ion-button slot="end" fill="clear" @click="addInventoryFilterOptions('INV_FILTER_PRM_TYPE', 'ENTCT_FILTER', 'Filters')">
                   <ion-icon slot="icon-only" :icon="optionsOutline"/>
                 </ion-button>
               </ion-item>
@@ -161,11 +161,11 @@
                 <ion-chip outline @click="selectValue('BRK_SAFETY_STOCK', 'Add safety stock')">{{ getFilterValue(inventoryRuleFilterOptions, conditionFilterEnums, "BRK_SAFETY_STOCK").fieldValue || getFilterValue(inventoryRuleFilterOptions, conditionFilterEnums, "BRK_SAFETY_STOCK").fieldValue == 0 ? getFilterValue(inventoryRuleFilterOptions, conditionFilterEnums, "BRK_SAFETY_STOCK").fieldValue : "-" }}</ion-chip>
               </ion-item>
             </ion-card>
-            <ion-card class="ion-padding-vertical">
+            <ion-card>
               <ion-item>
                 <ion-icon slot="start" :icon="swapVerticalOutline"/>
                 <h4>{{ translate("Sort") }}</h4>
-                <ion-button fill="clear" @click="addInventoryFilterOptions('INV_SORT_PARAM_TYPE', 'ENTCT_SORT_BY', 'Sort')">
+                <ion-button slot="end" fill="clear" @click="addInventoryFilterOptions('INV_SORT_PARAM_TYPE', 'ENTCT_SORT_BY', 'Sort')">
                   <ion-icon slot="icon-only" :icon="optionsOutline"/>
                 </ion-button>
               </ion-item>

diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
@@ -585,7 +585,7 @@ section > * {
 
 ion-content > div {
   display: grid;
-  grid-template-columns: 300px 1fr;
+  grid-template-columns: minmax(375px, 25%) 1fr;
   height: 100%;
 }