diff --git a/src/Web/Views/Order/Detail.cshtml b/src/Web/Views/Order/Detail.cshtml index 3977ecd..cb5db3f 100644 --- a/src/Web/Views/Order/Detail.cshtml +++ b/src/Web/Views/Order/Detail.cshtml @@ -6,81 +6,71 @@ ViewData["Title"] = "Order Detail"; } -
+
-
-
-
Order number
-
Date
-
Total
-
Status
+
+
+
Order number
+
Date
+
Total
+
Status
-
-
@Model.OrderNumber
-
@Model.OrderDate
-
$@Model.Total
-
@Model.Status
+
+
@Model.OrderNumber
+
@Model.OrderDate
+
$@Model.Total.ToString("N2")
+
@Model.Status
- @*
-
-
Description
-
- -
-
@Model.Description
-
-
*@ - -
-
-
Shipping Address
+
+
+
Shipping Address
-
-
@Model.ShippingAddress.Street
+
+
@Model.ShippingAddress.Street
-
-
@Model.ShippingAddress.City
+
+
@Model.ShippingAddress.City
-
-
@Model.ShippingAddress.Country
+
+
@Model.ShippingAddress.Country
-
-
-
ORDER DETAILS
+
+
+
ORDER DETAILS
@for (int i = 0; i < Model.OrderItems.Count; i++) { var item = Model.OrderItems[i]; -
-
- +
+
+
-
@item.ProductName
-
$ @item.UnitPrice.ToString("N2")
-
@item.Units
-
$ @Math.Round(item.Units * item.UnitPrice, 2).ToString("N2")
+
@item.ProductName
+
$ @item.UnitPrice.ToString("N2")
+
@item.Units
+
$ @Math.Round(item.Units * item.UnitPrice, 2).ToString("N2")
}
-
-
-
-
TOTAL
+
+
+
+
TOTAL
-
-
-
$ @Model.Total.ToString("N2")
+
+
+
$ @Model.Total.ToString("N2")
diff --git a/src/Web/wwwroot/css/orders/orders.component.css b/src/Web/wwwroot/css/orders/orders.component.css index 3fc4e27..1428409 100644 --- a/src/Web/wwwroot/css/orders/orders.component.css +++ b/src/Web/wwwroot/css/orders/orders.component.css @@ -47,3 +47,7 @@ .esh-orders-link:hover { color: #75b918; transition: color 0.35s; } + .esh-orders-detail-section { + padding-bottom: 30px; } + .esh-orders-detail-title { + font-size: 25px; } diff --git a/src/Web/wwwroot/css/orders/orders.component.min.css b/src/Web/wwwroot/css/orders/orders.component.min.css index 3bea662..d660a99 100644 --- a/src/Web/wwwroot/css/orders/orders.component.min.css +++ b/src/Web/wwwroot/css/orders/orders.component.min.css @@ -1 +1 @@ -.esh-orders{min-height:80vh;overflow-x:hidden;}.esh-orders-header{background-color:#00a69c;height:4rem;}.esh-orders-back{color:rgba(255,255,255,.4);line-height:4rem;text-decoration:none;text-transform:uppercase;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;} \ No newline at end of file +.esh-orders{min-height:80vh;overflow-x:hidden;}.esh-orders-header{background-color:#00a69c;height:4rem;}.esh-orders-back{color:rgba(255,255,255,.4);line-height:4rem;text-decoration:none;text-transform:uppercase;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-detail-section{padding-bottom:30px;}.esh-orders-detail-title{font-size:25px;} \ No newline at end of file diff --git a/src/Web/wwwroot/css/orders/orders.component.scss b/src/Web/wwwroot/css/orders/orders.component.scss index 23a5d4f..34f84c8 100644 --- a/src/Web/wwwroot/css/orders/orders.component.scss +++ b/src/Web/wwwroot/css/orders/orders.component.scss @@ -4,88 +4,88 @@ min-height: 80vh; overflow-x: hidden; $header-height: 4rem; - &-header -{ - background-color: #00A69C; - height: $header-height; -} - -&-back { - color: rgba($color-foreground-brighter, .4); - line-height: $header-height; - text-decoration: none; - text-transform: uppercase; - transition: color $animation-speed-default; - &:hover - -{ - color: $color-foreground-brighter; - transition: color $animation-speed-default; -} - -} - -&-titles { - padding-bottom: 1rem; - padding-top: 2rem; -} - -&-title { - text-transform: uppercase; -} - -&-items { - $height: 2rem; - height: $height; - line-height: $height; - position: relative; - &:nth-of-type(2n + 1) - -{ - &:before - -{ - background-color: $color-background-bright; - content: ''; - height: 100%; - left: 0; - margin-left: -100vw; - position: absolute; - top: 0; - width: 200vw; - z-index: -1; -} - -} -} - -&-item { - font-weight: $font-weight-semilight; - &--hover - -{ - opacity: 0; - pointer-events: none; -} - -} - -&-items:hover &-item--hover { - opacity: 1; - pointer-events: all; -} - -&-link { - color: $color-secondary; - text-decoration: none; - transition: color $animation-speed-default; - &:hover - -{ - color: $color-secondary-dark; - transition: color $animation-speed-default; -} - -} + &-header { + background-color: #00A69C; + height: $header-height; + } + + &-back { + color: rgba($color-foreground-brighter, .4); + line-height: $header-height; + text-decoration: none; + text-transform: uppercase; + transition: color $animation-speed-default; + + &:hover { + color: $color-foreground-brighter; + transition: color $animation-speed-default; + } + } + + &-titles { + padding-bottom: 1rem; + padding-top: 2rem; + } + + &-title { + text-transform: uppercase; + } + + &-items { + $height: 2rem; + height: $height; + line-height: $height; + position: relative; + + &:nth-of-type(2n + 1) { + &:before { + background-color: $color-background-bright; + content: ''; + height: 100%; + left: 0; + margin-left: -100vw; + position: absolute; + top: 0; + width: 200vw; + z-index: -1; + } + } + } + + &-item { + font-weight: $font-weight-semilight; + + &--hover { + opacity: 0; + pointer-events: none; + } + } + + &-items:hover &-item--hover { + opacity: 1; + pointer-events: all; + } + + &-link { + color: $color-secondary; + text-decoration: none; + transition: color $animation-speed-default; + + &:hover { + color: $color-secondary-dark; + transition: color $animation-speed-default; + } + } + + &-detail { + + &-section { + padding-bottom: 30px; + } + + &-title { + font-size: 25px; + } + } } diff --git a/src/Web/wwwroot/css/shared/components/identity/identity.css b/src/Web/wwwroot/css/shared/components/identity/identity.css index cd38600..38629ad 100644 --- a/src/Web/wwwroot/css/shared/components/identity/identity.css +++ b/src/Web/wwwroot/css/shared/components/identity/identity.css @@ -43,6 +43,7 @@ border: 1px solid #EEEEEE; height: 10rem; transition: height 0.35s; + z-index: 10; } .esh-identity-item {