Updated UI

README.md

@@ -1,24 +1,29 @@
-# hallendienst
+# Volleyball
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 npm run serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).

src/App.vue

@@ -1,11 +1,17 @@
 <template>
   <div id="app">
     <h1>DJK Saarbrücken-Rastpfuhl - Herren 1</h1>
-    <div class="container">
+
+    <div class="main-container">
+      <!-- DutyDisplay Component -->
+      <SectionContainer title="Mannschaftsdienste">
         <DutyDisplay :duties="duties" />
-    </div>
+      </SectionContainer>
-    <div class="container">
+
+      <!-- GameDisplay Component -->
+      <SectionContainer title="Anstehende Spiele">
         <GameDisplay :games="games" />
+      </SectionContainer>
     </div>
   </div>
 </template>
@@ -13,190 +19,71 @@
 <script>
 import DutyDisplay from "./components/DutyDisplay.vue";
 import GameDisplay from "./components/GameDisplay.vue";
+import SectionContainer from "./components/SectionContainer.vue"; // New reusable container
+import { duties, games } from "./data"; // Importing duties and games
 
 export default {
   name: "App",
   components: {
     DutyDisplay,
     GameDisplay,
+    SectionContainer, // Reusable container for sections
   },
   data() {
     return {
-      duties: [
+      duties, // Use imported duties data
-        {
+      games, // Use imported games data
-          week: 1,
-          courtDuty: ["Jason", "Tim", "Jacob"],
-          cashDuty: ["Simon", "Max", "Dima"],
-        },
-        {
-          week: 2,
-          courtDuty: ["Niclas, Bruno"],
-          cashDuty: ["Oleksandr", "Volodymyr", "Jonathan"],
-        },
-        {
-          week: 3,
-          courtDuty: ["Benedikt", "MJ"],
-          cashDuty: ["Jason", "Tim", "Jacob"],
-        },
-        {
-          week: 4,
-          courtDuty: ["Ali", "Niklas"],
-          cashDuty: ["Niclas", "Bruno"],
-        },
-        {
-          week: 5,
-          courtDuty: ["Daniel", "Stephan"],
-          cashDuty: ["Benedikt", "MJ"],
-        },
-        { week: 6, courtDuty: ["Kieran", "Marcel"], cashDuty: ["Ali, Niklas"] },
-        {
-          week: 7,
-          courtDuty: ["Simon", "Max", "Dima"],
-          cashDuty: ["Daniel", "Stephan"],
-        },
-        {
-          week: 8,
-          courtDuty: ["Oleksandr", "Volodymyr", "Jonathan"],
-          cashDuty: ["Kieran", "Marcel"],
-        },
-      ],
-      games: [
-        {
-          date: "2024-09-21",
-          gameNr: 1,
-          team1: "Tv Saarwellingen",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 1,
-        },
-        {
-          date: "2024-09-28",
-          gameNr: 1,
-          team1: "DJK Saarbrücken-Rastpfuhl",
-          team2: "SVK Blieskastel-Zweibrücken",
-          host: 1,
-        },
-        {
-          date: "2024-09-28",
-          gameNr: 2,
-          team1: "DJK Saarbrücken-Rastpfuhl",
-          team2: "TV Klarenthal",
-          host: 1,
-        },
-        {
-          date: "2024-11-02",
-          gameNr: 1,
-          team1: "TV Düppenweiler",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 1,
-        },
-        {
-          date: "2024-11-09",
-          gameNr: 1,
-          team1: "DJK Saarbrücken-Rastpfuhl",
-          team2: "TV Brebach",
-          host: 1,
-        },
-        {
-          date: "2024-11-09",
-          gameNr: 2,
-          team1: "DJK Saarbrücken-Rastpfuhl",
-          team2: "TV 06 Limbach",
-          host: 1,
-        },
-        {
-          date: "2024-11-30",
-          gameNr: 2,
-          team1: "TV Saarwellingen 2",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 1,
-        },
-        {
-          date: "2024-12-14",
-          gameNr: 2,
-          team1: "TV Wiesbach 2",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 1,
-        },
-        {
-          date: "2025-01-11",
-          gameNr: 1,
-          team1: "TV Klarenthal",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 1,
-        },
-        {
-          date: "2025-01-18",
-          gameNr: 1,
-          team1: "TV Brebach",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 1,
-        },
-        {
-          date: "2025-02-01",
-          gameNr: 1,
-          team1: "DJK Saarbrücken-Rastpfuhl",
-          team2: "TV Düppenweiler",
-          host: 1,
-        },
-        {
-          date: "2025-02-01",
-          gameNr: 2,
-          team1: "DJK Saarbrücken-Rastpfuhl",
-          team2: "TV Wiesbach 2",
-          host: 1,
-        },
-        {
-          date: "2025-02-15",
-          gameNr: 1,
-          team1: "TV 06 Limbach",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 1,
-        },
-        {
-          date: "2025-03-08",
-          gameNr: 1,
-          team1: "SVK Blieskastel-Zweibrücken",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 2,
-        },
-        {
-          date: "2025-03-08",
-          gameNr: 2,
-          team1: "TV Saarwellingen",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 2,
-        },
-      ],
     };
   },
 };
 </script>
 
-<style>
+<style scoped>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   text-align: center;
   background-color: #f4f4f9;
   min-height: 100vh;
+  padding: 20px;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: center; /* Center content vertically */
-  align-items: center;
+  align-items: center; /* Center content horizontally */
 }
 
 h1 {
   color: #34495e;
-  margin-top: 20px;
+  margin-bottom: 40px;
   font-size: 2.5em;
+  font-weight: bold;
 }
 
-.container {
+.main-container {
-  background-color: white;
+  display: flex;
-  padding: 20px;
+  flex-direction: column; /* Stack items vertically */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  gap: 20px;
-  border-radius: 10px;
-  max-width: 800px;
   width: 100%;
-  margin-top: 20px;
+  max-width: 1200px;
+  align-items: center; /* Center the containers horizontally */
+}
+
+@media (max-width: 768px) {
+  #app {
+    padding: 10px; /* Reduce padding on mobile */
+  }
+
+  h1 {
+    font-size: 2em; /* Smaller heading on mobile */
+  }
+
+  .main-container {
+    gap: 20px; /* Consistent spacing between sections */
+  }
+}
+
+@media (max-width: 480px) {
+  h1 {
+    font-size: 1.8em; /* Further reduce font size for smaller screens */
+  }
 }
 </style>

src/assets/global.css

@@ -0,0 +1,52 @@
+.section-container {
+  background-color: white;
+  padding: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+h1,
+h2 {
+  color: #34495e;
+  font-weight: bold;
+}
+
+h2 {
+  font-size: 1.8em;
+  text-transform: uppercase;
+  border-bottom: 2px solid #16a085;
+  padding-bottom: 10px;
+  text-align: left;
+  color: #16a085;
+}
+
+@media (max-width: 768px) {
+  h1 {
+    font-size: 2em;
+  }
+
+  h2 {
+    font-size: 1.5em;
+  }
+
+  .section-container {
+    padding: 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  h1 {
+    font-size: 1.8em;
+  }
+
+  h2 {
+    font-size: 1.3em;
+  }
+
+  .section-container {
+    padding: 10px;
+  }
+}

src/components/DutyDisplay.vue

@@ -1,6 +1,4 @@
 <template>
-  <div class="duties">
-    <h2>Mannschaftsdienste für Woche {{ currentWeek }}</h2>
   <div class="duty-container">
     <div class="duty-section">
       <div class="icon-top-right">
@@ -29,7 +27,6 @@
       </ul>
     </div>
   </div>
-  </div>
 </template>
 
 <script>

src/components/GameDisplay.vue

@@ -1,12 +1,6 @@
 <template>
-  <div class="games">
-    <h2>Anstehende Spiele</h2>
   <div v-if="upcomingGames.length" class="game-cards">
-      <div
+    <div class="game-card" v-for="(game, index) in upcomingGames" :key="index">
-        class="game-card"
-        v-for="(game, index) in upcomingGames"
-        :key="index"
-      >
       <div class="icon-top-right">
         <i class="fa-solid fa-volleyball"></i>
       </div>
@@ -29,7 +23,6 @@
     </div>
   </div>
   <p v-else>No upcoming games</p>
-  </div>
 </template>
 
 <script>

src/components/SectionContainer.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="section-container">
+    <h2>{{ title }}</h2>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SectionContainer",
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped></style>

src/data.js

@@ -0,0 +1,146 @@
+export const duties = [
+    {
+        week: 1,
+        courtDuty: ["Jason", "Tim", "Jacob"],
+        cashDuty: ["Simon", "Max", "Dima"],
+    },
+    {
+        week: 2,
+        courtDuty: ["Niclas, Bruno"],
+        cashDuty: ["Oleksandr", "Volodymyr", "Jonathan"],
+    },
+    {
+        week: 3,
+        courtDuty: ["Benedikt", "MJ"],
+        cashDuty: ["Jason", "Tim", "Jacob"],
+    },
+    {
+        week: 4,
+        courtDuty: ["Ali", "Niklas"],
+        cashDuty: ["Niclas", "Bruno"],
+    },
+    {
+        week: 5,
+        courtDuty: ["Daniel", "Stephan"],
+        cashDuty: ["Benedikt", "MJ"],
+    },
+    { week: 6, courtDuty: ["Kieran", "Marcel"], cashDuty: ["Ali, Niklas"] },
+    {
+        week: 7,
+        courtDuty: ["Simon", "Max", "Dima"],
+        cashDuty: ["Daniel", "Stephan"],
+    },
+    {
+        week: 8,
+        courtDuty: ["Oleksandr", "Volodymyr", "Jonathan"],
+        cashDuty: ["Kieran", "Marcel"],
+    },
+];
+
+export const games = [
+    {
+        date: "2024-09-21",
+        gameNr: 1,
+        team1: "Tv Saarwellingen",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 1,
+    },
+    {
+        date: "2024-09-28",
+        gameNr: 1,
+        team1: "DJK Saarbrücken-Rastpfuhl",
+        team2: "SVK Blieskastel-Zweibrücken",
+        host: 1,
+    },
+    {
+        date: "2024-09-28",
+        gameNr: 2,
+        team1: "DJK Saarbrücken-Rastpfuhl",
+        team2: "TV Klarenthal",
+        host: 1,
+    },
+    {
+        date: "2024-11-02",
+        gameNr: 1,
+        team1: "TV Düppenweiler",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 1,
+    },
+    {
+        date: "2024-11-09",
+        gameNr: 1,
+        team1: "DJK Saarbrücken-Rastpfuhl",
+        team2: "TV Brebach",
+        host: 1,
+    },
+    {
+        date: "2024-11-09",
+        gameNr: 2,
+        team1: "DJK Saarbrücken-Rastpfuhl",
+        team2: "TV 06 Limbach",
+        host: 1,
+    },
+    {
+        date: "2024-11-30",
+        gameNr: 2,
+        team1: "TV Saarwellingen 2",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 1,
+    },
+    {
+        date: "2024-12-14",
+        gameNr: 2,
+        team1: "TV Wiesbach 2",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 1,
+    },
+    {
+        date: "2025-01-11",
+        gameNr: 1,
+        team1: "TV Klarenthal",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 1,
+    },
+    {
+        date: "2025-01-18",
+        gameNr: 1,
+        team1: "TV Brebach",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 1,
+    },
+    {
+        date: "2025-02-01",
+        gameNr: 1,
+        team1: "DJK Saarbrücken-Rastpfuhl",
+        team2: "TV Düppenweiler",
+        host: 1,
+    },
+    {
+        date: "2025-02-01",
+        gameNr: 2,
+        team1: "DJK Saarbrücken-Rastpfuhl",
+        team2: "TV Wiesbach 2",
+        host: 1,
+    },
+    {
+        date: "2025-02-15",
+        gameNr: 1,
+        team1: "TV 06 Limbach",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 1,
+    },
+    {
+        date: "2025-03-08",
+        gameNr: 1,
+        team1: "SVK Blieskastel-Zweibrücken",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 2,
+    },
+    {
+        date: "2025-03-08",
+        gameNr: 2,
+        team1: "TV Saarwellingen",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 2,
+    },
+];

src/main.js

@@ -1,4 +1,5 @@
-import { createApp } from 'vue'
+import { createApp } from "vue";
-import App from './App.vue'
+import App from "./App.vue";
+import "./assets/global.css";
 
-createApp(App).mount('#app')
+createApp(App).mount("#app");