feat: unify and clean up layout

Sprudeel · Apr 24, 2023 · 8c68e41 · 8c68e41
1 parent 5f10832
commit 8c68e41
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 42 deletions.
diff --git a/resources/js/Components/aemtlis/Abwaschen.vue b/resources/js/Components/aemtlis/Abwaschen.vue
@@ -12,22 +12,23 @@ function animate() {
 </script>
 
 <template>
- <div class="m-4 relativ flex gap-4 lg:flex-col min-w-screen">
- <div class="ml-4 lg:mb-4 bg flex-1 opacity-0 p-2 woosh">
- <div v-if="group.name" class="flex-grow-1">
- <p class="font-bold">{{ group.name }}</p>
+ <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 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 flex-grow-1">{{ group }}</div>
+ <div v-else class="font-bold flex-grow-1 text-center text-lg lg:text-2xl">{{ group }}</div>
  </div>
- <Geschirr_Sauber
- class="h-32 w-32 lg:h-40 sm:order-first lg:order-1 lg:w-40 lg:mx-auto"
- />
+
  </div>
 </template>
 

diff --git a/resources/js/Components/aemtlis/Joker.vue b/resources/js/Components/aemtlis/Joker.vue
@@ -8,20 +8,19 @@ const props = defineProps({
 </script>
 
 <template>
- <div class="m-4 relative flex lg:block min-w-screen">
- <Joker class="lg:mx-auto h-32 w-32 self-center lg:h-40 lg:w-40" />
- <div class="ml-4 lg:mb-4 bg flex-1 opacity-0 p-2 woosh">
- <div v-if="group.name" class="flex-grow-1">
- <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 flex-grow-1">{{ group }}</div>
+ <div v-else class="font-bold flex-grow-1 text-lg lg:text-2xl">{{ group }}</div>
  </div>
  </div>
 </template>

diff --git a/resources/js/Components/aemtlis/Putzen.vue b/resources/js/Components/aemtlis/Putzen.vue
@@ -7,22 +7,22 @@ const props = defineProps({
 </script>
 
 <template>
- <div class="m-4 relativ flex gap-4 lg:flex-col min-w-screen">
- <div class="ml-4 lg:mb-4 bg flex-1 opacity-0 p-2 woosh">
- <div v-if="group.name" class="flex-grow-1">
- <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 flex-grow-1">{{ group }}</div>
+ <div v-else class="font-bold flex-grow-1 text-lg lg:text-2xl">{{ group }}</div>
  </div>
- <Putzen
- class="h-32 w-32 lg:h-40 sm:order-first lg:order-1 lg:w-40 lg:mx-auto"
- />
  </div>
 </template>
 

diff --git a/resources/js/Components/aemtlis/Tischen.vue b/resources/js/Components/aemtlis/Tischen.vue
@@ -7,22 +7,22 @@ const props = defineProps({
 </script>
 
 <template>
- <div class="m-4 relativ flex gap-4 lg:flex-col min-w-screen">
- <div class="ml-4 lg:mb-4 bg flex-1 opacity-0 p-2 woosh">
- <div v-if="group.name" class="flex-grow-1">
- <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 flex-grow-1">{{ group }}</div>
+ <div v-else class="font-bold flex-grow-1 text-lg lg:text-2xl">{{ group }}</div>
  </div>
- <Tischen
- class="h-32 w-32 lg:h-40 sm:order-first lg:order-1 lg:w-40 lg:mx-auto"
- />
  </div>
 </template>
 

diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue
@@ -32,17 +32,17 @@ const joker3_group = props.joker_3.group ?? "keine Gruppe zugeteilt";
 
  <div
  id="scrollbar"
- class="bg h-screen top-0 left-0 bottom-0 overflow-auto lg:overflow-x-scroll lg:overflow-y-hidden"
+ class="bg"
  >
  <div
- class="lg:h-screen lg:min-w-max min-w-max grid grid-cols-1 lg:grid-cols-3 grid-rows-6 lg:grid-rows-2 gap-4 p-8"
+ 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 :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" />
+ <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>