From 8ce3471e628ca77ddca20b287317de24b51b0b22 Mon Sep 17 00:00:00 2001
From: Simon Einzinger <info@simon-einzinger.de>
Date: Fri, 20 Sep 2024 21:27:33 +0200
Subject: [PATCH] Looks less shitty on mobile

---
 src/components/DutyDisplay.vue | 51 ++++++++++++++++++-------------
 src/components/GameDisplay.vue | 55 +++++++++++++++++++++++++++-------
 2 files changed, 74 insertions(+), 32 deletions(-)

diff --git a/src/components/DutyDisplay.vue b/src/components/DutyDisplay.vue
index edf272c..d8113ec 100644
--- a/src/components/DutyDisplay.vue
+++ b/src/components/DutyDisplay.vue
@@ -4,7 +4,7 @@
     <div class="duty-container">
       <div class="duty-section">
         <div class="icon-top-right">
-          <i class="fa-solid fa-volleyball"></i>
+          <i class="fa-solid fa-house"></i>
         </div>
         <div class="section-header">
           <h3>Hallendienst</h3>
@@ -58,18 +58,24 @@ export default {
 </script>
 
 <style scoped>
+* {
+  box-sizing: border-box;
+}
+
 .duties {
   text-align: center;
   margin-top: 40px;
+  padding: 0 15px; /* Add padding to prevent cut-off */
 }
 
 h2 {
   color: #34495e;
   margin-bottom: 20px;
-  font-size: 2.2em;
+  font-size: 2em;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 2px;
+  text-align: center; /* Ensure h2 is centered */
 }
 
 .duty-container {
@@ -78,6 +84,8 @@ h2 {
   align-items: flex-start;
   gap: 20px;
   flex-wrap: wrap;
+  width: 100%;
+  margin: 0 auto; /* Center the container */
 }
 
 .duty-section {
@@ -91,6 +99,7 @@ h2 {
   position: relative;
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
+  margin: 0 auto; /* Center the card */
 }
 
 .duty-section::before {
@@ -110,13 +119,13 @@ h2 {
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }
 
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 15px;
-  z-index: 2;
-  position: relative;
+.icon-top-right {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 1.8em;
+  color: #2980b9;
+  opacity: 0.7;
 }
 
 h3 {
@@ -145,25 +154,25 @@ li:hover {
   background-color: #ecf0f1;
 }
 
-.icon-top-right {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  font-size: 2em;
-  color: #2980b9;
-  opacity: 0.7;
-}
-
 @media (max-width: 768px) {
   .duty-container {
     flex-direction: column;
     align-items: center;
+    width: 100%;
+    padding: 0 15px;
   }
 
   .duty-section {
-    width: 100%;
-    max-width: 90%;
-    margin-bottom: 20px;
+    max-width: 100%; /* Take full width on small screens */
+    margin: 0 auto; /* Center the card */
+  }
+
+  h2 {
+    font-size: 1.8em;
+  }
+
+  .icon-top-right {
+    font-size: 1.5em;
   }
 }
 </style>
diff --git a/src/components/GameDisplay.vue b/src/components/GameDisplay.vue
index 67fc11f..75a9ba2 100644
--- a/src/components/GameDisplay.vue
+++ b/src/components/GameDisplay.vue
@@ -10,15 +10,15 @@
         <div class="icon-top-right">
           <i class="fa-solid fa-volleyball"></i>
         </div>
-        <h3>{{ formatDate(game.date) }} - Spiel{{ game.gameNr }}</h3>
+        <h3>{{ formatDate(game.date) }} - Spiel {{ game.gameNr }}</h3>
         <div class="teams">
           <div class="team">
-            <span>🏅</span>
+            <i :class="getIconClass(game.team1)"></i>
             <p>{{ game.team1 }}</p>
           </div>
           <p class="versus">VS</p>
           <div class="team">
-            <span>🏅</span>
+            <i :class="getIconClass(game.team2)"></i>
             <p>{{ game.team2 }}</p>
           </div>
         </div>
@@ -28,7 +28,7 @@
         </p>
       </div>
     </div>
-    <p v-else>Keine anstehended Spiele</p>
+    <p v-else>No upcoming games</p>
   </div>
 </template>
 
@@ -50,6 +50,11 @@ export default {
     },
   },
   methods: {
+    getIconClass(team) {
+      return team === "DJK Saarbrücken-Rastpfuhl"
+        ? "fas fa-trophy"
+        : "fas fa-poo";
+    },
     formatDate(dateStr) {
       const date = new Date(dateStr);
       return date.toLocaleDateString(undefined, {
@@ -63,18 +68,24 @@ export default {
 </script>
 
 <style scoped>
+* {
+  box-sizing: border-box;
+}
+
 .games {
   margin-top: 40px;
   text-align: center;
+  padding: 0 15px;
 }
 
 h2 {
   color: #34495e;
   margin-bottom: 20px;
-  font-size: 2.2em;
+  font-size: 2em;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 2px;
+  text-align: center;
 }
 
 .game-cards {
@@ -82,6 +93,8 @@ h2 {
   flex-direction: column;
   gap: 20px;
   align-items: center;
+  width: 100%;
+  justify-content: center;
 }
 
 .game-card {
@@ -94,6 +107,7 @@ h2 {
   text-align: left;
   position: relative;
   overflow: hidden;
+  margin: 0 auto;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
@@ -118,14 +132,14 @@ h2 {
   position: absolute;
   top: 10px;
   right: 10px;
-  font-size: 2em;
+  font-size: 1.8em;
   color: #2980b9;
   opacity: 0.7;
 }
 
 .game-card h3 {
   color: #16a085;
-  font-size: 1.5em;
+  font-size: 1.3em;
   z-index: 2;
   position: relative;
 }
@@ -142,17 +156,22 @@ h2 {
 .team {
   display: flex;
   align-items: center;
-  font-size: 1.2em;
+  font-size: 1.1em;
   width: 40%;
 }
 
+.team i {
+  margin-right: 10px;
+  font-size: 1.5em;
+  color: #2980b9; /* Color of the icon */
+}
 .team span {
   margin-right: 10px;
   font-size: 1.5em;
 }
 
 .versus {
-  font-size: 1.3em;
+  font-size: 1.2em;
   color: #e74c3c;
   font-weight: bold;
   z-index: 2;
@@ -169,9 +188,15 @@ h2 {
 }
 
 @media (max-width: 768px) {
-  .game-card {
+  .game-cards {
     width: 100%;
-    max-width: 90%;
+    padding: 0 15px;
+    justify-content: center;
+  }
+
+  .game-card {
+    max-width: 100%;
+    margin: 0 auto;
   }
 
   h2 {
@@ -189,5 +214,13 @@ h2 {
     width: 100%;
     text-align: center;
   }
+
+  .icon-top-right {
+    font-size: 1.5em;
+  }
+
+  .game-card h3 {
+    font-size: 1.2em;
+  }
 }
 </style>