From eb37faac081a4877a07e7588d1f7b67a0e7a6cde Mon Sep 17 00:00:00 2001 From: Silversthorn Date: Mon, 20 Jun 2022 23:41:52 +0200 Subject: [PATCH] Better Mobile Display for Dashboard --- CHANGELOG.md | 1 + app/frontend/static/assets/css/crafty.css | 52 +-- app/frontend/templates/panel/dashboard.html | 349 +++++++++++--------- 3 files changed, 219 insertions(+), 183 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 54d4f937..47b06da7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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

## --- [4.0.3] - 2022/06/18 diff --git a/app/frontend/static/assets/css/crafty.css b/app/frontend/static/assets/css/crafty.css index f0fdda00..a4bfe57c 100644 --- a/app/frontend/static/assets/css/crafty.css +++ b/app/frontend/static/assets/css/crafty.css @@ -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; } \ No newline at end of file diff --git a/app/frontend/templates/panel/dashboard.html b/app/frontend/templates/panel/dashboard.html index 991dcd64..0d081a68 100644 --- a/app/frontend/templates/panel/dashboard.html +++ b/app/frontend/templates/panel/dashboard.html @@ -288,177 +288,198 @@ {% end %} {% if len(data['servers']) > 0 %} - -
- - - - - - - - - - - {% for server in data['servers'] %} - - - - - - - - - - {% end %} - -
{{ translate('dashboard', 'server', data['lang']) }}{{ translate('dashboard', 'actions', data['lang']) }}{{ translate('dashboard', 'status', data['lang']) }}
- - {{ server['server_data']['server_name'] }} - - - {% if server['user_command_permission'] %} - {% if server['stats']['running'] %} - - -   - - - -   - - - -   - - {% elif server['stats']['updating']%} - - {{ translate('serverTerm', 'updating', - data['lang']) }} - {% elif server['stats']['waiting_start']%} - - {{ translate('dashboard', 'starting', - data['lang']) }} - {% elif server['stats']['downloading']%} - - {{ translate('serverTerm', 'downloading', data['lang']) }} - {% else %} - - -   - - -   - - -   - {% end %} - {% end %} - - {% if server['stats']['running'] %} - {{ translate('dashboard', 'online', - data['lang']) }} - {% elif server['stats']['crashed'] %} - {{ translate('dashboard', - 'crashed', - data['lang']) }} - {% else %} - {{ translate('dashboard', 'offline', - data['lang']) }} - {% end %} - - -
-
-
-
-
{{ translate('dashboard', 'cpuUsage', data['lang']) }}
-
-
-
-
- {{server['stats']['cpu']}}% -
-
-
-
{{ translate('dashboard', 'memUsage', data['lang']) }}
-
-
-
-
- {{server['stats']['mem_percent']}}% - - - {% if server['stats']['mem'] == 0 %} - 0 MB - {% else %} - {{server['stats']['mem']}} - {% end %} -
-
+ +
+
+ {% for server in data['servers'] %} +
+
+

+
+
+ + {{ server['server_data']['server_name'] }} +
-
-
-
-
{{ translate('dashboard', 'size', data['lang']) }}
-
- {{ server['stats']['world_size'] }} +
+ +
+
+ + {% if server['stats']['running'] %} + {{ translate('dashboard', 'online', + data['lang']) }} + {% elif server['stats']['crashed'] %} + {{ translate('dashboard', + 'crashed', + data['lang']) }} + {% else %} + {{ translate('dashboard', 'offline', + data['lang']) }} + {% end %} + +
+
+
+ {% if server['user_command_permission'] %} + {% if server['stats']['running'] %} +
+
+ + + +
+
+ + + +
+
+ + + +
-
-
-
{{ translate('dashboard', 'players', data['lang']) }}
-
- {% if server['stats']['int_ping_results'] %} - {{ server['stats']['online'] }} / {{ server['stats']['max'] }} {{ translate('dashboard', - 'max', - data['lang']) }}
- - {% if server['stats']['desc'] != 'False' %} -
- {{ server['stats']['desc'] }}

- {% end %} - - {% if server['stats']['version'] != 'False' %} - {{ server['stats']['version'] }} - {% end %} - {% end %} + {% elif server['stats']['updating']%} + +
+
+ {{ translate('serverTerm', 'updating', + data['lang']) }} +
+ {% elif server['stats']['waiting_start']%} + +
+
+ {{ translate('dashboard', 'starting', + data['lang']) }} +
+
+ {% elif server['stats']['downloading']%} +
+
+ + {{ translate('serverTerm', 'downloading', data['lang']) }} +
+
+ {% else %} +
+
+ + + +
+
+ + + +
+
+ + +
+
+ {% end %} + {% end %}
-

-
-
+ +
+
+
+
+
+
{{ translate('dashboard', 'cpuUsage', data['lang']) }}
+
+
+
+
+ {{server['stats']['cpu']}}% +
+
+
+
{{ translate('dashboard', 'memUsage', data['lang']) }}
+
+
+
+
+ {{server['stats']['mem_percent']}}% - + + {% if server['stats']['mem'] == 0 %} + 0 MB + {% else %} + {{server['stats']['mem']}} + {% end %} +
+
+
+
+
+
+
{{ translate('dashboard', 'size', data['lang']) }}
+
+ {{ server['stats']['world_size'] }} +
+
+
+
{{ translate('dashboard', 'players', data['lang']) }}
+
+ {% if server['stats']['int_ping_results'] %} + {{ server['stats']['online'] }} / {{ server['stats']['max'] }} {{ translate('dashboard', + 'max', + data['lang']) }}
+ + {% if server['stats']['desc'] != 'False' %} +
+ {{ server['stats']['desc'] }}

+ {% end %} + + {% if server['stats']['version'] != 'False' %} + {{ server['stats']['version'] }} + {% end %} + {% end %} +
+
+
+
+
+ + {% end %} + {% end %}