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

Fixing scrolling sidebar even when collapsed

Browse Source
This commit is contained in:
Silversthorn 2022-10-04 23:10:03 +02:00
parent d87a2c4c17
commit 425cb3869b
2 changed files with 155 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@
<link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css"> <link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css">
<link rel="stylesheet" href="/static/assets/vendors/fontawesome5/css/all.css"> <link rel="stylesheet" href="/static/assets/vendors/fontawesome5/css/all.css">
<link rel="stylesheet" type="text/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/vendors/css/vendor.bundle.base.css">
<link rel="stylesheet" href="/static/assets/css/crafty.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"> <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 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" <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"
integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"
integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> 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" <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js"
integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew==" integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- End Bootstrap Toggle --> <!-- End Bootstrap Toggle -->
@ -82,32 +82,33 @@
{% include notify.html %} {% include notify.html %}
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" <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> <span class="mdi mdi-menu"></span>
</button> </button>
</div> </div>
</nav> </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> </div>
<!-- main-panel ends -->
{% block content %}
{% end %}
{% include footer.html %}
</div> </div>
<!-- main-panel ends --> <!-- page-body-wrapper ends -->
</div>
<!-- page-body-wrapper ends -->
</div> </div>
@ -173,7 +174,7 @@
<script src="/static/assets/js/shared/hoverable-collapse.js"></script> <script src="/static/assets/js/shared/hoverable-collapse.js"></script>
<script src="/static/assets/js/shared/misc.js"></script> <script src="/static/assets/js/shared/misc.js"></script>
<script type="text/javascript" <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 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> <script type="text/javascript" src="/static/assets/js/motd.js"></script>

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

@ -1,144 +1,145 @@
<!-- partial --> <!-- partial -->
<div class="container-fluid page-body-wrapper"> <!-- partial:partials/_sidebar.html -->
<!-- partial:partials/_sidebar.html --> <style>
<style> @media screen and (max-width: 991px) {
@media screen and (max-width: 991px) { .sidebar-offcanvas {
.sidebar-offcanvas { -webkit-transition: all 0.25s cubic-bezier(.22, .61, .36, 1);
-webkit-transition: all 0.25s cubic-bezier(.22, .61, .36, 1); 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);
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> </style>
function debounce(func, wait, immediate) { <script>
var timeout; function debounce(func, wait, immediate) {
return function () { var timeout;
var context = this, args = arguments; return function () {
var later = function () { var context = this, args = arguments;
timeout = null; var later = function () {
if (!immediate) func.apply(context, args); timeout = null;
}; if (!immediate) func.apply(context, args);
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) 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); function isExtraLargeBreakpoint() {
return vw >= 1200; 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); </script>
return vw >= 992; <nav class="sidebar sidebar-offcanvas" id="sidebar">
} <ul class="nav">
$(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` <li class="nav-item nav-category" style="margin-top:10px;">{{ translate('sidebar', 'navigation', data['lang']) }}
*/ </li>
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 class="nav-item">
</li> <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"> <li class="nav-item">
<a class="nav-link" href="/panel/dashboard"> <a class="nav-link" data-toggle="collapse" href="#page-layouts" aria-expanded="false"
<i class="fas fa-chart-network"></i>&nbsp; aria-controls="page-layouts">
<span class="menu-title">{{ translate('sidebar', 'dashboard', data['lang']) }}</span> <i class="fas fa-server"></i> &nbsp;
</a> <span class="menu-title">{{ translate('sidebar', 'servers', data['lang']) }}</span>
</li> <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"> </ul>
<a class="nav-link" data-toggle="collapse" href="#page-layouts" aria-expanded="false" </div>
aria-controls="page-layouts"> </li>
<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> <li class="nav-item">
</div> <a class="nav-link" href="https://wiki.craftycontrol.com" target="_blank">
</li> <i class="fas fa-book"></i> &nbsp;
<span class="menu-title">{{ translate('sidebar', 'documentation', data['lang']) }}</span>
</a>
</li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="https://wiki.craftycontrol.com" target="_blank"> <a class="nav-link" href="/panel/wiki">
<i class="fas fa-book"></i> &nbsp; <i class="fa fa-info-circle"></i> &nbsp;
<span class="menu-title">{{ translate('sidebar', 'documentation', data['lang']) }}</span> <span class="menu-title">Wiki</span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/panel/wiki"> <a class="nav-link" href="https://discord.gg/9VJPhCE" target="_blank">
<i class="fa fa-info-circle"></i> &nbsp; <i class="fab fa-discord"></i> &nbsp;
<span class="menu-title">Wiki</span> <span class="menu-title">Discord</span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="https://discord.gg/9VJPhCE" target="_blank"> <a class="nav-link" href="/panel/credits">
<i class="fab fa-discord"></i> &nbsp; <i class="fas fa-heart"></i> &nbsp;
<span class="menu-title">Discord</span> <span class="menu-title">{{ translate('sidebar', 'credits', data['lang']) }}</span>
</a> </a>
</li> </li>
<li class="nav-item"> {% if data['show_contribute'] %}
<a class="nav-link" href="/panel/credits"> <li class="nav-item">
<i class="fas fa-heart"></i> &nbsp; <a class="nav-link" href="/panel/contribute">
<span class="menu-title">{{ translate('sidebar', 'credits', data['lang']) }}</span> <i class="fas fa-donate"></i> &nbsp;
</a> <span class="menu-title">{{ translate('sidebar', 'contribute', data['lang']) }}</span>
</li> </a>
</li>
{% end %}
{% if data['show_contribute'] %} </ul>
<li class="nav-item"> </nav>
<a class="nav-link" href="/panel/contribute"> <!-- partial -->
<i class="fas fa-donate"></i> &nbsp;
<span class="menu-title">{{ translate('sidebar', 'contribute', data['lang']) }}</span>
</a>
</li>
{% end %}
</ul>
</nav>
<!-- partial -->