Text search + new filters + stall count in changelog (#116)

* Separate TPC/NACS, combine open/expanding for filtering, fix tesla.com links, add new filter fields/controls
* Make expanding details more consistent between Changes and Data
* Update 'open to' filter, reformat plug icons and Changes view accordingly
* Better NACS clarity in InfoWindow details
* Make accessible + trailer-friendly stalls more prominent
* Add 'no' icons to About page (e.g. not accessible, no solar canopy, etc)
* a11y improvements for plug icons and Construction vs Permit status

package.json

@@ -1,6 +1,6 @@
 {
   "name": "supercharge.info",
-  "version": "3.9.0",
+  "version": "4.0.0",
   "description": "map",
   "scripts": {
     "build": "echo use 'npm run prodbuild' or 'npm run devbuild'",
@@ -52,6 +52,7 @@
     "core-js": "^3.31.1",
     "datatables.net": "^1.13.5",
     "datatables.net-bs": "^1.13.5",
+    "dayjs": "^1.11.10",
     "highcharts": "^10.3.3",
     "jquery": "3.5.1",
     "jquery-validation": "^1.19.5",

src/main/primary_entry/css/global/SiteFilterControl.css

@@ -3,11 +3,12 @@
     max-height: 98%;
 }
 #filter-dialog .modal-body {
+    padding-top: 5px;
     max-height: calc(100vh - 125px);
 }
 
 #filter-dialog td {
-    padding: 8px;
+    padding: 6px 8px;
     white-space: nowrap;
 }
 #filter-dialog select, #filter-dialog button, #filter-dialog td {
@@ -61,15 +62,16 @@ button.reset span.glyphicon-filter {
 .bootstrap-select .dropdown-toggle .caret {
     position: inherit;
 }
-.bootstrap-select button.dropdown-toggle {
+.bootstrap-select button.dropdown-toggle, input.form-control.filled {
     background-color: #def;
 }
-.bootstrap-select button.dropdown-toggle.bs-placeholder {
+.bootstrap-select button.dropdown-toggle.bs-placeholder, input.form-control::placeholder {
     color: #bbb;
     border-color: #ddd;
     background-color: #fff;
+    font-style: italic;
 }
-.bootstrap-select button.dropdown-toggle.bs-placeholder:hover, .form-inline button.btn:hover {
+.bootstrap-select button.dropdown-toggle.bs-placeholder:hover, .form-inline button.btn:hover, input.form-control:hover, input.form-control:hover::placeholder {
     background-color: #e6e6e6;
     border-color: #adadad;
 }
@@ -82,11 +84,11 @@ ul.dropdown-menu.inner {
     overflow-y: auto;
 }
 
-.status-select .filter-option-inner-inner span {
+.filter-option-inner-inner span {
     font-size: 0px;
 }
 
-.status-select img, button.form-control.filter img {
+.filter-option-inner-inner img, .dropdown-menu.inner img, button.form-control.filter img {
     width: 18px;
     height: 18px;
     margin: -3px 2px 0 2px;
@@ -101,14 +103,19 @@ ul.dropdown-menu.inner {
     color: lightsteelblue;
 }
 
-.form-inline button.form-control {
+.form-inline button.form-control, .form-inline input.form-control {
     display: inline-block;
     padding: 0 12px;
     height: 28px;
     width: auto;
     vertical-align: middle;
 }
 
+input.form-control {
+    border: 1px solid #ddd;
+    height: 28px;
+}
+
 button.clear {
     color: darkred;
     font-weight: bold;

src/main/primary_entry/css/global/layout.css

@@ -63,11 +63,24 @@ td span.status-select.OPEN {
 .dataTables_paginate.paging_simple_numbers {
     text-align: center !important;
 }
-.dt-control {
+
+table.dataTable th.dt-control {
     padding-left: 0px !important;
     padding-right: 0px !important;
 }
 
+.dataTable .child {
+    width: 99%;
+    cursor: auto;
+    background-color: #ffd;
+    margin-left: 4px;
+    border-left: 4px dotted #999;
+}
+.dataTable .child tr, .dataTable .child td {
+    padding: 1px 8px;
+    vertical-align: top;
+}
+
 table .notes, .info-window-content .notes {
     white-space: pre-wrap !important;
     padding-top: 2px;

src/main/primary_entry/css/page/changes/Changes.css

@@ -72,17 +72,6 @@
     text-decoration: none;
 }
 
-#changes-table .child {
-    width: 99%;
-    cursor: auto;
-    background-color: #ffd;
-    margin-left: 4px;
-    border-left: 4px dotted #999;
-}
-#changes-table .child tr, #changes-table .child td {
-    padding: 1px 8px;
-    vertical-align: top;
-}
 #changes-table li {
     white-space: pre;
 }
@@ -98,7 +87,7 @@
 #changes-table .wide {
     display: inline;
 }
-@media (max-width: 928px) {
+@media (max-width: 1050px) {
     #changes-table .narrow {
         display: inline !important;
     }

src/main/primary_entry/css/page/data/Data.css

@@ -62,6 +62,7 @@
     min-width: 100%;
     max-width: 500%;
     padding: 8px;
+    margin-right: 5px;
     background-color: #ffd;
 }