cerebrate-project
/
cerebrate
mirror of https://github.com/cerebrate-project/cerebrate
1
0
Fork 0
Code Issues Releases Wiki Activity

fix: [ui:sidebar] Make the sidebar scrollable if content is too large

pull/72/head
Sami Mokaddem 2021-10-18 13:10:04 +02:00
parent 24fbe36f34
commit 14c7d20cc1
No known key found for this signature in database
GPG Key ID: 164C473F627A06FA
2 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
templates/element/layouts/sidebar/entry.php
View File

@ -29,7 +29,12 @@
?>
<li class="<?= !empty($children) ? 'parent collapsed' : '' ?>">
<a class="sidebar-link <?= !empty($children) ? 'collapsed' : '' ?> <?= $active ? 'active' : '' ?> <?= $hasActiveChild ? 'have-active-child' : '' ?>" href="<?= h($url) ?>" <?= !empty($children) ? 'data-bs-toggle="collapse"' : '' ?> <?= $hasActiveChild ? 'aria-expanded="true"' : '' ?>>
<a
class="sidebar-link <?= !empty($children) ? 'collapsed' : '' ?> <?= $active ? 'active' : '' ?> <?= $hasActiveChild ? 'have-active-child' : '' ?>"
href="<?= h($url) ?>"
<?= !empty($children) ? 'data-bs-toggle="collapse"' : '' ?>
<?= $hasActiveChild ? 'aria-expanded="true"' : '' ?>
>
<i class="sidebar-icon <?= $this->FontAwesome->getClass($icon) ?>"></i>
<span class="text"><?= h($label) ?></span>
</a>

23
webroot/css/layout.css
View File

@ -217,6 +217,11 @@ main.content {
.sidebar-scroll {
position: relative;
width: 100%;
overflow-y: hidden;
}
.sidebar-scroll:hover {
overflow-y: auto;
}
.sidebar-content {
@ -228,21 +233,39 @@ ul.sidebar-elements {
padding: 0;
}
.sidebar .lock-sidebar {
-webkit-box-shadow: 0px -1px 5px 1px rgb(0 0 0 / 8%);
box-shadow: 0px -1px 5px 1px rgb(0 0 0 / 8%);
}
.sidebar .lock-sidebar > a::before {
content: "\f101";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
transition: margin-left 0.1s ease-out;
margin-left: 0;
}
.sidebar.expanded .lock-sidebar > a::before {
content: "\f100";
}
.sidebar .lock-sidebar:hover > a::before {
margin-left: 0.5rem;
}
.sidebar.expanded .lock-sidebar:hover > a::before {
margin-left: -0.5rem;
}
/* sidebar entry */
ul.sidebar-elements > li {
list-style: none;
}
ul.sidebar-elements > li > a[data-href] {
cursor: pointer;
}
ul.sidebar-elements li.bookmarks {
padding: 0 calc((var(--sidebar-width-collapsed) - 25px) / 2);
}