sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

refactor: improve layout

Browse Source
This commit is contained in:
mrholek
2023-11-07 15:10:22 +01:00
parent 52d3098baf
commit db7633af55
9 changed files with 53 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppBreadcrumb.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<CBreadcrumb class="my-0 ms-2">
<CBreadcrumb class="my-0">
<CBreadcrumbItem
v-for="item in breadcrumbs"
:key="item"
src/components/AppFooter.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<CFooter>
<CFooter class="px-4">
<div>
<a href="https://coreui.io" target="_blank">CoreUI</a>
<span class="ms-1"
src/components/AppHeader.vue
+32 -38
View File
@@ -1,10 +1,10 @@
<template>
<CHeader position="sticky" :class="headerClassNames">
<CContainer class="border-bottom" fluid>
<CHeaderToggler class="ps-1" @click="$store.commit('toggleSidebar')">
<CContainer class="border-bottom px-4" fluid>
<CHeaderToggler @click="$store.commit('toggleSidebar')" style="margin-inline-start: -14px">
<CIcon icon="cil-menu" size="lg" />
</CHeaderToggler>
<CHeaderNav class="d-none d-md-flex me-auto">
<CHeaderNav class="d-none d-md-flex">
<CNavItem>
<CNavLink href="/dashboard"> Dashboard </CNavLink>
</CNavItem>
@@ -15,33 +15,32 @@
<CNavLink href="#">Settings</CNavLink>
</CNavItem>
</CHeaderNav>
<CHeaderNav class="ms-auto">
<CNavItem>
<CNavLink href="#">
<CIcon icon="cil-bell" size="lg" />
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">
<CIcon icon="cil-list" size="lg" />
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">
<CIcon icon="cil-envelope-open" size="lg" />
</CNavLink>
</CNavItem>
</CHeaderNav>
<CHeaderNav>
<CNavItem>
<CNavLink href="#">
<CIcon class="mx-2" icon="cil-bell" size="lg" />
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">
<CIcon class="mx-2" icon="cil-list" size="lg" />
</CNavLink>
</CNavItem>
<CNavItem>
<CNavLink href="#">
<CIcon class="mx-2" icon="cil-envelope-open" size="lg" />
</CNavLink>
</CNavItem>
<li class="nav-item py-2 py-lg-1">
<div
class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
></div>
<hr class="d-lg-none my-2 text-white-50" />
<li class="nav-item py-1">
<div class="vr h-100 mx-2 text-body text-opacity-75"></div>
</li>
<CDropdown variant="nav-item" placement="bottom-end">
<CDropdownToggle :caret="false">
<CIcon v-if="colorMode === 'dark'" icon="cil-moon" size="xl" />
<CIcon v-else-if="colorMode === 'light'" icon="cil-sun" size="xl" />
<CIcon v-else icon="cil-contrast" size="xl" />
<CIcon v-if="colorMode === 'dark'" icon="cil-moon" size="lg" />
<CIcon v-else-if="colorMode === 'light'" icon="cil-sun" size="lg" />
<CIcon v-else icon="cil-contrast" size="lg" />
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem
@@ -73,16 +72,13 @@
</CDropdownItem>
</CDropdownMenu>
</CDropdown>
<li class="nav-item py-2 py-lg-1">
<div
class="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"
></div>
<hr class="d-lg-none my-2 text-white-50" />
<li class="nav-item py-1">
<div class="vr h-100 mx-2 text-body text-opacity-75"></div>
</li>
<AppHeaderDropdownAccnt />
</CHeaderNav>
</CContainer>
<CContainer fluid>
<CContainer class="px-4" fluid>
<AppBreadcrumb />
</CContainer>
</CHeader>
@@ -100,17 +96,15 @@ export default {
AppHeaderDropdownAccnt,
},
setup() {
const headerClassNames = ref('mb-4')
const { colorMode, setColorMode } = useColorModes(
'coreui-free-vue-admin-template-theme',
)
const headerClassNames = ref('mb-4 p-0')
const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
onMounted(() => {
document.addEventListener('scroll', () => {
if (document.documentElement.scrollTop > 0) {
headerClassNames.value = 'mb-4 shadow-sm'
headerClassNames.value = 'mb-4 p-0 shadow-sm'
} else {
headerClassNames.value = 'mb-4'
headerClassNames.value = 'mb-4 p-0'
}
})
})
src/components/AppHeaderDropdownAccnt.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<CDropdown placement="bottom-end" variant="nav-item">
<CDropdownToggle class="py-0" :caret="false">
<CDropdownToggle class="py-0 pe-0" :caret="false">
<CAvatar :src="avatar" size="md" />
</CDropdownToggle>
<CDropdownMenu class="pt-0">
src/layouts/DefaultLayout.vue
+2 -2
View File
@@ -3,8 +3,8 @@
<AppSidebar />
<div class="wrapper d-flex flex-column min-vh-100">
<AppHeader />
<div class="body flex-grow-1 px-3">
<CContainer lg>
<div class="body flex-grow-1">
<CContainer class="px-4" lg>
<router-view />
</CContainer>
</div>
src/styles/_custom.scss
+10 -14
View File
@@ -1,9 +1,18 @@
// Here you can add other styles// Here you can add other styles
// Custom styles for this theme
.header > .container-fluid,
.sidebar-header {
min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
}
.header > .container-fluid + .container-fluid {
min-height: 3rem;
}
.sidebar-brand-full {
margin-left: 3px;
}
.sidebar-toggler {
@include ltr-rtl("margin-left", auto);
}
@@ -15,19 +24,6 @@
}
}
.header > .container-fluid + .container-fluid {
min-height: 3rem;
}
.header {
padding: 0;
.container-fluid {
padding-right: $spacer;
padding-left: $spacer;
}
}
.footer {
min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
}
src/styles/_example.scss → src/styles/_examples.scss
View File
src/styles/_variables.scss
+3
View File
@@ -1,3 +1,6 @@
// Variable overrides
//
// If you want to customize your project please add your variables below.
$enable-rtl: true; /* stylelint-disable-line scss/dollar-variable-default */
$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */
src/styles/style.scss
+3 -4
View File
@@ -1,9 +1,6 @@
// If you want to override variables do it here
@import "variables";
$enable-ltr: true;
$enable-rtl: true;
// Import CoreUI for React components library
@import "@coreui/coreui/scss/coreui";
@@ -11,7 +8,9 @@ $enable-rtl: true;
@import "@coreui/chartjs/scss/coreui-chartjs";
@import "layout";
@import "example";
// Preview
@import "examples";
// If you want to add custom CSS you can put it here.
@import "custom";