feat:#37 switched button locations

frontend/src/i18n/translations/de.json

@@ -109,7 +109,8 @@
       "to": " bis ",
       "of": " von insgesamt "
     },
-    "eventType": "Ereignistyp"
+    "eventType": "Ereignistyp",
+    "scrollToTop": "Nach oben scrollen"
   },
   "renameModules": {
     "reminder": "Erinnerung",

frontend/src/i18n/translations/en.json

@@ -109,7 +109,8 @@
       "to": " to ",
       "of": " of "
     },
-    "eventType": "event type"
+    "eventType": "event type",
+    "scrollToTop": "scroll to top"
   },
   "renameModules": {
     "reminder": "reminder",

frontend/src/view/DynamicPage.vue

@@ -87,6 +87,32 @@ 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>
   </div>
 </template>
 

frontend/src/view/create/AdditionalModules.vue

@@ -23,6 +23,10 @@ import AdditionalModuleTable from "@/components/AdditionalModuleTable.vue";
 
 const store = moduleStore();
 
+function topFunction() {
+  window.scrollTo({top: 0, behavior: 'smooth'});
+}
+
 async function nextStep() {
   await router.push("/rename-modules");
 }
@@ -35,7 +39,6 @@ async function nextStep() {
         {{ $t("additionalModules.subTitle") }}
       </h3>
     </div>
-    <AdditionalModuleTable />
     <div
       class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"
     >
@@ -47,5 +50,17 @@ async function nextStep() {
         @click="nextStep()"
       />
     </div>
+    <AdditionalModuleTable />
+    <div
+      class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"
+    >
+      <Button
+        class="col-12 md:col-4 mb-3 align-self-end"
+        severity="secondary"
+        icon="pi pi-arrow-up"
+        :label="$t('additionalModules.scrollToTop')"
+        @click="topFunction()"
+      />
+    </div>
   </div>
 </template>