Fixing Resizing of the table

app/frontend/templates/panel/dashboard.html

@@ -25,21 +25,21 @@
   <!-- Page Title Header Ends-->
   {% if data['first_log'] %}
   <script>
-    $(document).ready(function() {
+    $(document).ready(function () {
       bootbox.alert({
-            backdrop: true,
-            title: 'Your Feedback Is Appreciated...',
-            message: '<p>We will only request this information from the admin user once... 😊</p>'
-              +'<p><strong>All data collected is completely anonymous</strong> and is only used to improve Crafty 4.0 and allow us to more accurately report the number of Crafty 4 users.</p><iframe width="640px" height="480px"'
-            +'src="https://forms.office.com/Pages/ResponsePage.aspx?id=LwLajNkpXU2CKc95G1oO3MN0Hu3oEUNLr-EtLx31TS5UNUNVQlFNVUVYMEc'
-            +'1V1BKS0FQUUlERUtWQy4u&embed=true" frameborder="0" marginwidth="0" marginheight="0" style="border: none; max-width:100%;'
-            +' max-height:100vh" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe>',
-            buttons: {
-              ok: {
+        backdrop: true,
+        title: 'Your Feedback Is Appreciated...',
+        message: '<p>We will only request this information from the admin user once... 😊</p>'
+          + '<p><strong>All data collected is completely anonymous</strong> and is only used to improve Crafty 4.0 and allow us to more accurately report the number of Crafty 4 users.</p><iframe width="640px" height="480px"'
+          + 'src="https://forms.office.com/Pages/ResponsePage.aspx?id=LwLajNkpXU2CKc95G1oO3MN0Hu3oEUNLr-EtLx31TS5UNUNVQlFNVUVYMEc'
+          + '1V1BKS0FQUUlERUtWQy4u&embed=true" frameborder="0" marginwidth="0" marginheight="0" style="border: none; max-width:100%;'
+          + ' max-height:100vh" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe>',
+        buttons: {
+          ok: {
             label: 'Skip Survey/Done',
             className: 'btn-secondary'
+          },
         },
-            },
       });
     });
 
@@ -60,12 +60,12 @@
                 </div>
                 <div class="wrapper my-auto ml-auto ml-lg-4">
                   <p id="cpu_data" class="mb-0 text-success" data-toggle="tooltip" data-placement="top" data-html="true"
-                    title="{% raw translate('dashboard', 'cpuCores', data['lang']) %}: {{ data.get('hosts_data').get('cpu_cores') }} <br /> {% raw translate('dashboard', 'cpuCurFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_cur_freq') }} <br /> {% raw translate('dashboard', 'cpuMaxFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_max_freq') }}">
+                     title="{% raw translate('dashboard', 'cpuCores', data['lang']) %}: {{ data.get('hosts_data').get('cpu_cores') }} <br /> {% raw translate('dashboard', 'cpuCurFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_cur_freq') }} <br /> {% raw translate('dashboard', 'cpuMaxFreq', data['lang']) %}: {{ data.get('hosts_data').get('cpu_max_freq') }}">
                     {{ translate('dashboard', 'cpuUsage', data['lang']) }}: <span id="cpu_usage">{{
                       data.get('hosts_data').get('cpu_usage') }}</span>
                   </p>
                   <p id="mem_usage" class="mb-0 text-danger" data-toggle="tooltip" data-placement="top"
-                    title="{{ translate('dashboard', 'memUsage', data['lang']) }}: {{ data.get('hosts_data').get('mem_usage') }}">
+                     title="{{ translate('dashboard', 'memUsage', data['lang']) }}: {{ data.get('hosts_data').get('mem_usage') }}">
                     {{ translate('dashboard', 'memUsage', data['lang']) }}: <span id="mem_percent">{{
                       data.get('hosts_data').get('mem_percent') }}%</span>
                   </p>
@@ -116,8 +116,8 @@
           {% if len(data['servers']) > 0 %}
           {% if data['user_data']['hints'] %}
           <span class="too_small" title="{{ translate('dashboard', 'cannotSeeOnMobile', data['lang']) }}" ,
-            data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" ,
-            data-placement="top"></span>
+                data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" ,
+                data-placement="top"></span>
           {% end %}
           {% end %}
           <div><a class="nav-link" href="/server/step1"><i class="fas fa-plus-circle"></i> &nbsp; {{
@@ -125,19 +125,19 @@
         </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>
-              <br>
-              <h7>{{ translate('dashboard', 'no-servers', data['lang']) }} {{ translate('dashboard', 'newServer',
-                data['lang']) }}.</h7>
-            </div>
+          {% if len(data['servers']) == 0%}
+          <div style="text-align: center; color: grey;">
+            <h1>{{ translate('dashboard', 'welcome', data['lang']) }}</h1>
+            <br>
+            <h7>{{ translate('dashboard', 'no-servers', data['lang']) }} {{ translate('dashboard', 'newServer',
+              data['lang']) }}.</h7>
+          </div>
 
-            {% end %}
-            {% if len(data['servers']) > 0 %}
-            <!-- View for Large screen -->
-            <table id="servers_table" class="table table-hover d-none d-sm-table">
+          {% end %}
+          {% if len(data['servers']) > 0 %}
+          <!-- View for Large screen -->
+          <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>
@@ -163,17 +163,17 @@
                     {% 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']) }}">
+                       title="{{ translate('dashboard', 'stop' , data['lang']) }}">
                       <i class="fas fa-stop"></i>
                     </a> &nbsp;
 
                     <a data-id="{{server['server_data']['server_id']}}" class="restart_button" data-toggle="tooltip"
-                      title="{{ translate('dashboard', 'restart' , data['lang']) }}">
+                       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']) }}">
+                       title="{{ translate('dashboard', 'kill' , data['lang']) }}">
                       <i class="fas fa-skull"></i>
                     </a> &nbsp;
 
@@ -192,15 +192,15 @@
                       data['lang']) }}</a>
                     {% else %}
                     <a data-id="{{server['server_data']['server_id']}}" class="play_button" data-toggle="tooltip"
-                      title="{{ translate('dashboard', 'start' , data['lang']) }}">
+                       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']) }}">
+                       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']) }}">
+                       title="{{ translate('dashboard', 'kill' , data['lang']) }}">
                       <i class="fas fa-skull"></i>
                     </a> &nbsp;
                     {% end %}
@@ -209,7 +209,7 @@
 
                   <td draggable="false" id="server_cpu_{{server['server_data']['server_id']}}">
                     <div class="progress mb-1" data-toggle="tooltip" data-placement="top"
-                      title="{{server['stats']['cpu']}}">
+                         title="{{server['stats']['cpu']}}">
                       <div class="progress-bar
                       {% if server['stats']['cpu'] <= 33 %}
                       bg-success
@@ -219,14 +219,14 @@
                       bg-danger
                       {% end %}
                       " role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="0"
-                        aria-valuemin="0" aria-valuemax="100"></div>
+                           aria-valuemin="0" aria-valuemax="100"></div>
                     </div>
                     {{server['stats']['cpu']}}%
                   </td>
 
                   <td draggable="false" id="server_mem_{{server['server_data']['server_id']}}">
                     <div class="progress mb-1" data-toggle="tooltip" data-placement="top"
-                      title="{{server['stats']['mem']}}">
+                         title="{{server['stats']['mem']}}">
                       <div class="progress-bar
                       {% if server['stats']['mem_percent'] <= 33 %}
                       bg-success
@@ -236,7 +236,7 @@
                       bg-danger
                       {% end %}
                       " role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0"
-                        aria-valuemin="0" aria-valuemax="100"></div>
+                           aria-valuemin="0" aria-valuemax="100"></div>
                     </div>
                     {{server['stats']['mem_percent']}}% -
 
@@ -256,7 +256,7 @@
 
                     {% if server['stats']['desc'] != 'False' %}
                     <div id="desc_id"
-                      style="overflow-wrap: break-word !important; max-width: 85px !important; overflow: scroll;">{{
+                         style="overflow-wrap: break-word !important; max-width: 85px !important; overflow: scroll;">{{
                       server['stats']['desc'] }}</div> <br />
                     {% end %}
 
@@ -280,13 +280,17 @@
                     {% end %}
                   </td>
                   <span class="server-player-totals" id="server_players_{{server['server_data']['server_id']}}"
-                    data-players="{{ server['stats']['online']}}" data-max="{{ server['stats']['max'] }}"></span>
+                        data-players="{{ server['stats']['online']}}" data-max="{{ server['stats']['max'] }}"></span>
                 </tr>
                 {% end %}
               </tbody>
             </table>
-            <!-- View for Small screen -->
-            <table id="servers_table" class="table table-hover d-table d-sm-none">
+          </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>
@@ -307,17 +311,17 @@
                     {% 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']) }}">
+                       title="{{ translate('dashboard', 'stop' , data['lang']) }}">
                       <i class="fas fa-stop"></i>
                     </a> &nbsp;
 
                     <a data-id="{{server['server_data']['server_id']}}" class="restart_button" data-toggle="tooltip"
-                      title="{{ translate('dashboard', 'restart' , data['lang']) }}">
+                       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']) }}">
+                       title="{{ translate('dashboard', 'kill' , data['lang']) }}">
                       <i class="fas fa-skull"></i>
                     </a> &nbsp;
 
@@ -335,15 +339,15 @@
                       {{ 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']) }}">
+                       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']) }}">
+                       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']) }}">
+                       title="{{ translate('dashboard', 'kill' , data['lang']) }}">
                       <i class="fas fa-skull"></i>
                     </a> &nbsp;
                     {% end %}
@@ -363,9 +367,9 @@
                     {% end %}
                   </td>
                   <td>
-                    <span 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>
+                    <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">
@@ -376,7 +380,7 @@
                           <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']}}">
+                                 title="{{server['stats']['cpu']}}">
                               <div class="progress-bar
                               {% if server['stats']['cpu'] <= 33 %}
                               bg-success
@@ -386,7 +390,7 @@
                               bg-danger
                               {% end %}
                               " role="progressbar" style="width: {{server['stats']['cpu']}}%" aria-valuenow="0"
-                                aria-valuemin="0" aria-valuemax="100"></div>
+                                   aria-valuemin="0" aria-valuemax="100"></div>
                             </div>
                             {{server['stats']['cpu']}}%
                           </div>
@@ -395,7 +399,7 @@
                           <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']}}">
+                                 title="{{server['stats']['mem']}}">
                               <div class="progress-bar
                               {% if server['stats']['mem_percent'] <= 33 %}
                               bg-success
@@ -405,7 +409,7 @@
                               bg-danger
                               {% end %}
                               " role="progressbar" style="width: {{server['stats']['mem_percent']}}%" aria-valuenow="0"
-                                aria-valuemin="0" aria-valuemax="100"></div>
+                                   aria-valuemin="0" aria-valuemax="100"></div>
                             </div>
                             {{server['stats']['mem_percent']}}% -
 
@@ -435,7 +439,7 @@
 
                             {% if server['stats']['desc'] != 'False' %}
                             <div id="desc_id"
-                              style="overflow-wrap: break-word !important; max-width: 85px !important; overflow: scroll;">
+                                 style="overflow-wrap: break-word !important; max-width: 85px !important; overflow: scroll;">
                               {{ server['stats']['desc'] }}</div> <br />
                             {% end %}
 
@@ -452,8 +456,11 @@
                 {% end %}
               </tbody>
             </table>
-            {% end %}
           </div>
+          <div class="d-sm-none ">
+
+          </div>
+          {% end %}
         </div>
       </div>
     </div>
@@ -909,4 +916,4 @@
 
 </script>
 
-{% end %}
+{% end %}