ayan.poddar/eShopOnContainers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve basket list layout

Browse Source
This commit is contained in:
Quique Fernandez 2016-12-28 16:31:24 +01:00
parent 608179a867
commit 7c1c0aa6bd
6 changed files with 121 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html
View File

@ -1,68 +1,54 @@
<div class="esh-basket-header">
<ul class="container">
<li class="esh-basket-header-back" routerLink="/catalog">Back to list</li>
</ul>
</div>
<div class="container esh-basket-container">
<div class="row">
<div class="col-md-12">
<section>
<table class="table">
<thead>
<tr>
<th class="esh-basket-product-column">
PRODUCT
</th>
<th>
</th>
<th>
BRAND
</th>
<th>
PRICE
</th>
<th>
QUANTITY
</th>
<th>
COST
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of basket?.items">
<td class="esh-basket-product-column"><img class="esh-basket-product-image" src="{{item.pictureUrl}}" /></td>
<td class="esh-basket-product-column">{{item.productName}}</td>
<td class="esh-basket-product-column">ROSLYN</td>
<td class="esh-basket-product-column">$ {{item.unitPrice}}</td>
<td class="esh-basket-product-column">
<input type="number" style="width:100px" min="1" [(ngModel)]="item.quantity" (change)="itemQuantityChanged(item)"/>
</td>
<td class="esh-basket-product-column esh-basket-total-value">$ {{item.unitPrice * item.quantity}}</td>
</tr>
<tr class="esh-basket-totals">
<td></td>
<td></td>
<td></td>
<td></td>
<td>
</td>
<td>
<div class="esh-basket-total-value">
<div class="esh-basket-total-label"><span>TOTAL</span></div>
<span>$ {{totalPrice}}</span>
</div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="col-md-8">
</div>
<div class="col-md-4">
<div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
<div class="esh-basket">
<div class="esh-basket-header">
<div class="container">
<a class="esh-basket-back" routerLink="/catalog">Back to catalog</a>
</div>
</div>
</div>
<div class="container">
<article class="esh-basket-titles row">
<section class="esh-basket-title col-xs-3">Product</section>
<section class="esh-basket-title col-xs-3 hidden-lg-down"></section>
<section class="esh-basket-title col-xs-2">Price</section>
<section class="esh-basket-title col-xs-2">Quantity</section>
<section class="esh-basket-title col-xs-2">Cost</section>
</article>
<article class="esh-basket-items esh-basket-items--border row"
*ngFor="let item of basket?.items">
<section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
<img class="esh-basket-image" src="{{item.pictureUrl}}" />
</section>
<section class="esh-basket-item esh-basket-item--middle col-xs-3">{{item.productName}}</section>
<section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice}}</section>
<section class="esh-basket-item esh-basket-item--middle col-xs-2">
<input class="esh-basket-input"
type="number"
min="1"
[(ngModel)]="item.quantity"
(change)="itemQuantityChanged(item)" />
</section>
<section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice * item.quantity}}</section>
</article>
</div>
<div class="container">
<article class="esh-basket-titles esh-basket-titles--clean row">
<section class="esh-basket-title col-xs-10"></section>
<section class="esh-basket-title col-xs-2">Total</section>
</article>
<article class="esh-basket-items row">
<section class="esh-basket-item col-xs-10"></section>
<section class="esh-basket-item esh-basket-item--mark col-xs-2">$ {{totalPrice}}</section>
</article>
<article class="esh-basket-items row">
<section class="esh-basket-item col-xs-9"></section>
<section class="esh-basket-item col-xs-3">
<div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
</section>
</article>
</div>
</div>

139
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss
View File

@ -1,99 +1,90 @@
@import '../_variables.scss';
.esh-basket {
min-height: 80vh;
$header-height: 4rem;
&-header {
background-color: #00A69C;
height: 63px;
li {
list-style: none;
display: inline;
opacity: 0.5;
margin-top: 25px;
margin-left: 10px;
float: right;
cursor: pointer;
color: white;
}
li a {
color: white;
}
&-back {
float: left !important;
margin-top: 20px !important;
text-transform: uppercase;
}
li a:hover {
text-decoration: none;
}
height: $header-height;
}
&-container {
min-height: 70vh;
padding-top: 40px;
margin-bottom: 30px;
min-width: 992px;
}
&-product-column {
max-width: 120px;
&-back {
color: rgba($color-foreground-brighter, .4);
line-height: $header-height;
text-transform: uppercase;
vertical-align: middle !important;
text-decoration: none;
transition: color $animation-speed-default;
&:hover {
color: $color-foreground-brighter;
transition: color $animation-speed-default;
}
}
&-titles {
padding-bottom: 1rem;
padding-top: 2rem;
&--clean {
padding-bottom: 0;
padding-top: 0;
}
}
&-product-image {
max-width: 210px;
&-title {
text-transform: uppercase;
}
&-total-value {
font-size: 20px;
color: #00a69c;
width: 90px;
&-items {
&--border {
border-bottom: $border-light solid $color-foreground-bright;
padding: .5rem 0;
&:last-of-type {
border-color: transparent;
}
}
}
&-total-label {
font-size: 14px;
color: #404040;
margin-top: 10px;
$item-height: 8rem;
&-item {
font-size: $font-size-m;
font-weight: $font-weight-semilight;
&--middle {
line-height: $item-height;
@media screen and (max-width: $media-screen-m) {
line-height: $font-size-m;
}
}
&--mark {
color: $color-secondary;
}
}
&-totals {
border-bottom: none !important;
&-image {
height: $item-height;
}
&-input {
line-height: 1rem;
width: 100%;
}
&-checkout {
float: right;
margin-top: 40px;
margin-bottom: 40px;
background-color: #83d01b;
color: #fff;
padding: 10px 20px 10px 20px;
border-radius: 0;
border: none;
width: 255px;
border-radius: 0;
background-color: $color-secondary;
color: $color-foreground-brighter;
display: inline-block;
font-size: 1rem;
font-weight: $font-weight-normal;
margin-top: 1rem;
padding: 1rem 1.5rem;
text-align: center;
text-transform: uppercase;
height: 45px;
font-size: 16px;
font-weight: normal;
}
}
.table td {
border-top: solid 1px #ddd;
}
.table thead th {
border: none !important;
}

2
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts
View File

@ -7,7 +7,7 @@ import { IBasketItem } from '../shared/models/basketItem.model';
import { BasketWrapperService } from '../shared/services/basket.wrapper.service';
@Component({
selector: 'esh-basket .esh-basket',
selector: 'esh-basket',
styleUrls: ['./basket.component.scss'],
templateUrl: './basket.component.html'
})

2
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html
View File

@ -58,7 +58,7 @@
</section>
<section class="esh-orders_detail-section esh-orders_detail-section--right">
<article class="esh-orders_detail-titles row">
<article class="esh-orders_detail-titles esh-basket-titles--clean row">
<section class="esh-orders_detail-title col-xs-10"></section>
<section class="esh-orders_detail-title col-xs-2">Total</section>
</article>

2
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss
View File

@ -36,7 +36,7 @@
}
&-title {
font-size: $font-size-l;
text-transform: uppercase;
}
&-items {

2
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.component.scss
View File

@ -28,7 +28,7 @@
}
&-title {
font-size: $font-size-l;
text-transform: uppercase;
}
&-items {