Add nice-select support for selects with over 30 options.

admin/configure.php

@@ -172,6 +172,7 @@ function aprspass ($callsign) {
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
     <meta http-equiv="pragma" content="no-cache" />
     <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet" type="text/css" href="css/nice-select.min.css?ver=<?php echo $configPistarRelease['Pi-Star']['Version']; ?>" />
     <meta http-equiv="Expires" content="0" />
     <title><?php echo "$MYCALL"." - ".$lang['digital_voice']." ".$lang['dashboard']." - ".$lang['configuration'];?></title>
     <link rel="stylesheet" type="text/css" href="css/pistar-css.php?version=0.95" />
@@ -5001,6 +5002,17 @@ function resizeIframe(obj) {
 <br />
 </div>
 </div>
+<script type="text/javascript" src="/nice-select.min.js"></script>
+<script type="text/javascript">
+    var selectize = document.querySelectorAll('select')
+    var options = {searchable: true};
+    selectize.forEach(function(select){
+        if( select.length > 30 ) {
+            select.classList.add("small", "selectize");
+            NiceSelect.bind(select, options);
+        }
+    });
+</script>
 </body>
 </html>
 
@@ -5015,6 +5027,17 @@ function resizeIframe(obj) {
 <br />
 </div>
 </div>
+<script type="text/javascript" src="/nice-select.min.js"></script>
+<script type="text/javascript">
+    var selectize = document.querySelectorAll('select')
+    var options = {searchable: true};
+    selectize.forEach(function(select){
+        if( select.length > 30 ) {
+            select.classList.add("small", "selectize");
+            NiceSelect.bind(select, options);
+        }
+    });
+</script>
 </body>
 </html>
 <?php } ?>

css/pistar-css.php

@@ -410,6 +410,16 @@
     }
 }
 
+/* nice-select dropdowns */
+.nice-select.small, .nice-select-dropdown li.option {
+        height: 24px !important;
+        min-height: 24px !important;
+        line-height: 24px !important;
+}
+.nice-select.small ul li:nth-of-type(2) {
+        clear: both;
+}
+
 /* Aria CSS Here
 [role="checkbox"] {
     padding:5px;

index.php

@@ -50,6 +50,7 @@
     <meta http-equiv="expires" content="0" />
     <meta http-equiv="pragma" content="no-cache" />
     <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet" type="text/css" href="css/nice-select.min.css?ver=<?php echo $configPistarRelease['Pi-Star']['Version']; ?>" />
     <title><?php echo "$MYCALL"." - ".$lang['digital_voice']." ".$lang['dashboard'];?></title>
 <?php include_once "config/browserdetect.php"; ?>
     <script type="text/javascript" src="/jquery.min.js"></script>
@@ -339,4 +340,15 @@ function getMMDVMConfigFileContent() {
 
 </div>
 </body>
+<script type="text/javascript" src="/nice-select.min.js"></script>
+<script type="text/javascript">
+    var selectize = document.querySelectorAll('select')
+    var options = {searchable: true};
+    selectize.forEach(function(select){
+        if( select.length > 30 ) {
+            select.classList.add("small", "selectize");
+            NiceSelect.bind(select, options);
+        }
+    });
+</script>
 </html>