Add Basic Flexbox Layout

src/App.vue

@@ -10,21 +10,21 @@ const funktionZeileEins = ref("");
 const funktionZeileZwei = ref("");
 const BBEcke = ref("");
 let playLottieStatus = ref(false);
-let pauseLottieStatus = ref(false)
+let pauseLottieStatus = ref(false);
 
-function playLottie(data :boolean) {
-  playLottieStatus.value = data
+function playLottie(data: boolean) {
+  playLottieStatus.value = data;
 }
 
-function pauseLottie(data :boolean) {
-  pauseLottieStatus.value = data
+function pauseLottie(data: boolean) {
+  pauseLottieStatus.value = data;
 }
 </script>
 
 <template>
-      <div class="logo" >
-        <img class="logoImg" src="./assets/rbb-logo.png">
-      </div>
+  <div class="logo">
+    <img class="logoImg" src="./assets/rbb-logo.png" />
+  </div>
 
   <div class="appGrid">
     <Form
@@ -32,7 +32,7 @@ function pauseLottie(data :boolean) {
       v-model:nachname="nachname"
       v-model:funktionZeileEins="funktionZeileEins"
       v-model:funktionZeileZwei="funktionZeileZwei"
-      v-model:BBEcke = "BBEcke"
+      v-model:BBEcke="BBEcke"
       v-on:playLottie="playLottie"
       v-on:pauseLottie="pauseLottie"
     ></Form>
@@ -42,9 +42,9 @@ function pauseLottie(data :boolean) {
       :nachname="nachname"
       :funktionZeileEins="funktionZeileEins"
       :funktionZeileZwei="funktionZeileZwei"
-      :BBEcke = "BBEcke"
-      :playLottieStatus = "playLottieStatus"
-      :pauseLottieStatus = "pauseLottieStatus"
+      :BBEcke="BBEcke"
+      :playLottieStatus="playLottieStatus"
+      :pauseLottieStatus="pauseLottieStatus"
     ></Lottie>
   </div>
 </template>
@@ -59,12 +59,19 @@ function pauseLottie(data :boolean) {
   width: 200px;
 }
 .appGrid {
-  display: grid;
-  grid-template-columns: auto auto auto auto;
+  display: flex;
+  flex-direction: row;
   gap: 50px;
 }
 
+@media screen and (max-width: 1200px) {
+  .appGrid {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
 body {
-  background-color: #FFF;
+  background-color: #fff;
 }
 </style>

src/components/Form.vue

@@ -18,13 +18,11 @@ function pauseAnimation() {
 </script>
 
 <template>
-  
   <div class="form">
     <h2 class="title">rbb24 Reportage Bauchbinde</h2>
     <div class="container">
       <label>Postion der Bauchbinde </label>
       <div class="row">
-<<<<<<< HEAD
         <select id="bauchbindeEcke" v-model="BBEcke">
           <option value="rechts" selected>rechts</option>
           <option value="links">links</option>
@@ -48,27 +46,11 @@ function pauseAnimation() {
       </div>
       <div class="row">
         <button class="playLottie-btn" @click="startAnimation">
-          Lottie starten
+          Animation starten
         </button>
         <button class="pauseLottie-btn" @click="pauseAnimation">
-          Lottie Pausieren
+          Animation Pausieren
         </button>
-=======
-        <label>Vorname </label>
-        <input type="text" v-model="vorname" />
-      </div>
-      <div class="row">
-        <label>Nachname </label>
-        <input type="text" v-model="nachname" />
-      </div>
-      <div class="row">
-        <label>Funktion 1. Zeile </label>
-        <input type="text" v-model="funktionZeileEins" />
-      </div>
-      <div class="row">
-        <label>Funktion 2. Zeile </label>
-        <input type="text" v-model="funktionZeileZwei" />
->>>>>>> ed3dcb946f9ad82682aa98ac33c5dbd9d2e87887
       </div>
     </div>
   </div>
@@ -78,13 +60,14 @@ function pauseAnimation() {
 .row {
   margin-bottom: 1em;
   width: 20em;
+  display: flex;
+  gap: 1rem;
 }
 
 .example {
   border: 1px solid #fff;
   height: 25px;
 }
-<<<<<<< HEAD
 
 #app {
   text-align: unset !important;
@@ -138,7 +121,15 @@ function pauseAnimation() {
 
 .form {
   height: 115%;
+  min-width: 400px;
+}
+
+@media screen and (max-width: 1200px) {
+  .form {
+    min-width: 80%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 }
-=======
->>>>>>> ed3dcb946f9ad82682aa98ac33c5dbd9d2e87887
 </style>

src/components/Lottie.vue

@@ -85,7 +85,7 @@ const lottie = ref(0);
 watch(
   () => props.vorname,
   () => {
-    console.log(AnimationRechtsBB.layers[1].t.d.k[0].s.t)
+    console.log(AnimationRechtsBB.layers[1].t.d.k[0].s.t);
     AnimationRechtsBB.layers[1].t.d.k[0].s.t = props.vorname.toUpperCase();
     AnimationLinksBB.layers[1].t.d.k[0].s.t = props.vorname.toUpperCase();
     lottie.value++;
@@ -127,7 +127,10 @@ onMounted(() => {
 });
 </script>
 <template>
-  <h2 v-if="BBUnselected">Bitte eine Postion für<br> die Bauchbinde auswählen</h2>
+  <h2 v-if="BBUnselected">
+    Bitte eine Postion für<br />
+    die Bauchbinde auswählen
+  </h2>
   <div class="animation">
     <LottieAnimation
       :key="lottie"
@@ -163,10 +166,15 @@ onMounted(() => {
 <style>
 .animation {
   background-color: #000;
-
 }
 .hinweis {
   text-align: center;
   margin: auto;
 }
+
+@media screen and (max-width: 1200px) {
+  .animation {
+    width: 80%;
+  }
+}
 </style>