Fixing scrolling sidebar even when collapsed

2024-08-30 18:23:09 +00:00 · 2022-10-04 23:10:03 +02:00 · 2022-10-04 23:10:03 +02:00 · 425cb3869b
commit 425cb3869b
parent d87a2c4c17
2 changed files with 155 additions and 153 deletions
--- a/app/frontend/templates/base.html
+++ b/app/frontend/templates/base.html
@ -15,7 +15,7 @@
  <link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css">
  <link rel="stylesheet" href="/static/assets/vendors/fontawesome5/css/all.css">
  <link rel="stylesheet" type="text/css"
-    href="https://cdn.datatables.net/v/bs4/dt-1.10.22/fh-3.1.7/r-2.2.6/sc-2.0.3/sp-1.2.2/datatables.min.css" />
+        href="https://cdn.datatables.net/v/bs4/dt-1.10.22/fh-3.1.7/r-2.2.6/sc-2.0.3/sp-1.2.2/datatables.min.css" />
  <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
  <link rel="stylesheet" href="/static/assets/css/crafty.css">

@ -41,14 +41,14 @@
  <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
  <script defer src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"
-    integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA=="
-    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+          integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"
-    integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g=="
-    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+          integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js"
-    integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew=="
-    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+          integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <!-- End Bootstrap Toggle -->

@ -82,32 +82,33 @@
        {% include notify.html %}

        <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button"
-          data-toggle="offcanvas">
+                data-toggle="offcanvas">
          <span class="mdi mdi-menu"></span>
        </button>
      </div>
    </nav>

-    {% include main_menu.html %}
+    <div class="container-fluid page-body-wrapper">
+      {% include main_menu.html %}

-    <div class="main-panel">
+      <div class="main-panel">
+
+        <div class="warnings">
+          <noscript class="noscript-warning" style="padding: 20px; background-color: rgb(247, 151, 15);">
+            <div>{% raw translate('base', 'doesNotWorkWithoutJavascript', data['lang']) %}</div>
+          </noscript>
+        </div>
+
+        {% block content %}
+        {% end %}
+
+        {% include footer.html %}

-      <div class="warnings">
-        <noscript class="noscript-warning" style="padding: 20px; background-color: rgb(247, 151, 15);">
-          <div>{% raw translate('base', 'doesNotWorkWithoutJavascript', data['lang']) %}</div>
-        </noscript>
      </div>
-
-      {% block content %}
-      {% end %}
-
-      {% include footer.html %}
+      <!-- main-panel ends -->

    </div>
-    <!-- main-panel ends -->
-
-  </div>
-  <!-- page-body-wrapper ends -->
+    <!-- page-body-wrapper ends -->
  </div>


@ -173,7 +174,7 @@
  <script src="/static/assets/js/shared/hoverable-collapse.js"></script>
  <script src="/static/assets/js/shared/misc.js"></script>
  <script type="text/javascript"
-    src="https://cdn.datatables.net/v/bs4/dt-1.10.22/fh-3.1.7/r-2.2.6/sc-2.0.3/sp-1.2.2/datatables.min.js"></script>
+          src="https://cdn.datatables.net/v/bs4/dt-1.10.22/fh-3.1.7/r-2.2.6/sc-2.0.3/sp-1.2.2/datatables.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.min.js"></script>
  <script type="text/javascript" src="/static/assets/js/motd.js"></script>

--- a/app/frontend/templates/main_menu.html
+++ b/app/frontend/templates/main_menu.html
@ -1,144 +1,145 @@
 <!-- partial -->
-<div class="container-fluid page-body-wrapper">
-  <!-- partial:partials/_sidebar.html -->
-  <style>
-    @media screen and (max-width: 991px) {
-      .sidebar-offcanvas {
-        -webkit-transition: all 0.25s cubic-bezier(.22, .61, .36, 1);
-        transition: all 0.25s cubic-bezier(.22, .61, .36, 1);
-        box-shadow: 0px 8px 17px 2px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12), 0px 5px 5px -3px rgba(0, 0, 0, 0.2);
-      }
+<!-- partial:partials/_sidebar.html -->
+<style>
+  @media screen and (max-width: 991px) {
+    .sidebar-offcanvas {
+      -webkit-transition: all 0.25s cubic-bezier(.22, .61, .36, 1);
+      transition: all 0.25s cubic-bezier(.22, .61, .36, 1);
+      box-shadow: 0px 8px 17px 2px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12), 0px 5px 5px -3px rgba(0, 0, 0, 0.2);
    }
-  </style>
-  <script>
-    function debounce(func, wait, immediate) {
-      var timeout;
-      return function () {
-        var context = this, args = arguments;
-        var later = function () {
-          timeout = null;
-          if (!immediate) func.apply(context, args);
-        };
-        var callNow = immediate && !timeout;
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-        if (callNow) func.apply(context, args);
+  }
+</style>
+<script>
+  function debounce(func, wait, immediate) {
+    var timeout;
+    return function () {
+      var context = this, args = arguments;
+      var later = function () {
+        timeout = null;
+        if (!immediate) func.apply(context, args);
      };
+      var callNow = immediate && !timeout;
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+      if (callNow) func.apply(context, args);
    };
-    function isExtraLargeBreakpoint() {
-      const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-      return vw >= 1200;
+  };
+  function isExtraLargeBreakpoint() {
+    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+    return vw >= 1200;
+  }
+  function isLargeBreakpoint() {
+    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+    return vw >= 992;
+  }
+  $(document).ready(function () {
+    sidebarResizeHandler(null);
+    $(window).on(
+      'resize',
+      debounce(sidebarResizeHandler, 25, true)
+    );
+  });
+  function sidebarResizeHandler(e) {
+    /*
+        Viewport sizes: Extra large (vw >= 1200px), large (vw >= 992px), medium (vw >= 768px)
+      - A localstorage item is set to remember a user's preference between collapsed or expanded.
+      - For extra large viewports, the sidebar is the user's preference (by default expanded). When
+        expanded or collapsed manually, it doesn't overlap the page content and the preference
+        gets saved to a localstorage item.
+      - For large viewports, the sidebar is collapsed. When expanded manually, it doesn't overlap
+        the page content. The user's localstorage preference is not overridden during this state.
+      - For medium and below viewports, the sidebar is hidden behing a hamburger icon. When expanded, the sidebar
+        overlaps the page content. The user's localstorage preference is not overridden during this state.
+
+      More code in `app/frontend/static/assets/js/shared/misc.js` and `app/frontend/templates/base.html`
+    */
+    if (isExtraLargeBreakpoint()) {
+      let value = localStorage.getItem('crafty-sidebar-expanded') !== 'false';
+      $('body').toggleClass('sidebar-icon-only', !value);
+      $('body').toggleClass('sidebar-fixed', true);
+      localStorage.setItem('crafty-sidebar-expanded', value);
+    } else if (isLargeBreakpoint()) {
+      $('body').toggleClass('sidebar-icon-only', true);
+      $('body').toggleClass('sidebar-fixed', true);
    }
-    function isLargeBreakpoint() {
-      const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-      return vw >= 992;
-    }
-    $(document).ready(function () {
-      sidebarResizeHandler(null);
-      $(window).on(
-        'resize',
-        debounce(sidebarResizeHandler, 25, true)
-      );
-    });
-    function sidebarResizeHandler(e) {
-      /*
-          Viewport sizes: Extra large (vw >= 1200px), large (vw >= 992px), medium (vw >= 768px)
-        - A localstorage item is set to remember a user's preference between collapsed or expanded.
-        - For extra large viewports, the sidebar is the user's preference (by default expanded). When
-          expanded or collapsed manually, it doesn't overlap the page content and the preference
-          gets saved to a localstorage item.
-        - For large viewports, the sidebar is collapsed. When expanded manually, it doesn't overlap
-          the page content. The user's localstorage preference is not overridden during this state.
-        - For medium and below viewports, the sidebar is hidden behing a hamburger icon. When expanded, the sidebar
-          overlaps the page content. The user's localstorage preference is not overridden during this state.
+  }
+</script>
+<nav class="sidebar sidebar-offcanvas" id="sidebar">
+  <ul class="nav">

-        More code in `app/frontend/static/assets/js/shared/misc.js` and `app/frontend/templates/base.html`
-      */
-      if (isExtraLargeBreakpoint()) {
-        let value = localStorage.getItem('crafty-sidebar-expanded') !== 'false';
-        $('body').toggleClass('sidebar-icon-only', !value);
-        localStorage.setItem('crafty-sidebar-expanded', value);
-      } else if (isLargeBreakpoint()) {
-        $('body').toggleClass('sidebar-icon-only', true);
-      }
-    }
-  </script>
-  <nav class="sidebar sidebar-offcanvas" id="sidebar">
-    <ul class="nav">
+    <li class="nav-item nav-category" style="margin-top:10px;">{{ translate('sidebar', 'navigation', data['lang']) }}
+    </li>

-      <li class="nav-item nav-category" style="margin-top:10px;">{{ translate('sidebar', 'navigation', data['lang']) }}
-      </li>
+    <li class="nav-item">
+      <a class="nav-link" href="/panel/dashboard">
+        <i class="fas fa-chart-network"></i>&nbsp;
+        <span class="menu-title">{{ translate('sidebar', 'dashboard', data['lang']) }}</span>
+      </a>
+    </li>

-      <li class="nav-item">
-        <a class="nav-link" href="/panel/dashboard">
-          <i class="fas fa-chart-network"></i>&nbsp;
-          <span class="menu-title">{{ translate('sidebar', 'dashboard', data['lang']) }}</span>
-        </a>
-      </li>
+    <li class="nav-item">
+      <a class="nav-link" data-toggle="collapse" href="#page-layouts" aria-expanded="false"
+         aria-controls="page-layouts">
+        <i class="fas fa-server"></i> &nbsp;
+        <span class="menu-title">{{ translate('sidebar', 'servers', data['lang']) }}</span>
+        <i class="menu-arrow"></i>
+      </a>
+      <div class="collapse" id="page-layouts">
+        <ul class="nav flex-column sub-menu">
+          {% if data['crafty_permissions']['Server_Creation'] in data['user_crafty_permissions'] %}
+          <li class="nav-item">
+            <a class="nav-link" href="/server/step1"><i class="fas fa-plus-circle"></i> &nbsp; {{ translate('sidebar',
+              'newServer', data['lang']) }}</a>
+          </li>
+          {% end %}
+          {% for s in data['menu_servers'] %}
+          <li class="nav-item">
+            <a class="nav-link" href="/panel/server_detail?id={{s['server_id']}}"><i class="fas fa-server"></i> &nbsp;
+              {{s['server_name']}}</a>
+          </li>
+          {% end %}

-      <li class="nav-item">
-        <a class="nav-link" data-toggle="collapse" href="#page-layouts" aria-expanded="false"
-          aria-controls="page-layouts">
-          <i class="fas fa-server"></i> &nbsp;
-          <span class="menu-title">{{ translate('sidebar', 'servers', data['lang']) }}</span>
-          <i class="menu-arrow"></i>
-        </a>
-        <div class="collapse" id="page-layouts">
-          <ul class="nav flex-column sub-menu">
-            {% if data['crafty_permissions']['Server_Creation'] in data['user_crafty_permissions'] %}
-            <li class="nav-item">
-              <a class="nav-link" href="/server/step1"><i class="fas fa-plus-circle"></i> &nbsp; {{ translate('sidebar',
-                'newServer', data['lang']) }}</a>
-            </li>
-            {% end %}
-            {% for s in data['menu_servers'] %}
-            <li class="nav-item">
-              <a class="nav-link" href="/panel/server_detail?id={{s['server_id']}}"><i class="fas fa-server"></i> &nbsp;
-                {{s['server_name']}}</a>
-            </li>
-            {% end %}
+        </ul>
+      </div>
+    </li>

-          </ul>
-        </div>
-      </li>
+    <li class="nav-item">
+      <a class="nav-link" href="https://wiki.craftycontrol.com" target="_blank">
+        <i class="fas fa-book"></i> &nbsp;
+        <span class="menu-title">{{ translate('sidebar', 'documentation', data['lang']) }}</span>
+      </a>
+    </li>

-      <li class="nav-item">
-        <a class="nav-link" href="https://wiki.craftycontrol.com" target="_blank">
-          <i class="fas fa-book"></i> &nbsp;
-          <span class="menu-title">{{ translate('sidebar', 'documentation', data['lang']) }}</span>
-        </a>
-      </li>
+    <li class="nav-item">
+      <a class="nav-link" href="/panel/wiki">
+        <i class="fa fa-info-circle"></i> &nbsp;
+        <span class="menu-title">Wiki</span>
+      </a>
+    </li>

-      <li class="nav-item">
-        <a class="nav-link" href="/panel/wiki">
-          <i class="fa fa-info-circle"></i> &nbsp;
-          <span class="menu-title">Wiki</span>
-        </a>
-      </li>
+    <li class="nav-item">
+      <a class="nav-link" href="https://discord.gg/9VJPhCE" target="_blank">
+        <i class="fab fa-discord"></i> &nbsp;
+        <span class="menu-title">Discord</span>
+      </a>
+    </li>

-      <li class="nav-item">
-        <a class="nav-link" href="https://discord.gg/9VJPhCE" target="_blank">
-          <i class="fab fa-discord"></i> &nbsp;
-          <span class="menu-title">Discord</span>
-        </a>
-      </li>
+    <li class="nav-item">
+      <a class="nav-link" href="/panel/credits">
+        <i class="fas fa-heart"></i> &nbsp;
+        <span class="menu-title">{{ translate('sidebar', 'credits', data['lang']) }}</span>
+      </a>
+    </li>

-      <li class="nav-item">
-        <a class="nav-link" href="/panel/credits">
-          <i class="fas fa-heart"></i> &nbsp;
-          <span class="menu-title">{{ translate('sidebar', 'credits', data['lang']) }}</span>
-        </a>
-      </li>
+    {% if data['show_contribute'] %}
+    <li class="nav-item">
+      <a class="nav-link" href="/panel/contribute">
+        <i class="fas fa-donate"></i> &nbsp;
+        <span class="menu-title">{{ translate('sidebar', 'contribute', data['lang']) }}</span>
+      </a>
+    </li>
+    {% end %}

-      {% if data['show_contribute'] %}
-      <li class="nav-item">
-        <a class="nav-link" href="/panel/contribute">
-          <i class="fas fa-donate"></i> &nbsp;
-          <span class="menu-title">{{ translate('sidebar', 'contribute', data['lang']) }}</span>
-        </a>
-      </li>
-      {% end %}
-
-    </ul>
-  </nav>
-  <!-- partial -->
+  </ul>
+</nav>
+<!-- partial -->