From 97c3bc05af24d8349bff40216b81727d00aca918 Mon Sep 17 00:00:00 2001
From: Galip Tolga Erdem <galiperdem@gmail.com>
Date: Sat, 8 Jan 2022 01:46:55 +0300
Subject: [PATCH] added myOrder styles

---
 .../Pages/MyOrders.cshtml                     | 50 ++++++++++++++-----
 .../EShopOnAbp.PublicWeb/Pages/myOrders.css   | 19 ++++++-
 2 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/MyOrders.cshtml b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/MyOrders.cshtml
index 08f2c4fa..f07ca16c 100644
--- a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/MyOrders.cshtml
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/MyOrders.cshtml
@@ -15,29 +15,51 @@
     <abp-style src="/Pages/myOrders.css"/>
 }
 
-<div>
-    <strong>@Model.MyOrders.Count sipariş</strong> verildi.
+@{
+    string lastYearString = $"y{DateTime.Today.Year - 1}";
+}
+
+<div class="mb-5 mt-5 col">
+    <abp-row>
+        <abp-column size="_9"><span class="order-title"><strong>@Model.MyOrders.Count sipariş</strong> verildi.</span></abp-column>
+        <abp-column size="_3">
+            <select class="form-select">
+                        <option value="last30">@L["Last30Days"]</option>
+                        <option value="m1">@L["LastMonth"]</option>
+                        <option value="m3">@L["Last3Months"]</option>
+                        <option value="@lastYearString">@L["LastYear"]</option>
+                        <option value="y2020">2020</option>
+                        <option value="y2019">2019</option>
+                    </select>
+        </abp-column>
+    </abp-row>
 </div>
 
 @foreach (var order in Model.MyOrders)
 {
-    <div class="card order-item">
+    var orderTotalString = order.Items.Sum(q => q.UnitPrice).ToString("C", new CultureInfo("en-US"));
+    string addressString = $"{order.Address.Street} {order.Address.ZipCode} \n {order.Address.City}/{order.Address.Country}";
+    <div class="card">
         <div class="card-header">
             <div class="row">
                 <div class="col">
-                    <div>Sipariş Tarihi</div>
-                    <div>@order.OrderDate.ToString("dd MMMM yyyy")</div>
+                    <div class="o-header">Sipariş Tarihi</div>
+                    <div class="o-description">@order.OrderDate.ToString("dd MMMM yyyy")</div>
                 </div>
                 <div class="col">
-                    <div>TOPLAM</div>
-                    <div>@order.Items.Sum(q => q.UnitPrice)</div>
+                    <div class="o-header">Toplam</div>
+                    <div class="o-description">@orderTotalString</div>
                 </div>
                 <div class="col">
-                    <div>TESLİMAT ADRESİ</div>
-                    <div>@order.Address.Description</div>
+                    <div class="o-header">Teslimat Adresi</div>
+                    <div>
+                        <abp-button abp-tooltip-bottom="@addressString">@order.Address.Description</abp-button>
+                    </div>
                 </div>
                 <div class="col">
-                    <div>SİPARİŞ NO @order.OrderNo.ToString("N0", new NumberFormatInfo() {NumberGroupSeparator = " "})</div>
+                    <div>
+                        <span class="o-header">Sipariş No</span> <span class="o-order-no">@order.OrderNo.ToString("N0", new NumberFormatInfo() {NumberGroupSeparator = " "})</span>
+                    </div>
                 </div>
             </div>
         </div>
@@ -61,8 +83,12 @@
                                 </div>
                             </abp-column>
                             <abp-column offset="_3" size="_2">
-                                <abp-row class="pb-3"><abp-button class="btn btn-light shadow" disabled="true" abp-tooltip-right="Not available yet">Ürünleri iade et</abp-button></abp-row>
-                                <abp-row><abp-button class="btn btn-light shadow" disabled="true" abp-tooltip-right="Not available yet">Ürün yorumu yazın</abp-button></abp-row>
+                                <abp-row class="pb-3">
+                                    <abp-button class="btn btn-light shadow" disabled="true" abp-tooltip-right="Not available yet">Ürünleri iade et</abp-button>
+                                </abp-row>
+                                <abp-row>
+                                    <abp-button class="btn btn-light shadow" disabled="true" abp-tooltip-right="Not available yet">Ürün yorumu yazın</abp-button>
+                                </abp-row>
                             </abp-column>
                         </abp-row>
                     </abp-card-body>
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/myOrders.css b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/myOrders.css
index 4d842359..e5780259 100644
--- a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/myOrders.css
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/myOrders.css
@@ -1,8 +1,9 @@
 .img-size {
     width: 80%;
 }
+
 .order-item {
-    width:-webkit-fill-available;
+    width: -webkit-fill-available;
     background-color: #fff;
     border: 1px solid #eee;
     border-radius: 3px;
@@ -13,4 +14,20 @@
 
 .order-item:hover {
     box-shadow: 0 0 20px rgba(0, 0, 0, .1);
+}
+
+.o-header {
+    text-transform: uppercase;
+    font-weight: 500;    
+}
+
+.o-description {
+    font-weight: 500;
+    font-size: larger;
+}
+.o-order-no{
+    font-size:larger;
+}
+.order-title{
+    font-size: x-large;
 }
\ No newline at end of file