kj
/
vendor-app
1
0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Pārlūkot izejas kodu

Orders page mobile UI

master
kj1352 pirms 5 gadiem
vecāks
19e0fe9709
revīzija
8e7b2c05fd
3 mainītis faili ar 207 papildinājumiem un 11 dzēšanām
Dalītais skats
Salīdzināšanas iespējas
Rādīt statistiku Lejupielādēt ielāpa failu Lejupielādēt izmaiņu failu
  1. +99
    -8
      src/app/orders/orders.component.html
  2. +101
    -2
      src/app/orders/orders.component.scss
  3. +7
    -1
      src/styles.scss

+ 99
- 8
src/app/orders/orders.component.html Parādīt failu

@@ -1,18 +1,20 @@
<div class="widget-heading-holder">
<header> Order List </header>
<div class="selector-container">
<app-custom-selector header="Status" [options]="statusOptions" width="200" [defaultOptionId]="statusOptions[0].id"></app-custom-selector>
<div class="filter-container">
<div class="selector-container">
<app-custom-selector header="Status" [options]="statusOptions" width="200" [defaultOptionId]="statusOptions[0].id"></app-custom-selector>

<app-custom-selector header="Date" [options]="dateOptions" width="200" [defaultOptionId]="dateOptions[0].id"></app-custom-selector>
</div>
<app-custom-selector header="Date" [options]="dateOptions" width="200" [defaultOptionId]="dateOptions[0].id"></app-custom-selector>
</div>

<div class="search-input">
<input type="text" placeholder="Quick Search">
<button> <i class="icon ion-md-search"></i> </button>
<div class="search-input">
<input type="text" placeholder="Quick Search">
<button> <i class="icon ion-md-search"></i> </button>
</div>
</div>
</div>

<table>
<table class="order-table">
<tr class="heading-row">
<th> Order ID </th>
<th> Order Time </th>
@@ -104,6 +106,95 @@
</tr>
</table>

<ul class="order-list">
<li class="card">
<div class="header">
<span> Order ID : 29320 </span>
<span> Order Time: 2 Mins ago </span>
</div>
<table>
<tr>
<td>
<div> KFC Bucket </div>
</td>
<td>
<div> Qty: 1 </div>
</td>
<td>
<div> &#x20B9; 250 </div>
</td>
</tr>
</table>
<div class="order-status-holder">
<div class="status">
Paid online
</div>
<div class="action-buttons">
<button> Confirm </button>
<button (click)="showRejectionPopup = true"> Reject </button>
</div>
</div>
</li>

<li class="card">
<div class="header">
<span> Order ID : 29320 </span>
<span> Order Time: 2 Mins ago </span>
</div>
<table>
<tr>
<td>
<div> KFC Bucket </div>
</td>
<td>
<div> Qty: 1 </div>
</td>
<td>
<div> &#x20B9; 250 </div>
</td>
</tr>
</table>
<div class="order-status-holder">
<div class="status">
Paid online
</div>
<div class="action-buttons">
<button> Confirm </button>
<button (click)="showRejectionPopup = true"> Reject </button>
</div>
</div>
</li>

<li class="card">
<div class="header">
<span> Order ID : 29320 </span>
<span> Order Time: 2 Mins ago </span>
</div>
<table>
<tr>
<td>
<div> KFC Bucket </div>
</td>
<td>
<div> Qty: 1 </div>
</td>
<td>
<div> &#x20B9; 250 </div>
</td>
</tr>
</table>
<div class="order-status-holder">
<div class="status">
Paid online
</div>
<div class="action-buttons">
<button> Confirm </button>
<button (click)="showRejectionPopup = true"> Reject </button>
</div>
</div>
</li>
</ul>

<section class="popup" [ngClass]="{'active' : showRejectionPopup }">
<div class="popup-box">
<header> Reason to Reject the Order </header>


+ 101
- 2
src/app/orders/orders.component.scss Parādīt failu

@@ -3,8 +3,18 @@
margin-right: 10%;
}

.filter-container {
display: flex;
flex-grow: 1;

@media screen and (max-width: 1023px) {
flex-direction: column-reverse;
}
}

.selector-container {
display: flex;
flex-grow: 1;

app-custom-selector {
margin: 0 10px;
@@ -20,7 +30,7 @@
@media screen and (max-width: 1023px) {
justify-content: space-between;
width: 100%;
margin-bottom: 20px;
margin: 20px 0;
}
}
}
@@ -67,11 +77,15 @@
}


table {
.order-table {
width: 90%;
margin: 30px auto;
text-align: left;

@media screen and (max-width: 1023px) {
display: none;
}

th {
color: var(--grey);
font-size: 14px;
@@ -132,3 +146,88 @@ table {
}
}
}

.order-list {
list-style: none;

@media screen and (min-width: 1023px) {
display: none;
}

.card {
width: 90%;
margin: 30px auto;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 5px var(--grey);
overflow: hidden;
}

.header {
display: flex;
width: 100%;
justify-content: space-between;
padding: 10px 15px;
border-bottom: 1px solid #efefef;
color: var(--dark-grey);
font-size: 12px;
font-weight: 500;
letter-spacing: 1px;
}

table {
padding: 10px 15px;
width: 100%;

td {
font-size: 14px;
color: var(--dark-grey);
font-weight: 500;
letter-spacing: 0.5px;

&:nth-child(1) {
width: 50%;
}

&:nth-child(2) {
width: 25%;
text-align: center;
}

&:nth-child(3) {
width: 25%;
text-align: right;
}
}
}

.order-status-holder {
background-color: #efefef;
padding: 10px 15px;
color: var(--dark-grey);
font-size: 12px;
display: flex;
width: 100%;
font-weight: 500;
justify-content: space-between;
align-items: center;

.action-buttons {
display: flex;
width: auto;
border-radius: 5px;
overflow: hidden;

button {
padding: 5px 20px;
color: white;
background-color: var(--brand-blue);
border: 0px;

&:nth-child(2) {
background-color: #cecece;
}
}
}
}
}

+ 7
- 1
src/styles.scss Parādīt failu

@@ -114,6 +114,12 @@ button {
transition: transform 0.3s;
transition-delay: 0.3s;

@media screen and (max-width: 1023px) {
width: 80%;
margin: 0 auto;
padding: 15px;
}

header {
font-size: 16px;
font-weight: 500;
@@ -122,7 +128,7 @@ button {

select {
margin: 20px 0;
width: 300px;
width: 100%;
padding: 10px;
border-radius: 10px;
font-size: 14px;


Rakstīt Priekšskatītījums
Notiek ielāde…
Atcelt
Saglabāt