From 9284be874b395f1cb997a39120b71d9d538ddd2b Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Fri, 25 Jan 2019 13:56:02 +0100
Subject: [PATCH] show available categories

---
 css/main.css     | 10 +++++++++
 js/main.js       | 55 ++++++++++++++++++++++++++++++++++++++++++++----
 js/navigation.js |  5 ++++-
 3 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/css/main.css b/css/main.css
index aeff13b..26e84eb 100644
--- a/css/main.css
+++ b/css/main.css
@@ -500,3 +500,13 @@ table td {
 #preload-02 { background: url('../img/sound_silent.png') no-repeat -9999px -9999px; }
 #preload-03 { background: url('../img/pause.png') no-repeat -9999px -9999px; }
 #preload-04 { background: url('../img/wheel.png') no-repeat -9999px -9999px; }
+
+.icon-stationfav-disabled {
+	width: 16px;
+	height: 16px;
+	line-height: 100%;
+	display: inline-block;
+	vertical-align: middle;
+	background-size: 16px 16px;
+	opacity: 0;
+}
diff --git a/js/main.js b/js/main.js
index 0f562b1..dcefef0 100644
--- a/js/main.js
+++ b/js/main.js
@@ -275,19 +275,66 @@ var MODULE = (function (radio) {
     $('tbody').append('<tr>\
                         <td class="favcolumn">\
                           <a href="#" class="favorite">\
-                            <span class="icon-stationfav"></span>\
+                            <span class="icon-stationfav-disabled"></span>\
                             <span class="hidden-visually">Favorite</span>\
                           </a>\
                         </td>\
                         <td class="filename">\
                           <label for="select-files-3">\
-                            <div class="thumbnail" style="background-image:url(); background-size: 32px;"></div>\
+                            <div class="thumbnail icon-filetype-folder" background-size: 32px;"></div>\
                           </label>\
                           <a class="name" href="#">\
-                            <span class="nametext"><span class="innernametext">Languages</span></span>\
+                            <span class="nametext"><span class="innernametext">Countries</span></span>\
                           </a>\
                         </td>\
-                      </tr>');
+                      </tr>\
+                      <tr>\
+                      <td class="favcolumn">\
+                        <a href="#" class="favorite">\
+                          <span class="icon-stationfav-disabled"></span>\
+                          <span class="hidden-visually">Favorite</span>\
+                        </a>\
+                      </td>\
+                      <td class="filename">\
+                        <label for="select-files-3">\
+                          <div class="thumbnail icon-filetype-folder"); background-size: 32px;"></div>\
+                        </label>\
+                        <a class="name" href="#">\
+                          <span class="nametext"><span class="innernametext">States</span></span>\
+                        </a>\
+                      </td>\
+                      </tr>\
+                      <tr>\
+                      <td class="favcolumn">\
+                        <a href="#" class="favorite">\
+                          <span class="icon-stationfav-disabled"></span>\
+                          <span class="hidden-visually">Favorite</span>\
+                        </a>\
+                      </td>\
+                      <td class="filename">\
+                        <label for="select-files-3">\
+                          <div class="thumbnail icon-filetype-folder"); background-size: 32px;"></div>\
+                        </label>\
+                        <a class="name" href="#">\
+                          <span class="nametext"><span class="innernametext">Languages</span></span>\
+                        </a>\
+                      </td>\
+                    </tr>\
+                    <td class="favcolumn">\
+                      <a href="#" class="favorite">\
+                        <span class="icon-stationfav-disabled"></span>\
+                        <span class="hidden-visually">Favorite</span>\
+                      </a>\
+                    </td>\
+                    <td class="filename">\
+                      <label for="select-files-3">\
+                        <div class="thumbnail icon-filetype-folder"); background-size: 32px;"></div>\
+                      </label>\
+                      <a class="name" href="#">\
+                        <span class="nametext"><span class="innernametext">Tags</span></span>\
+                      </a>\
+                    </td>\
+                  </tr>');
   };
 
   return radio;
diff --git a/js/navigation.js b/js/navigation.js
index 51d9628..9734570 100644
--- a/js/navigation.js
+++ b/js/navigation.js
@@ -78,7 +78,7 @@ var MODULE = (function (radio) {
             $('li.nav-favorites').addClass('active');
             radio.action_load_favorites();
             break;
-          case 2:
+          case 3:
             history.pushState("", "", "#categories");
             $('li.nav-categories').addClass('active');
             radio.action_load_categories();
@@ -100,6 +100,9 @@ var MODULE = (function (radio) {
       case "favorites":
         radio.switch_menu(2);
         break;
+      case "categories":
+        radio.switch_menu(3);
+        break;
       default:
         radio.switch_menu(0);
         break;