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

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

@ -1,68 +1,54 @@
<div class="esh-basket-header"> <div class="esh-basket">
<ul class="container"> <div class="esh-basket-header">
<li class="esh-basket-header-back" routerLink="/catalog">Back to list</li> <div class="container">
</ul> <a class="esh-basket-back" routerLink="/catalog">Back to catalog</a>
</div> </div>
<div class="container esh-basket-container"> </div>
<div class="row">
<div class="col-md-12">
<section>
<table class="table">
<thead>
<tr>
<th class="esh-basket-product-column">
PRODUCT
</th>
<th>
</th> <div class="container">
<th> <article class="esh-basket-titles row">
BRAND <section class="esh-basket-title col-xs-3">Product</section>
</th> <section class="esh-basket-title col-xs-3 hidden-lg-down"></section>
<th> <section class="esh-basket-title col-xs-2">Price</section>
PRICE <section class="esh-basket-title col-xs-2">Quantity</section>
</th> <section class="esh-basket-title col-xs-2">Cost</section>
<th> </article>
QUANTITY
</th> <article class="esh-basket-items esh-basket-items--border row"
<th> *ngFor="let item of basket?.items">
COST
</th> <section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
</tr> <img class="esh-basket-image" src="{{item.pictureUrl}}" />
</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> </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>
<div class="col-md-8">
</div> <div class="container">
<div class="col-md-4"> <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> <div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
</div> </section>
</article>
</div> </div>
</div> </div>

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

@ -1,99 +1,90 @@
@import '../_variables.scss'; @import '../_variables.scss';
.esh-basket { .esh-basket {
min-height: 80vh;
$header-height: 4rem;
&-header { &-header {
background-color: #00A69C; background-color: #00A69C;
height: 63px; height: $header-height;
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 { &-back {
float: left !important; color: rgba($color-foreground-brighter, .4);
margin-top: 20px !important; line-height: $header-height;
text-transform: uppercase; text-transform: uppercase;
}
li a:hover {
text-decoration: none; text-decoration: none;
transition: color $animation-speed-default;
&:hover {
color: $color-foreground-brighter;
transition: color $animation-speed-default;
} }
} }
&-container { &-titles {
min-height: 70vh; padding-bottom: 1rem;
padding-top: 40px; padding-top: 2rem;
margin-bottom: 30px;
min-width: 992px; &--clean {
padding-bottom: 0;
padding-top: 0;
}
} }
&-product-column { &-title {
max-width: 120px;
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle !important;
} }
&-product-image { &-items {
max-width: 210px; &--border {
border-bottom: $border-light solid $color-foreground-bright;
padding: .5rem 0;
&:last-of-type {
border-color: transparent;
}
}
} }
&-total-value { $item-height: 8rem;
font-size: 20px; &-item {
color: #00a69c; font-size: $font-size-m;
width: 90px; font-weight: $font-weight-semilight;
&--middle {
line-height: $item-height;
@media screen and (max-width: $media-screen-m) {
line-height: $font-size-m;
}
} }
&-total-label { &--mark {
font-size: 14px; color: $color-secondary;
color: #404040; }
margin-top: 10px;
} }
&-totals { &-image {
border-bottom: none !important; height: $item-height;
}
&-input {
line-height: 1rem;
width: 100%;
} }
&-checkout { &-checkout {
float: right;
margin-top: 40px;
margin-bottom: 40px;
background-color: #83d01b;
color: #fff;
padding: 10px 20px 10px 20px;
border-radius: 0;
border: none; border: none;
width: 255px; border-radius: 0;
background-color: $color-secondary;
color: $color-foreground-brighter;
display: inline-block; display: inline-block;
font-size: 1rem;
font-weight: $font-weight-normal;
margin-top: 1rem;
padding: 1rem 1.5rem;
text-align: center; text-align: center;
text-transform: uppercase; 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'; import { BasketWrapperService } from '../shared/services/basket.wrapper.service';
@Component({ @Component({
selector: 'esh-basket .esh-basket', selector: 'esh-basket',
styleUrls: ['./basket.component.scss'], styleUrls: ['./basket.component.scss'],
templateUrl: './basket.component.html' 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>
<section class="esh-orders_detail-section esh-orders_detail-section--right"> <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-10"></section>
<section class="esh-orders_detail-title col-xs-2">Total</section> <section class="esh-orders_detail-title col-xs-2">Total</section>
</article> </article>

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

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

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

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