Merge pull request #2 from Sprudeel/better-mobile-view

feat: add better mobile view

resources/js/Components/aemtlis/Abwaschen.vue

@@ -12,38 +12,40 @@ function animate() {
 </script>
 
 <template>
- <div class="m-4 relative">
- <div id="abwaschen_animate" class="mb-4 bg opacity-0 p-2">
+ <div class="flex lg:flex-col-reverse gap-4">
+ <Geschirr_Sauber
+ class="h-20 w-20 lg:h-40 lg:w-40 self-center"
+ />
+ <div class="bg flex items-center flex-1 opacity-0 p-2 woosh">
  <div v-if="group.name">
- <p class="font-bold">{{ group.name }}</p>
+ <p class="font-bold text-lg lg:text-2xl lg:mb-3">{{ group.name }}</p>
  <p
- class="text-center"
  v-for="participant in group.participants"
+ v-bind:key="participant.id"
  >
  {{ participant.name }}
  </p>
  </div>
- <div v-else class="font-bold">{{ group }}</div>
+ <div v-else class="font-bold flex-grow-1 text-center text-lg lg:text-2xl">{{ group }}</div>
  </div>
- <Geschirr_Sauber class="mx-auto" @click="animate()" />
+
  </div>
 </template>
 
 <style scoped>
 .bg {
- background: rgba(255, 255, 255, 0.21);
+ background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(1.5px);
- -webkit-backdrop-filter: blur(1.5px);
- border: 1px solid rgba(255, 255, 255, 0.1);
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+ backdrop-filter: blur(5px);
+ -webkit-backdrop-filter: blur(5px);
+ border: 1px solid rgba(255, 255, 255, 0.3);
 }
 .woosh {
  animation-name: woosh;
- animation-duration: 1s;
+ animation-duration: 2s;
  animation-fill-mode: forwards;
 }
-
 @keyframes woosh {
  0% {
  opacity: 0;

resources/js/Components/aemtlis/Joker.vue

@@ -5,46 +5,38 @@ const props = defineProps({
  group: Object,
  id: Number,
 });
-
-function animate() {
- const element = document.getElementById("joker" + props.id + "_animate");
- element.classList.add("woosh");
-}
 </script>
 
 <template>
- <div class="h-40 m-4 relative">
- <Joker class="mx-auto" @click="animate()" />
- <div
- :id="'joker' + props.id + '_animate'"
- class="mb-4 bg opacity-0 p-2"
- >
- <div v-if="group.name">
- <p class="font-bold">{{ group.name }}</p>
+ <div class="flex lg:flex-col gap-4">
+ <Joker class="h-20 w-20 lg:h-40 lg:w-40 self-center" />
+ <div class="bg flex-col flex-1 opacity-0 p-2 woosh">
+ <div v-if="group.name" class="text-center">
+ <p class="font-bold text-lg lg:text-2xl lg:mb-2">{{ group.name }}</p>
  <p
- class="text-center"
  v-for="participant in group.participants"
+ v-bind:key="participant.id"
  >
  {{ participant.name }}
  </p>
  </div>
- <div v-else class="font-bold">{{ group }}</div>
+ <div v-else class="font-bold flex-grow-1 text-lg lg:text-2xl">{{ group }}</div>
  </div>
  </div>
 </template>
 
 <style scoped>
 .bg {
- background: rgba(255, 255, 255, 0.21);
+ background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(1.5px);
- -webkit-backdrop-filter: blur(1.5px);
- border: 1px solid rgba(255, 255, 255, 0.1);
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+ backdrop-filter: blur(5px);
+ -webkit-backdrop-filter: blur(5px);
+ border: 1px solid rgba(255, 255, 255, 0.3);
 }
 .woosh {
  animation-name: woosh;
- animation-duration: 1s;
+ animation-duration: 2s;
  animation-fill-mode: forwards;
 }
 

resources/js/Components/aemtlis/Putzen.vue

@@ -4,43 +4,40 @@ import Putzen from "@/Components/svg/Putzen.vue";
 const props = defineProps({
  group: Object,
 });
-
-function animate() {
- const element = document.getElementById("putzen_animate");
- element.classList.add("woosh");
-}
 </script>
 
 <template>
- <div class="m-4 relative">
- <div id="putzen_animate" class="mb-4 bg opacity-0 p-2">
- <div v-if="group.name">
- <p class="font-bold">{{ group.name }}</p>
+ <div class="flex lg:flex-col-reverse gap-4">
+ <Putzen
+ class="h-20 w-20 lg:h-40 lg:w-40 self-center"
+ />
+ <div class="bg flex-1 opacity-0 p-2 woosh">
+ <div v-if="group.name" class="text-center">
+ <p class="font-bold text-lg lg:text-2xl lg:mb-2">{{ group.name }}</p>
  <p
- class="text-center"
  v-for="participant in group.participants"
+ v-bind:key="participant.id"
  >
  {{ participant.name }}
  </p>
  </div>
- <div v-else class="font-bold">{{ group }}</div>
+ <div v-else class="font-bold flex-grow-1 text-lg lg:text-2xl">{{ group }}</div>
  </div>
- <Putzen class="mx-auto" @click="animate()" />
  </div>
 </template>
 
 <style scoped>
 .bg {
- background: rgba(255, 255, 255, 0.21);
+ background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(1.5px);
- -webkit-backdrop-filter: blur(1.5px);
- border: 1px solid rgba(255, 255, 255, 0.1);
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+ backdrop-filter: blur(5px);
+ -webkit-backdrop-filter: blur(5px);
+ border: 1px solid rgba(255, 255, 255, 0.3);
 }
 .woosh {
  animation-name: woosh;
- animation-duration: 1s;
+ animation-duration: 2s;
  animation-fill-mode: forwards;
 }
 

resources/js/Components/aemtlis/Tischen.vue

@@ -4,46 +4,42 @@ import Tischen from "@/Components/svg/Tischen.vue";
 const props = defineProps({
  group: Object,
 });
-
-function animate() {
- const element = document.getElementById("tischen_animate");
- element.classList.add("woosh");
-}
 </script>
 
 <template>
- <div class="m-4 relative">
- <div id="tischen_animate" class="mb-4 bg opacity-0 p-2">
- <div v-if="group.name">
- <p class="font-bold">{{ group.name }}</p>
+ <div class="flex lg:flex-col-reverse gap-4">
+ <Tischen
+ class="h-20 w-20 lg:h-40 lg:w-40 self-center"
+ />
+ <div class="bg flex-col flex-1 opacity-0 p-2 woosh">
+ <div v-if="group.name" class="text-center">
+ <p class="font-bold text-lg lg:text-2xl lg:mb-2">{{ group.name }}</p>
  <p
- class="text-center"
  v-for="participant in group.participants"
+ v-bind:key="participant.id"
  >
  {{ participant.name }}
  </p>
  </div>
- <div v-else class="font-bold">{{ group }}</div>
+ <div v-else class="font-bold flex-grow-1 text-lg lg:text-2xl">{{ group }}</div>
  </div>
- <Tischen class="mx-auto" @click="animate()" />
  </div>
 </template>
 
 <style scoped>
 .bg {
- background: rgba(255, 255, 255, 0.21);
+ background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(1.5px);
- -webkit-backdrop-filter: blur(1.5px);
- border: 1px solid rgba(255, 255, 255, 0.1);
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+ backdrop-filter: blur(5px);
+ -webkit-backdrop-filter: blur(5px);
+ border: 1px solid rgba(255, 255, 255, 0.3);
 }
 .woosh {
  animation-name: woosh;
- animation-duration: 1s;
+ animation-duration: 2s;
  animation-fill-mode: forwards;
 }
-
 @keyframes woosh {
  0% {
  opacity: 0;

resources/js/Pages/Dashboard.vue

@@ -69,6 +69,7 @@ function changeGroup(group, aemtli) {
 
  <div
  v-for="aemtli in props.aemtlis"
+ v-bind:key="aemtli.name"
  class="border rounded p-6 mx-2 my-4"
  >
  <h2 class="text-xl text-slate-600 mb-4">

resources/js/Pages/Welcome.vue

@@ -14,45 +14,35 @@ const props = defineProps({
  joker_3: Object,
 });
 
-const abwaschen_group = props.abwaschen
- ? props.abwaschen.group
- : "keine Gruppe zugeteilt";
+const abwaschen_group = props.abwaschen.group ?? "keine Gruppe zugeteilt";
 
-const putzen_group = props.putzen
- ? props.putzen.group
- : "keine Gruppe zugeteilt";
+const putzen_group = props.putzen.group ?? "keine Gruppe zugeteilt";
 
-const tischen_group = props.tischen
- ? props.tischen.group
- : "keine Gruppe zugeteilt";
+const tischen_group = props.tischen.group ?? "keine Gruppe zugeteilt";
 
-const joker1_group = props.joker_1
- ? props.joker_1.group
- : "keine Gruppe zugeteilt";
+const joker1_group = props.joker_1.group ?? "keine Gruppe zugeteilt";
 
-const joker2_group = props.joker_2
- ? props.joker_2.group
- : "keine Gruppe zugeteilt";
+const joker2_group = props.joker_2.group ?? "keine Gruppe zugeteilt";
 
-const joker3_group = props.joker_3
- ? props.joker_3.group
- : "keine Gruppe zugeteilt";
+const joker3_group = props.joker_3.group ?? "keine Gruppe zugeteilt";
 </script>
 
 <template>
  <Head title="Ämtliplan" />
 
  <div
  id="scrollbar"
- class="bg h-screen top-0 left-0 bottom-0 md:overflow-x-scroll overflow-y-hidden"
+ class="bg"
  >
- <div class="h-screen min-w-max grid grid-cols-3 grid-rows-2 gap-4 p-8">
- <Joker :group="joker1_group" :id="1" />
- <Joker :group="joker2_group" :id="2" />
- <Joker :group="joker3_group" :id="3" />
- <Putzen class="self-end" :group="putzen_group" />
- <Abwaschen class="self-end" :group="abwaschen_group" />
- <Tischen class="self-end" :group="tischen_group" />
+ <div
+ class="min-h-screen flex flex-col lg:grid grid-cols-1 lg:grid-cols-3 grid-rows-6 lg:grid-rows-2 gap-4 p-4 lg:p-8"
+ >
+ <Joker class="lg:self-start" :group="joker1_group" :id="1" />
+ <Joker class="lg:self-start" :group="joker2_group" :id="2" />
+ <Joker class="lg:self-start" :group="joker3_group" :id="3" />
+ <Putzen class="lg:self-end" :group="putzen_group" />
+ <Abwaschen class="lg:self-end" :group="abwaschen_group" />
+ <Tischen class="lg:self-end" :group="tischen_group" />
  </div>
  </div>
 </template>