design updates and fixes

SteveKueng · Oct 15, 2023 · 5611ad8 · 5611ad8
1 parent c7532fc
commit 5611ad8
Show file tree

Hide file tree

Showing 17 changed files with 305 additions and 304 deletions.
diff --git a/app/icons/static/icons/js/icons.js b/app/icons/static/icons/js/icons.js
@@ -62,29 +62,26 @@ function initIconsTable() {
             },
             complete: function(jqXHR, textStatus){
                   window.clearInterval(poll_loop);
-                  $('#process_progress').modal('hide');
+                  $("#item-count-badge").text(jqXHR.responseJSON.length);
                 },
             global: false,
         },
-        columnDefs: [
-         { "targets": 0,
-            "width": "60px",
+        columnDefs: [{
+            "targets": 0,
             "render": render_icon,
             "searchable": false,
-         },
-         {
+        },
+        {
             "targets": 1,
-            //"width": "40%",
             "render": render_name,
-          },],
-         "sDom": "<t>",
-         "bPaginate": false,
-         //"scrollY": "100vh",
-         "bInfo": false,
-         "autoWidth": false,
-         "bFilter": true,
-         "bStateSave": false,
-         "aaSorting": [[1,'asc']]
+        },],
+        'sDom': '"top"i',
+        "paging":false,
+        "scrollY": 'calc(100vh - 350px)',
+        "scrollCollapse": true,
+        "bFilter": true,
+        "bStateSave": true,
+        "aaSorting": [[0,'asc']]
         });
         // start our monitoring timer loop
         monitor_icon_list();
@@ -94,16 +91,12 @@ function initIconsTable() {
         searchField.keyup(function(){
             thisTable.search($(this).val()).draw();
         });
-        //searchField.trigger('keyup');
 }
 
 
 function cancelEdit() {
-    //$('#cancelEditConfirmationModal').modal('hide');
     hideSaveOrCancelBtns();
     $("#iconItem").modal("hide");
-    //$('.modal-backdrop').remove();
-    //getIconItem(current_pathname);
 }
 
 

diff --git a/app/icons/templates/icons/icons.html b/app/icons/templates/icons/icons.html
@@ -11,21 +11,29 @@
 <script type='text/javascript' src='{% get_static_prefix %}js/mwa_editor_shared.js'></script>
 {% endblock java_script %}
 
+{% block page_title %}Icons <span class="badge bg-secondary" id="item-count-badge">0</span>{% endblock %}
+
 {% block content %}
 <div class="row">
   <div class="col-12">
-    <div class="form-inline">
-        <div class="form-group">
-              {% if perms.pkgsinfo.add_pkginfofile %}
-              <div class="btn-group">
-                  <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#newIconModal">
-                      New icon
-                  </button>
-              </div>
-              {% endif %}
+    <div class="card mb-3">
+      <div class="card-body">
+        <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
+          <div class="btn-group" role="group" aria-label="First group">
+            <button type="button" class="btn btn-success {% if not perms.pkgsinfo.add_pkginfofile %}disabled{% endif %}" data-bs-toggle="modal" data-bs-target="#newIconModal">
+                New icon
+            </button>
+          </div>
         </div>
+      </div>
     </div>
-    <div id='item_list'>
+  </div>
+</div> <!-- /row -->
+
+<div class="row">
+  <div class="col-12">
+    <div class="card mb-3">
+      <div class="card-body">
         <table class="table table-striped wraptext" id='list_items'>
           <thead>
             <tr><th>Icon</th><th>Name</th></tr>

diff --git a/app/inventory/static/js/items.js b/app/inventory/static/js/items.js
@@ -4,14 +4,11 @@
     original version by Joe Wollard; this version by Greg Neagle
 */
 
-$(document).ready(function()
-{
+$(document).ready(function() {
     // Perform the json call and format the results so that DataTables will
     // understand it.
-    var process_json = function( sSource, aoData, fnCallback )
-    {
-        $.getJSON( sSource, function(json, status, jqXHR)
-        {
+    var process_json = function( sSource, aoData, fnCallback ) {
+        $.getJSON( sSource, function(json, status, jqXHR) {
             // update the count info badge
             $("#item-count-badge").text(json.length);
 
@@ -21,17 +18,14 @@ $(document).ready(function()
     }
 
 
-    var version_count_template = function(name, version, count)
-    {
+    var version_count_template = function(name, version, count) {
         return "<a href='?name=" + encodeURIComponent(name) 
             + "&version=" + encodeURIComponent(version) + "'>" + version 
-            + "<span class='badge badge-info pull-right'>" + count + "</span>"
+            + " <span class='badge rounded-pill text-bg-secondary'>" + count + "</span>"
             + "</a><br />";
     }
 
-
-    var format_versions_column = function(data, type, rowObject)
-    {
+    var format_versions_column = function(data, type, rowObject) {
         out = ''
         for(var i = 0; i < data.length; i++)
         {
@@ -46,43 +40,45 @@ $(document).ready(function()
         return out;
     }
 
-
-    var format_name_column = function(data, type, rowObject)
-    {
+    var format_name_column = function(data, type, rowObject) {
         return '<a href="?name=' + encodeURIComponent(data)
             + '">' + data + "</a>";
     }
 
-
     oTable = $("#inventory-items-table").dataTable({
         "sAjaxSource": window.location.href + ".json",
         "fnServerData": process_json,
         "paging":false,
         'sDom': '"top"i',
+        "scrollY": 'calc(100vh - 270px)',
+        "scrollCollapse": true,
         "bStateSave": true,
-        "aaSorting": [[1,'desc']],
+        "aaSorting": [[0,'asc']],
         "aoColumns": [
             {'mData': 'name',
              'mRender': format_name_column
              },
             {'mData': 'versions',
              'mRender': format_versions_column
             }
-        ]
+        ],
+        responsive: {
+            details: false
+        }
     });
 
-    $('#listSearchField').keyup(function(){
+    $('#listSearchField').keyup(function() {
         oTable.fnFilter( $(this).val() );       
     });
-    $('#SearchFieldMobile').keyup(function(){
+    $('#SearchFieldMobile').keyup(function() {
         oTable.fnFilter( $(this).val() );    
     });
 
-    $('#listSearchField').change(function(){
+    $('#listSearchField').change(function() {
         $('#listSearchField').keyup();
     });
 
-    $('#SearchFieldMobile').change(function(){
+    $('#SearchFieldMobile').change(function() {
         $('#SearchFieldMobile').keyup();
     });
 });
diff --git a/app/inventory/templates/inventory/index.html b/app/inventory/templates/inventory/index.html
@@ -1,7 +1,6 @@
 {% extends 'base.html' %}
 
-<!-- page title -->
-{% block page_title %}<a href="{% url 'inventory.views.items' %}" class="navbar-brand" >Inventory</a>{% endblock %}
+{% block page_title %}Inventory{% endblock %}
 
 {% block content %}
   {% with machine_list=machines list_title='Inventory Clients' %}

diff --git a/app/inventory/templates/inventory/item_detail.html b/app/inventory/templates/inventory/item_detail.html
@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 <!-- page title -->
-{% block page_title %}<a href="{% url 'inventory.views.items' %}" class="navbar-brand" >Inventory</a>{% endblock %}
+{% block page_title %}Inventory{% endblock %}
 
 {% block content %}
 {% with inventory_items=item_detail.instances list_title='Machines' %}

diff --git a/app/inventory/templates/inventory/items.html b/app/inventory/templates/inventory/items.html
@@ -5,17 +5,25 @@
 <script type='text/javascript' src='{% get_static_prefix %}js/items.js'></script>
 {% endblock %}
 
-<!-- page title -->
-{% block page_title %}<a href="{% url 'inventory.views.items' %}" class="navbar-brand" >Inventory</a>{% endblock %}
+<!-- page title  -->
+{% block page_title %}Inventory <span class="badge bg-secondary" id="item-count-badge">0</span>{% endblock %}
 
 {% block content %}
-<table id='inventory-items-table' class='table table-striped table-condensed table-hov'>
-    <thead>
-        <tr><th>Name</th><th>Version(s)</th></tr>
-    </thead>
-    <tbody>
-        <!-- table is filled via AJAX/JSON calls by DataTables -->
-        <!-- see js/items.js -->
-    </tbody>
-</table>
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+          <div class="card-body">
+            <table id='inventory-items-table' class='table table-striped table-hover'>
+                <thead>
+                    <tr><th>Name</th><th>Version(s)</th></tr>
+                </thead>
+                <tbody>
+                    <!-- table is filled via AJAX/JSON calls by DataTables -->
+                </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
 {% endblock %}
diff --git a/app/inventory/templates/inventory/machinetable.html b/app/inventory/templates/inventory/machinetable.html
@@ -1,5 +1,4 @@
 {% if machine_list|length %}
-  <p/>
   <table class='clientlist table table-striped table-condensed'>
       <thead>
           <tr>

diff --git a/app/manifests/static/manifests/js/manifests.js b/app/manifests/static/manifests/js/manifests.js
@@ -121,24 +121,21 @@ function initManifestsTable() {
             },
             complete: function(jqXHR, textStatus) {
                 window.clearInterval(poll_loop);
-                $('#process_progress').modal('hide');
+                $("#item-count-badge").text(jqXHR.responseJSON.length);
             },
             global: false,
         },
-        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
-            $('td', nRow).addClass('table-list-item');
-		},
-         "columnDefs": [
-          { "targets": 0,
-            "render": render_name,
-          }],
-         "sDom": "<t>",
-         "bPaginate": false,
-         "bInfo": false,
-         "autoWidth": false,
-         "bFilter": true,
-         "bStateSave": false,
-         "aaSorting": [[0,'asc']]
+        "columnDefs": [{
+        "targets": 0,
+        "render": render_name,
+        }],
+        'sDom': '"top"i',
+        "paging":false,
+        "scrollY": 'calc(100vh - 350px)',
+        "scrollCollapse": true,
+        "bFilter": true,
+        "bStateSave": true,
+        "aaSorting": [[0,'asc']]
      });
      // start our monitoring timer loop
      monitor_manifest_list();

diff --git a/app/manifests/templates/manifests/manifests.html b/app/manifests/templates/manifests/manifests.html
@@ -19,25 +19,32 @@
 <body {% if manifest_name %}onLoad="getManifestItem('{{manifest_name}}')"{% endif %}>
 {% endblock %}
 
+{% block page_title %}Manifests <span class="badge bg-secondary" id="item-count-badge">0</span>{% endblock %}
+
 {% block content %}
 <div class="row">
-  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-        <div class="form-inline">
-            <div class="form-group">
-                  <div class="btn-group">
-                      <button type="button" class="btn btn-default" data-bs-toggle="modal" data-bs-target="#searchManifestModal">
-                          Search manifests
-                      </button>
-                  </div>
-                  {% if perms.manifests.add_manifestfile %}
-                  <div class="btn-group">
-                      <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#newManifestModal">
-                          New manifest
-                      </button>
-                  </div>
-                  {% endif %}
-            </div>
+  <div class="col-12">
+    <div class="card mb-3">
+      <div class="card-body">
+        <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
+          <div class="btn-group" role="group" aria-label="First group">
+            <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#searchManifestModal">
+              Search manifests
+            </button>
+            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#newManifestModal">
+              New manifest
+            </button>
+          </div>
         </div>
+      </div>
+    </div>
+  </div>
+</div> <!-- /row -->
+
+<div class="row">
+  <div class="col-12">
+    <div class="card mb-3">
+      <div class="card-body">
         <table class="table table-striped wraptext" id='list_items'>
           <thead>
             <tr><th>Name</th></tr>
@@ -46,7 +53,8 @@
               <!-- table is filled via AJAX/JSON calls by DataTables -->
           </tbody>
         </table>
-
+      </div>
+    </div>
   </div>
 </div>
 <!-- data storage -->