diff --git a/src/Web/WebMVC/Views/Order/Create.cshtml b/src/Web/WebMVC/Views/Order/Create.cshtml index dffbb990f..8da648d03 100644 --- a/src/Web/WebMVC/Views/Order/Create.cshtml +++ b/src/Web/WebMVC/Views/Order/Create.cshtml @@ -5,79 +5,92 @@ @{ ViewData["Title"] = "New Order"; } -
- -
-
+ +@Html.Partial("_Header", new Header() { Controller = "Cart", Text = "Back to cart" }) + +
-
-

SHIPPING ADDRESS

-
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
-

-
-

PAYMENT METHOD

-
-
- - - +
+

Shipping address

+
+
+
+ + + +
+
+
+
+ + + +
-
- - - +
+
+ + + +
+
+
+
+ + + +
-
-
- - - +
+
+

Payment method

+
+
+
+ + + +
+
+
+
+ + + +
-
- - - +
+
+ + + +
+
+
+
+ + + +
-
-

-
-
- @*@await Component.InvokeAsync("CartList", new { user = UserManager.Parse(User) })*@ - @await Html.PartialAsync("_OrderItems") -
-
-
-
- +
+ + @await Html.PartialAsync("_OrderItems") + +
+
+
+
+
+ +
-
+
+ @section Scripts { @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} } diff --git a/src/Web/WebMVC/Views/Order/Detail.cshtml b/src/Web/WebMVC/Views/Order/Detail.cshtml index 92535ab6a..0be4cd99d 100644 --- a/src/Web/WebMVC/Views/Order/Detail.cshtml +++ b/src/Web/WebMVC/Views/Order/Detail.cshtml @@ -46,7 +46,7 @@
-
Order details
+
ORDER DETAILS
@for (int i = 0; i < Model.OrderItems.Count; i++) @@ -66,12 +66,12 @@
-
-
Total
+
+
TOTAL
-
+
$ @Model.Total
diff --git a/src/Web/WebMVC/Views/Order/_OrderItems.cshtml b/src/Web/WebMVC/Views/Order/_OrderItems.cshtml index 848737cf9..9639d6bc2 100644 --- a/src/Web/WebMVC/Views/Order/_OrderItems.cshtml +++ b/src/Web/WebMVC/Views/Order/_OrderItems.cshtml @@ -1,70 +1,48 @@ @model Microsoft.eShopOnContainers.WebMVC.Models.Order -
-
- - - - - - - - - - - - - @for (int i = 0; i < Model.OrderItems.Count; i++) - { - var item = Model.OrderItems[i]; +
+
+
Order details
+
-
- - - - - - - - } - - - - - - - - - -
- PRODUCT - - - BRAND - - PRICE - - QUANTITY - - COST -
- - - - @item.ProductName - - ROSLYN$ @item.UnitPrice - - @item.Units - - $ @Math.Round(item.Units * item.UnitPrice, 2)
- -
-
TOTAL
- $ @Model.Total - -
-
-
-
+ @for (int i = 0; i < Model.OrderItems.Count; i++) + { + var item = Model.OrderItems[i]; + +
+
+ + +
+
+ @item.ProductName + +
+
+ $ @item.UnitPrice + +
+
+ @item.Units + +
+
$ @Math.Round(item.Units * item.UnitPrice, 2)
+
+ } +
+ +
+
+
+
Total
+
+ +
+
+
+ $ @Model.Total + +
+
+
diff --git a/src/Web/WebMVC/wwwroot/css/app.min.css b/src/Web/WebMVC/wwwroot/css/app.min.css index 3a900417b..0935b57d0 100644 --- a/src/Web/WebMVC/wwwroot/css/app.min.css +++ b/src/Web/WebMVC/wwwroot/css/app.min.css @@ -1 +1 @@ -.esh-basket,.esh-orders,.esh-orders_detail,.esh-orders_new{min-height:80vh}@font-face{font-family:Montserrat;font-weight:400;src:url(../fonts/Montserrat-Regular.eot?) format("eot"),url(../fonts/Montserrat-Regular.woff) format("woff"),url(../fonts/Montserrat-Regular.ttf) format("truetype"),url(../fonts/Montserrat-Regular.svg#Montserrat) format("svg")}@font-face{font-family:Montserrat;font-weight:700;src:url(../fonts/Montserrat-Bold.eot?) format("eot"),url(../fonts/Montserrat-Bold.woff) format("woff"),url(../fonts/Montserrat-Bold.ttf) format("truetype"),url(../fonts/Montserrat-Bold.svg#Montserrat) format("svg")}body,html{font-family:Montserrat,sans-serif;font-size:16px;font-weight:400;z-index:10}*,::after,::before{box-sizing:border-box}.preloading{color:#00A69C;display:block;font-size:1.5rem;left:50%;position:fixed;top:50%;transform:translate(-50%,-50%)}select::-ms-expand{display:none}@media screen and (min-width:992px){.form-input{max-width:360px;width:360px}}.form-input{border-radius:0;height:45px;padding:10px}.form-input-small{max-width:100px!important}.form-input-medium{width:150px!important}.alert{padding-left:0}.alert-danger{background-color:transparent;border:0;color:#FB0D0D;font-size:12px}a,a:active,a:hover,a:visited{color:#000;text-decoration:none;transition:color .35s}a:active,a:hover{color:#75B918;transition:color .35s}.esh-app-footer{background-color:#000;border-top:1px solid #EEE;margin-top:2.5rem;padding-bottom:2.5rem;padding-top:2.5rem;width:100%}.esh-app-footer-brand{height:50px;width:230px}.esh-app-footer-text{color:#83D01B;line-height:50px;text-align:right;width:100%}.esh-pager-wrapper{padding-top:1rem;text-align:center}.esh-identity,.esh-orders_new-section--right{text-align:right}.esh-pager-item{margin:0 5vw}.esh-pager-item--navigable{cursor:pointer}.esh-pager-item--navigable.is-disabled{display:none}.esh-identity-image,.esh-identity-name{display:inline-block}.esh-pager-item--navigable:hover{color:#83D01B}@media screen and (max-width:1280px){.esh-pager-item{font-size:.85rem}}@media screen and (max-width:1024px){.esh-pager-item{margin:0 4vw}}.esh-identity{line-height:3rem;position:relative}.esh-header-back,.esh-orders-back{line-height:4rem;text-decoration:none;text-transform:uppercase}.esh-identity-section{display:inline-block;width:100%}.esh-identity-name--upper{text-transform:uppercase}@media screen and (max-width:768px){.esh-identity-name{font-size:.85rem}}.esh-identity-drop{background:#FFF;height:0;min-width:14rem;right:0;overflow:hidden;padding:.5rem;position:absolute;top:2.5rem;transition:height .35s}.esh-identity:hover .esh-identity-drop{border:1px solid #EEE;height:7rem;transition:height .35s}.esh-header,.esh-orders-header{background-color:#00A69C;height:4rem}.esh-identity-item{cursor:pointer;display:block;transition:color .35s}.esh-identity-item:hover{color:#75b918;transition:color .35s}.esh-header-back{color:rgba(255,255,255,.5)!important;transition:color .35s}.esh-header-back:hover{color:#FFF!important;transition:color .35s}.esh-orders{overflow-x:hidden}.esh-orders-back{color:rgba(255,255,255,.4);transition:color .35s}.esh-orders-back:hover{color:#FFF;transition:color .35s}.esh-orders-titles{padding-bottom:1rem;padding-top:2rem}.esh-orders-title{text-transform:uppercase}.esh-orders-items{height:2rem;line-height:2rem;position:relative}.esh-orders-items:nth-of-type(2n+1):before{background-color:#EEF;content:'';height:100%;left:0;margin-left:-100vw;position:absolute;top:0;width:200vw;z-index:-1}.esh-orders-item{font-weight:300}.esh-orders-item--hover{opacity:0;pointer-events:none}.esh-orders-items:hover .esh-orders-item--hover{opacity:1;pointer-events:all}.esh-orders-link{color:#83D01B;text-decoration:none;transition:color .35s}.esh-orders-link:hover{color:#75b918;transition:color .35s}.esh-orders_new-header{background-color:#00A69C;height:4rem}.esh-orders_detail-image,.esh-orders_new-image{height:8rem}.esh-orders_new-back{color:rgba(255,255,255,.4);line-height:4rem;text-decoration:none;text-transform:uppercase;transition:color .35s}.esh-orders_new-back:hover{color:#FFF;transition:color .35s}.esh-orders_new-section{padding:1rem 0}.esh-orders_new-placeOrder{background-color:#83D01B;border:0;border-radius:0;color:#FFF;display:inline-block;font-size:1rem;font-weight:400;margin-top:1rem;padding:1rem 1.5rem;text-align:center;text-transform:uppercase;transition:all .35s}.esh-orders_detail-item--mark,.esh-orders_new-item--mark{color:#83D01B}.esh-orders_new-placeOrder:hover{background-color:#4a760f;transition:all .35s}.esh-orders_new-titles{padding-bottom:1rem;padding-top:2rem}.esh-orders_new-title{font-size:1.25rem}.esh-orders_detail-item,.esh-orders_new-item{font-size:1rem;font-weight:300}.esh-orders_new-items--border{border-bottom:1px solid #EEE;padding:.5rem 0}.esh-orders_new-items--border:last-of-type{border-color:transparent}.esh-orders_new-item--middle{line-height:8rem}@media screen and (max-width:768px){.esh-orders_new-item--middle{line-height:1rem}}.esh-orders_detail-section{padding:1rem 0}.esh-orders_detail-section--right{text-align:right}.esh-orders_detail-titles{padding-bottom:1rem;padding-top:2rem}.esh-orders_detail-title{text-transform:uppercase}.esh-orders_detail-items--border{border-bottom:1px solid #EEE;padding:.5rem 0}.esh-orders_detail-items--border:last-of-type{border-color:transparent}.esh-orders_detail-item--middle{line-height:8rem}.esh-catalog-hero{background-image:url(../../images/main_banner.png);background-size:cover;height:260px;width:100%}.esh-catalog-title{position:relative;top:74.29px}.esh-catalog-filters{background-color:#00A69C;height:65px}.esh-catalog-filter{background-color:transparent;border-color:#00d9cc;color:#FFF;cursor:pointer;margin-right:1rem;margin-top:.5rem;outline-color:#83D01B;min-width:140px;-webkit-appearance:none;padding:1.5rem .5rem 0}.esh-catalog-filter option{background-color:#00A69C}.esh-catalog-label{display:inline-block;position:relative;z-index:0}.esh-catalog-label::before{color:rgba(255,255,255,.5);content:attr(data-title);font-size:.65rem;margin-top:.65rem;margin-left:.5rem;position:absolute;text-transform:uppercase;z-index:1}.esh-catalog-button,.esh-catalog-send{color:#FFF;transition:all .35s;cursor:pointer}.esh-catalog-label::after{background-image:url(../../images/arrow-down.png);height:7px;content:'';position:absolute;right:1.5rem;top:2.5rem;width:10px;z-index:1}.esh-catalog-send{background-color:#83D01B;font-size:1rem;transform:translateY(.5rem);padding:.5rem}.esh-catalog-send:hover{background-color:#4a760f;transition:all .35s}.esh-catalog-items{margin-top:1rem}.esh-catalog-item{text-align:center;margin-bottom:1.5rem;width:33%}@media screen and (max-width:1024px){.esh-catalog-item{width:50%}}@media screen and (max-width:768px){.esh-orders_detail-item--middle{line-height:1rem}.esh-catalog-item{width:100%}}.esh-catalog-thumbnail{max-width:370px;width:100%}.esh-catalog-button{background-color:#83D01B;border:none;font-size:1rem;height:3rem;margin-top:1rem;width:80%}.esh-catalog-button:hover{background-color:#4a760f;transition:all .35s}.esh-catalog-name{font-size:1rem;font-weight:300;margin-top:.5rem;text-align:center;text-transform:uppercase}.esh-catalog-price{text-align:center;font-weight:900;font-size:28px}.esh-catalog-price::before{content:'$'}.esh-basket-titles{padding-bottom:1rem;padding-top:2rem}.esh-basket-titles--clean{padding-bottom:0;padding-top:0}.esh-basket-title{text-transform:uppercase}.esh-basket-items--border{border-bottom:1px solid #EEE;padding:.5rem 0}.esh-basket-items--border:last-of-type{border-color:transparent}.esh-basket-item{font-size:1rem;font-weight:300}.esh-basket-item--middle{line-height:8rem}@media screen and (max-width:1024px){.esh-basket-item--middle{line-height:1rem}}.esh-basket-item--mark{color:#00A69C}.esh-basket-checkout,.esh-basketstatus-badge{color:#FFF;text-align:center;transition:all .35s}.esh-basket-image{height:8rem}.esh-basket-input{line-height:1rem;width:100%}.esh-basket-checkout{border:none;border-radius:0;background-color:#83D01B;display:inline-block;font-size:1rem;font-weight:400;margin-top:1rem;padding:1rem 1.5rem;text-transform:uppercase}.esh-basket-checkout:hover{background-color:#4a760f;transition:all .35s}.esh-basketstatus{cursor:pointer;float:right;position:relative;transition:all .35s}.esh-basketstatus.is-disabled{opacity:.5;pointer-events:none}.esh-basketstatus-image{height:36px;margin-top:.5rem}.esh-basketstatus-badge{background-color:#83D01B;border-radius:50%;display:block;height:1.5rem;left:50%;position:absolute;top:0;transform:translateX(-38%);width:1.5rem}.esh-basketstatus:hover .esh-basketstatus-badge{background-color:transparent;color:#75b918;transition:all .35s} \ No newline at end of file +.esh-basket,.esh-orders,.esh-orders_detail,.esh-orders_new{min-height:80vh}@font-face{font-family:Montserrat;font-weight:400;src:url(../fonts/Montserrat-Regular.eot?) format("eot"),url(../fonts/Montserrat-Regular.woff) format("woff"),url(../fonts/Montserrat-Regular.ttf) format("truetype"),url(../fonts/Montserrat-Regular.svg#Montserrat) format("svg")}@font-face{font-family:Montserrat;font-weight:700;src:url(../fonts/Montserrat-Bold.eot?) format("eot"),url(../fonts/Montserrat-Bold.woff) format("woff"),url(../fonts/Montserrat-Bold.ttf) format("truetype"),url(../fonts/Montserrat-Bold.svg#Montserrat) format("svg")}body,html{font-family:Montserrat,sans-serif;font-size:16px;font-weight:400;z-index:10}*,::after,::before{box-sizing:border-box}.preloading{color:#00A69C;display:block;font-size:1.5rem;left:50%;position:fixed;top:50%;transform:translate(-50%,-50%)}select::-ms-expand{display:none}@media screen and (min-width:992px){.form-input{max-width:360px;width:360px}}.form-input{border-radius:0;height:45px;padding:10px}.form-input-small{max-width:100px!important}.form-input-medium{width:150px!important}.alert{padding-left:0}.alert-danger{background-color:transparent;border:0;color:#FB0D0D;font-size:12px}a,a:active,a:hover,a:visited{color:#000;text-decoration:none;transition:color .35s}a:active,a:hover{color:#75B918;transition:color .35s}.esh-app-footer{background-color:#000;border-top:1px solid #EEE;margin-top:2.5rem;padding-bottom:2.5rem;padding-top:2.5rem;width:100%}.esh-app-footer-brand{height:50px;width:230px}.esh-app-footer-text{color:#83D01B;line-height:50px;text-align:right;width:100%}.esh-pager-wrapper{padding-top:1rem;text-align:center}.esh-identity,.esh-orders_new-section--right{text-align:right}.esh-pager-item{margin:0 5vw}.esh-pager-item--navigable{cursor:pointer;display: inline-block;}.esh-pager-item--navigable.is-disabled{opacity: 0;pointer-events: none;}.esh-identity-image,.esh-identity-name{display:inline-block}.esh-pager-item--navigable:hover{color:#83D01B}@media screen and (max-width:1280px){.esh-pager-item{font-size:.85rem}}@media screen and (max-width:1024px){.esh-pager-item{margin:0 4vw}}.esh-identity{line-height:3rem;position:relative}.esh-header-back,.esh-orders-back{line-height:4rem;text-decoration:none;text-transform:uppercase}.esh-identity-section{display:inline-block;width:100%}.esh-identity-name--upper{text-transform:uppercase}@media screen and (max-width:768px){.esh-identity-name{font-size:.85rem}}.esh-identity-drop{background:#FFF;height:0;min-width:14rem;right:0;overflow:hidden;padding:.5rem;position:absolute;top:2.5rem;transition:height .35s}.esh-identity:hover .esh-identity-drop{border:1px solid #EEE;height:7rem;transition:height .35s}.esh-header,.esh-orders-header{background-color:#00A69C;height:4rem}.esh-identity-item{cursor:pointer;display:block;transition:color .35s}.esh-identity-item:hover{color:#75b918;transition:color .35s}.esh-header-back{color:rgba(255,255,255,.5)!important;transition:color .35s}.esh-header-back:hover{color:#FFF!important;transition:color .35s}.esh-orders{overflow-x:hidden}.esh-orders-back{color:rgba(255,255,255,.4);transition:color .35s}.esh-orders-back:hover{color:#FFF;transition:color .35s}.esh-orders-titles{padding-bottom:1rem;padding-top:2rem}.esh-orders-title{text-transform:uppercase}.esh-orders-items{height:2rem;line-height:2rem;position:relative}.esh-orders-items:nth-of-type(2n+1):before{background-color:#EEF;content:'';height:100%;left:0;margin-left:-100vw;position:absolute;top:0;width:200vw;z-index:-1}.esh-orders-item{font-weight:300}.esh-orders-item--hover{opacity:0;pointer-events:none}.esh-orders-items:hover .esh-orders-item--hover{opacity:1;pointer-events:all}.esh-orders-link{color:#83D01B;text-decoration:none;transition:color .35s}.esh-orders-link:hover{color:#75b918;transition:color .35s}.esh-orders_new-header{background-color:#00A69C;height:4rem}.esh-orders_detail-image,.esh-orders_new-image{height:8rem}.esh-orders_new-back{color:rgba(255,255,255,.4);line-height:4rem;text-decoration:none;text-transform:uppercase;transition:color .35s}.esh-orders_new-back:hover{color:#FFF;transition:color .35s}.esh-orders_new-section{padding:1rem 0}.esh-orders_new-placeOrder{background-color:#83D01B;border:0;border-radius:0;color:#FFF;display:inline-block;font-size:1rem;font-weight:400;margin-top:1rem;padding:1rem 1.5rem;text-align:center;text-transform:uppercase;transition:all .35s}.esh-orders_detail-item--mark,.esh-orders_new-item--mark{color:#83D01B}.esh-orders_new-placeOrder:hover{background-color:#4a760f;transition:all .35s}.esh-orders_new-titles{padding-bottom:1rem;padding-top:2rem}.esh-orders_new-title{font-size:1.25rem;text-transform: uppercase;}.esh-orders_detail-item,.esh-orders_new-item{font-size:1rem;font-weight:300}.esh-orders_new-items--border{border-bottom:1px solid #EEE;padding:.5rem 0}.esh-orders_new-items--border:last-of-type{border-color:transparent}.esh-orders_new-item--middle{line-height:8rem}@media screen and (max-width:768px){.esh-orders_new-item--middle{line-height:1rem}}.esh-orders_detail-section{padding:1rem 0}.esh-orders_detail-section--right{text-align:right}.esh-orders_detail-titles{padding-bottom:1rem;padding-top:2rem}.esh-orders_detail-title{text-transform:uppercase}.esh-orders_detail-items--border{border-bottom:1px solid #EEE;padding:.5rem 0}.esh-orders_detail-items--border:last-of-type{border-color:transparent}.esh-orders_detail-item--middle{line-height:8rem}.esh-catalog-hero{background-image:url(../../images/main_banner.png);background-size:cover;height:260px;width:100%}.esh-catalog-title{position:relative;top:74.29px}.esh-catalog-filters{background-color:#00A69C;height:65px}.esh-catalog-filter{background-color:transparent;border-color:#00d9cc;color:#FFF;cursor:pointer;margin-right:1rem;margin-top:.5rem;outline-color:#83D01B;min-width:140px;-webkit-appearance:none;padding:1.5rem .5rem 0}.esh-catalog-filter option{background-color:#00A69C}.esh-catalog-label{display:inline-block;position:relative;z-index:0}.esh-catalog-label::before{color:rgba(255,255,255,.5);content:attr(data-title);font-size:.65rem;margin-top:.65rem;margin-left:.5rem;position:absolute;text-transform:uppercase;z-index:1}.esh-catalog-button,.esh-catalog-send{color:#FFF;transition:all .35s;cursor:pointer}.esh-catalog-label::after{background-image:url(../../images/arrow-down.png);height:7px;content:'';position:absolute;right:1.5rem;top:2.5rem;width:10px;z-index:1}.esh-catalog-send{background-color:#83D01B;font-size:1rem;transform:translateY(.5rem);padding:.5rem}.esh-catalog-send:hover{background-color:#4a760f;transition:all .35s}.esh-catalog-items{margin-top:1rem}.esh-catalog-item{text-align:center;margin-bottom:1.5rem;width:33%}@media screen and (max-width:1024px){.esh-catalog-item{width:50%}}@media screen and (max-width:768px){.esh-orders_detail-item--middle{line-height:1rem}.esh-catalog-item{width:100%}}.esh-catalog-thumbnail{max-width:370px;width:100%}.esh-catalog-button{background-color:#83D01B;border:none;font-size:1rem;height:3rem;margin-top:1rem;width:80%}.esh-catalog-button:hover{background-color:#4a760f;transition:all .35s}.esh-catalog-name{font-size:1rem;font-weight:300;margin-top:.5rem;text-align:center;text-transform:uppercase}.esh-catalog-price{text-align:center;font-weight:900;font-size:28px}.esh-catalog-price::before{content:'$'}.esh-basket-titles{padding-bottom:1rem;padding-top:2rem}.esh-basket-titles--clean{padding-bottom:0;padding-top:0}.esh-basket-title{text-transform:uppercase}.esh-basket-items--border{border-bottom:1px solid #EEE;padding:.5rem 0}.esh-basket-items--border:last-of-type{border-color:transparent}.esh-basket-item{font-size:1rem;font-weight:300}.esh-basket-item--middle{line-height:8rem}@media screen and (max-width:1024px){.esh-basket-item--middle{line-height:1rem}}.esh-basket-item--mark{color:#00A69C}.esh-basket-checkout,.esh-basketstatus-badge{color:#FFF;text-align:center;transition:all .35s}.esh-basket-image{height:8rem}.esh-basket-input{line-height:1rem;width:100%}.esh-basket-checkout{border:none;border-radius:0;background-color:#83D01B;display:inline-block;font-size:1rem;font-weight:400;margin-top:1rem;padding:1rem 1.5rem;text-transform:uppercase}.esh-basket-checkout:hover{background-color:#4a760f;transition:all .35s}.esh-basketstatus{cursor:pointer;display: inline-block;float:right;position:relative;transition:all .35s}.esh-basketstatus.is-disabled{opacity:.5;pointer-events:none}.esh-basketstatus-image{height:36px;margin-top:.5rem}.esh-basketstatus-badge{background-color:#83D01B;border-radius:50%;display:block;height:1.5rem;left:50%;position:absolute;top:0;transform:translateX(-38%);width:1.5rem}.esh-basketstatus:hover .esh-basketstatus-badge{background-color:transparent;color:#75b918;transition:all .35s} \ No newline at end of file diff --git a/src/Web/WebMVC/wwwroot/css/basket/basket-status/basket-status.component.css b/src/Web/WebMVC/wwwroot/css/basket/basket-status/basket-status.component.css index 98e9ea7de..0f5e63a1d 100644 --- a/src/Web/WebMVC/wwwroot/css/basket/basket-status/basket-status.component.css +++ b/src/Web/WebMVC/wwwroot/css/basket/basket-status/basket-status.component.css @@ -1,5 +1,6 @@ .esh-basketstatus { cursor: pointer; + display: inline-block; float: right; position: relative; transition: all 0.35s; diff --git a/src/Web/WebMVC/wwwroot/css/orders/orders-new/orders-new.component.css b/src/Web/WebMVC/wwwroot/css/orders/orders-new/orders-new.component.css index a2210fc8b..dcec08a3e 100644 --- a/src/Web/WebMVC/wwwroot/css/orders/orders-new/orders-new.component.css +++ b/src/Web/WebMVC/wwwroot/css/orders/orders-new/orders-new.component.css @@ -55,6 +55,7 @@ .esh-orders_new-title { font-size: 1.25rem; + text-transform: uppercase; } .esh-orders_new-items--border { diff --git a/src/Web/WebMVC/wwwroot/css/shared/components/pager/pager.css b/src/Web/WebMVC/wwwroot/css/shared/components/pager/pager.css index e6b19cdd4..eec6e3940 100644 --- a/src/Web/WebMVC/wwwroot/css/shared/components/pager/pager.css +++ b/src/Web/WebMVC/wwwroot/css/shared/components/pager/pager.css @@ -8,11 +8,13 @@ } .esh-pager-item--navigable { + display: inline-block; cursor: pointer; } .esh-pager-item--navigable.is-disabled { - display: none; + opacity: 0; + pointer-events: none; } .esh-pager-item--navigable:hover { diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts index 2bc69d248..ecda0c3d0 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts @@ -13,11 +13,6 @@ export const routes: Routes = [ { path: 'orders', component: OrdersComponent }, { path: 'orders/:id', component: OrdersDetailComponent }, { path: 'order', component: OrdersNewComponent } - //Lazy async modules (angular-loader-router) and enable a router in each module. - //{ - // path: 'basket', loadChildren: '/basket/basket.module' }); - // }) - //} ]; export const routing = RouterModule.forRoot(routes); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html index 03a7875c7..7509a2281 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.html @@ -1,4 +1,5 @@
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss index d50b8c9d2..d7c91e7a8 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss @@ -2,10 +2,16 @@ .esh-basketstatus { cursor: pointer; + display: inline-block; float: right; position: relative; transition: all $animation-speed-default; + &.is-disabled { + opacity: .5; + pointer-events: none; + } + &-image { height: 36px; margin-top: .5rem; diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html index be48061b7..49f27191c 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.html @@ -31,18 +31,18 @@
-
+
Total
-
+
$ {{totalPrice}}
-
+
[ Checkout ]
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts index 5bde088a0..d07da4594 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts @@ -37,10 +37,7 @@ export class BasketComponent implements OnInit { private calculateTotalPrice() { this.totalPrice = 0; this.basket.items.forEach(item => { - this.totalPrice += (item.unitPrice * item.quantity) + this.totalPrice += (item.unitPrice * item.quantity); }); } - - } - diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.module.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.module.ts index a7b14e090..f29bf942d 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.module.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.module.ts @@ -9,7 +9,7 @@ import { Header } from '../shared/components/header/header'; @NgModule({ imports: [SharedModule], - declarations: [BasketComponent, BasketStatusComponent], + declarations: [BasketComponent, BasketStatusComponent], providers: [BasketService], exports: [BasketStatusComponent] }) diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts index 254690de2..5ae78fd9c 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts @@ -54,7 +54,7 @@ export class CatalogComponent implements OnInit { this.basketService.addItemToBasket(item); } - getCatalog(pageSize:number, pageIndex: number, brand?: number, type?: number) { + getCatalog(pageSize: number, pageIndex: number, brand?: number, type?: number) { this.service.getCatalog(pageIndex, pageSize, brand, type).subscribe(catalog => { this.catalog = catalog; diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.service.ts index a5e92133a..f79840179 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.service.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.service.ts @@ -22,7 +22,7 @@ export class CatalogService { } getCatalog(pageIndex: number, pageSize: number, brand: number, type: number): Observable { - var url = this.catalogUrl; + let url = this.catalogUrl; if (brand || type) { url = this.catalogUrl + '/type/' + ((type) ? type.toString() : 'null') + '/brand/' + ((brand) ? brand.toString() : 'null'); } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html index fb2dfaa26..62f6c8431 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html @@ -55,12 +55,12 @@
-
+
Total
-
+
$ {{order.total}}
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html index 8cd1cb30f..eb566243d 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html @@ -7,32 +7,32 @@
-

SHIPPING ADDRESS

+

Shipping Address

- +
Required field.
- +
Required field.
- +
Required field.
- +
Required field.
@@ -40,32 +40,32 @@
-

PAYMENT METHOD

+

Payment method

- +
Required field.
- +
Required field.
- +
Required field.
- +
Required field.
@@ -91,12 +91,12 @@
-
+
Total
-
+
$ {{order.total}}
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss index 9d865894a..0d06d0920 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss @@ -58,6 +58,7 @@ &-title { font-size: $font-size-l; + text-transform: uppercase; } &-items { diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts index 04fea604b..aadcabc1c 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts @@ -12,11 +12,11 @@ import { Router } from '@angular/router'; templateUrl: './orders-new.component.html' }) export class OrdersNewComponent implements OnInit { - private newOrderForm : FormGroup; // new order form + private newOrderForm: FormGroup; // new order form private order: IOrder; constructor(private service: OrdersService, fb: FormBuilder, private router: Router, private basketEvents: BasketWrapperService) { - //Obtener información del perfil de usuario. + // Obtener información del perfil de usuario. this.order = service.mapBasketAndIdentityInfoNewOrder(); this.newOrderForm = fb.group({ 'street': [this.order.street, Validators.required], @@ -31,7 +31,6 @@ export class OrdersNewComponent implements OnInit { } ngOnInit() { - } submitForm(value: any) { @@ -45,7 +44,7 @@ export class OrdersNewComponent implements OnInit { this.order.cardsecuritynumber = this.newOrderForm.controls['securitycode'].value; this.service.postOrder(this.order).subscribe(res => { - //this will emit an observable. Basket service is subscribed to this observable, and will react deleting the basket for the current user. + // this will emit an observable. Basket service is subscribed to this observable, and will react deleting the basket for the current user. this.basketEvents.orderCreated(); this.router.navigate(['orders']); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts index d85bbab28..8d0b4d91a 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.service.ts @@ -36,7 +36,7 @@ export class OrdersService { return response.json(); }); } - + postOrder(item): Observable { return this.service.post(this.ordersUrl + '/new', item).map((response: Response) => { return true; @@ -51,7 +51,7 @@ export class OrdersService { console.log(basket); console.log(identityInfo); - //Identity data mapping: + // Identity data mapping: order.street = identityInfo.address_street; order.city = identityInfo.address_city; order.country = identityInfo.address_country; @@ -65,10 +65,9 @@ export class OrdersService { order.total = 0; order.expiration = identityInfo.card_expiration; - //basket data mapping: + // basket data mapping: order.orderItems = new Array(); - basket.items.forEach(x => - { + basket.items.forEach(x => { let item: IOrderItem = {}; item.pictureurl = x.pictureUrl; item.productId = +x.productId; diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts index bd5102ddf..606249c0a 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts @@ -12,15 +12,14 @@ import { SecurityService } from '../../services/security.service'; export class Identity implements OnInit { private authenticated: boolean = false; private subscription: Subscription; - private userName: string = ""; + private userName: string = ''; constructor(private service: SecurityService) { } ngOnInit() { - this.subscription = this.service.authenticationChallenge$.subscribe(res => - { + this.subscription = this.service.authenticationChallenge$.subscribe(res => { this.authenticated = res; this.userName = this.service.UserData.email; }); diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html index e2d938d05..68996a928 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.html @@ -4,7 +4,7 @@