hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix main container responsivity

Browse Source
This commit is contained in:
Vagner 2024-10-13 00:03:06 -03:00
parent 53d52f3a14
commit b61dfb2de0
2 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/App.vue
View File

@ -7,23 +7,25 @@ const route = useRoute();
</script> </script>
<template> <template>
<TopBar /> <div class="p-3 sm:p-4 md:p-8">
<RouterView v-slot="{ Component }"> <TopBar />
<template v-if="Component"> <RouterView v-slot="{ Component }">
<Transition name="page" mode="out-in" appear> <template v-if="Component">
<div :key="route.fullPath"> <Transition name="page" mode="out-in" appear>
<Suspense > <div :key="route.fullPath">
<template #default > <Suspense >
<component :is="Component" /> <template #default >
</template> <component :is="Component" />
<template #fallback> </template>
<div class="flex w-full h-full justify-center items-center"> <template #fallback>
<SpinnerComponent :width="'16'" :height="'16'" /> <div class="flex w-full h-full justify-center items-center">
</div> <SpinnerComponent :width="'16'" :height="'16'" />
</template> </div>
</Suspense> </template>
</div> </Suspense>
</Transition> </div>
</template> </Transition>
</RouterView> </template>
</RouterView>
</div>
</template> </template>

3
src/assets/main.css
View File

@ -6,7 +6,6 @@
#app { #app {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 2rem;
height: fit-content; height: fit-content;
min-height: 100vh; min-height: 100vh;
background: radial-gradient(ellipse at 50% -50%, rgba(49, 46, 129, 1) 60%, rgba(24, 30, 42, 1) 80%); background: radial-gradient(ellipse at 50% -50%, rgba(49, 46, 129, 1) 60%, rgba(24, 30, 42, 1) 80%);
@ -27,5 +26,5 @@ a,
} }
.main-container { .main-container {
@apply flex w-full max-w-xs md:max-w-lg flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg border border-gray-500 backdrop-blur-md drop-shadow-lg shadow-lg mt-10; @apply flex w-full md:max-w-lg flex-col justify-center items-center px-4 sm:px-8 py-4 sm:py-6 gap-4 rounded-lg border border-gray-500 backdrop-blur-md drop-shadow-lg shadow-lg mt-10;
} }