From a4e62dc68111e4bf76628546b532df5f905a723d Mon Sep 17 00:00:00 2001
From: Samuele Locatelli <samuele@steamware.net>
Date: Tue, 23 May 2023 11:41:34 +0200
Subject: [PATCH] Fix display ordini

---
 WebDoorCreator.UI/Pages/OrdersHomePage.razor  | 68 ++++++++-----------
 .../Pages/OrdersHomePage.razor.css            | 26 ++++---
 .../Pages/OrdersHomePage.razor.less           |  8 ++-
 .../Pages/OrdersHomePage.razor.min.css        |  2 +-
 4 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/WebDoorCreator.UI/Pages/OrdersHomePage.razor b/WebDoorCreator.UI/Pages/OrdersHomePage.razor
index fd4a5ee..32a2d96 100644
--- a/WebDoorCreator.UI/Pages/OrdersHomePage.razor
+++ b/WebDoorCreator.UI/Pages/OrdersHomePage.razor
@@ -7,7 +7,7 @@
             {
                 <div class="cardOrders01">
                     <div class="row mb-3">
-                        <div class="fw-bold fs-2 text-start col-4">
+                        <div class="fw-bold fs-2 text-start col-4 text-nowrap">
                             ORDER LIST
                         </div>
                         <div class="d-flex justify-content-between col-8">
@@ -31,37 +31,31 @@
                 <div class="d-flex justify-content-around">
                     <div class="cardOrders01 wRed01">
                         <div class="d-flex justify-content-between flex-nowrap align-items-center  mb-3" style="--bgStepColor: @stepColor">
-                            <div class="fw-bold fs-2 text-start">
+                            <div class="fw-bold fs-3 text-start text-nowrap">
                                 ORDER LIST
                             </div>
-                            <div class=" px-3 d-flex justify-content-between small" style="font-size: 0.6rem">
-                                <div>Order Date:</div>
-                                <div>&nbsp;</div>
-                                <div class=" fw-bold">@ord2Show.DateIns</div>
+                            <div class=" px-2 small" style="font-size: 0.6rem">
+                                <div class="small">Order Date:</div>
+                                <div class="fw-bold">@ord2Show.DateIns</div>
                             </div>
-                            <div class=" px-3 d-flex justify-content-between small" style="font-size: 0.6rem">
-                                <div>Order Number:</div>
-                                <div>&nbsp;</div>
+                            <div class=" px-2 small" style="font-size: 0.6rem">
+                                <div class="small">Order Number:</div>
                                 <div class="fw-bold">@ord2Show.OrderExtCode</div>
                             </div>
-                            <div class=" px-3 d-flex justify-content-between small">
-                                <div>Order Description:</div>
-                                <div>&nbsp;</div>
+                            <div class=" px-2 small text-truncate">
+                                <div class="small">Order Description:</div>
                                 <div class="fw-bold">@ord2Show.OrderDescript</div>
                             </div>
-                            <div class=" px-3 d-flex justify-content-between small" style="font-size: 0.6rem">
-                                <div>Models Number:</div>
-                                <div>&nbsp;</div>
+                            <div class=" px-2 small" style="font-size: 0.6rem">
+                                <div class="small">Models #:</div>
                                 <div class="fw-bold">@ord2Show.NumType</div>
                             </div>
-                            <div class=" px-3 d-flex justify-content-between small" style="font-size: 0.6rem">
-                                <div class="text-center">Quantity:</div>
-                                <div>&nbsp;</div>
+                            <div class=" px-2 small" style="font-size: 0.6rem">
+                                <div class="text-center">Quantity #:</div>
                                 <div class="fw-bold">@ord2Show.NumDoors</div>
                             </div>
-                            <div class=" px-3 d-flex justify-content-between small">
+                            <div class=" px-2 small">
                                 <div class="text-center">TOTAL COST:</div>
-                                <div>&nbsp;</div>
                                 <div class="fw-bold">@($"{ord2Show.TotCost:C2}")</div>
                             </div>
                             <div class="d-flex justify-content-between">
@@ -84,37 +78,31 @@
                     {
                         <div class="cardOrders01 wRed02">
                             <div class="d-flex justify-content-between flex-nowrap align-items-center mb-3">
-                                <div class="fw-bold fs-2 text-start">
+                                <div class="fw-bold fs-4 text-start text-nowrap">
                                     ORDER LIST
                                 </div>
-                                <div class=" px-3 d-flex justify-content-between small">
-                                    <div>Order Date:</div>
-                                    <div>&nbsp;</div>
-                                    <div class=" fw-bold">@ord2Show.DateIns</div>
+                                <div class=" px-2 small" style="font-size: 0.6rem">
+                                    <div class="small">Order Date:</div>
+                                    <div class="fw-bold">@ord2Show.DateIns</div>
                                 </div>
-                                <div class=" px-3 d-flex justify-content-between small">
-                                    <div>Order Number:</div>
-                                    <div>&nbsp;</div>
+                                <div class=" px-2 small" style="font-size: 0.6rem">
+                                    <div class="small">Order Number:</div>
                                     <div class="fw-bold">@ord2Show.OrderExtCode</div>
                                 </div>
-                                <div class=" px-3 d-flex justify-content-between small">
-                                    <div>Order Description:</div>
-                                    <div>&nbsp;</div>
+                                <div class=" px-2 small text-truncate">
+                                    <div class="small">Order Description:</div>
                                     <div class="fw-bold">@ord2Show.OrderDescript</div>
                                 </div>
-                                <div class=" px-3 d-flex justify-content-between small">
-                                    <div>Models Number:</div>
-                                    <div>&nbsp;</div>
+                                <div class=" px-2 small" style="font-size: 0.6rem">
+                                    <div class="small">Models #:</div>
                                     <div class="fw-bold">@ord2Show.NumType</div>
                                 </div>
-                                <div class=" px-3 d-flex justify-content-between small">
-                                    <div class="text-center">Quantity:</div>
-                                    <div>&nbsp;</div>
+                                <div class=" px-2 small" style="font-size: 0.6rem">
+                                    <div class="text-center">Quantity #:</div>
                                     <div class="fw-bold">@ord2Show.NumDoors</div>
                                 </div>
-                                <div class=" px-3 d-flex justify-content-between small">
+                                <div class=" px-2 small">
                                     <div class="text-center">TOTAL COST:</div>
-                                    <div>&nbsp;</div>
                                     <div class="fw-bold">@($"{ord2Show.TotCost:C2}")</div>
                                 </div>
                                 <div class="d-flex justify-content-between">
@@ -130,7 +118,7 @@
                 <div class="d-flex justify-content-around">
                     <div class="cardOrders02 wRed01">
                         <div class="d-flex justify-content-between flex-nowrap align-items-center  mb-3">
-                            <div class="fw-bold fs-2 text-start">
+                            <div class="fw-bold fs-3 text-start text-nowrap">
                                 DOORS LIST
                             </div>
                             <div class=" px-3 d-flex justify-content-between small">
diff --git a/WebDoorCreator.UI/Pages/OrdersHomePage.razor.css b/WebDoorCreator.UI/Pages/OrdersHomePage.razor.css
index 41c84b2..c7eb414 100644
--- a/WebDoorCreator.UI/Pages/OrdersHomePage.razor.css
+++ b/WebDoorCreator.UI/Pages/OrdersHomePage.razor.css
@@ -1,43 +1,51 @@
 .cardOrders {
   width: 100%;
-  border-radius: 18px;
-  padding: 1rem 4rem 0.5rem 4rem;
+  /*border-radius: 18px;*/
+  border-radius: 1.3rem;
+  padding: 1rem 2.5rem 0.5rem 2.5rem;
   box-shadow: rgba(0, 0, 0, 0.45) 0px 20px 22px 3px;
   margin-top: 0.5rem;
   margin-bottom: 1rem;
   position: relative;
+  font-size: 1rem;
 }
 .cardOrders01 {
   width: 100%;
-  border-radius: 18px;
-  padding: 1rem 4rem 0.5rem 4rem;
+  /*border-radius: 18px;*/
+  border-radius: 1.3rem;
+  padding: 1rem 2.5rem 0.5rem 2.5rem;
   box-shadow: rgba(0, 0, 0, 0.45) 0px 20px 22px 3px;
   margin-top: 0.5rem;
   margin-bottom: 1rem;
   position: relative;
+  font-size: 1rem;
   background-color: #FFFFFF;
   color: #000;
   z-index: 10;
 }
 .cardOrders02 {
   width: 100%;
-  border-radius: 18px;
-  padding: 1rem 4rem 0.5rem 4rem;
+  /*border-radius: 18px;*/
+  border-radius: 1.3rem;
+  padding: 1rem 2.5rem 0.5rem 2.5rem;
   box-shadow: rgba(0, 0, 0, 0.45) 0px 20px 22px 3px;
   margin-top: 0.5rem;
   margin-bottom: 1rem;
   position: relative;
+  font-size: 1rem;
   background-color: #FFFFFF;
   z-index: 20;
 }
 .cardOrders03 {
   width: 100%;
-  border-radius: 18px;
-  padding: 1rem 4rem 0.5rem 4rem;
+  /*border-radius: 18px;*/
+  border-radius: 1.3rem;
+  padding: 1rem 2.5rem 0.5rem 2.5rem;
   box-shadow: rgba(0, 0, 0, 0.45) 0px 20px 22px 3px;
   margin-top: 0.5rem;
   margin-bottom: 1rem;
   position: relative;
+  font-size: 1rem;
   background-color: #FFFFFF;
   z-index: 30;
 }
@@ -48,6 +56,7 @@
   color: #FFF;
   animation-name: shrink01;
   animation-duration: 0.6s;
+  font-size: 0.9rem;
 }
 .wRed02 {
   width: 90%;
@@ -56,6 +65,7 @@
   color: white;
   animation-name: shrink02;
   animation-duration: 0.6s;
+  font-size: 0.8rem;
 }
 @keyframes shrink01 {
   0% {
diff --git a/WebDoorCreator.UI/Pages/OrdersHomePage.razor.less b/WebDoorCreator.UI/Pages/OrdersHomePage.razor.less
index 2727c72..b4d037f 100644
--- a/WebDoorCreator.UI/Pages/OrdersHomePage.razor.less
+++ b/WebDoorCreator.UI/Pages/OrdersHomePage.razor.less
@@ -6,12 +6,14 @@
 
 .cardOrders {
     width: @w01;
-    border-radius: 18px;
-    padding: 1rem 4rem 0.5rem 4rem;
+    /*border-radius: 18px;*/
+    border-radius: 1.3rem;
+    padding: 1rem 2.5rem 0.5rem 2.5rem;
     box-shadow: rgba(0, 0, 0, 0.45) 0px 20px 22px 3px;
     margin-top: 0.5rem;
     margin-bottom: 1rem;
     position: relative;
+    font-size: 1rem;
 }
 
 .cardOrders01 {
@@ -41,6 +43,7 @@
     color: #FFF;
     animation-name: shrink01;
     animation-duration: @animTime;
+    font-size: 0.9rem;
 }
 
 .wRed02 {
@@ -50,6 +53,7 @@
     color: white;
     animation-name: shrink02;
     animation-duration: @animTime;
+    font-size: 0.8rem;
 }
 
 @keyframes shrink01 {
diff --git a/WebDoorCreator.UI/Pages/OrdersHomePage.razor.min.css b/WebDoorCreator.UI/Pages/OrdersHomePage.razor.min.css
index eb5ecbb..2d7f3d5 100644
--- a/WebDoorCreator.UI/Pages/OrdersHomePage.razor.min.css
+++ b/WebDoorCreator.UI/Pages/OrdersHomePage.razor.min.css
@@ -1 +1 @@
-.cardOrders{width:100%;border-radius:18px;padding:1rem 4rem .5rem 4rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;}.cardOrders01{width:100%;border-radius:18px;padding:1rem 4rem .5rem 4rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;background-color:#fff;color:#000;z-index:10;}.cardOrders02{width:100%;border-radius:18px;padding:1rem 4rem .5rem 4rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;background-color:#fff;z-index:20;}.cardOrders03{width:100%;border-radius:18px;padding:1rem 4rem .5rem 4rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;background-color:#fff;z-index:30;}.wRed01{width:95%;margin-bottom:-1.5rem;background-color:#696969;color:#fff;animation-name:shrink01;animation-duration:.6s;}.wRed02{width:90%;margin-bottom:-1.5rem;background-color:#333;color:#fff;animation-name:shrink02;animation-duration:.6s;}@keyframes shrink01{0%{width:100%;background-color:#fff;color:#000;}80%{width:95%;background-color:#696969;color:#000;}100%{width:95%;color:#fff;}}@keyframes shrink02{0%{width:95%;background-color:#696969;}80%{width:90%;background-color:#333;}100%{width:90%;}}
\ No newline at end of file
+.cardOrders{width:100%;border-radius:1.3rem;padding:1rem 2.5rem .5rem 2.5rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;font-size:1rem;}.cardOrders01{width:100%;border-radius:1.3rem;padding:1rem 2.5rem .5rem 2.5rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;font-size:1rem;background-color:#fff;color:#000;z-index:10;}.cardOrders02{width:100%;border-radius:1.3rem;padding:1rem 2.5rem .5rem 2.5rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;font-size:1rem;background-color:#fff;z-index:20;}.cardOrders03{width:100%;border-radius:1.3rem;padding:1rem 2.5rem .5rem 2.5rem;box-shadow:rgba(0,0,0,.45) 0 20px 22px 3px;margin-top:.5rem;margin-bottom:1rem;position:relative;font-size:1rem;background-color:#fff;z-index:30;}.wRed01{width:95%;margin-bottom:-1.5rem;background-color:#696969;color:#fff;animation-name:shrink01;animation-duration:.6s;font-size:.9rem;}.wRed02{width:90%;margin-bottom:-1.5rem;background-color:#333;color:#fff;animation-name:shrink02;animation-duration:.6s;font-size:.8rem;}@keyframes shrink01{0%{width:100%;background-color:#fff;color:#000;}80%{width:95%;background-color:#696969;color:#000;}100%{width:95%;color:#fff;}}@keyframes shrink02{0%{width:95%;background-color:#696969;}80%{width:90%;background-color:#333;}100%{width:90%;}}
\ No newline at end of file