Further improvements to web interface (#139)

* Implement button toolbar

* Fix filters logic

* Switch to btn-primary for active filters

* Reduce playlist table columns on mobile

* Cleanup playlist area

* Reduce volume spacing

* Hide items in playlist as well for mobile

* Use text utility classes vs style

* Filter use checkbox instead of radio

* Hide library file column on mobile

* Update jQuery and FontAwesome to latest

static/css/custom.css

@@ -1,24 +1,22 @@
-.bs-docs-section{margin-top:4em}
-.bs-docs-section .page-header h1 { padding: 2rem 0; font-size: 3rem; margin-bottom: 10px }
-.btn-space{margin-right:5px;}
-.tag-space{margin-right:3px;}
-.playlist-title-td{width:60%}
-.playlist-title{float:left; }
+.btn-space {margin-right: 5px;}
+.tag-space {margin-right: 3px;}
+.playlist-title-td {width: 60%;}
+.playlist-title {float: left;}
 .playlist-item {transition: all 0.2s ease-in-out;}
-.playlist-artwork{
-   float:left;
-   margin-left:10px;
+.playlist-artwork {
+   float: left;
+   margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
 }
-.tag-click{
-   cursor:pointer;
+.tag-click {
+   cursor: pointer;
    transition: 400ms;
 }
-.tag-unclicked{
+.tag-unclicked {
    opacity: 0.6;
 }
-.tag-clicked{
+.tag-clicked {
    box-shadow: 2px 4px 10px #777777;
    transform: scale(1.2);
    opacity: 1;
@@ -43,7 +41,7 @@
     background-color: hsl(0, 0%, 43%);
     color: white;
 }
-.library-item{
+.library-item {
    display: flex;
    padding: .5rem .5rem .5rem 0;
    height: 72px;
@@ -100,11 +98,23 @@
 .library-action {
     margin-left: auto;
 }
-.library-info-col .path{
+.library-info-col .path {
    font-style: italic !important;
    font-weight: 300;
 }
 #volume-slider {
    margin-top: 8px;
-   margin-right: 6px;
 }
+.dropdown {
+    display: inline-block;
+}
+@media (max-width: 399.98px) {
+    #volume-slider {
+        width: 80px;
+    }
+}
+@media (max-width: 329.98px) {
+    #volume-slider {
+        display: none;
+    }
+}

static/js/custom.js

@@ -269,8 +269,8 @@ function updateControls(empty, play, mode, volume) {
         }
     }
 
-    for (const otherModes of Object.values(playModeBtns)) {
-        otherModes.removeClass('active');
+    for (const otherMode of Object.values(playModeBtns)) {
+        otherMode.removeClass('active');
     }
     playModeBtns[mode].addClass('active');
 
@@ -335,46 +335,25 @@ setInterval(checkForPlaylistUpdate, 3000);
 // ---------------------
 // ------ Browser ------
 // ---------------------
-var filter_file = false;
-var filter_url = false;
-var filter_radio = false;
+var filters = {
+    file: $('#filter-type-file'),
+    url: $('#filter-type-url'),
+    radio: $('#filter-type-radio'),
+};
 var filter_dir = $("#filter-dir");
 var filter_keywords = $("#filter-keywords");
-var filter_btn_file = $("#filter-type-file");
-var filter_btn_url = $("#filter-type-url");
-var filter_btn_radio = $("#filter-type-radio");
 
-function setFilterType(type) {
-    filter_types = [];
+function setFilterType(event, type) {
+    event.preventDefault();
 
-    if (type === "file") {
-        if (filter_btn_file.hasClass("btn-primary")) {
-            filter_btn_file.removeClass("btn-primary").addClass("btn-secondary");
-            filter_dir.prop("disabled", true);
-            filter_file = false;
-        } else {
-            filter_btn_file.removeClass("btn-secondary").addClass("btn-primary");
-            filter_dir.prop("disabled", false);
-            filter_file = true;
-        }
-    } else if (type === "url") {
-        if (filter_btn_url.hasClass("btn-primary")) {
-            filter_btn_url.removeClass("btn-primary").addClass("btn-secondary");
-            filter_url = false;
-        } else {
-            filter_btn_url.removeClass("btn-secondary").addClass("btn-primary");
-            filter_url = true;
-        }
-    } else if (type === "radio") {
-        if (filter_btn_radio.hasClass("btn-primary")) {
-            filter_btn_radio.removeClass("btn-primary").addClass("btn-secondary");
-            filter_radio = false;
-        } else {
-            filter_btn_radio.removeClass("btn-secondary").addClass("btn-primary");
-            filter_types.push('radio');
-            filter_radio = true;
-        }
+    if (filters[type].hasClass('active')) {
+        filters[type].removeClass('active btn-primary').addClass('btn-secondary');
+        filters[type].find('input[type=radio]').removeAttr('checked');
+    } else {
+        filters[type].removeClass('btn-secondary').addClass('active btn-primary');
+        filters[type].find('input[type=radio]').attr('checked', 'checked');
     }
+
     updateResults();
 }
 
@@ -511,9 +490,11 @@ function getFilters(dest_page = 1) {
     });
 
     filter_types = [];
-    if (filter_file) { filter_types.push("file"); }
-    if (filter_url) { filter_types.push("url"); }
-    if (filter_radio) { filter_types.push("radio"); }
+    for (const filter in filters) {
+        if (filters[filter].hasClass('active')) {
+            filter_types.push(filter);
+        }
+    }
 
     return {
         type: filter_types.join(','),