Mirrored_Repos/crafty-4
1
0
Fork 0
mirror of https://gitlab.com/crafty-controller/crafty-4.git synced 2024-08-30 18:23:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev-fixed-sidebar-V2' into 'dev'

Browse Source 
Fix scrolling of sidebar v2

See merge request crafty-controller/crafty-4!481
This commit is contained in:
Andrew 2022-10-07 16:51:54 +00:00
commit f18b2bbc2f
5 changed files with 188 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -8,7 +8,7 @@ TBD
- Add port constraint for all server creation & api ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/479)) - Add port constraint for all server creation & api ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/479))
- Clean up backup configs when deleting servers ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/480)) - Clean up backup configs when deleting servers ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/480))
### Tweaks ### Tweaks
- Fix sidebar to not move when scrolling ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/475)) - Fix sidebar to not move when scrolling ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/481))
### Lang ### Lang
TBD TBD
<br><br> <br><br>

44
app/frontend/static/assets/css/crafty.css
View File

@ -8,6 +8,26 @@
color: var(--base-text) color: var(--base-text)
} }
nav.sidebar {
position: fixed;
}
@media (min-width: 992px) {
nav.sidebar {
position: fixed;
max-height: auto;
}
.main-panel {
margin-left: 270px;
}
.sidebar-icon-only .main-panel {
margin-left: 70px;
}
}
.sidebar>.nav>.nav-item:not(.nav-profile)>.nav-link:before { .sidebar>.nav>.nav-item:not(.nav-profile)>.nav-link:before {
content: none; content: none;
@ -21,30 +41,6 @@
display: block; display: block;
} }
.sticky-sidebar {
position: fixed;
max-height: fit-content;
width: (100% - 270px);
z-index: 100;
}
.main-panel {
margin-left: 70px;
margin-top: 63px;
}
@media (min-width: 1200px) {
.main-panel {
margin-left: 270px;
}
}
@media (max-width: 991px) {
.main-panel {
margin-left: 0px;
}
}
.toggle-handle { .toggle-handle {
background-color: white !important; background-color: white !important;
} }

6
app/frontend/static/assets/js/shared/misc.js
View File

@ -197,6 +197,12 @@ if ($("canvas").length) {
!body.hasClass("sidebar-icon-only") !body.hasClass("sidebar-icon-only")
); );
} }
if (vw >= 992 && vw < 1200) {
localStorage.setItem(
"crafty-sidebar-expanded",
!body.hasClass("sidebar-icon-only")
);
}
} }
}); });

8
app/frontend/templates/base.html
View File

@ -55,6 +55,7 @@
</head> </head>
<body> <body>
<div class="container-scroller">
<!-- partial:partials/_navbar.html --> <!-- partial:partials/_navbar.html -->
<nav class="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex flex-row"> <nav class="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
<div class="text-center navbar-brand-wrapper d-flex align-items-top justify-content-center"> <div class="text-center navbar-brand-wrapper d-flex align-items-top justify-content-center">
@ -87,11 +88,9 @@
</div> </div>
</nav> </nav>
<div class="container-scroller"> <div class="container-fluid page-body-wrapper">
<div class="flex-column">
<div class="sticky-sidebar">
{% include main_menu.html %} {% include main_menu.html %}
</div>
<div class="main-panel"> <div class="main-panel">
<div class="warnings"> <div class="warnings">
@ -107,6 +106,7 @@
</div> </div>
<!-- main-panel ends --> <!-- main-panel ends -->
</div> </div>
<!-- page-body-wrapper ends --> <!-- page-body-wrapper ends -->
</div> </div>

6
app/frontend/templates/main_menu.html
View File

@ -1,5 +1,4 @@
<!-- partial --> <!-- partial -->
<div class="container-fluid page-body-wrapper vh-100">
<!-- partial:partials/_sidebar.html --> <!-- partial:partials/_sidebar.html -->
<style> <style>
@media screen and (max-width: 991px) { @media screen and (max-width: 991px) {
@ -54,12 +53,10 @@
More code in `app/frontend/static/assets/js/shared/misc.js` and `app/frontend/templates/base.html` More code in `app/frontend/static/assets/js/shared/misc.js` and `app/frontend/templates/base.html`
*/ */
if (isExtraLargeBreakpoint()) { if (isLargeBreakpoint()) {
let value = localStorage.getItem('crafty-sidebar-expanded') !== 'false'; let value = localStorage.getItem('crafty-sidebar-expanded') !== 'false';
$('body').toggleClass('sidebar-icon-only', !value); $('body').toggleClass('sidebar-icon-only', !value);
localStorage.setItem('crafty-sidebar-expanded', value); localStorage.setItem('crafty-sidebar-expanded', value);
} else if (isLargeBreakpoint()) {
$('body').toggleClass('sidebar-icon-only', true);
} }
} }
</script> </script>
@ -142,4 +139,3 @@
</ul> </ul>
</nav> </nav>
<!-- partial --> <!-- partial -->
</div>