From b6ed0a47f6cc734c9ffdab7ffccc72ca8d0a3588 Mon Sep 17 00:00:00 2001
From: Laura Hausmann <laura@hausmann.dev>
Date: Fri, 12 Jun 2020 17:51:23 +0200
Subject: [PATCH] css cleanup; small fixes

---
 bahnplan.web/Pages/Cards.cshtml      | 19 ++++++++++--
 bahnplan.web/Pages/Inspection.cshtml | 43 ++++++++++++++++++++++------
 bahnplan.web/wwwroot/css/site.css    | 20 +++++++++++++
 3 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/bahnplan.web/Pages/Cards.cshtml b/bahnplan.web/Pages/Cards.cshtml
index e69656f..1a2066d 100644
--- a/bahnplan.web/Pages/Cards.cshtml
+++ b/bahnplan.web/Pages/Cards.cshtml
@@ -88,6 +88,9 @@
         }
         </tbody>
     </table>
+    <p>
+        Please refresh your BahnCard list in the mobile DB Navigator before clicking "Refresh QR". This will be fixed in a later release.
+    </p>
     <a class="btn btn-sm btn-secondary" href="@Request.Path">Back</a>
     <br/>
     <br/>
@@ -95,9 +98,19 @@
 }
 else if (Model.Cards.Any()) {
     foreach (var card in Model.Cards) {
-        <img src="@card.CardQr" alt="Ticketcode"/>
-        <img src="@card.CardSecCode" alt="Sichtmerkmal"/>
-        <img style="margin: -50px; height: 450px; transform: rotate(-90deg); position: relative; left: 130px" src='data:image/svg+xml;base64,@card.CardImage.Base64Encode()' alt="Bahncardimage"/>
+        <div class="flex-grid">
+            <div class="flex-col">
+                <img src="@card.CardQr" alt="Ticketcode"/>
+            </div>
+            <div class="flex-col">
+                <img src="@card.CardSecCode" alt="Sichtmerkmal"/>
+            </div>
+            <div class="flex-col">
+                <div class="bahncard-outer">
+                    <img class="bahncard" src='data:image/svg+xml;base64,@card.CardImage.Base64Encode()' alt="Bahncardimage"/>
+                </div>
+            </div>
+        </div>
         var from = DateTime.Parse(card.ValidFrom);
         var to = DateTime.Parse(card.ValidTo);
         var qrfrom = DateTime.Parse(card.QrValidFrom);
diff --git a/bahnplan.web/Pages/Inspection.cshtml b/bahnplan.web/Pages/Inspection.cshtml
index ef1cab2..0c2a7fa 100644
--- a/bahnplan.web/Pages/Inspection.cshtml
+++ b/bahnplan.web/Pages/Inspection.cshtml
@@ -19,9 +19,14 @@
 <p>
     Ticket for <b>@Model.Leg.TrainType @Model.Leg.TrainNr</b> from <b>@Model.Leg.DepStation</b> to <b>@Model.Leg.ArrStation</b>, starting @DateTime.Parse(Model.Leg.DepTime).ToString("yyyy-MM-dd HH:mm")
 </p>
-
-<img src="@Model.Ticket.TicketQr" alt="Ticketcode"/>
-<img src="@Model.Ticket.TicketSecCode" alt="Sichtmerkmal"/>
+<div class="flex-grid">
+    <div class="flex-col">
+        <img src="@Model.Ticket.TicketQr" alt="Ticketcode"/>
+    </div>
+    <div class="flex-col">
+        <img src="@Model.Ticket.TicketSecCode" alt="Sichtmerkmal"/>
+    </div>
+</div>
 <br/>
 <br/>
 @Model.Ticket.TicketInfo
@@ -31,9 +36,19 @@
     await using var db = new Database.DbConn();
     if (db.Cards.Any(p => p.Value == 50 && p.Traveller == Model.Ticket.Traveller)) {
         var card = db.Cards.First(p => p.Value == 50 && p.Traveller == Model.Ticket.Traveller);
-        <img src="@card.CardQr" alt="Ticketcode"/>
-        <img src="@card.CardSecCode" alt="Sichtmerkmal"/>
-        <img style="margin: -50px; height: 450px; transform: rotate(-90deg); position: relative; left: 130px" src='data:image/svg+xml;base64,@card.CardImage.Base64Encode()' alt="Bahncardimage"/>
+        <div class="flex-grid">
+            <div class="flex-col">
+                <img src="@card.CardQr" alt="Ticketcode"/>
+            </div>
+            <div class="flex-col">
+                <img src="@card.CardSecCode" alt="Sichtmerkmal"/>
+            </div>
+            <div class="flex-col">
+                <div class="bahncard-outer">
+                    <img class="bahncard" src='data:image/svg+xml;base64,@card.CardImage.Base64Encode()' alt="Bahncardimage"/>
+                </div>
+            </div>
+        </div>
 
         var from = DateTime.Parse(card.ValidFrom);
         var to = DateTime.Parse(card.ValidTo);
@@ -71,9 +86,19 @@ else if (Model.Ticket.TicketInfo.Contains("BC 25")) {
     await using var db = new Database.DbConn();
     if (db.Cards.Any(p => p.Value == 25 && p.Traveller == Model.Ticket.Traveller)) {
         var card = db.Cards.First(p => p.Value == 25 && p.Traveller == Model.Ticket.Traveller);
-        <img src="@card.CardQr" alt="Ticketcode"/>
-        <img src="@card.CardSecCode" alt="Sichtmerkmal"/>
-        <img style="margin: -50px; height: 450px; transform: rotate(-90deg); position: relative; left: 130px" src='data:image/svg+xml;base64,@card.CardImage.Base64Encode()' alt="Bahncardimage"/>
+        <div class="flex-grid">
+            <div class="flex-col">
+                <img src="@card.CardQr" alt="Ticketcode"/>
+            </div>
+            <div class="flex-col">
+                <img src="@card.CardSecCode" alt="Sichtmerkmal"/>
+            </div>
+            <div class="flex-col">
+                <div class="bahncard-outer">
+                    <img class="bahncard" src='data:image/svg+xml;base64,@card.CardImage.Base64Encode()' alt="Bahncardimage"/>
+                </div>
+            </div>
+        </div>
 
         var from = DateTime.Parse(card.ValidFrom);
         var to = DateTime.Parse(card.ValidTo);
diff --git a/bahnplan.web/wwwroot/css/site.css b/bahnplan.web/wwwroot/css/site.css
index 356d15b..bd23dc1 100644
--- a/bahnplan.web/wwwroot/css/site.css
+++ b/bahnplan.web/wwwroot/css/site.css
@@ -72,4 +72,24 @@ body {
 
 td {
   vertical-align: middle !important;
+}
+
+.flex-grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex-col {
+  margin: 3px 3px 10px;
+}
+
+.bahncard-outer {
+  width: 400px;
+  height: 260px;
+}
+
+.bahncard {
+  height: 400px;
+  transform-origin: top left;
+  transform: rotate(-90deg) translate(-100%);
 }
\ No newline at end of file