Some UI fixes for MADmin (mainly for mobile) (#986)

- Sorted the popup loading dialogue and moved to a central component - Added some priority to columns for small screens - Add expand/collapse for the responsive tables
Map-A-Droid · Sep 4, 2020 · 8e5ac12 · 8e5ac12
1 parent 941f8d3
commit 8e5ac12
Show file tree

Hide file tree

Showing 36 changed files with 259 additions and 198 deletions.
diff --git a/static/madmin/static/js/loading_dialogue.js b/static/madmin/static/js/loading_dialogue.js
@@ -0,0 +1,15 @@
+function loadingBlockUI(message) {
+    $.fn.center = function () {
+        this.css("position", "absolute");
+        this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
+        this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
+        return this;
+    }
+
+$.blockUI({css: {
+            height: 'auto',
+            textAlign: 'center',
+            width: 'auto'
+		}, message: '<img src="/static/loading.gif" width="100px" /><br/><h2  style="margin-left: 20px;margin-right: 20px;">' + message + '</h2>' })
+            $('.blockUI.blockMsg').center();
+}
diff --git a/static/madmin/static/style/MAD.css b/static/madmin/static/style/MAD.css
@@ -60,7 +60,7 @@
 }
 
 [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
-    color:# bbb !important;
+    color: #bbb !important;
     border: 1px solid #979797;
     background: #585858 !important;
 }

diff --git a/static/madmin/templates/autoconfig_config_editor.html b/static/madmin/templates/autoconfig_config_editor.html
@@ -7,11 +7,12 @@
 
 {% block scripts %}
 <script src="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/js/bootstrap4-toggle.min.js"></script>
+
 <script type="text/javascript" src="{{ url_for('static', filename='js/madmin_settings.js') }}"></script>
 <script>
 $(document).ready(function () {
     $("#submit").click(function() {
-        $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Saving {{ subtab }}...</h2>' });
+        loadingBlockUI('Saving {{ subtab }}')
         save_data = get_save_data();
         if(isEmptyObj(save_data) != false) {
             alert('No changes have been made');

diff --git a/static/madmin/templates/autoconfig_pending.html b/static/madmin/templates/autoconfig_pending.html
@@ -27,7 +27,7 @@
       var selected_uri = $(this).children("option:selected").val();
       var devices = $('.bulk_sel:checkbox:checked');
       if(devices.length > 0 && confirm('Are you sure you want to bulk set to '+ $(".bulk_update").val() +'?')) {
-        $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Bulk Updating</h2>' });
+          loadingBlockUI("Bulk Updating")
         var status = $(".bulk_update").val() == 'Accept';
         $.each($('.bulk_sel:checkbox:checked'), function() {
           uri = '{{ url_for('api_autoconf') }}/' + $(this).data('identifier');
@@ -39,7 +39,7 @@
     $(".delete_sess").click(function() {
         var session_id = $(this).data('identifier');
         if(confirm('Are you sure you want to delete this session?')) {
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Updating registration...</h2>' });
+            loadingBlockUI("Updating registration")
             $.ajax({
                 url : '{{ url_for('api_autoconf') }}/'+ session_id,
                 type : 'DELETE',
@@ -77,7 +77,7 @@
             additional = "This will create a new device instead of using an existing device.  To use an existing device click on the registration IP address."
         }
         if(confirm('Are you sure you want to '+ msg +' this session?  '+ additional)) {
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Updating registration...</h2>' });
+            loadingBlockUI("Updating registration")
             $.ajax({
                 url : '{{ url_for('api_autoconf') }}/'+ session_id,
                 contentType : 'application/json',

diff --git a/static/madmin/templates/autoconfig_pending_dev.html b/static/madmin/templates/autoconfig_pending_dev.html
@@ -5,9 +5,10 @@
 
 {% block scripts %}
 <script>
+
 $(document).ready(function () {
     $("#submit").click(function() {
-        $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Saving {{ subtab }}...</h2>' });
+        loadingBlockUI('Saving {{ subtab }}')
         save_data = {
             'status': 1,
             'walker_id': $("select[name=walker_id]").val(),

diff --git a/static/madmin/templates/base.html b/static/madmin/templates/base.html
@@ -120,9 +120,19 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js" integrity="sha256-9wRM03dUw6ABCs+AU69WbK33oktrlXamEXMvxUaF+KU=" crossorigin="anonymous"></script>
     <script src="https://cdn.datatables.net/responsive/2.2.5/js/dataTables.responsive.min.js" crossorigin="anonymous"></script>
     <script src="{{ url_for('static', filename='js/dark-mode-switch.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/loading_dialogue.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.Aplus.min.js') }}"></script>
     <script>
+
     $(document).ready(function() {
+        $.fn.center = function () {
+            this.css("position","absolute");
+            this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
+            this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
+            return this;
+        }
+
+
       if (darkSwitch) {
         initTheme();
         darkSwitch.addEventListener('change', () => {
@@ -136,7 +146,9 @@
 
       $("#reload").click(function() {
         if (confirm('Do you really want reload and apply settings?')) {
-          $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Load...</h2>' });
+          $('#navbarNav').removeClass()
+          $("#navbarNav").addClass('navbar-collapse collapse')
+            loadingBlockUI("Applying")
           $(location).attr('href', '{{ url_for('reload') }}');
         }
       });

diff --git a/static/madmin/templates/installation_status.html b/static/madmin/templates/installation_status.html
@@ -9,12 +9,12 @@
         $(tableGridHtmlId).DataTable({
             "data": gridData,
             "columns": [
-                { data: 'origin', title: 'Device' },
-                { data: 'jobname', title: 'File / Command' },
-                { data: 'status', title: 'Status' },
-                { data: null, title: 'Init Date/Time' },
-                { data: null, title: 'Date/Time' },
-                { data: null, title: 'Action' }
+                { data: 'origin', title: 'Device', responsivePriority: 1},
+                { data: 'jobname', title: 'File / Command', responsivePriority: 3 },
+                { data: 'status', title: 'Status', responsivePriority: 2 },
+                { data: null, title: 'Init Date/Time',responsivePriority: 6 },
+                { data: null, title: 'Date/Time', responsivePriority: 5 },
+                { data: null, title: 'Action',responsivePriority: 4 }
             ],
             "columnDefs": [
                 {

diff --git a/static/madmin/templates/madmin_apk_root.html b/static/madmin/templates/madmin_apk_root.html
@@ -39,7 +39,7 @@
         var fd = new FormData();
         fd.append('file', $('#file-input')[0].files[0]);
         fd.append('filename', $('#file-input')[0].files[0].name);
-        $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Uploading APK...</h2>' });
+        loadingBlockUI("Uploading APK")
         $.ajax({
             url: url,
             type: 'POST',
@@ -65,7 +65,7 @@
 
     $(".search").click(function() {
         if(confirm('Are you sure you want to search for an updated APK?  Currently no locks so dont spam it :)')) {
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Starting search...</h2>' });
+            loadingBlockUI("Starting search")
             rpc_call = {
               'call': 'search'
             }
@@ -93,7 +93,7 @@
 
     $(".bulk_update").click(function() {
         if(confirm('Are you sure you want to Update and Download every APK?')) {
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Bulk Updating...</h2>' });
+            loadingBlockUI("Bulk Updating")
             rpc_call = {
               'call': 'search_download'
             }
@@ -120,7 +120,7 @@
     $(".delete").click(function() {
         if(confirm('Are you sure you want to delete this APK?')) {
             var elem =  $(this);
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Deleting an APK...</h2>' });
+            loadingBlockUI("Deleting an APK")
             var apk_type = $(this).data('apk_type');
             var apk_arch = $(this).data('apk_arch');
             var url = '{{ url_for('api_madapk') }}/'+ apk_type +'/'+ apk_arch;
@@ -203,7 +203,7 @@
 
     function download_apk(){
         if(confirm('Are you sure you want to download the APK?')) {
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Starting download...</h2>' });
+            loadingBlockUI("Starting download")
             rpc_call = {
               'call': 'import'
             }

diff --git a/static/madmin/templates/quests.html b/static/madmin/templates/quests.html
@@ -57,9 +57,7 @@
 
 $(document).ready(function() {
     $("#navgyms").addClass("active");
-    $.blockUI({
-        message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Load...</h2>'
-    });
+    loadingBlockUI("Loading")
     $.ajax({
         type: "GET",
         url: "{{ url_for('get_quests') }}?fence={{fence}}",

diff --git a/static/madmin/templates/settings_areas.html b/static/madmin/templates/settings_areas.html
@@ -11,7 +11,7 @@
     $(".delete").click(function() {
         if(confirm('Are you sure you want to delete this resource?')) {
             var elem =  $(this);
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Deleting a {{ subtab }}...</h2>' });
+            loadingBlockUI('Deleting a  {{ subtab }}' )
             $.ajax({
                 url : '{{ base_uri }}/'+ $(this).data('identifier'),
                 type : 'DELETE',
@@ -47,7 +47,7 @@
   function recalculate_route() {
     if(confirm('Are you sure you want to recalculate this route?')) {
         var elem = $(this);
-        $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Recalculating routefile...</h2>' });
+        loadingBlockUI("Recalculating routefile")
         rpc_call = {
           'call': 'recalculate'
         }

diff --git a/static/madmin/templates/settings_auth.html b/static/madmin/templates/settings_auth.html
@@ -11,7 +11,7 @@
     $(".delete").click(function() {
         if(confirm('Are you sure you want to delete this resource?')) {
             var elem =  $(this);
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Deleting a {{ subtab }}...</h2>' });
+            loadingBlockUI('Deleting a  {{ subtab }}' )
             $.ajax({
                 url : '{{ base_uri }}/'+ $(this).data('identifier'),
                 type : 'DELETE',

diff --git a/static/madmin/templates/settings_devices.html b/static/madmin/templates/settings_devices.html
@@ -38,15 +38,15 @@
         var uri = '{{ base_uri }}/'+ $(this).data('identifier');
         var walker_uri = $(this).children("option:selected").attr('name');
         var patch_data = {"walker": walker_uri};
-        $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Load...</h2>' });
+        loadingBlockUI("Loading")
         bulk_patch(uri, patch_data);
         $.unblockUI();
     });
     $(".bulk_update").change(function() {
       var selected_uri = $(this).children("option:selected").val();
       var devices = $('.bulk_sel:checkbox:checked');
       if(devices.length > 0 && confirm('Are you sure you want to bulk update?')) {
-        $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Bulk Updating</h2>' });
+        loadingBlockUI("Bulk Updating");
         var data = {};
         var operation = bulk_patch;
         if(selected_uri.indexOf('walker') > 0) {
@@ -69,7 +69,7 @@
     $(".delete").click(function() {
         if(confirm('Are you sure you want to delete this resource?')) {
             var elem =  $(this);
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Deleting a {{ subtab }}...</h2>' });
+            loadingBlockUI('Deleting a  {{ subtab }}' )
             $.ajax({
                 url : '{{ base_uri }}/'+ $(this).data('identifier'),
                 type : 'DELETE',
@@ -97,7 +97,7 @@
     });
     $(".dev_state").click(function() {
         if(confirm('Are you sure you want to toggle state of this device?')) {
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Toggling device state...</h2>' });
+            loadingBlockUI("Toggling device state")
             rpc_call = {
               'call': 'device_state',
               'args': {

diff --git a/static/madmin/templates/settings_geofences.html b/static/madmin/templates/settings_geofences.html
@@ -11,7 +11,7 @@
     $(".delete").click(function() {
         if(confirm('Are you sure you want to delete this resource?')) {
             var elem =  $(this);
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Deleting a {{ subtab }}...</h2>' });
+            loadingBlockUI('Deleting a  {{ subtab }}' );
             $.ajax({
                 url : '{{ base_uri }}/'+ $(this).data('identifier'),
                 type : 'DELETE',

diff --git a/static/madmin/templates/settings_ivlists.html b/static/madmin/templates/settings_ivlists.html
@@ -11,7 +11,7 @@
     $(".delete").click(function() {
         if(confirm('Are you sure you want to delete this resource?')) {
             var elem =  $(this);
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Deleting a {{ subtab }}...</h2>' });
+            loadingBlockUI('Deleting a  {{ subtab }}' );
             $.ajax({
                 url : '{{ base_uri }}/'+ $(this).data('identifier'),
                 type : 'DELETE',

diff --git a/static/madmin/templates/settings_pogoauth.html b/static/madmin/templates/settings_pogoauth.html
@@ -11,7 +11,7 @@
     $(".delete").click(function() {
         if(confirm('Are you sure you want to delete this resource?')) {
             var elem =  $(this);
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Deleting a {{ subtab }}...</h2>' });
+            loadingBlockUI('Deleting a  {{ subtab }}' );
             $.ajax({
                 url : '{{ base_uri }}/'+ $(this).data('identifier'),
                 type : 'DELETE',

diff --git a/static/madmin/templates/settings_sharedsettings.html b/static/madmin/templates/settings_sharedsettings.html
@@ -11,7 +11,7 @@
     $(".delete").click(function() {
         if(confirm('Are you sure you want to delete this resource?')) {
             var elem =  $(this);
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Deleting a {{ subtab }}...</h2>' });
+            loadingBlockUI('Deleting a  {{ subtab }}' );
             $.ajax({
                 url : '{{ base_uri }}/'+ $(this).data('identifier'),
                 type : 'DELETE',

diff --git a/static/madmin/templates/settings_singlearea.html b/static/madmin/templates/settings_singlearea.html
@@ -14,7 +14,7 @@
 }
 $(document).ready(function () {
     $("#submit").click(function() {
-        $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Saving {{ subtab }}...</h2>' });
+        loadingBlockUI('Saving a {{ subtab }}' );
         save_data = get_save_data();
         if(isEmptyObj(save_data) != false) {
             alert('No changes have been made');

diff --git a/static/madmin/templates/settings_singleauth.html b/static/madmin/templates/settings_singleauth.html
@@ -10,7 +10,7 @@
 <script>
 $(document).ready(function () {
     $("#submit").click(function() {
-        $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Saving {{ subtab }}...</h2>' });
+        loadingBlockUI('Saving {{ subtab }}');
         save_data = get_save_data();
         if(isEmptyObj(save_data) != false) {
             alert('No changes have been made');

diff --git a/static/madmin/templates/settings_singledevice.html b/static/madmin/templates/settings_singledevice.html
@@ -16,7 +16,7 @@
         if(!confirm('Do you really wanna delete all information about visited pokestops for device {{ element.origin }}?')) {
           return;
         }
-        $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Clearing ...</h2>' });
+        loadingBlockUI("Clearing");
         rpc_call = {
           'call': 'flush_level'
         }

diff --git a/static/madmin/templates/settings_singlegeofence.html b/static/madmin/templates/settings_singlegeofence.html
@@ -10,7 +10,7 @@
 <script>
 $(document).ready(function () {
     $("#submit").click(function() {
-        $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Saving {{ subtab }}...</h2>' });
+        loadingBlockUI('Saving {{ subtab }}');
         save_data = get_save_data();
         if(isEmptyObj(save_data) != false) {
             alert('No changes have been made');

diff --git a/static/madmin/templates/settings_singleivlist.html b/static/madmin/templates/settings_singleivlist.html
@@ -12,7 +12,7 @@
 <script>
     $(document).ready(function () {
         $("#submit").click(function() {
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Saving {{ subtab }}...</h2>' });
+            loadingBlockUI('Saving {{ subtab }}');
             save_data = get_save_data();
             if(isEmptyObj(save_data) != false) {
                 alert('No changes have been made');
@@ -138,7 +138,7 @@ <h1 class="display-5">{{ element.monlist }}</h1>
         </div>
         <div class="form-gropup" id="add-pokemon">
           <label for="monlist-search">List of mons</label>
-          <input type="text" id="pokemon-search" placeholder="Search for mon name..." class="form-control" data-skip="true">
+          <input type="text" id="pokemon-search" placeholder="Search for mon name" class="form-control" data-skip="true">
           <small class="form-text text-muted result-hint" style="display: none">Click on a result to add it to the list:</small>
           <div id="pokemon-search-output" class="nav nav-pills"></div>
         </div>

diff --git a/static/madmin/templates/settings_singlepogoauth.html b/static/madmin/templates/settings_singlepogoauth.html
@@ -10,7 +10,7 @@
 <script>
 $(document).ready(function () {
     $("#submit").click(function() {
-        $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Saving {{ subtab }}...</h2>' });
+        loadingBlockUI('Saving {{ subtab }}');
         save_data = get_save_data();
         if(isEmptyObj(save_data) != false) {
             alert('No changes have been made');

diff --git a/static/madmin/templates/settings_singleroutecalc.html b/static/madmin/templates/settings_singleroutecalc.html
@@ -10,7 +10,7 @@
 <script>
 $(document).ready(function () {
     $("#submit").click(function() {
-        $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Saving {{ subtab }}...</h2>' });
+        loadingBlockUI('Saving {{ subtab }}');
         save_data = get_save_data();
         if(isEmptyObj(save_data) != false) {
             alert('No changes have been made');

diff --git a/static/madmin/templates/settings_singlesharedsetting.html b/static/madmin/templates/settings_singlesharedsetting.html
@@ -12,7 +12,7 @@
 <script>
 $(document).ready(function () {
     $("#submit").click(function() {
-        $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Saving {{ subtab }}...</h2>' });
+        loadingBlockUI('Saving {{ subtab }}');
         save_data = get_save_data();
         if(isEmptyObj(save_data) != false) {
             alert('No changes have been made');

diff --git a/static/madmin/templates/settings_singlewalker.html b/static/madmin/templates/settings_singlewalker.html
@@ -16,7 +16,7 @@
 <script type="text/javascript">
     $(document).ready(function () {
         $("#submit").click(function() {
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Saving {{ subtab }}...</h2>' });
+            loadingBlockUI('Saving {{ subtab }}');
             save_data = get_save_data();
             if(isEmptyObj(save_data) != false) {
                 alert('No changes have been made');

diff --git a/static/madmin/templates/settings_walkerarea.html b/static/madmin/templates/settings_walkerarea.html
@@ -43,7 +43,7 @@
         if(validate_walker() == false) {
             return;
         }
-        $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Saving {{ subtab }}...</h2>' });
+        loadingBlockUI('Saving {{ subtab }}');
         save_data = get_save_data();
         if(isEmptyObj(save_data) != false) {
             alert('No changes have been made');

diff --git a/static/madmin/templates/settings_walkers.html b/static/madmin/templates/settings_walkers.html
@@ -11,7 +11,7 @@
     $(".delete").click(function() {
         if(confirm('Are you sure you want to delete this resource?')) {
             var elem =  $(this);
-            $.blockUI({ message: '<img src="{{ url_for('static', filename='loading.gif') }}" width="100px" /><br /><h2>Deleting a {{ subtab }}...</h2>' });
+            loadingBlockUI('Deleting a  {{ subtab }}' );
             $.ajax({
                 url : '{{ base_uri }}/'+ $(this).data('identifier'),
                 type : 'DELETE',