Merge pull request #21 from SyncfusionExamples/EJ2-947743-usecase

947743: Need to update the inventory application in ux review

Author: jmfarook7

Inventory Management and Invoice Generating/Inventory Application/src/App.tsx

@@ -1020,7 +1020,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
           ref={gridInstance}
           emptyRecordTemplate={(): any => null}
           gridLines="Both"
-          height="250px"
+          height='100%'
           width='100%'
           rowHeight={15}
           textWrapSettings={wrapSettings}
@@ -1140,9 +1140,9 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
 
     return (
       <div>
-  <div className="input-container-title">ShopNezt Supermarket Point Of Sale (POS)</div>
+      <div className="input-container-title">ShopNezt Supermarket Point Of Sale (POS)</div>
         {/* Customer details Header element */}
-        <div className="header" style={{marginTop: "15px", height: '20%'}}>
+        <div className="header" style={{marginTop: "15px", height: '120px'}}>
           <table className="header-table" style={{marginLeft: '40px'}}>
           <tr className="input-container billno"><td>
             <label>Bill Number:</label></td><td>
@@ -1153,7 +1153,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
             />
           </td></tr>
           <tr className="input-container custid"><td>
-            <label>Customer ID:</label></td><td>
+            <label>Customer ID:</label></td><td className="customerid">
             <AutoCompleteComponent
                 id="customerID"
                 placeholder="Enter customer id"
@@ -1164,7 +1164,6 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
               ref={plusButtonRef}
               title="Add New Customer"
               onClick={addNewCustomer}
-              style={{ marginLeft: "4px" }}
             >
               +
             </ButtonComponent>
@@ -1213,7 +1212,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
           </td></tr></table>
         </div>
         {/* Main Content of the Body - Primary Grid and Vertical Amount details Card components */}
-        <div className="primary-container" style={{marginTop: "15px", height: '50%'}}>
+        <div className="primary-container" style={{marginTop: "15px", height: 'calc(100vh - 325px)'}}>
           {MemorizedGridComponent}
 
           {/* Product search by its name - Dialog popup */}
@@ -1264,7 +1263,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
           </DialogComponent>
 
           {/* Vertical Card components - Total Amount, Savings and Quantity details*/}
-          <div className="control-pane amount">
+          <div className="control-pane amount" style={{height: '100%', width: '230px'}}>
             <div className="control-section card-control-section vertical_card_layout">
               <div className="e-card-resize-container">
                 <div className="row">
@@ -1323,7 +1322,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
         </div>
 
         {/* Horizontal Card components - Delivery type, Payment type Buttons*/}
-        <div className="control-pane payment" style={{marginTop: "15px", height: '20%'}}>
+        <div className="control-pane payment" style={{marginTop: "15px", height: '80px'}}>
           <div className="control-section card-control-section vertical_card_layout">
             <div className="e-card-resize-container">
               <div className="row">

Inventory Management and Invoice Generating/Inventory Application/src/index.css

@@ -4,7 +4,7 @@
 }
 
 .e-grid {
-    flex: 9;
+    flex: 7;
 }
 
 .e-grid td.e-active {
@@ -34,10 +34,6 @@
     }
 }
 
-.header .input-container .e-input-group.e-control-wrapper.e-ddl {
-    width: 86% !important;
-}
-
 .header {
     display: flex;
     justify-content: space-between;
@@ -76,7 +72,7 @@
     }
 
     .input-container-title {
-        font-size: 19px;
+        font-size: 22px;
     }
 }
 
@@ -108,6 +104,10 @@
     .card-control-section.vertical_card_layout .col-xs-3.col-sm-3 #poscards.e-card {
         height: 90px;
     }
+
+    .control-pane.amount .col-xs-6.col-sm-6 #poscards.e-card .e-card-btn-txt {
+        height: 70%;
+    }
 }
 
 .e-calendar .e-content td.e-today.e-selected:hover span.e-day,
@@ -127,14 +127,23 @@
     color: white
 }
 
+.e-grid tr.e-columnheader,
+.e-grid tr.e-row {
+    height: 40px !important;
+}
+
 .input-container-title {
     box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.16);
-    background: linear-gradient(to right, #fb923c , #facc15  50%, #f97316 );
+    background: linear-gradient(to right, #fb923c, #facc15 50%, #f97316);
     color: black;
     margin: 0;
     padding: 5px;
     text-align: center;
-    font-size: 19px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    font-size: 25px;
     font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     font-weight: bold;
 }
@@ -219,19 +228,27 @@
 .primary-container .control-pane.amount {
     flex: 1;
     display: flex;
-    flex-direction: column;
     justify-content: space-between;
     min-width: 140px;
 }
 
 .control-pane.amount .control-section .card-layout #poscards {
-    height: 90px;
     background-color: #e2e0f2;
 }
 
+.control-pane.amount .control-section .row {
+    margin-top: 10px;
+}
+
+.header .input-container.custid td.customerID {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    white-space: nowrap;
+}
+
 .control-pane.amount .control-section .card-layout #poscards .e-card-actions {
-    padding-top: 9px;
-    font-size: 30px;
+    font-size: 34px;
     font-weight: bold;
 }
 
@@ -245,10 +262,6 @@
     margin-left: 1px;
 }
 
-.primary-container .e-card {
-    height: 140px;
-}
-
 /* Vertical card customization */
 
 .card-control-section.vertical_card_layout #poscards_profile.e-card .e-card-header {
@@ -274,7 +287,6 @@
 .card-control-section.vertical_card_layout #poscards_profile.e-card {
     text-align: center;
     background-size: cover;
-    height: 55px;
 }
 
 .card-control-section.vertical_card_layout #poscards.e-card .e-card-header-caption .e-card-header-title,
@@ -351,7 +363,7 @@
 }
 
 .control-pane.payment .e-card:hover {
-    transform: scale(1.05) ;
+    transform: scale(1.05);
 }
 
 /* Button Text */
@@ -415,7 +427,7 @@
 
 /* Cards */
 .e-card {
-    margin: 10px 10px 0 10px;
+    margin: 0px 10px 20px 10px;
     border-radius: 5px;
 }
 
@@ -437,11 +449,14 @@
     background-color: #543cfb;
     /*necessary*/
     color: #333;
-    line-height: 32px;
+    line-height: 25px;
 }
 
 /* Card Buttons */
 .e-card .e-card-actions .e-card-btn-txt {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     color: black;
     cursor: pointer;
 }
@@ -455,10 +470,8 @@
 body {
     font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     background-color: #f4f4f4;
-    margin: 5px;
     position: absolute;
     min-width: 50%;
-    height: auto;
 }
 
 .control-section {
@@ -531,7 +544,7 @@ body {
 }
 
 .e-card-btn-txt span {
-    font-size: 17px;
+    font-size: 20px;
     font-weight: bold;
     color: white;
 }
@@ -555,12 +568,13 @@ body {
 
 .header .header-table {
     width: 35%;
-    margin-right:5%;
+    margin-right: 5%;
 }
 
 .e-grid .e-row.e-altrow {
     background-color: #e8ebea;
 }
+
 td {
     padding: 3px;
 }
@@ -572,30 +586,61 @@ td {
     width: 28px;
 }
 
-@media screen and (max-width: 1300px) {
+.control-pane.amount .col-xs-6 {
+    min-width: 20%;
+}
+
+.control-pane.payment .col-xs-3 {
+    padding-left: 20px;
+    padding-right: 20px;
+}
 
+@media screen and (max-width: 1300px) {
     .input-container-title {
-        font-size: 19px;
+        font-size: 22px;
     }
 
     .control-pane.amount .col-xs-6 {
         min-width: 20%;
-        margin-bottom: 10px;
-        margin-left: 2%;
     }
 
     .control-pane.payment .col-xs-3 {
         width: 25%;
+        padding-left: 20px;
     }
 
     .header .header-table {
         width: 28%;
-        margin-right:50px;
+        margin-right: 50px;
+    }
+
+    .card-control-section.vertical_card_layout .col-xs-3.col-sm-3 #poscards.e-card {
+        height: 70px !important;
     }
 }
 
-@media screen and (max-width: 1200px) {
-    .header .input-container .e-input-group.e-control-wrapper.e-ddl {
-        width: 83% !important;
+@media screen and (min-height: 550px) {
+    .control-pane.amount .control-section .card-layout .e-card {
+        height: calc((100vh - 405px) / 3);
+    }
+}
+
+@media screen and (max-height: 550px) {
+    .control-pane.amount .control-section {
+        overflow-y: auto;
+    }
+}
+
+@media screen and (min-height: 700px) {
+
+    .e-card .e-card-header,
+    .e-card .e-card-header-caption {
+        line-height: calc((100vh - 405px) / 12);
+    }
+}
+
+@media screen and (min-height: 800px) {
+    .control-pane.amount .e-card-header-title {
+        font-size: 19px;
     }
 }