Skip to content

Commit 4486dc2

Browse files
AndreiMazAndreiMaz
authored
Merge pull request #2157 from SevenSpikes/order_details_markup_optimization
Markup optimizations for order and shipment detail pages
2 parents d01c869 + 41f543f commit 4486dc2

File tree

5 files changed

+152
-158
lines changed

5 files changed

+152
-158
lines changed

‎src/Presentation/Nop.Web/Themes/DefaultClean/Content/css/styles.css‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3689,24 +3689,20 @@ label, label + * {
36893689
.order-review-data .title,
36903690
.order-details-area .title,
36913691
.shipment-details-area .title {
3692-
margin: 20px 0 5px;
3692+
margin: 0 0 5px;
36933693
padding: 0;
36943694
font-size: 16px;
36953695
font-weight: bold;
36963696
}
3697-
.order-review-data .title:first-child,
3698-
.order-details-area .title:first-child,
3699-
.shipment-details-area .title:first-child {
3700-
margin-top: 0;
3701-
}
37023697
.order-review-data .title strong,
37033698
.order-details-area .title strong,
3704-
.shipment-details-area .title strong{
3699+
.shipment-details-area .title strong {
37053700
font-weight: 700;
37063701
}
3707-
.order-review-data .side-list-wrap,
3708-
.order-details-area .side-list-wrap,
3709-
.shipment-details-area .side-list-wrap {
3702+
.order-review-data .payment-method-info,
3703+
.order-review-data .shipping-method-info,
3704+
.order-details-area .payment-method-info,
3705+
.order-details-area .shipping-method-info {
37103706
margin-top: 20px;
37113707
}
37123708
.order-completed .details {

‎src/Presentation/Nop.Web/Themes/DefaultClean/Content/css/styles.rtl.css‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3717,24 +3717,20 @@ label, label + * {
37173717
.order-review-data .title,
37183718
.order-details-area .title,
37193719
.shipment-details-area .title {
3720-
margin: 20px 0 5px;
3720+
margin: 0 0 5px;
37213721
padding: 0;
37223722
font-size: 16px;
37233723
font-weight: bold;
37243724
}
3725-
.order-review-data .title:first-child,
3726-
.order-details-area .title:first-child,
3727-
.shipment-details-area .title:first-child {
3728-
margin-top: 0;
3729-
}
37303725
.order-review-data .title strong,
37313726
.order-details-area .title strong,
3732-
.shipment-details-area .title strong{
3727+
.shipment-details-area .title strong {
37333728
font-weight: 700;
37343729
}
3735-
.order-review-data .side-list-wrap,
3736-
.order-details-area .side-list-wrap,
3737-
.shipment-details-area .side-list-wrap {
3730+
.order-review-data .payment-method-info,
3731+
.order-review-data .shipping-method-info,
3732+
.order-details-area .payment-method-info,
3733+
.order-details-area .shipping-method-info {
37383734
margin-top: 20px;
37393735
}
37403736
.order-completed .details {

‎src/Presentation/Nop.Web/Views/Order/Details.cshtml‎

Lines changed: 70 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@
5555
</div>
5656
<div class="order-details-area">
5757
<div class="billing-info-wrap">
58-
<div class="title">
59-
<strong>@T("Order.BillingAddress")</strong>
60-
</div>
61-
<div class="info-content">
62-
<ul class="billing-info">
58+
<div class="billing-info">
59+
<div class="title">
60+
<strong>@T("Order.BillingAddress")</strong>
61+
</div>
62+
<ul class="info-list">
6363
<li class="name">
6464
@Model.BillingAddress.FirstName @Model.BillingAddress.LastName
6565
</li>
@@ -157,59 +157,59 @@
157157
}
158158
}
159159
</ul>
160-
@if (!String.IsNullOrEmpty(Model.PaymentMethod))
161-
{
162-
<div class="side-list-wrap">
163-
<ul class="side-list">
164-
<li class="title">
165-
@T("Order.Payment")
166-
</li>
167-
<li class="payment-method">
160+
</div>
161+
@if (!String.IsNullOrEmpty(Model.PaymentMethod))
162+
{
163+
<div class="payment-method-info">
164+
<div class="title">
165+
<strong>@T("Order.Payment")</strong>
166+
</div>
167+
<ul class="info-list">
168+
<li class="payment-method">
169+
<span class="label">
170+
@T("Order.Payment.Method"):
171+
</span>
172+
<span class="value">
173+
@Model.PaymentMethod
174+
</span>
175+
</li>
176+
@if (!Model.PrintMode)
177+
{
178+
<li class="payment-method-status">
168179
<span class="label">
169-
@T("Order.Payment.Method"):
180+
@T("Order.Payment.Status"):
170181
</span>
171182
<span class="value">
172-
@Model.PaymentMethod
183+
@Model.PaymentMethodStatus
173184
</span>
174185
</li>
175-
@if (!Model.PrintMode)
176-
{
177-
<li class="payment-method-status">
178-
<span class="label">
179-
@T("Order.Payment.Status"):
180-
</span>
181-
<span class="value">
182-
@Model.PaymentMethodStatus
183-
</span>
184-
</li>
185-
}
186-
@if (!Model.PrintMode && Model.CanRePostProcessPayment)
187-
{
188-
@*Complete payment (for redirection payment methods)*@
189-
<li class="repost">
190-
@using (Html.BeginRouteForm("OrderDetails", FormMethod.Post))
191-
{
192-
@Html.AntiForgeryToken()
193-
<input type="submit" name="repost-payment" value="@T("Order.RetryPayment")" class="button-2 re-order-button" />
194-
<p class="hint">
195-
<em>@T("Order.RetryPayment.Hint")</em>
196-
</p>
197-
}
198-
</li>
199-
}
200-
</ul>
201-
</div>
202-
}
203-
</div>
186+
}
187+
@if (!Model.PrintMode && Model.CanRePostProcessPayment)
188+
{
189+
@*Complete payment (for redirection payment methods)*@
190+
<li class="repost">
191+
@using (Html.BeginRouteForm("OrderDetails", FormMethod.Post))
192+
{
193+
@Html.AntiForgeryToken()
194+
<input type="submit" name="repost-payment" value="@T("Order.RetryPayment")" class="button-2 re-order-button" />
195+
<p class="hint">
196+
<em>@T("Order.RetryPayment.Hint")</em>
197+
</p>
198+
}
199+
</li>
200+
}
201+
</ul>
202+
</div>
203+
}
204204
</div>
205205
@if (Model.IsShippable)
206206
{
207207
<div class="shipping-info-wrap">
208-
<div class="title">
209-
<strong>@(Model.PickUpInStore ? T("Order.PickupAddress") : T("Order.ShippingAddress"))</strong>
210-
</div>
211-
<div class="info-content">
212-
<ul class="shipping-info">
208+
<div class="shipping-info">
209+
<div class="title">
210+
<strong>@(Model.PickUpInStore ? T("Order.PickupAddress") : T("Order.ShippingAddress"))</strong>
211+
</div>
212+
<ul class="info-list">
213213
@if (!Model.PickUpInStore)
214214
{
215215
<li class="name">
@@ -314,32 +314,32 @@
314314
}
315315
}
316316
</ul>
317-
<div class="side-list-wrap">
318-
<ul class="side-list">
319-
<li class="title">
320-
@T("Order.Shipping")
321-
</li>
322-
<li class="shipping-method">
317+
</div>
318+
<div class="shipping-method-info">
319+
<div class="title">
320+
<strong>@T("Order.Shipping")</strong>
321+
</div>
322+
<ul class="info-list">
323+
<li class="shipping-method">
324+
<span class="label">
325+
@T("Order.Shipping.Name"):
326+
</span>
327+
<span class="value">
328+
@Model.ShippingMethod
329+
</span>
330+
</li>
331+
@if (!Model.PrintMode)
332+
{
333+
<li class="shipping-status">
323334
<span class="label">
324-
@T("Order.Shipping.Name"):
335+
@T("Order.Shipping.Status"):
325336
</span>
326337
<span class="value">
327-
@Model.ShippingMethod
338+
@Model.ShippingStatus
328339
</span>
329340
</li>
330-
@if (!Model.PrintMode)
331-
{
332-
<li class="shipping-status">
333-
<span class="label">
334-
@T("Order.Shipping.Status"):
335-
</span>
336-
<span class="value">
337-
@Model.ShippingStatus
338-
</span>
339-
</li>
340-
}
341-
</ul>
342-
</div>
341+
}
342+
</ul>
343343
</div>
344344
</div>
345345
}

‎src/Presentation/Nop.Web/Views/Order/ShipmentDetails.cshtml‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@
1414
</div>
1515
<div class="page-body">
1616
<div class="shipment-details-area">
17-
<div class="shipping-info-wrap">
18-
<div class="title">
19-
<strong>@T("Order.Shipments.Order#")@Model.Order.Id</strong>
20-
</div>
21-
<div class="info-content">
22-
<ul class="shipping-info">
17+
<div class="order-info-wrap">
18+
<div class="order-info">
19+
<div class="title">
20+
<strong>@T("Order.Shipments.Order#")@Model.Order.Id</strong>
21+
</div>
22+
<ul class="info-list">
2323
<li class="shipping-method">
2424
@T("Order.Shipments.ShippingMethod"): @Model.Order.ShippingMethod
2525
</li>
@@ -62,14 +62,14 @@
6262
</ul>
6363
</div>
6464
</div>
65-
<div class="shipping-info-wrap">
66-
<div class="title">
67-
<strong>@T("Order.Shipments.ShippingAddress")</strong>
68-
</div>
69-
<div class="info-content">
70-
<ul class="shipping-address">
71-
@if (!Model.Order.PickUpInStore)
72-
{
65+
<div class="shipping-info-wrap">
66+
<div class="shipping-info">
67+
@if (!Model.Order.PickUpInStore)
68+
{
69+
<div class="title">
70+
<strong>@T("Order.Shipments.ShippingAddress")</strong>
71+
</div>
72+
<ul class="info-list">
7373
<li class="name">
7474
@Model.Order.ShippingAddress.FirstName @Model.Order.ShippingAddress.LastName
7575
</li>
@@ -82,7 +82,7 @@
8282
<li class="fax">
8383
@T("Order.Shipments.Fax"): @Model.Order.ShippingAddress.FaxNumber
8484
</li>
85-
if (!String.IsNullOrEmpty(Model.Order.ShippingAddress.Company))
85+
@if (!String.IsNullOrEmpty(Model.Order.ShippingAddress.Company))
8686
{
8787
<li class="company">
8888
@Model.Order.ShippingAddress.Company
@@ -91,7 +91,7 @@
9191
<li class="address1">
9292
@Model.Order.ShippingAddress.Address1
9393
</li>
94-
if (!String.IsNullOrEmpty(Model.Order.ShippingAddress.Address2))
94+
@if (!String.IsNullOrEmpty(Model.Order.ShippingAddress.Address2))
9595
{
9696
<li class="address2">
9797
@Model.Order.ShippingAddress.Address2
@@ -101,33 +101,35 @@
101101
@Model.Order.ShippingAddress.City, @Model.Order.ShippingAddress.StateProvinceName
102102
@Model.Order.ShippingAddress.ZipPostalCode
103103
</li>
104-
if (!String.IsNullOrEmpty(Model.Order.ShippingAddress.CountryName))
104+
@if (!String.IsNullOrEmpty(Model.Order.ShippingAddress.CountryName))
105105
{
106106
<li class="country">
107107
@Model.Order.ShippingAddress.CountryName
108108
</li>
109109
}
110-
}
111-
else
112-
{
113-
<li class="title">
114-
@T("Order.Shipments.PickupAddress")
115-
</li>
110+
</ul>
111+
}
112+
else
113+
{
114+
<div class="title">
115+
<strong>@T("Order.Shipments.PickupAddress")</strong>
116+
</div>
117+
<ul class="info-list">
116118
<li class="address1">
117119
@Model.Order.PickupAddress.Address1
118120
</li>
119121
<li class="city-state-zip">
120122
@Model.Order.PickupAddress.City,
121123
@Model.Order.PickupAddress.ZipPostalCode
122124
</li>
123-
if (!string.IsNullOrEmpty(Model.Order.PickupAddress.CountryName))
125+
@if (!string.IsNullOrEmpty(Model.Order.PickupAddress.CountryName))
124126
{
125127
<li class="country">
126128
@Model.Order.PickupAddress.CountryName
127129
</li>
128130
}
129-
}
130-
</ul>
131+
</ul>
132+
}
131133
</div>
132134
</div>
133135
</div>

0 commit comments

Comments
 (0)