Skip to content

Commit 0eb8ef9

Browse files
mrholekmrholek
committed
refactor: improve layout
1 parent 83e2435 commit 0eb8ef9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+511
-535
lines changed

‎src/pug/_layout/default.pug

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ html(lang='en')
1616
include ../_partials/sidebar.pug
1717
.wrapper.d-flex.flex-column.min-vh-100
1818
include ../_partials/header.pug
19-
.body.flex-grow-1.px-3
20-
.container-lg
19+
.body.flex-grow-1
20+
.container-lg.px-4
2121
block view
2222
include ../_partials/footer.pug
2323
include ../_partials/scripts.pug

‎src/pug/_mixins/breadcrumb.pug

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
mixin breadcrumb(items, last)
22
nav(aria-label="breadcrumb")
3-
ol.breadcrumb.my-0.ms-2
3+
ol.breadcrumb.my-0
44
each item in items
55
li.breadcrumb-item
66
// if breadcrumb is single

‎src/pug/_partials/breadcrumb.pug

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎src/pug/_partials/header.pug

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
header.header.header-sticky.mb-4
2-
.container-fluid.border-bottom
3-
button.header-toggler.px-md-1.me-md-3(type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()")
1+
header.header.header-sticky.p-0.mb-4
2+
.container-fluid.border-bottom.px-4
3+
button.header-toggler(type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()" style="margin-inline-start: -14px;")
44
svg.icon.icon-lg
55
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-menu")
66
|
7-
ul.header-nav.d-none.d-md-flex
7+
ul.header-nav.d-none.d-lg-flex
88
li.nav-item
99
a.nav-link(href="#") Dashboard
1010
li.nav-item
@@ -27,8 +27,8 @@ header.header.header-sticky.mb-4
2727
svg.icon.icon-lg
2828
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open")
2929
|
30-
ul.header-nav.ms-3
31-
li.nav-item.py-2.py-lg-1
30+
ul.header-nav
31+
li.nav-item.py-1
3232
.vr.h-100.mx-2.text-body.text-opacity-75
3333
li.nav-item.dropdown
3434
button.btn.btn-link.nav-link.py-2.px-2.d-flex.align-items-center(type="button" aria-expanded="false" data-coreui-toggle="dropdown")
@@ -50,10 +50,10 @@ header.header.header-sticky.mb-4
5050
svg.icon.icon-lg.me-3
5151
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-contrast")
5252
| Auto
53-
li.nav-item.py-2.py-lg-1
53+
li.nav-item.py-1
5454
.vr.h-100.mx-2.text-body.text-opacity-75
5555
li.nav-item.dropdown
56-
a.nav-link.py-0(data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false")
56+
a.nav-link.py-0.pe-0(data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false")
5757
.avatar.avatar-md
5858
img.avatar-img(src="assets/img/avatars/8.jpg" alt="[email protected]")
5959
.dropdown-menu.dropdown-menu-end.pt-0
@@ -117,6 +117,6 @@ header.header.header-sticky.mb-4
117117
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-account-logout")
118118
|
119119
| Logout
120-
.container-fluid
120+
.container-fluid.px-4
121121
block breadcrumb
122122

‎src/pug/_partials/sidebar.pug

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.sidebar.sidebar-fixed.border-end.sidebar-dark#sidebar
1+
.sidebar.sidebar-dark.sidebar-fixed.border-end.sidebar-dark#sidebar
22
.sidebar-header.border-bottom
33
.sidebar-brand
44
svg.sidebar-brand-full(width="88" height="32" alt="CoreUI Logo")

‎src/scss/_custom.scss

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
66
}
77

8+
.header > .container-fluid + .container-fluid {
9+
min-height: 3rem;
10+
}
11+
812
.sidebar-brand-full {
913
margin-left: 3px;
1014
}
@@ -20,19 +24,6 @@
2024
}
2125
}
2226

23-
.header > .container-fluid + .container-fluid {
24-
min-height: 3rem;
25-
}
26-
27-
.header {
28-
padding: 0;
29-
30-
.container-fluid {
31-
padding-right: $spacer;
32-
padding-left: $spacer;
33-
}
34-
}
35-
3627
.footer {
3728
min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
3829
}

‎src/views/base/accordion.html

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
<link rel="canonical" href="https://coreui.io/docs/components/accordion/">
4646
</head>
4747
<body>
48-
<div class="sidebar sidebar-fixed border-end sidebar-dark" id="sidebar">
48+
<div class="sidebar sidebar-dark sidebar-fixed border-end sidebar-dark" id="sidebar">
4949
<div class="sidebar-header border-bottom">
5050
<div class="sidebar-brand">
5151
<svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo">
@@ -186,14 +186,14 @@
186186
</div>
187187
</div>
188188
<div class="wrapper d-flex flex-column min-vh-100">
189-
<header class="header header-sticky mb-4">
190-
<div class="container-fluid border-bottom">
191-
<button class="header-toggler px-md-1 me-md-3" type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()">
189+
<header class="header header-sticky p-0 mb-4">
190+
<div class="container-fluid border-bottom px-4">
191+
<button class="header-toggler" type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()" style="margin-inline-start: -14px;">
192192
<svg class="icon icon-lg">
193193
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-menu"></use>
194194
</svg>
195195
</button>
196-
<ul class="header-nav d-none d-md-flex">
196+
<ul class="header-nav d-none d-lg-flex">
197197
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
198198
<li class="nav-item"><a class="nav-link" href="#">Users</a></li>
199199
<li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
@@ -212,8 +212,8 @@
212212
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open"></use>
213213
</svg></a></li>
214214
</ul>
215-
<ul class="header-nav ms-3">
216-
<li class="nav-item py-2 py-lg-1">
215+
<ul class="header-nav">
216+
<li class="nav-item py-1">
217217
<div class="vr h-100 mx-2 text-body text-opacity-75"></div>
218218
</li>
219219
<li class="nav-item dropdown">
@@ -246,10 +246,10 @@
246246
</li>
247247
</ul>
248248
</li>
249-
<li class="nav-item py-2 py-lg-1">
249+
<li class="nav-item py-1">
250250
<div class="vr h-100 mx-2 text-body text-opacity-75"></div>
251251
</li>
252-
<li class="nav-item dropdown"><a class="nav-link py-0" data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
252+
<li class="nav-item dropdown"><a class="nav-link py-0 pe-0" data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
253253
<div class="avatar avatar-md"><img class="avatar-img" src="assets/img/avatars/8.jpg" alt="[email protected]"></div></a>
254254
<div class="dropdown-menu dropdown-menu-end pt-0">
255255
<div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold rounded-top">Account</div><a class="dropdown-item" href="#">
@@ -291,9 +291,9 @@
291291
</li>
292292
</ul>
293293
</div>
294-
<div class="container-fluid">
294+
<div class="container-fluid px-4">
295295
<nav aria-label="breadcrumb">
296-
<ol class="breadcrumb my-0 ms-2">
296+
<ol class="breadcrumb my-0">
297297
<li class="breadcrumb-item">
298298
<!-- if breadcrumb is single--><a href="#">Home</a>
299299
</li>
@@ -308,8 +308,8 @@
308308
</nav>
309309
</div>
310310
</header>
311-
<div class="body flex-grow-1 px-3">
312-
<div class="container-lg">
311+
<div class="body flex-grow-1">
312+
<div class="container-lg px-4">
313313
<div class="row">
314314
<div class="col-12">
315315
<div class="card mb-4">

‎src/views/base/breadcrumb.html

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
<link rel="canonical" href="https://coreui.io/docs/components/breadcrumb/">
4646
</head>
4747
<body>
48-
<div class="sidebar sidebar-fixed border-end sidebar-dark" id="sidebar">
48+
<div class="sidebar sidebar-dark sidebar-fixed border-end sidebar-dark" id="sidebar">
4949
<div class="sidebar-header border-bottom">
5050
<div class="sidebar-brand">
5151
<svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo">
@@ -186,14 +186,14 @@
186186
</div>
187187
</div>
188188
<div class="wrapper d-flex flex-column min-vh-100">
189-
<header class="header header-sticky mb-4">
190-
<div class="container-fluid border-bottom">
191-
<button class="header-toggler px-md-1 me-md-3" type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()">
189+
<header class="header header-sticky p-0 mb-4">
190+
<div class="container-fluid border-bottom px-4">
191+
<button class="header-toggler" type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()" style="margin-inline-start: -14px;">
192192
<svg class="icon icon-lg">
193193
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-menu"></use>
194194
</svg>
195195
</button>
196-
<ul class="header-nav d-none d-md-flex">
196+
<ul class="header-nav d-none d-lg-flex">
197197
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
198198
<li class="nav-item"><a class="nav-link" href="#">Users</a></li>
199199
<li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
@@ -212,8 +212,8 @@
212212
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open"></use>
213213
</svg></a></li>
214214
</ul>
215-
<ul class="header-nav ms-3">
216-
<li class="nav-item py-2 py-lg-1">
215+
<ul class="header-nav">
216+
<li class="nav-item py-1">
217217
<div class="vr h-100 mx-2 text-body text-opacity-75"></div>
218218
</li>
219219
<li class="nav-item dropdown">
@@ -246,10 +246,10 @@
246246
</li>
247247
</ul>
248248
</li>
249-
<li class="nav-item py-2 py-lg-1">
249+
<li class="nav-item py-1">
250250
<div class="vr h-100 mx-2 text-body text-opacity-75"></div>
251251
</li>
252-
<li class="nav-item dropdown"><a class="nav-link py-0" data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
252+
<li class="nav-item dropdown"><a class="nav-link py-0 pe-0" data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
253253
<div class="avatar avatar-md"><img class="avatar-img" src="assets/img/avatars/8.jpg" alt="[email protected]"></div></a>
254254
<div class="dropdown-menu dropdown-menu-end pt-0">
255255
<div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold rounded-top">Account</div><a class="dropdown-item" href="#">
@@ -291,9 +291,9 @@
291291
</li>
292292
</ul>
293293
</div>
294-
<div class="container-fluid">
294+
<div class="container-fluid px-4">
295295
<nav aria-label="breadcrumb">
296-
<ol class="breadcrumb my-0 ms-2">
296+
<ol class="breadcrumb my-0">
297297
<li class="breadcrumb-item">
298298
<!-- if breadcrumb is single--><a href="#">Home</a>
299299
</li>
@@ -308,8 +308,8 @@
308308
</nav>
309309
</div>
310310
</header>
311-
<div class="body flex-grow-1 px-3">
312-
<div class="container-lg">
311+
<div class="body flex-grow-1">
312+
<div class="container-lg px-4">
313313
<div class="row">
314314
<div class="col-lg-12">
315315
<div class="card mb-4">

‎src/views/base/cards.html

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
<link rel="canonical" href="https://coreui.io/docs/components/card/">
4646
</head>
4747
<body>
48-
<div class="sidebar sidebar-fixed border-end sidebar-dark" id="sidebar">
48+
<div class="sidebar sidebar-dark sidebar-fixed border-end sidebar-dark" id="sidebar">
4949
<div class="sidebar-header border-bottom">
5050
<div class="sidebar-brand">
5151
<svg class="sidebar-brand-full" width="88" height="32" alt="CoreUI Logo">
@@ -186,14 +186,14 @@
186186
</div>
187187
</div>
188188
<div class="wrapper d-flex flex-column min-vh-100">
189-
<header class="header header-sticky mb-4">
190-
<div class="container-fluid border-bottom">
191-
<button class="header-toggler px-md-1 me-md-3" type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()">
189+
<header class="header header-sticky p-0 mb-4">
190+
<div class="container-fluid border-bottom px-4">
191+
<button class="header-toggler" type="button" onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()" style="margin-inline-start: -14px;">
192192
<svg class="icon icon-lg">
193193
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-menu"></use>
194194
</svg>
195195
</button>
196-
<ul class="header-nav d-none d-md-flex">
196+
<ul class="header-nav d-none d-lg-flex">
197197
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
198198
<li class="nav-item"><a class="nav-link" href="#">Users</a></li>
199199
<li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
@@ -212,8 +212,8 @@
212212
<use xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-envelope-open"></use>
213213
</svg></a></li>
214214
</ul>
215-
<ul class="header-nav ms-3">
216-
<li class="nav-item py-2 py-lg-1">
215+
<ul class="header-nav">
216+
<li class="nav-item py-1">
217217
<div class="vr h-100 mx-2 text-body text-opacity-75"></div>
218218
</li>
219219
<li class="nav-item dropdown">
@@ -246,10 +246,10 @@
246246
</li>
247247
</ul>
248248
</li>
249-
<li class="nav-item py-2 py-lg-1">
249+
<li class="nav-item py-1">
250250
<div class="vr h-100 mx-2 text-body text-opacity-75"></div>
251251
</li>
252-
<li class="nav-item dropdown"><a class="nav-link py-0" data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
252+
<li class="nav-item dropdown"><a class="nav-link py-0 pe-0" data-coreui-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
253253
<div class="avatar avatar-md"><img class="avatar-img" src="assets/img/avatars/8.jpg" alt="[email protected]"></div></a>
254254
<div class="dropdown-menu dropdown-menu-end pt-0">
255255
<div class="dropdown-header bg-body-tertiary text-body-secondary fw-semibold rounded-top">Account</div><a class="dropdown-item" href="#">
@@ -291,9 +291,9 @@
291291
</li>
292292
</ul>
293293
</div>
294-
<div class="container-fluid">
294+
<div class="container-fluid px-4">
295295
<nav aria-label="breadcrumb">
296-
<ol class="breadcrumb my-0 ms-2">
296+
<ol class="breadcrumb my-0">
297297
<li class="breadcrumb-item">
298298
<!-- if breadcrumb is single--><a href="#">Home</a>
299299
</li>
@@ -308,8 +308,8 @@
308308
</nav>
309309
</div>
310310
</header>
311-
<div class="body flex-grow-1 px-3">
312-
<div class="container-lg">
311+
<div class="body flex-grow-1">
312+
<div class="container-lg px-4">
313313
<div class="card mb-4">
314314
<div class="card-header"><strong>Card</strong><span class="small ms-1">Example</span></div>
315315
<div class="card-body">

0 commit comments

Comments
 (0)