[web] Remove type and status filters, reduce columns to 3. Closes #3 and #4

web/src/AlbumList.js

@@ -25,7 +25,6 @@ export function fetchAlbums(filters, page, dispatch) {
   const offset = (page || 0) * limit;
   const params = {offset, limit:(limit+1)};
   if (filter) params.filter = filter;
-  if (filters.album) params.album = filters.album;
   for (const {cat} of CATEGORIES) {
     if (filters[cat])
       params[cat] = filters[cat];

web/src/Filters.css

@@ -1,14 +1,12 @@
 .Filters {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 10px;
 }
 .Filters h3{
   font-size: 1em;
 }
-.Filters div:last-child {
-  grid-column-end: span 4;
-}
-.Filters div:last-child input {
-  width: 100%;
+.Filters .Filter {
+  grid-column-end: span 2;
 }
+.Filters .Filter input { width: 100%; }

web/src/Filters.js

@@ -5,12 +5,13 @@ import {getCategory, request} from './Api';
 import './Filters.css';
 
 export const CATEGORIES = [{cat: 'artist', title: 'Artists'},
+                           {cat: 'album', title: 'Album', hidden: true},
                            {cat: 'year', title: 'Years'},
                            {cat: 'genre', title: 'Genres'},
                            {cat: 'publisher', title: 'Labels'},
                            {cat: 'country', title: 'Countries'},
-                           {cat: 'type', title: 'Album types'},
-                           {cat: 'status', title: 'Album statuses'}];
+                           {cat: 'type', title: 'Album types', hidden: true},
+                           {cat: 'status', title: 'Album statuses', hidden: true}];
 
 function handleLoadOptions(cat, q) {
   const pageSize = 10000
@@ -38,7 +39,7 @@ export default function Filters({dispatch, filters, filter}) {
 
   return (
     <div className="Filters">
-      {CATEGORIES.map(({cat, title}) => (
+      {CATEGORIES.map(({cat, title, hidden}) => (!hidden &&
         <div className="section" key={cat}>
           <h3>{title}</h3>
           <AsyncSelect
@@ -53,6 +54,14 @@ export default function Filters({dispatch, filters, filter}) {
             />
         </div>
       ))}
+      <div className="Filter">
+        <h3>Search</h3>
+        <input
+          type="text"
+          placeholder="Search albums"
+          value={filter || ''}
+          onChange={(e)=>handleFilterChange(dispatch, router, timeout, e.target.value)} />
+      </div>
       <div>
       <h3>Latest</h3>
           <input className="Latest"
@@ -60,14 +69,6 @@ export default function Filters({dispatch, filters, filter}) {
              checked={ !filters.alpha }
              onChange={(e) => handleCategoryChange(router, 'alpha', !e.target.checked)} />
       </div>
-      <div>
-        <h3>Search</h3>
-        <input className="Filter"
-          type="text"
-          placeholder="Search albums"
-          value={filter}
-          onChange={(e)=>handleFilterChange(dispatch, router, timeout, e.target.value)} />
-      </div>
     </div>
   );
 }