Merge pull request #17 from Nihu-Sharma/updated-ui

Updated the UI
hotwax · Mar 8, 2022 · d86b671 · d86b671
2 parents 1a92e51 + 766517d
commit d86b671
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 38 deletions.
diff --git a/src/components/ProductPopover.vue b/src/components/ProductPopover.vue
@@ -3,10 +3,10 @@
     <ion-item lines="none">
       <ion-label>{{ this.isVirtual ? item.internalName : item.parentProductName }}</ion-label>
     </ion-item>
-    <ion-item lines="none">
+    <!--ion-item lines="none">
       <ion-icon slot="start" :icon="arrowUndoOutline" />
       <ion-label>{{ $t('Reset') }}</ion-label>
-    </ion-item>
+    </ion-item-->
     <ion-item lines="none" @click="onlySelect">
       <ion-icon slot="start" :icon="checkboxOutline" />
       <ion-label>{{ $t('Only select') }}</ion-label>
@@ -19,7 +19,6 @@ import { IonContent, IonIcon, IonLabel, IonItem, popoverController } from '@ioni
 import { defineComponent } from 'vue';
 import { mapGetters, useStore } from "vuex";
 import {
-  arrowUndoOutline,
   checkboxOutline,
 } from 'ionicons/icons';
 export default defineComponent({
@@ -51,7 +50,6 @@ export default defineComponent({
   setup() {
     const store = useStore();
     return {
-      arrowUndoOutline,
       checkboxOutline,
       store
     }

diff --git a/src/theme/variables.css b/src/theme/variables.css
@@ -244,6 +244,73 @@ http://ionicframework.com/docs/theming/ */
     --ion-card-background: #1e1e1e;
   }
 
+/** Spacer variables **/
+body {
+  --spacer-2xs: 0.25rem; /* 4px */
+  --spacer-xs: 0.5rem;   /* 8px */
+  --spacer-sm: 1rem;     /* 16px */
+  --spacer-base: 1.5rem; /* 24px */
+  --spacer-lg: 2rem;     /* 32px */
+  --spacer-xl: 2.5rem;   /* 40px */
+  --spacer-2xl: 5rem;    /* 80px */
+  --spacer-3xl: 10rem;   /* 160px */
+}
+
+.list-item {
+  --columns-mobile: 2;
+  --columns-tablet: 5;
+  --columns-desktop: 8;
+  --col-calc: var(--columns-mobile);
+  --implicit-columns: calc(var(--col-calc) - 1);
+  display: grid;
+  grid-template-columns: repeat(var(--implicit-columns), 1fr) max-content;
+  justify-items: center;
+  align-items: center;
+}
+
+.list-item > * {
+  display: none;
+}
+
+.list-item > *:last-child {
+  display: unset;
+  justify-self: end;
+}
+
+.list-item > ion-label {
+  text-align: center;
+}
+
+.list-item > *:first-child {
+  display: unset;
+  justify-self: start
+}
+
+@media (min-width: 700px) {
+  .list-item {
+    --col-calc: var(--columns-tablet);
+  }
+
+  .tablet {
+    display: unset;
+  }
+}
+
+@media (min-width: 991px) {
+  .list-item {
+    --col-calc: var(--columns-desktop);
+  }
+
+  .list-item > * {
+    display: unset;
+  }
+
+  .tablet {
+    display: unset;
+  }
+}
+
+
   .overline {
     font-weight: 500 !important;
     font-size: 10px !important;

diff --git a/src/views/OrderDetail.vue b/src/views/OrderDetail.vue
@@ -8,14 +8,14 @@
           <ion-button @click="selectAllItems">
             <ion-icon :icon="checkboxOutline" />
           </ion-button>
-          <ion-button>
-            <ion-icon :icon="arrowUndoOutline" />
-          </ion-button>
+        <!-- ion-button>
+           <ion-icon :icon="arrowUndoOutline">
+          <ion-button-->
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
 
-    <ion-content :fullscreen="true">
+    <ion-content >
       <div class="header">
         <div class="search">
           <ion-searchbar  :placeholder="$t('Search products')" v-model="queryString" v-on:keyup.enter="searchProduct(queryString)"></ion-searchbar>
@@ -75,22 +75,22 @@
 
       <div v-else v-for="id in getGroupList(ordersList.items)" :key="id" >
         <div v-for="item in getGroupItems(id, ordersList.items)" :key="item">
-          <div class="list-header" >
+          <div class="list-item list-header">
             <ion-label>{{ item.parentProductName }}</ion-label>
             <div />
             <div />
             <div />
             <ion-checkbox :checked="isParentProductChecked(id)" @ionChange="selectParentProduct(id, $event)" />
             <ion-button fill="clear" color="medium" @click="UpdateProduct($event, id, false, item)"> 
-              <ion-icon  :icon="ellipsisVerticalOutline" />
+              <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
             </ion-button>
           </div>
           <div class="list-item">
             <ion-item  lines="none">
-              <ion-thumbnail>
+              <ion-thumbnail slot="start">
                 <Image :src="item.imageUrl" />
               </ion-thumbnail>
-              <ion-label>
+              <ion-label class="ion-text-wrap">
                 {{ item.internalName }}
               </ion-label>
             </ion-item>
@@ -133,7 +133,7 @@ import { DateTime } from 'luxon';
 import { showToast } from '@/utils';
 import { translate } from "@/i18n";
 import { IonPage, IonHeader, IonToolbar, IonBackButton, IonTitle, IonContent, IonSearchbar, IonItem, IonThumbnail, IonLabel, IonInput, IonChip, IonIcon, IonButton, IonCheckbox, IonSelect, IonSelectOption, IonButtons, popoverController, IonFab, IonFabButton } from '@ionic/vue'
-import { ellipsisVerticalOutline, sendOutline, checkboxOutline, arrowUndoOutline, cloudUploadOutline } from 'ionicons/icons'
+import { ellipsisVerticalOutline, sendOutline, checkboxOutline, cloudUploadOutline } from 'ionicons/icons'
 import { hasError } from "@/utils";
 export default defineComponent({
   components: {
@@ -310,7 +310,6 @@ export default defineComponent({
       checkboxOutline,
       ellipsisVerticalOutline,
       sendOutline,
-      arrowUndoOutline,
       cloudUploadOutline,
       router,
       store
@@ -319,14 +318,14 @@ export default defineComponent({
 });
 
 </script>
-<style scoped>
+<style>
 .header {
   display: grid;
   grid: "search filters"
         /1fr 1fr;
-  grid-gap: 16px;
-  padding: 16px;
-  margin-bottom: 16px;
+  grid-gap: var(--spacer-sm);
+  padding: var(--spacer-sm);
+  margin-bottom: var(--spacer-sm);
 }
 
 .search {
@@ -336,21 +335,64 @@ export default defineComponent({
 .filters {
   grid-area: filters;
 }
-/* TODO: Use universal list item class */
+
 .list-item {
-  display: flex;
-  justify-content: space-between;
+  --columns-mobile: 2;
+  --columns-tablet: 6;
+  --columns-desktop: 6;
+  --col-calc: var(--columns-mobile);
+  --implicit-columns: calc(var(--col-calc) - 1);
+  display: grid;
+  grid-template-columns: repeat(var(--implicit-columns), 1fr) max-content;
+  justify-items: center;
   align-items: center;
 }
+
+.list-item > * {
+  display: none;
+}
+
+.list-item > *:last-child {
+  display: unset;
+  justify-self: end;
+}
+
+.list-item > ion-label {
+  text-align: center;
+}
+
+.list-item > *:first-child {
+  display: unset;
+  justify-self: start
+}
+
 .list-header {
-  display: flex;
-  place-items: center;
-  justify-content: space-between;
   background-color: #F4F5F8;
-  padding-left: 10px;
+  padding-left: var(--spacer-sm);
+}
+
+@media (min-width: 700px) {
+  .list-item {
+    --col-calc: var(--columns-tablet);
+  }
+
+  .tablet {
+    display: unset;
+  }
 }
-.save {
-  border-radius: 100%;
+
+@media (min-width: 991px) {
+  .list-item {
+    --col-calc: var(--columns-desktop);
+  }
+
+  .list-item > * {
+    display: unset;
+  }
+
+  .tablet {
+    display: unset;
+  }
 }
 
 </style>
diff --git a/src/views/PurchaseOrder.vue b/src/views/PurchaseOrder.vue
@@ -6,8 +6,8 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content :fullscreen="true">
-      <div class="header">
+    <ion-content>
+      <main>
         <div class="fileInput">
           <ion-item>
             <ion-label>{{ $t("Purchase order") }}</ion-label>
@@ -47,19 +47,24 @@
                 <ion-select-option v-bind:key="index" v-for="(prop, index) in Object.keys(content[0])">{{ prop }}</ion-select-option>
               </ion-select>
           </ion-item>
-          <ion-button color="dark" fill="solid" @click="mapFields" expand="block">{{ $t("REVIEW") }}</ion-button>
+          <ion-button color="medium" fill="solid" @click="mapFields" expand="block">
+            {{ $t("REVIEW") }}
+            <ion-icon slot="end" :icon="arrowForward" />
+            </ion-button>
         </div>
-      </div>     
-    </ion-content>    
+      </main>
+    </ion-content>
   </ion-page>
 </template>
 <script>
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonLabel, IonNote, IonButton, IonSelect, IonSelectOption } from "@ionic/vue";
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonLabel, IonNote, IonButton, IonSelect, IonSelectOption, IonIcon } from "@ionic/vue";
 import { defineComponent } from "vue";
 import { useRouter } from 'vue-router';
 import { useStore } from "vuex";
 import { showToast, parseCsv } from '@/utils';
 import { translate } from "@/i18n";
+import { arrowForward } from 'ionicons/icons'
+
 export default defineComponent({
     name: "purchase orders",
     components: {
@@ -73,7 +78,8 @@ export default defineComponent({
       IonButton,
       IonSelect,
       IonNote,
-      IonSelectOption
+      IonSelectOption,
+      IonIcon
     },
     data() {
       return {
@@ -132,6 +138,7 @@ export default defineComponent({
     const router = useRouter();
     const store = useStore();
     return {
+      arrowForward,
       router,
       store
     }
@@ -140,15 +147,17 @@ export default defineComponent({
 </script>   
 <style scoped>
 
-.header {
+main {
   max-width: 60%;
-  grid-gap: 16px;
-  padding: 16px;
-  margin-bottom: 16px;
+  padding: var(--spacer-sm);
+  margin-bottom:var(--spacer-sm);
   margin: auto; 
 }
 
 .info{
   padding-top: 40px;
 }
+label {
+  cursor: pointer;
+}
 </style>