diff --git a/src/App.vue b/src/App.vue index 5eaed42f6902672acf99ab729567e3f5c7d6d7ab..dce014d3a707f544ac3f238e595d6f3d3eadbd9d 100644 --- a/src/App.vue +++ b/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> diff --git a/src/components/Form.vue b/src/components/Form.vue index b75057c18b4e307b5accb974b6ebdee232cfd239..90152d8cafdd82291af3533c1a61d75cff1f1f6b 100644 --- a/src/components/Form.vue +++ b/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> diff --git a/src/components/Lottie.vue b/src/components/Lottie.vue index 0c39b1534abd58344f143708e0d0222c1c42127c..6f86aa166ec1538e1b0879433d707afa953477e9 100644 --- a/src/components/Lottie.vue +++ b/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>