Merge branch 'dev-ImprovingMobileDisplay' into 'dev'

Improving Mobile Display

See merge request crafty-controller/crafty-4!372

CHANGELOG.md

@@ -12,6 +12,7 @@
 ### Tweaks
 - Spelling mistake fixed in German lang file ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/370))
 - Backup failure warning (Tab text goes red) ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/373))
+- Rework server list on dashboard display for use on small screens ([Merge Request](https://gitlab.com/crafty-controller/crafty-4/-/merge_requests/372))
 <br><br>
 
 ## --- [4.0.3] - 2022/06/18

app/frontend/static/assets/css/crafty.css

@@ -33,7 +33,8 @@
     display: block;
 }
 
-.sidebar > .nav .nav-item .nav-link, .collapsed{
+.sidebar>.nav .nav-item .nav-link,
+.collapsed {
     padding: 15px 30px;
 }
 
@@ -64,12 +65,16 @@
 .scrollable-element {
     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
@@ -84,8 +89,17 @@ body { background-color: var(--dark) !important; /* Firefox */ }
 .actions_serverlist>a>i {
     cursor: pointer;
 }
+
+.actions_serveritem {
+    cursor: pointer;
+}
+
 .corner {
     position: absolute;
     margin-top: 0;
     margin-left: 0;
 }
+
+.accordion .card {
+    margin-bottom: 0px;
+}

app/frontend/templates/panel/dashboard.html

@@ -125,7 +125,6 @@
         </div>
         <div class="card-body">
 
-          <div class="table-responsive">
           {% if len(data['servers']) == 0%}
           <div style="text-align: center; color: grey;">
             <h1>{{ translate('dashboard', 'welcome', data['lang']) }}</h1>
@@ -137,7 +136,8 @@
           {% end %}
           {% if len(data['servers']) > 0 %}
           <!-- View for Large screen -->
-            <table id="servers_table" class="table table-hover d-none d-sm-table">
+          <div class="table-responsive d-none d-sm-block">
+            <table id="servers_table" class="table table-hover">
               <thead>
                 <tr class="rounded" id="first" draggable="false">
                   <th draggable="false">{{ translate('dashboard', 'server', data['lang']) }}</th>
@@ -285,71 +285,30 @@
                 {% end %}
               </tbody>
             </table>
-            <!-- View for Small screen -->
+          </div>
-            <table id="servers_table" class="table table-hover d-table d-sm-none">
+          {% end %}
-              <thead>
+          {% if len(data['servers']) > 0 %}
-                <tr class="rounded" id="first" draggable="false">
+          <!-- Try with Accordion -->
-                  <th scope="col" draggable="false">{{ translate('dashboard', 'server', data['lang']) }}</th>
+          <div class="d-sm-none d-block">
-                  <th scope="col" draggable="false">{{ translate('dashboard', 'actions', data['lang']) }}</th>
+            <div class="accordion" id="accordionServers">
-                  <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">
+              <div class="card">
-                  <td scope="row"><i class="fas fa-server"></i>
+                <div class="card-header" id="heading-{{server['server_data']['server_id']}}">
-                    <a draggable="false" href="/panel/server_detail?id={{server['server_data']['server_id']}}">
+                  <h2 class="mb-0 container overflow-hidden">
-                      {{ server['server_data']['server_name'] }}
+                    <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>
-                  </td>
+                      </div>
-                  <td draggable="false" id="controls{{server['server_data']['server_id']}}" class="actions_serverlist">
+                      <div class="col-2 col-lg-3 mx-0 px-0">
-                    {% if server['user_command_permission'] %}
+                        <a class="btn btn-link d-flex justify-content-center" type="button" data-toggle="collapse" data-target="#collapse-{{server['server_data']['server_id']}}"
-                    {% if server['stats']['running'] %}
+                           aria-expanded="false" aria-controls="collapse-{{server['server_data']['server_id']}}">
-                    <a data-id="{{server['server_data']['server_id']}}" class="stop_button" data-toggle="tooltip"
+                          <i class="fas fa-chart-bar"></i>
-                      title="{{ translate('dashboard', 'stop' , data['lang']) }}">
+                        </a>
-                      <i class="fas fa-stop"></i>
+                      </div>
-                    </a> &nbsp;
+                      <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">
-                    <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> &nbsp;
-
-                    <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> &nbsp;
-
-                    {% 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> &nbsp;
-                    <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> &nbsp;
-                    <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> &nbsp;
-                    {% 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>
@@ -361,16 +320,86 @@
                           <span class="text-warning"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline',
                             data['lang']) }}</span>
                           {% end %}
-                  </td>
+                        </a>
-                  <td>
+                      </div>
-                    <span data-toggle="collapse" data-target="#details_{{server['server_data']['server_id']}}"
+                      <div class="col-8 col-lg-3 mx-0 px-0">
-                      aria-expanded="false" aria-controls="details_{{server['server_data']['server_id']}}"><i
+                        <div id="controls{{server['server_data']['server_id']}}" class="container overflow-hidden">
-                        class="fas fa-chevron-down"></i></span>
+                          {% if server['user_command_permission'] %}
-                  </td>
+                          {% if server['stats']['running'] %}
-                </tr>
+                          <div class="row">
-                <tr id="details_{{server['server_data']['server_id']}}" class="collapse" draggable="false">
+                            <div class="col-4 px-0">
-                  <td colspan="4">
+                              <a data-id="{{server['server_data']['server_id']}}" class="btn btn-link stop_button actions_serveritem" data-toggle="tooltip"
-                    <div class="collapse" id="details_{{server['server_data']['server_id']}}">
+                                 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>
+                          {% 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>
+                  </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>
@@ -447,14 +476,13 @@
                       </div>
                     </div>
                   </div>
-                  </td>
+                </div>
-                </tr>
+              </div>
-                {% end %}
-              </tbody>
-            </table>
               {% end %}
             </div>
           </div>
+          {% end %}
+        </div>
       </div>
     </div>
   </div>

app/frontend/templates/server/wizard.html

@@ -68,7 +68,7 @@
               <hr>
               <div class="row">
 
-                <div class="col-sm-3">
+                <div class="col-sm-4">
                   <div class="form-group">
                     <label for="min_memory1">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
                         translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
@@ -77,7 +77,7 @@
                   </div>
                 </div>
 
-                <div class="col-sm-3 offset-1">
+                <div class="col-sm-4">
                   <div class="form-group">
                     <label for="max_memory1">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
                         translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
@@ -86,7 +86,7 @@
                   </div>
                 </div>
 
-                <div class="col-sm-3 offset-1">
+                <div class="col-sm-4">
                   <div class="form-group">
                     <label for="port1">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
                         translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
@@ -183,7 +183,7 @@
               <hr>
               <div class="row">
 
-                <div class="col-sm-3">
+                <div class="col-sm-4">
                   <div class="form-group">
                     <label for="min_memory2">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
                         translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
@@ -192,7 +192,7 @@
                   </div>
                 </div>
 
-                <div class="col-sm-3 offset-1">
+                <div class="col-sm-4">
                   <div class="form-group">
                     <label for="max_memory2">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
                         translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
@@ -201,7 +201,7 @@
                   </div>
                 </div>
 
-                <div class="col-sm-3 offset-1">
+                <div class="col-sm-4">
                   <div class="form-group">
                     <label for="port2">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
                         translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>