From c21402bbfdcdacf07ff24ee7469c5a0d9c52a48b Mon Sep 17 00:00:00 2001
From: Elmar Kresse <elmar.kresse@stud.htwk-leipzig.de>
Date: Fri, 12 Jul 2024 11:04:18 +0200
Subject: [PATCH] fix:#37 updated margins and mobile layout

---
 frontend/src/App.vue                          |  2 +-
 frontend/src/view/DynamicPage.vue             | 38 ++++++-------------
 .../src/view/create/AdditionalModules.vue     | 10 ++---
 3 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 8d51c6e..5218bd0 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -110,7 +110,7 @@ if (!import.meta.env.SSR)
 
 <template>
   <MenuBar />
-  <RouterView v-slot="{ Component, route }">
+  <RouterView v-slot="{ Component, route }" class="mb-8">
     <transition name="scale" mode="out-in">
       <div :key="route.name ?? ''" class="origin-near-top">
         <component :is="Component" />
diff --git a/frontend/src/view/DynamicPage.vue b/frontend/src/view/DynamicPage.vue
index f263b09..871cf20 100644
--- a/frontend/src/view/DynamicPage.vue
+++ b/frontend/src/view/DynamicPage.vue
@@ -86,32 +86,18 @@ const hasContent = computed(() => {
       ]"
     >
       <slot name="content"></slot>
-    </div>
-    <div
-      v-if="button"
-      :class = "[
-        hideContent
-          ? ['opacity-0', 'pointer-events-none', 'h-1rem', 'overflow-hidden']
-          : [
-              'flex',
-              'flex-wrap',
-              'my-3',
-              'gap-2',
-              'w-full',
-              'lg:w-8',
-              'align-items-center',
-              'justify-content-end',
-            ]
-      ]"
-      class=""
-    >
-      <Button
-        :disabled="button.disabled"
-        class="col-12 md:col-4"
-        :icon="button.icon"
-        :label="button.label"
-        @click="button.onClick()"
-      />
+      <div
+          v-if="button"
+          class="flex flex-wrap my-3 gap-2 align-items-center justify-content-end"
+      >
+        <Button
+            :disabled="button.disabled"
+            class="col-12 md:col-4"
+            :icon="button.icon"
+            :label="button.label"
+            @click="button.onClick()"
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/frontend/src/view/create/AdditionalModules.vue b/frontend/src/view/create/AdditionalModules.vue
index dd2ec27..184838d 100644
--- a/frontend/src/view/create/AdditionalModules.vue
+++ b/frontend/src/view/create/AdditionalModules.vue
@@ -33,18 +33,18 @@ async function nextStep() {
 </script>
 
 <template>
-  <div class="flex flex-column align-items-center w-full mb-7">
-    <div class="flex align-items-center justify-content-center m-2">
+  <div class="flex flex-column align-items-center w-full mb-8">
+    <div class="flex align-items-center justify-content-center">
       <h3>
         {{ $t("additionalModules.subTitle") }}
       </h3>
     </div>
     <div
-      class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"
+      class="flex align-items-center justify-content-end h-4rem mb-2 w-full lg:w-10"
     >
       <Button
         :disabled="store.isEmpty()"
-        class="col-12 md:col-4 mb-3 align-self-end"
+        class="col-12 md:col-4 align-self-end"
         icon="pi pi-arrow-right"
         :label="$t('additionalModules.nextStep')"
         @click="nextStep()"
@@ -52,7 +52,7 @@ async function nextStep() {
     </div>
     <AdditionalModuleTable />
     <div
-      class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"
+      class="flex align-items-center justify-content-end mt-2 w-full lg:w-10"
     >
       <Button
         class="col-12 md:col-4 mb-3 align-self-end"