Merge branch 'dev' into bug/zip-import-conditional

2025-01-19 09:45:28 +01:00 · 2022-10-03 22:26:22 +01:00 · 2022-10-03 22:26:22 +01:00 · 4d74a1e3c0
commit 4d74a1e3c0
parent 03320c375a f497135066
4 changed files with 89 additions and 63 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -5,7 +5,7 @@ TBD
 ### Bug fixes
 TBD
 ### Tweaks
-TBD
+- Fixed the sidebar to not move when scrolling ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/475))
 ### Lang
 TBD
 <br><br>
--- a/app/frontend/static/assets/css/crafty.css
+++ b/app/frontend/static/assets/css/crafty.css
@ -21,6 +21,30 @@
    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 {
    background-color: white !important;
 }
--- a/app/frontend/templates/base.html
+++ b/app/frontend/templates/base.html
@ -55,7 +55,6 @@
 </head>

 <body>
-  <div class="container-scroller">
  <!-- partial:partials/_navbar.html -->
  <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">
@ -88,8 +87,11 @@
    </div>
  </nav>

+  <div class="container-scroller">
+    <div class="flex-column">
+      <div class="sticky-sidebar">
        {% include main_menu.html %}
-
+      </div>
      <div class="main-panel">

        <div class="warnings">
@ -105,7 +107,6 @@

      </div>
      <!-- main-panel ends -->
-
    </div>
    <!-- page-body-wrapper ends -->
  </div>
--- a/app/frontend/templates/main_menu.html
+++ b/app/frontend/templates/main_menu.html
@ -1,5 +1,5 @@
 <!-- partial -->
-<div class="container-fluid page-body-wrapper">
+<div class="container-fluid page-body-wrapper vh-100">
  <!-- partial:partials/_sidebar.html -->
  <style>
    @media screen and (max-width: 991px) {
@ -142,3 +142,4 @@
    </ul>
  </nav>
  <!-- partial -->
+</div>