Improving Display of Panel Config Pages

app/classes/web/panel_handler.py

@@ -895,6 +895,7 @@ class PanelHandler(BaseHandler):
                     exec_user["user_id"]
                 )
 
+            page_data["active_link"] = "panel_config"
             template = "panel/panel_config.html"
 
         elif page == "config_json":
@@ -917,6 +918,7 @@ class PanelHandler(BaseHandler):
                             page_data["availables_languages"].append(file.split(".")[0])
                         page_data["all_languages"].append(file.split(".")[0])
 
+                page_data["active_link"] = "config_json"
                 template = "panel/config_json.html"
 
         elif page == "add_user":

app/frontend/templates/panel/config_json.html

@@ -6,22 +6,30 @@
 {% block title %}Crafty Controller - {{ translate('panelConfig', 'pageTitle', data['lang']) }}{% end %}
 
 {% block content %}
-<link rel="stylesheet"
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.min.css">
-      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.min.css">
 
 
 <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">
+          {{ translate('panelConfig', 'title', data['lang']) }}
+          <br />
+        </h4>
+      </div>
+    </div>
+  </div>
+  <!-- Page Title Header Ends-->
+
+  <div class="row">
+    <div class="col-md-12 grid-margin">
+      <div class="card">
+        <div class="card-body">
+
           {% if data['superuser'] %}
-  <ul class="nav nav-tabs col-md-12 tab-simple-styled " role="tablist">
+          {% include "parts/crafty_config_list.html %}
-    <li class="nav-item term-nav-item">
-      <a class="nav-link" href="/panel/panel_config" role="tab" aria-selected="false">
-        <i class="fas fa-file-signature"></i>Panel Config</a>
-    </li>
-    <li class="nav-item term-nav-item">
-      <a class="nav-link active" href="/panel/config_json" role="tab" aria-selected="false">
-        <i class="fas fa-file-signature"></i>Config.json</a>
-    </li>
-  </ul>
           {% end %}
 
           <!-- Page Title Header Starts-->
@@ -36,10 +44,6 @@
           </div>
           <!-- Page Title Header Ends-->
 
-  <div class="row">
-    <div class="col-md-12 grid-margin">
-      <div class="card">
-        <div class="card-body">
           <form id="config-form" class="forms-sample" method="post" action="/panel/config_json">
             {% raw xsrf_form_html() %}
 
@@ -63,8 +67,7 @@
                 <button type="button" class="btn btn-outline-default custom-picker" onclick="$('option', $('#lang_select')).each(function(element) {
                 $(this).removeAttr('selected').prop('selected', false); $('.selectpicker').selectpicker('refresh')
             });">Enable all Languages</button>
-                <select id="lang_select" class="form-control selectpicker show-tick" data-icon-base="fas" data-tick-icon="fa-check"
+                <select id="lang_select" class="form-control selectpicker show-tick" data-icon-base="fas" data-tick-icon="fa-check" multiple data-style="custom-picker">
-                        multiple data-style="custom-picker">
                   {% for lang in data['all_languages'] %}
                   {% if lang in item[1] %}
                   <option selected>{{lang}}</option>
@@ -73,13 +76,10 @@
                   {% end %}
                   {% end %}
                 </select>
-                <textarea id="disabled_lang" name="{{item[0]}}" class="form-control list hidden"
+                <textarea id="disabled_lang" name="{{item[0]}}" class="form-control list hidden" rows="{{ len(data['all_languages']) }}" value="{{','.join(item[1])}}" hidden>{{','.join(item[1])}}</textarea>
-                          rows="{{ len(data['all_languages']) }}" value="{{','.join(item[1])}}"
-                          hidden>{{','.join(item[1])}}</textarea>
               </div>
               {% elif isinstance(item[1], list) %}
-              <textarea value="{{','.join(item[1])}}" type="text" name="{{item[0]}}"
+              <textarea value="{{','.join(item[1])}}" type="text" name="{{item[0]}}" class="form-control list">{{','.join(item[1])}}</textarea>
-                        class="form-control list">{{','.join(item[1])}}</textarea>
               {% elif isinstance(item[1], bool) %}
               {% if item[1] == True %}
               <div style="margin-left: 30px;">
@@ -97,11 +97,9 @@
               </div>
               {% end %}
               {% elif isinstance(item[1], int) %}
-              <input type="number" class="form-control" name="{{item[0]}}" id="{{item[0]}}" value="{{ item[1]  }}"
+              <input type="number" class="form-control" name="{{item[0]}}" id="{{item[0]}}" value="{{ item[1]  }}" step="1" min="0" required>
-                     step="1" min="0" required>
               {% else %}
-              <input type="text" class="form-control" name="{{item[0]}}" id="{{item[0]}}" value="{{ item[1]  }}"
+              <input type="text" class="form-control" name="{{item[0]}}" id="{{item[0]}}" value="{{ item[1]  }}" step="2" min="0" required>
-                     step="2" min="0" required>
               {% end %}
             </div>
             {% end %}

app/frontend/templates/panel/panel_config.html

@@ -8,17 +8,27 @@
 {% 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">
+          {{ translate('panelConfig', 'title', data['lang']) }}
+          <br />
+        </h4>
+      </div>
+    </div>
+  </div>
+  <!-- Page Title Header Ends-->
+
+  <div class="row">
+    <div class="col-md-12 grid-margin">
+      <div class="card">
+        <div class="card-body">
+
+
           {% if data['superuser'] %}
-  <ul class="nav nav-tabs col-md-12 tab-simple-styled " role="tablist">
+          {% include "parts/crafty_config_list.html %}
-    <li class="nav-item term-nav-item">
-      <a class="nav-link active" href="/panel/panel_config" role="tab" aria-selected="false">
-        <i class="fas fa-file-signature"></i>Panel Config</a>
-    </li>
-    <li class="nav-item term-nav-item">
-      <a class="nav-link" href="/panel/config_json" role="tab" aria-selected="false">
-        <i class="fas fa-file-signature"></i>Config.json</a>
-    </li>
-  </ul>
           {% end %}
 
           <!-- Page Title Header Starts-->
@@ -33,11 +43,6 @@
           </div>
           <!-- Page Title Header Ends-->
 
-  <div class="row">
-    <div class="col-md-12 grid-margin">
-      <div class="card">
-        <div class="card-body">
-
           <div class="row">
             <div class="col-md-12 col-lg-12 grid-margin stretch-card">
               <div class="card">
@@ -45,9 +50,7 @@
                   <h4 class="card-title"><i class="fas fa-users"></i> {{ translate('panelConfig', 'users', data['lang'])
                     }}</h4>
                   {% if data['user_data']['hints'] %}
-                  <span class="too_small" title="{{ translate('dashboard', 'cannotSee', data['lang']) }}" ,
+                  <span class="too_small" title="{{ translate('dashboard', 'cannotSee', 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 %}
                   <!-- TODO: Translate the following -->
                   <div><a class="nav-link" href="/panel/add_user"><i class="fas fa-plus-circle"></i> &nbsp; {{
@@ -145,9 +148,7 @@
                   <h4 class="card-title"><i class="fas fa-user-tag"></i> {{ translate('panelConfig', 'roles',
                     data['lang']) }}</h4>
                   {% if data['user_data']['hints'] %}
-                  <span class="too_small2" title="{{ translate('dashboard', 'cannotSee', data['lang']) }}" ,
+                  <span class="too_small2" title="{{ translate('dashboard', 'cannotSee', 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 %}
                   <div><a class="nav-link" href="/panel/add_role"><i class="fas fa-plus-circle"></i> &nbsp; {{
                       translate('panelConfig', 'newRole', data['lang']) }}</a></div>
@@ -262,10 +263,8 @@
                             <label for="server">{{ translate('panelConfig', 'backgroundUpload', data['lang'])
                               }}</label><br>
                             <span id="upload_input">
-                              <input type="file" multiple="false" class="form-control" id="file" name="file" required
+                              <input type="file" multiple="false" class="form-control" id="file" name="file" required style="width: 70%;">
-                                style="width: 70%;">
+                              <button type="button" class="btn btn-info" id="upload-button" onclick="sendFile()" disabled>UPLOAD</button>
-                              <button type="button" class="btn btn-info" id="upload-button" onclick="sendFile()"
-                                disabled>UPLOAD</button>
                             </span>
                           </div>
                         </div>
@@ -281,8 +280,7 @@
                 <div class="card-body">
                   <h4>{{ translate('panelConfig', 'loginBackground', data['lang']) }}</h4><br /><br><br />
                   <form id="photo_form">
-                    <select class="form-select form-control form-control-lg select-css" id="photo" name="photo"
+                    <select class="form-select form-control form-control-lg select-css" id="photo" name="photo" form="photo_form">
-                      form="photo_form">
                       {% for image in data["backgrounds"] %}
                       <option value="{{image}}">{{image}}</option>
                       {% end %}
@@ -290,8 +288,7 @@
                     <div>
                       <br>
                       <h6>{{ translate('panelConfig', 'preview', data['lang']) }}:</h6>
-                      <img style="width: 200px; height: 113px;"
+                      <img style="width: 200px; height: 113px;" src="../../static/assets/images/auth/{{ data['background'] }}">
-                        src="../../static/assets/images/auth/{{ data['background'] }}">
                     </div>
                     <br />
                     <br />

app/frontend/templates/panel/parts/crafty_config_list.html

@@ -0,0 +1,10 @@
+<ul class="nav nav-tabs col-md-12 tab-simple-styled" role="tablist" style="margin-top: 0;">
+    <li class="nav-item term-nav-item">
+        <a class="nav-link {% if data['active_link'] == 'panel_config' %}active{% end %}" href="/panel/panel_config" role="tab" aria-selected="false">
+            <i class="fas fa-file-signature"></i>Panel Config</a>
+    </li>
+    <li class="nav-item term-nav-item">
+        <a class="nav-link {% if data['active_link'] == 'config_json' %}active{% end %}" href="/panel/config_json" role="tab" aria-selected="false">
+            <i class="fas fa-file-signature"></i>Config.json</a>
+    </li>
+</ul>

app/translations/en_EN.json

@@ -233,7 +233,8 @@
         "loginBackground": "Login Background Image",
         "select": "Select",
         "selectImage": "Select an image",
-        "preview": "Preview"
+        "preview": "Preview",
+        "title": "Crafty Configuration"
     },
     "rolesConfig": {
         "config": "Role Config",