diff --git a/bower.json b/bower.json index fd84047..f3ead65 100644 --- a/bower.json +++ b/bower.json @@ -15,6 +15,7 @@ "datetimepicker": "~2.5.4", "SpinKit": "~1.2.5", "jQuery.stickyFooter": "https://github.com/miWebb/jQuery.stickyFooter.git#~1.2.3", - "bootstrap-sass": "^3.3.7" + "bootstrap-sass": "^3.3.7", + "list.js": "^1.3.0" } } diff --git a/gulpfile.js b/gulpfile.js index ecb3ff4..8304351 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -47,6 +47,7 @@ const jsDashboardLibs = [ "bower_components/bootstrap-sass/assets/javascripts/bootstrap.js", "bower_components/Sortable/Sortable.js", "bower_components/datetimepicker/build/jquery.datetimepicker.full.js", + "bower_components/list.js/dist/list.js", "bower_components/simplemde/dist/simplemde.min.js" ]; diff --git a/readme.md b/readme.md index 62818c5..0b514b9 100644 --- a/readme.md +++ b/readme.md @@ -51,7 +51,8 @@ First add a function to generate the page: 'sortcol' => false, 'delete' => true, 'create' => true, - 'export' => true + 'export' => true, + 'filter' => true ]); } ``` @@ -71,7 +72,8 @@ First add a function to generate the page: 'sortcol' => 'order', 'delete' => false, 'create' => true, - 'export' => true + 'export' => true, + 'filter' => true ]); } ``` @@ -84,6 +86,7 @@ First add a function to generate the page: * `delete`: A `delete` button will appear in the list if this is set to `true` * `create`: A `new` button will appear in the heading if this is set to `true` * `export`: An `export` button will appear in the heading if this is set to `true` +* `filter`: An input box will appear below the heading that can filter rows by input if this is set to `true` #### Editable Item diff --git a/resources/assets/js/dashboard.js b/resources/assets/js/dashboard.js index cecea2a..dc50e70 100644 --- a/resources/assets/js/dashboard.js +++ b/resources/assets/js/dashboard.js @@ -193,10 +193,25 @@ function editListInit() { } }; + // initialize filter functionality if the filter-input element exists + const filterInputInit = function() { + const $filter = $("#filter-input"); + + if ($filter.length) { + // empty the filter + $filter.val(""); + + const filterList = new List("edit-list-wrapper", { + valueNames: [ "title" ] + }); + } + }; + newButtonInit(); editButtonInit(); deleteButtonInit(); sortRowInit(); + filterInputInit(); } function editItemInit() { diff --git a/resources/assets/sass/dashboard.scss b/resources/assets/sass/dashboard.scss index 1f3838d..6ca6676 100644 --- a/resources/assets/sass/dashboard.scss +++ b/resources/assets/sass/dashboard.scss @@ -23,7 +23,7 @@ $fa-font-path: "/fonts"; body { @include font-sans; - min-width: 350px; + min-width: 440px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -87,6 +87,19 @@ body { padding-bottom: 0px; background-color: lighten($c-dashboard-light, 1%); + @media (max-width: $screen-xs-max) { + padding: 0px; + } + + .search { + margin-bottom: 10px; + width: 100%; + + @media (max-width: $screen-xs-max) { + margin-bottom: 0px; + } + } + .help-text { margin-top: 10px; margin-bottom: 10px; @@ -246,11 +259,16 @@ body { } .title-column { + float: left; padding-top: 6px; padding-bottom: 6px; padding-left: 0px; font-family: "Lucida Console", Monaco, monospace; + @media (max-width: $screen-xs-max) { + font-size: 12px; + } + .column { float: left; margin-right: 10px; @@ -258,6 +276,7 @@ body { } .button-column { + float: right; padding-right: 0px; padding-left: 0px; text-align: right; @@ -268,6 +287,11 @@ body { height: 26px; padding-top: 1px; padding-bottom: 2px; + + @media (max-width: $screen-xs-max) { + height: 20px; + font-size: 11px; + } } } } diff --git a/resources/views/dashboard/edit-list.blade.php b/resources/views/dashboard/edit-list.blade.php index 1a1bc3a..d55df56 100644 --- a/resources/views/dashboard/edit-list.blade.php +++ b/resources/views/dashboard/edit-list.blade.php @@ -1,51 +1,59 @@ @extends('dashboard.core') @section('dashboard-heading') - @if($export == true) + @if($export) @endif - @if($create == true) + @if($create) @endif @endsection @section('dashboard-body') - + + @endforeach + + @endsection