Merge branch 'tweak/front-end' into 'dev'

Integrate Wiki iframe into panel instead of link

See merge request crafty-controller/crafty-4!367
This commit is contained in:
Iain Powrie 2022-06-18 22:22:48 +00:00
commit 6532828a2a
8 changed files with 191 additions and 127 deletions

View File

@ -3,7 +3,7 @@
## [4.0.3] - 2022/06/18 ## [4.0.3] - 2022/06/18
### New features ### New features
None - Integrate Wiki iframe into panel instead of link ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/367))
### Bug fixes ### Bug fixes
- Amend Java system variable fix to be more specfic since they only affect Oracle. ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/364)) - Amend Java system variable fix to be more specfic since they only affect Oracle. ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/364))

View File

@ -1227,6 +1227,9 @@ class PanelHandler(BaseHandler):
self.download_file(name, file) self.download_file(name, file)
self.redirect(f"/panel/server_detail?id={server_id}&subpage=files") self.redirect(f"/panel/server_detail?id={server_id}&subpage=files")
elif page == "wiki":
template = "panel/wiki.html"
elif page == "download_support_package": elif page == "download_support_package":
temp_zip_storage = exec_user["support_logs"] temp_zip_storage = exec_user["support_logs"]

View File

@ -1,133 +1,144 @@
<!-- partial --> <!-- partial -->
<div class="container-fluid page-body-wrapper"> <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> </style>
<script> <script>
function debounce(func, wait, immediate) { function debounce(func, wait, immediate) {
var timeout; var timeout;
return function() { return function () {
var context = this, args = arguments; var context = this, args = arguments;
var later = function() { var later = function () {
timeout = null; timeout = null;
if (!immediate) func.apply(context, args); if (!immediate) func.apply(context, args);
}; };
var callNow = immediate && !timeout; var callNow = immediate && !timeout;
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(later, wait); timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args); if (callNow) func.apply(context, args);
}; };
}; };
function isExtraLargeBreakpoint() { function isExtraLargeBreakpoint() {
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
return vw >= 1200; return vw >= 1200;
} }
function isLargeBreakpoint() { function isLargeBreakpoint() {
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
return vw >= 992; return vw >= 992;
} }
$(document).ready(function() { $(document).ready(function () {
sidebarResizeHandler(null); sidebarResizeHandler(null);
$(window).on( $(window).on(
'resize', 'resize',
debounce(sidebarResizeHandler, 25, true) debounce(sidebarResizeHandler, 25, true)
); );
}); });
function sidebarResizeHandler(e) { function sidebarResizeHandler(e) {
/* /*
Viewport sizes: Extra large (vw >= 1200px), large (vw >= 992px), medium (vw >= 768px) 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. - 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 - 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 expanded or collapsed manually, it doesn't overlap the page content and the preference
gets saved to a localstorage item. gets saved to a localstorage item.
- For large viewports, the sidebar is collapsed. When expanded manually, it doesn't overlap - 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. 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 - 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. 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` More code in `app/frontend/static/assets/js/shared/misc.js` and `app/frontend/templates/base.html`
*/ */
if (isExtraLargeBreakpoint()) { if (isExtraLargeBreakpoint()) {
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()) { } else if (isLargeBreakpoint()) {
$('body').toggleClass('sidebar-icon-only', true); $('body').toggleClass('sidebar-icon-only', true);
} }
} }
</script> </script>
<nav class="sidebar sidebar-offcanvas" id="sidebar"> <nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav"> <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" 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"> <li class="nav-item">
<a class="nav-link" href="/panel/dashboard"> <a class="nav-link" href="/server/step1"><i class="fas fa-plus-circle"></i> &nbsp; {{ translate('sidebar',
<i class="fas fa-chart-network"></i>&nbsp; 'newServer', data['lang']) }}</a>
<span class="menu-title">{{ translate('sidebar', 'dashboard', data['lang']) }}</span>
</a>
</li> </li>
{% end %}
{% for s in data['menu_servers'] %}
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#page-layouts" aria-expanded="false" aria-controls="page-layouts"> <a class="nav-link" href="/panel/server_detail?id={{s['server_id']}}"><i class="fas fa-server"></i> &nbsp;
<i class="fas fa-server"></i> &nbsp; {{s['server_name']}}</a>
<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>
<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://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>
{% 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> </li>
{% end %} {% end %}
</ul> </ul>
</nav> </div>
<!-- partial --> </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="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>
{% 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 -->

View File

@ -4,7 +4,7 @@
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Crafty Commander</title> <title>Crafty Controller</title>
<!-- plugins:css --> <!-- plugins:css -->
<link rel="stylesheet" href="/static/assets/vendors/mdi/css/materialdesignicons.min.css"> <link rel="stylesheet" href="/static/assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="/static/assets/vendors/flag-icon-css/css/flag-icon.min.css"> <link rel="stylesheet" href="/static/assets/vendors/flag-icon-css/css/flag-icon.min.css">

View File

@ -0,0 +1,50 @@
{% extends ../base.html %}
{% block meta %}
{% end %}
{% block title %}Crafty Controller - Wiki{% end %}
{% block content %}
<div class="content-wrapper">
<!-- Page Title Header Starts-->
<div class="row page-title-header">
<div class="col-12">
<div class="page-header">
<h4 class="page-title">Wiki</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 grid-margin">
<iframe src="https://wiki.craftycontrol.com" width=100% height=2200px title="crafty's wiki"></iframe>
</div>
</div>
<!-- content-wrapper ends -->
<style>
.popover-body {
color: white !important;
;
}
#desc_id {
-ms-overflow-style: none;
/* for Internet Explorer, Edge */
scrollbar-width: none;
/* for Firefox */
overflow-y: scroll;
}
#desc_id::-webkit-scrollbar {
display: none;
/* for Chrome, Safari, and Opera */
}
</style>
{% end %}

View File

@ -4,7 +4,7 @@
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Crafty Commander</title> <title>Crafty Controller</title>
<!-- plugins:css --> <!-- plugins:css -->
<link rel="stylesheet" href="/static/assets/vendors/mdi/css/materialdesignicons.min.css"> <link rel="stylesheet" href="/static/assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="/static/assets/vendors/flag-icon-css/css/flag-icon.min.css"> <link rel="stylesheet" href="/static/assets/vendors/flag-icon-css/css/flag-icon.min.css">

View File

@ -4,7 +4,7 @@
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Crafty Commander</title> <title>Crafty Controller</title>
<!-- plugins:css --> <!-- plugins:css -->
<link rel="stylesheet" href="/static/assets/vendors/mdi/css/materialdesignicons.min.css"> <link rel="stylesheet" href="/static/assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="/static/assets/vendors/flag-icon-css/css/flag-icon.min.css"> <link rel="stylesheet" href="/static/assets/vendors/flag-icon-css/css/flag-icon.min.css">

View File

@ -4,7 +4,7 @@
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Crafty Commander</title> <title>Crafty Controller</title>
<!-- plugins:css --> <!-- plugins:css -->
<link rel="stylesheet" href="/static/assets/vendors/mdi/css/materialdesignicons.min.css"> <link rel="stylesheet" href="/static/assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="/static/assets/vendors/flag-icon-css/css/flag-icon.min.css"> <link rel="stylesheet" href="/static/assets/vendors/flag-icon-css/css/flag-icon.min.css">