mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2024-08-30 18:23:09 +00:00
Better Mobile Display for Dashboard
This commit is contained in:
Silversthorn
parent
2d3377b497
commit
eb37faac08
@ -9,6 +9,7 @@ None
|
||||
### Tweaks
|
||||
Spelling mistake fixed in German lang file ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/370))
|
||||
- Fixing Display on server wizard when used on small screens
|
||||
- Rework server list on dashboard display for use on small screens
|
||||
<br><br>
|
||||
|
||||
## --- [4.0.3] - 2022/06/18
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
}
|
||||
|
||||
|
||||
.sidebar > .nav > .nav-item:not(.nav-profile) > .nav-link:before {
|
||||
.sidebar>.nav>.nav-item:not(.nav-profile)>.nav-link:before {
|
||||
content: none;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
@ -21,7 +21,7 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar > .nav > .nav-item:not(.nav-profile) > .nav-link:before {
|
||||
.sidebar>.nav>.nav-item:not(.nav-profile)>.nav-link:before {
|
||||
content: none;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
@ -33,43 +33,48 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar > .nav .nav-item .nav-link, .collapsed{
|
||||
.sidebar>.nav .nav-item .nav-link,
|
||||
.collapsed {
|
||||
padding: 15px 30px;
|
||||
}
|
||||
|
||||
.mc-log-time{
|
||||
color:#19d895;
|
||||
.mc-log-time {
|
||||
color: #19d895;
|
||||
}
|
||||
|
||||
.mc-log-info{
|
||||
color:#8862e0;
|
||||
.mc-log-info {
|
||||
color: #8862e0;
|
||||
}
|
||||
|
||||
.mc-log-warn{
|
||||
color:#ffaf00;
|
||||
.mc-log-warn {
|
||||
color: #ffaf00;
|
||||
}
|
||||
|
||||
.mc-log-error{
|
||||
color:#af463f;
|
||||
.mc-log-error {
|
||||
color: #af463f;
|
||||
}
|
||||
|
||||
.mc-log-fatal{
|
||||
color:#da0f00;
|
||||
.mc-log-fatal {
|
||||
color: #da0f00;
|
||||
}
|
||||
|
||||
.mc-log-keyword{
|
||||
color:#2196f3;
|
||||
.mc-log-keyword {
|
||||
color: #2196f3;
|
||||
}
|
||||
|
||||
.scrollable-element {
|
||||
scrollbar-color: red yellow;
|
||||
scrollbar-color: red yellow;
|
||||
}
|
||||
|
||||
.term-nav-item {
|
||||
padding: 1%;
|
||||
}
|
||||
|
||||
/* Fix body scrollbar color */
|
||||
body { background-color: var(--dark) !important; /* Firefox */ }
|
||||
body {
|
||||
background-color: var(--dark) !important;
|
||||
/* Firefox */
|
||||
}
|
||||
|
||||
/* Webkit */
|
||||
/* Didn't really work out
|
||||
@ -81,11 +86,20 @@ body { background-color: var(--dark) !important; /* Firefox */ }
|
||||
::-webkit-scrollbar-track { background-color: #202538; }
|
||||
::-webkit-scrollbar-corner { background-color: #202538; }*/
|
||||
|
||||
.actions_serverlist > a > i {
|
||||
cursor: pointer;
|
||||
.actions_serverlist>a>i {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.actions_serveritem {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.corner {
|
||||
position: absolute;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.accordion .card {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@ -288,177 +288,198 @@
|
||||
</div>
|
||||
{% end %}
|
||||
{% if len(data['servers']) > 0 %}
|
||||
<!-- View for Small screen -->
|
||||
<div class="table-responsive d-block d-sm-none">
|
||||
<table id="servers_table" class="table table-hover">
|
||||
<thead>
|
||||
<tr class="rounded" id="first" draggable="false">
|
||||
<th scope="col" draggable="false">{{ translate('dashboard', 'server', data['lang']) }}</th>
|
||||
<th scope="col" draggable="false">{{ translate('dashboard', 'actions', data['lang']) }}</th>
|
||||
<th scope="col" draggable="false">{{ translate('dashboard', 'status', data['lang']) }}</th>
|
||||
<th scope="col" draggable="false"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for server in data['servers'] %}
|
||||
<tr id="{{server['server_data']['server_id']}}" draggable="false">
|
||||
<td scope="row"><i class="fas fa-server"></i>
|
||||
<a draggable="false" href="/panel/server_detail?id={{server['server_data']['server_id']}}">
|
||||
{{ server['server_data']['server_name'] }}
|
||||
</a>
|
||||
</td>
|
||||
<td draggable="false" id="controls{{server['server_data']['server_id']}}" class="actions_serverlist">
|
||||
{% if server['user_command_permission'] %}
|
||||
{% if server['stats']['running'] %}
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="stop_button" data-toggle="tooltip"
|
||||
title="{{ translate('dashboard', 'stop' , data['lang']) }}">
|
||||
<i class="fas fa-stop"></i>
|
||||
</a>
|
||||
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="restart_button" data-toggle="tooltip"
|
||||
title="{{ translate('dashboard', 'restart' , data['lang']) }}">
|
||||
<i class="fas fa-sync"></i>
|
||||
</a>
|
||||
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="kill_button" data-toggle="tooltip"
|
||||
title="{{ translate('dashboard', 'kill' , data['lang']) }}">
|
||||
<i class="fas fa-skull"></i>
|
||||
</a>
|
||||
|
||||
{% elif server['stats']['updating']%}
|
||||
<!-- WHAT HAPPENED HERE -->
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="">{{ translate('serverTerm', 'updating',
|
||||
data['lang']) }}</i></a>
|
||||
{% elif server['stats']['waiting_start']%}
|
||||
<!-- WHAT HAPPENED HERE -->
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="" title="{{
|
||||
translate('dashboard', 'delay-explained' , data['lang'])}}">{{ translate('dashboard', 'starting',
|
||||
data['lang']) }}</i></a>
|
||||
{% elif server['stats']['downloading']%}
|
||||
<a data-id="{{server['server_data']['server_id']}}" class=""><i class="fa fa-spinner fa-spin"></i>
|
||||
{{ translate('serverTerm', 'downloading', data['lang']) }}</a>
|
||||
{% else %}
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="play_button" data-toggle="tooltip"
|
||||
title="{{ translate('dashboard', 'start' , data['lang']) }}">
|
||||
<i class="fas fa-play"></i>
|
||||
</a>
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="clone_button" data-toggle="tooltip"
|
||||
title="{{ translate('dashboard', 'clone' , data['lang']) }}">
|
||||
<i class="fas fa-clone"></i>
|
||||
</a>
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="kill_button" data-toggle="tooltip"
|
||||
title="{{ translate('dashboard', 'kill' , data['lang']) }}">
|
||||
<i class="fas fa-skull"></i>
|
||||
</a>
|
||||
{% end %}
|
||||
{% end %}
|
||||
</td>
|
||||
<td draggable="false" id="m_server_running_status_{{server['server_data']['server_id']}}">
|
||||
{% if server['stats']['running'] %}
|
||||
<span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online',
|
||||
data['lang']) }}</span>
|
||||
{% elif server['stats']['crashed'] %}
|
||||
<span class="text-danger"><i class="fas fa-exclamation-triangle"></i> {{ translate('dashboard',
|
||||
'crashed',
|
||||
data['lang']) }}</span>
|
||||
{% else %}
|
||||
<span class="text-warning"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline',
|
||||
data['lang']) }}</span>
|
||||
{% end %}
|
||||
</td>
|
||||
<td>
|
||||
<span class="collapsed" data-toggle="collapse" data-target="#details_{{server['server_data']['server_id']}}"
|
||||
aria-expanded="false" aria-controls="details_{{server['server_data']['server_id']}}"><i
|
||||
class="fas fa-chevron-down"></i></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="details_{{server['server_data']['server_id']}}" class="collapse" draggable="false">
|
||||
<td colspan="4">
|
||||
<div class="collapse" id="details_{{server['server_data']['server_id']}}">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h6>{{ translate('dashboard', 'cpuUsage', data['lang']) }}</h6>
|
||||
<div id="m_server_cpu_{{server['server_data']['server_id']}}">
|
||||
<div class="progress mb-1" data-toggle="tooltip" data-placement="top"
|
||||
title="{{server['stats']['cpu']}}">
|
||||
<div class="progress-bar
|
||||
{% if server['stats']['cpu'] <= 33 %}
|
||||
bg-success
|
||||
{% elif 34 <= server['stats']['cpu'] <= 66 %}
|
||||
bg-warning
|
||||
{% else %}
|
||||
bg-danger
|
||||
{% end %}
|
||||
" role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="0"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{{server['stats']['cpu']}}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h6>{{ translate('dashboard', 'memUsage', data['lang']) }}</h6>
|
||||
<div draggable="false" id="m_server_mem_{{server['server_data']['server_id']}}">
|
||||
<div class="progress mb-1" data-toggle="tooltip" data-placement="top"
|
||||
title="{{server['stats']['mem']}}">
|
||||
<div class="progress-bar
|
||||
{% if server['stats']['mem_percent'] <= 33 %}
|
||||
bg-success
|
||||
{% elif 34 <= server['stats']['mem_percent'] <= 66 %}
|
||||
bg-warning
|
||||
{% else %}
|
||||
bg-danger
|
||||
{% end %}
|
||||
" role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{{server['stats']['mem_percent']}}% -
|
||||
|
||||
{% if server['stats']['mem'] == 0 %}
|
||||
0 MB
|
||||
{% else %}
|
||||
{{server['stats']['mem']}}
|
||||
{% end %}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Try with Accordion -->
|
||||
<div class="d-sm-none d-block">
|
||||
<div class="accordion" id="accordionServers">
|
||||
{% for server in data['servers'] %}
|
||||
<div class="card">
|
||||
<div class="card-header" id="heading-{{server['server_data']['server_id']}}">
|
||||
<h2 class="mb-0 container overflow-hidden">
|
||||
<div class="row">
|
||||
<div class="col-10 col-lg-3 mx-0 px-0">
|
||||
<a class="btn btn-link d-flex justify-content-start" type="button" href="/panel/server_detail?id={{server['server_data']['server_id']}}">
|
||||
<i class="fas fa-server"></i> {{ server['server_data']['server_name'] }}
|
||||
</a>
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h6>{{ translate('dashboard', 'size', data['lang']) }}</h6>
|
||||
<div draggable="false" id="m_server_world_{{server['server_data']['server_id']}}">
|
||||
{{ server['stats']['world_size'] }}
|
||||
<div class="col-2 col-lg-3 mx-0 px-0">
|
||||
<a class="btn btn-link d-flex justify-content-center" type="button" data-toggle="collapse" data-target="#collapse-{{server['server_data']['server_id']}}"
|
||||
aria-expanded="false" aria-controls="collapse-{{server['server_data']['server_id']}}">
|
||||
<i class="fas fa-chart-bar"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4 col-lg-3 mx-0 px-0">
|
||||
<a id="m_server_running_status_{{server['server_data']['server_id']}}" class="btn btn-link d-flex justify-content-start" type="button">
|
||||
{% if server['stats']['running'] %}
|
||||
<span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online',
|
||||
data['lang']) }}</span>
|
||||
{% elif server['stats']['crashed'] %}
|
||||
<span class="text-danger"><i class="fas fa-exclamation-triangle"></i> {{ translate('dashboard',
|
||||
'crashed',
|
||||
data['lang']) }}</span>
|
||||
{% else %}
|
||||
<span class="text-warning"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline',
|
||||
data['lang']) }}</span>
|
||||
{% end %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-8 col-lg-3 mx-0 px-0">
|
||||
<div id="controls{{server['server_data']['server_id']}}" class="container overflow-hidden">
|
||||
{% if server['user_command_permission'] %}
|
||||
{% if server['stats']['running'] %}
|
||||
<div class="row">
|
||||
<div class="col-4 px-0">
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="btn btn-link stop_button actions_serveritem" data-toggle="tooltip"
|
||||
title="{{ translate('dashboard', 'stop' , data['lang']) }}">
|
||||
<i class="fas fa-stop"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4 px-0">
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="btn btn-link restart_button actions_serveritem" data-toggle="tooltip"
|
||||
title="{{ translate('dashboard', 'restart' , data['lang']) }}">
|
||||
<i class="fas fa-sync"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4 px-0">
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="btn btn-link kill_button actions_serveritem" data-toggle="tooltip"
|
||||
title="{{ translate('dashboard', 'kill' , data['lang']) }}">
|
||||
<i class="fas fa-skull"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6" style="width: auto;">
|
||||
<h6>{{ translate('dashboard', 'players', data['lang']) }}</h6>
|
||||
<div draggable="false" id="m_server_desc_{{server['server_data']['server_id']}}">
|
||||
{% if server['stats']['int_ping_results'] %}
|
||||
{{ server['stats']['online'] }} / {{ server['stats']['max'] }} {{ translate('dashboard',
|
||||
'max',
|
||||
data['lang']) }} <br />
|
||||
|
||||
{% if server['stats']['desc'] != 'False' %}
|
||||
<div id="desc_id"
|
||||
style="overflow-wrap: break-word !important; max-width: 85px !important; overflow: scroll;">
|
||||
{{ server['stats']['desc'] }}</div> <br />
|
||||
{% end %}
|
||||
|
||||
{% if server['stats']['version'] != 'False' %}
|
||||
{{ server['stats']['version'] }}
|
||||
{% end %}
|
||||
{% end %}
|
||||
{% elif server['stats']['updating']%}
|
||||
<!-- WHAT HAPPENED HERE -->
|
||||
<div class="row">
|
||||
<div class="col-12 px-0">
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="btn btn-link">{{ translate('serverTerm', 'updating',
|
||||
data['lang']) }}</i></a>
|
||||
</div>
|
||||
</div>
|
||||
{% elif server['stats']['waiting_start']%}
|
||||
<!-- WHAT HAPPENED HERE -->
|
||||
<div class="row">
|
||||
<div class="col-12 px-0">
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="btn btn-link" title="{{
|
||||
translate('dashboard', 'delay-explained' , data['lang'])}}">{{ translate('dashboard', 'starting',
|
||||
data['lang']) }}</i></a>
|
||||
</div>
|
||||
</div>
|
||||
{% elif server['stats']['downloading']%}
|
||||
<div class="row">
|
||||
<div class="col-12 px-0">
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="btn btn-link"><i class="fa fa-spinner fa-spin"></i>
|
||||
{{ translate('serverTerm', 'downloading', data['lang']) }}</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="row">
|
||||
<div class="col-4 px-0">
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="btn play_button actions_serveritem" data-toggle="tooltip"
|
||||
title="{{ translate('dashboard', 'start' , data['lang']) }}">
|
||||
<i class="fas fa-play"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4 px-0">
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="btn clone_button actions_serveritem" data-toggle="tooltip"
|
||||
title="{{ translate('dashboard', 'clone' , data['lang']) }}">
|
||||
<i class="fas fa-clone"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4 px-0">
|
||||
<a data-id="{{server['server_data']['server_id']}}" class="btn kill_button actions_serveritem" data-toggle="tooltip"
|
||||
title="{{ translate('dashboard', 'kill' , data['lang']) }}">
|
||||
<i class="fas fa-skull"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
{% end %}
|
||||
{% end %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% end %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="d-sm-none ">
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapse-{{server['server_data']['server_id']}}" class="collapse" aria-labelledby="heading-{{server['server_data']['server_id']}}" data-parent="#accordionServers">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h6>{{ translate('dashboard', 'cpuUsage', data['lang']) }}</h6>
|
||||
<div id="m_server_cpu_{{server['server_data']['server_id']}}">
|
||||
<div class="progress mb-1" data-toggle="tooltip" data-placement="top"
|
||||
title="{{server['stats']['cpu']}}">
|
||||
<div class="progress-bar
|
||||
{% if server['stats']['cpu'] <= 33 %}
|
||||
bg-success
|
||||
{% elif 34 <= server['stats']['cpu'] <= 66 %}
|
||||
bg-warning
|
||||
{% else %}
|
||||
bg-danger
|
||||
{% end %}
|
||||
" role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="0"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{{server['stats']['cpu']}}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h6>{{ translate('dashboard', 'memUsage', data['lang']) }}</h6>
|
||||
<div draggable="false" id="m_server_mem_{{server['server_data']['server_id']}}">
|
||||
<div class="progress mb-1" data-toggle="tooltip" data-placement="top"
|
||||
title="{{server['stats']['mem']}}">
|
||||
<div class="progress-bar
|
||||
{% if server['stats']['mem_percent'] <= 33 %}
|
||||
bg-success
|
||||
{% elif 34 <= server['stats']['mem_percent'] <= 66 %}
|
||||
bg-warning
|
||||
{% else %}
|
||||
bg-danger
|
||||
{% end %}
|
||||
" role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{{server['stats']['mem_percent']}}% -
|
||||
|
||||
{% if server['stats']['mem'] == 0 %}
|
||||
0 MB
|
||||
{% else %}
|
||||
{{server['stats']['mem']}}
|
||||
{% end %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h6>{{ translate('dashboard', 'size', data['lang']) }}</h6>
|
||||
<div draggable="false" id="m_server_world_{{server['server_data']['server_id']}}">
|
||||
{{ server['stats']['world_size'] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6" style="width: auto;">
|
||||
<h6>{{ translate('dashboard', 'players', data['lang']) }}</h6>
|
||||
<div draggable="false" id="m_server_desc_{{server['server_data']['server_id']}}">
|
||||
{% if server['stats']['int_ping_results'] %}
|
||||
{{ server['stats']['online'] }} / {{ server['stats']['max'] }} {{ translate('dashboard',
|
||||
'max',
|
||||
data['lang']) }} <br />
|
||||
|
||||
{% if server['stats']['desc'] != 'False' %}
|
||||
<div id="desc_id"
|
||||
style="overflow-wrap: break-word !important; max-width: 85px !important; overflow: scroll;">
|
||||
{{ server['stats']['desc'] }}</div> <br />
|
||||
{% end %}
|
||||
|
||||
{% if server['stats']['version'] != 'False' %}
|
||||
{{ server['stats']['version'] }}
|
||||
{% end %}
|
||||
{% end %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% end %}
|
||||
</div>
|
||||
</div>
|
||||
{% end %}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user