order page design init

src/pages/order/order.html

@@ -10,8 +10,90 @@
 </ion-header>
 <ion-content>
     <form>
+         <ion-item-divider>
+            Cliente
+        </ion-item-divider>
         <ion-item>
-            <ion-input type="text" placeholder="Seleccione un cliente"></ion-input>
+            <ion-input type="text" readonly></ion-input>
+        </ion-item>
+        <ion-item-divider>
+            Productos
+        </ion-item-divider>
+        <ion-list>
+            <ion-item (doubleTap)="openOptions()">
+                <ion-avatar item-left>
+                    <img src="./assets/images/product.png" />
+			    </ion-avatar>
+                <h2>Producto 001</h2>
+                <p>Precio: </p>
+                <p>Cantidad:</p>
+                <p>Subtotal:</p>
+                <div item-right>
+				    <button ion-button icon-only>
+					    <i class="fa fa-plus"></i>
+				    </button>
+				    <button ion-button icon-only>
+					    <i class="fa fa-minus"></i>
+				    </button>
+			    </div>
+            </ion-item>
+            <ion-item>
+                <ion-avatar item-left>
+                    <img src="./assets/images/product.png" />
+			    </ion-avatar>
+                <h2>Producto 002</h2>
+                <p>Precio: </p>
+                <p>Cantidad:</p>
+                <p>Subtotal:</p>
+                <div item-right>
+				    <button ion-button icon-only>
+					    <i class="fa fa-plus"></i>
+				    </button>
+				    <button ion-button icon-only>
+					    <i class="fa fa-minus"></i>
+				    </button>
+			    </div>
+            </ion-item>
+            <ion-item>
+                <ion-avatar item-left>
+                    <img src="./assets/images/product.png" />
+			    </ion-avatar>
+                <h2>Producto 003</h2>
+                <p>Precio: </p>
+                <p>Cantidad:</p>
+                <p>Subtotal:</p>
+                <div item-right>
+				    <button ion-button icon-only>
+					    <i class="fa fa-plus"></i>
+				    </button>
+				    <button ion-button icon-only>
+					    <i class="fa fa-minus"></i>
+				    </button>
+			    </div>
+            </ion-item>
+            <ion-item>
+                <ion-avatar item-left>
+                    <img src="./assets/images/product.png" />
+			    </ion-avatar>
+                <h2>Producto 005</h2>
+                <p>Precio: </p>
+                <p>Cantidad:</p>
+                <p>Subtotal:</p>
+                <div item-right>
+				    <button ion-button icon-only>
+					    <i class="fa fa-plus"></i>
+				    </button>
+				    <button ion-button icon-only>
+					    <i class="fa fa-minus"></i>
+				    </button>
+			    </div>
+            </ion-item>
+        </ion-list>
+        <ion-item-divider>
+            Total
+        </ion-item-divider>
+        <ion-item>
+            <ion-input type="number" value="0" readonly></ion-input>
         </ion-item>
     </form>
 

src/pages/order/order.scss

@@ -1,3 +1,54 @@
 page-order {
 
+    ion-content > div:nth-child(2) {
+        
+    }
+
+    ion-item {
+        padding-left: 5px !important;
+    }
+
+    form > ion-item > div {
+        padding-right: 5px !important;
+        box-shadow: 0 0 0 #fff !important;
+    }
+
+    form > ion-item > div, form > ion-item-divider {
+        border-bottom: 0 !important;
+        
+    }
+
+    ion-list > ion-item > div > div:nth-child(2) {
+        display: flex !important;
+        flex-direction: column !important;
+        align-content: center;
+    }
+
+    ion-list > ion-item > div > div:nth-child(2) > button {
+        height: 24px !important;
+        padding: 0 8px !important;
+        border-radius: 12px !important;
+    }
+
+    ion-item-divider {
+        font-size: 1.109rem !important;
+    }
+
+    ion-item-divider > div > div > ion-label {
+        margin: 13px 8px 10px 0 !important;
+    }
+
+    ion-list, ion-input {
+        border: 1px solid #d3d3d3;
+        border-radius: 5px;
+    }
+
+    ion-list {
+        margin: 0 5px !important;
+        padding: 2px;
+    }
+
+    ion-input > input {
+        margin: 8px !important;
+    }
 }

src/pages/order/order.ts

@@ -52,6 +52,14 @@ export class OrderPage extends BaseDetailsView<SaleOrder> {
         this.navCtrl.push(ProductSelectionPage);
     }
 
+    /**
+     * 
+     */
+    openOptions(): void {
+        console.log("options");
+        
+    }
+
     /**
      * 
      * @param data