munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat/layout-cleaning: merapikan style pada layout + custom ui

Browse Source
This commit is contained in:
Andrian Roshandy
2025-09-28 07:08:44 +07:00
parent e7851f4dc2
commit 2426dcb979
5 changed files with 24 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/layouts/default.vue
+10 -89
View File
@@ -3,18 +3,18 @@ import CardContent from '~/components/pub/ui/card/CardContent.vue'
const route = useRoute()
const contentFrame = computed(() => route.meta.contentFrame)
const contentContent = computed(() => {
const contentFrameClass = computed(() => {
switch (contentFrame.value) {
case 'cf-container-lg':
return 'cf-frame cf-container-lg-content'
return 'cf-container-lg'
case 'cf-container-md':
return 'cf-frame cf-container-md-content'
return 'cf-container-md'
case 'cf-container-sm':
return 'cf-frame cf-container-sm-content'
return 'cf-container-sm'
case 'cf-full-width':
return 'cf-frame-width'
return 'cf-full-width'
default:
return 'cf-frame'
return 'cf-container-lg'
}
})
</script>
@@ -24,8 +24,8 @@ const contentContent = computed(() => {
<LayoutAppSidebar />
<SidebarInset>
<LayoutHeader />
<div class="w-full min-w-0 flex-1 overflow-x-auto p-4 xl:p-5 2xl:p-6">
<div v-if="contentFrame !== 'cf-no-frame'" :class="`contentFrame ${contentContent} ${contentFrame}`">
<div :class="`w-full p-4 xl:p-5 2xl:p-6 flex justify-center ${contentFrameClass}`">
<div v-if="contentFrame !== 'cf-no-frame'">
<Card>
<CardContent>
<slot />
@@ -39,34 +39,13 @@ const contentContent = computed(() => {
</template>
<style scoped>
.cf-container,
.cf-container-lg,
.cf-container-md,
.cf-container-sm {
/* container-type: inline-size;
max-width: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 0.375rem;
padding-bottom: 5rem; */
/* padding-left: 1rem;
padding-right: 1rem; */
}
.cf-container > *,
.cf-container-lg > *,
.cf-container-md > *,
.cf-container-sm > *,
.cf-full-width {
/* margin-left: auto;
margin-right: auto; */
/* padding: 0.75rem;
padding-bottom: 5rem; */
/* background-color: hsl(var(--background));
border-radius: 0.375rem;
border: 1px solid hsl(var(--border));
border-color: rgb(226 232 240);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
width: 100%;
}
.cf-container-lg > * {
@@ -80,62 +59,4 @@ const contentContent = computed(() => {
.cf-container-sm > * {
max-width: 576px;
}
.cf-frame-width {
/* margin-left: auto;
margin-right: auto;
background-color: hsl(var(--background));
border-radius: 0.375rem;
border: 1px solid hsl(var(--border));
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 100%; */
/* padding: 1rem; */
}
.cf-frame {
/* margin-left: auto;
margin-right: auto;
padding: 1rem;
background-color: hsl(var(--background));
border-radius: 0.375rem;
border: 1px solid hsl(var(--border));
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 100%; */
}
@media (min-width: 640px) {
.cf-container,
.cf-container-lg,
.cf-container-md,
.cf-container-sm {
/* padding-left: 2rem;
padding-right: 2rem; */
}
.cf-frame {
/* padding: 2rem; */
}
.cf-frame-width {
/* padding: 2rem; */
}
}
@media (min-width: 1024px) {
.cf-container,
.cf-container-lg,
.cf-container-md,
.cf-container-sm {
/* padding-left: 3rem;
padding-right: 3rem; */
}
.cf-frame {
/* padding: 3rem; */
}
.cf-frame-width {
/* padding: 3rem; */
}
}
</style>