AssetList template update

RIGS/static/css/ajax-bootstrap-select.css

@@ -0,0 +1,28 @@
+/*!
+ * Ajax Bootstrap Select
+ *
+ * Extends existing [Bootstrap Select] implementations by adding the ability to search via AJAX requests as you type. Originally for CROSCON.
+ *
+ * @version 1.4.5
+ * @author Adam Heim - https://github.com/truckingsim
+ * @link https://github.com/truckingsim/Ajax-Bootstrap-Select
+ * @copyright 2019 Adam Heim
+ * @license Released under the MIT license.
+ *
+ * Contributors:
+ *   Mark Carver - https://github.com/markcarver
+ *
+ * Last build: 2019-04-23 12:18:56 PM EDT
+ */
+.bootstrap-select .status {
+  background: #f0f0f0;
+  clear: both;
+  color: #999;
+  font-size: 11px;
+  font-style: italic;
+  font-weight: 500;
+  line-height: 1;
+  margin-bottom: -5px;
+  padding: 10px 20px; }
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFqYXgtYm9vdHN0cmFwLXNlbGVjdC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7OztFQWVFO0FBQ0Y7RUFDRSxtQkFBbUI7RUFDbkIsV0FBVztFQUNYLFdBQVc7RUFDWCxlQUFlO0VBQ2Ysa0JBQWtCO0VBQ2xCLGdCQUFnQjtFQUNoQixjQUFjO0VBQ2QsbUJBQW1CO0VBQ25CLGtCQUFrQixFQUFBIiwiZmlsZSI6ImFqYXgtYm9vdHN0cmFwLXNlbGVjdC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiFcbiAqIEFqYXggQm9vdHN0cmFwIFNlbGVjdFxuICpcbiAqIEV4dGVuZHMgZXhpc3RpbmcgW0Jvb3RzdHJhcCBTZWxlY3RdIGltcGxlbWVudGF0aW9ucyBieSBhZGRpbmcgdGhlIGFiaWxpdHkgdG8gc2VhcmNoIHZpYSBBSkFYIHJlcXVlc3RzIGFzIHlvdSB0eXBlLiBPcmlnaW5hbGx5IGZvciBDUk9TQ09OLlxuICpcbiAqIEB2ZXJzaW9uIDEuNC41XG4gKiBAYXV0aG9yIEFkYW0gSGVpbSAtIGh0dHBzOi8vZ2l0aHViLmNvbS90cnVja2luZ3NpbVxuICogQGxpbmsgaHR0cHM6Ly9naXRodWIuY29tL3RydWNraW5nc2ltL0FqYXgtQm9vdHN0cmFwLVNlbGVjdFxuICogQGNvcHlyaWdodCAyMDE5IEFkYW0gSGVpbVxuICogQGxpY2Vuc2UgUmVsZWFzZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlLlxuICpcbiAqIENvbnRyaWJ1dG9yczpcbiAqICAgTWFyayBDYXJ2ZXIgLSBodHRwczovL2dpdGh1Yi5jb20vbWFya2NhcnZlclxuICpcbiAqIExhc3QgYnVpbGQ6IDIwMTktMDQtMjMgMTI6MTg6NTYgUE0gRURUXG4gKi9cbi5ib290c3RyYXAtc2VsZWN0IC5zdGF0dXMge1xuICBiYWNrZ3JvdW5kOiAjZjBmMGYwO1xuICBjbGVhcjogYm90aDtcbiAgY29sb3I6ICM5OTk7XG4gIGZvbnQtc2l6ZTogMTFweDtcbiAgZm9udC1zdHlsZTogaXRhbGljO1xuICBmb250LXdlaWdodDogNTAwO1xuICBsaW5lLWhlaWdodDogMTtcbiAgbWFyZ2luLWJvdHRvbTogLTVweDtcbiAgcGFkZGluZzogMTBweCAyMHB4O1xufVxuIl19 */

RIGS/static/css/ie.css

@@ -0,0 +1,2 @@
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJpZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6W119 */

assets/templates/asset_list.html

@@ -5,13 +5,13 @@
 {% load static %}
 
 {% block css %}
-    <link rel="stylesheet" href="{% static "css/bootstrap-select.min.css" %}"/>
+    <link rel="stylesheet" href="{% static 'css/bootstrap-select.css' %}"/>
-    <link rel="stylesheet" href="{% static "css/ajax-bootstrap-select.css" %}"/>
+    <link rel="stylesheet" href="{% static 'css/ajax-bootstrap-select.css' %}"/>
 {% endblock %}
 
 {% block preload_js %}
-    <script src="{% static "js/bootstrap-select.js" %}"></script>
+    <script src="{% static 'js/bootstrap-select.js' %}"></script>
-    <script src="{% static "js/ajax-bootstrap-select.js" %}"></script>
+    <script src="{% static 'js/ajax-bootstrap-select.js' %}"></script>
 {% endblock %}
 
 {% block content %}
@@ -19,24 +19,26 @@
   <h1 class="text-center">Asset List</h1>
 </div>
 
-<form id="asset-search-form" method="get" class="form-inline pull-right">
+<form id="asset-search-form" method="get" class="form my-2">
-  <div class="input-group pull-right" style="width: auto;">
+  <div class="row py-2">
-    {% render_field form.query|add_class:'form-control' placeholder='Search by Asset ID/Desc/Serial' style="width: 250px"%}
+      <div class="input-group">
-    <label for="query" class="sr-only">Asset ID/Description/Serial Number:</label>
+        {% render_field form.query|add_class:'form-control' placeholder='Search by Asset ID/Desc/Serial' style="width: 250px"%}
-    <span class="input-group-btn"><button type="submit" class="btn btn-primary">Search</button></span>
+        <label for="query" class="sr-only">Asset ID/Description/Serial Number:</label>
-  </div>
+        <span class="input-group-append"><button type="submit" class="btn btn-primary">Search</button></span>
-  <div style="margin-top: 1em;" class="pull-right">
-      <div id="category-group" class="form-group">
-        <label for="category" class="sr-only">Category</label>
-        {% render_field form.category|attr:'multiple'|add_class:'form-control selectpicker' data-none-selected-text="Categories" data-header="Categories" data-actions-box="true" %}
       </div>
-      <div id="status-group" class="form-group">
+  </div>
+  <div class="row py-2 justify-content-end">
+      <div id="category-group" class="form-group px-2">
+        <label for="category" class="sr-only">Category</label>
+        {% render_field form.category|attr:'multiple'|add_class:'form-control custom-select selectpicker' data-none-selected-text="Categories" data-header="Categories" data-actions-box="true" %}
+      </div>
+      <div id="status-group" class="form-group px-2">
         <label for="status" class="sr-only">Status</label>
-        {% render_field form.status|attr:'multiple'|add_class:'form-control selectpicker' data-none-selected-text="Statuses" data-header="Statuses" data-actions-box="true" %}
+        {% render_field form.status|attr:'multiple'|add_class:'form-control custom-select selectpicker' data-none-selected-text="Statuses" data-header="Statuses" data-actions-box="true" %}
       </div>
       <!---TODO: Auto filter whenever an option is selected, instead of using a button -->
-      <button id="filter-submit" type="submit" class="btn btn-default">Filter</button>
+      <button id="filter-submit" type="submit" class="btn btn-secondary">Filter</button>
-    </div>
+  </div>
 </form>
 
 <table class="table">

gulpfile.js

@@ -19,7 +19,8 @@ sass.compiler = require('node-sass');
 function styles(done) {
     return gulp.src(['RIGS/static/scss/**/*.scss',
                     'node_modules/fullcalendar/dist/fullcalendar.css',
-                    'node_modules/ajax-bootstrap-select/dist/css/ajax-bootstrap-select.min.css',
+                    'node_modules/bootstrap-select/dist/css/bootstrap-select.css',
+                    'node_modules/ajax-bootstrap-select/dist/css/ajax-bootstrap-select.css',
                     'node_modules/autocompleter/autocomplete.css',
                     'node_modules/@activix/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css'])
     .pipe(sourcemaps.init())
@@ -47,6 +48,7 @@ function scripts() {
                     'node_modules/@fortawesome/fontawesome-free/js/all.js',
                     'node_modules/moment/moment.js',
                     'node_modules/fullcalendar/dist/fullcalendar.js',
+                    'node_modules/bootstrap-select/dist/js/bootstrap-select.js',
                     'node_modules/ajax-bootstrap-select/dist/js/ajax-bootstrap-select.js',
                     'node_modules/konami/konami.js',
                     'node_modules/autocompleter/autocomplete.js',
@@ -78,6 +80,7 @@ function watchFiles() {
   gulp.watch("RIGS/static/scss/**/*", styles);
   gulp.watch("RIGS/static/js/**/*", scripts);
   gulp.watch(['templates/**/*.html', 'RIGS/templates/**/*.html', 'assets/templates/**/*.html'],  browserSyncReload);
+  //gulp.watch("gulpfile.js", gulp.parallel(styles, scripts)); TODO This causes a reload loop
 }
 
 exports.css = styles;

package.json

@@ -11,6 +11,7 @@
     "autocompleter": "^6.0.2",
     "autoprefixer": "^9.7.4",
     "bootstrap": "^4.4.1",
+    "bootstrap-select": "^1.13.12",
     "fullcalendar": "^3.10.1",
     "gulp-flatten": "^0.4.0",
     "jquery": "^3.4.1",