fix:#37 updated margins and mobile layout

This commit is contained in:
Elmar Kresse
2024-07-12 11:04:18 +02:00
parent 78472a42d6
commit c21402bbfd
3 changed files with 18 additions and 32 deletions

View File

@ -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" />

View File

@ -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>

View File

@ -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"