added hash url and fix styling issue player area

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## 0.6.2 – 2018-08-11
 ### Fixed
+- Fix styling issue (overflow hidden) player area
+  [#65](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/65) @onny
 - Fix styling issue colum width on Chrome browsers
   [#37](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/37) @onny
 - Remember last menu state

css/main.css

@@ -467,3 +467,8 @@ table td {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+#app-settings {
+	overflow: hidden;
+	margin-bottom: 10px;
+}

js/main.js

@@ -102,15 +102,18 @@ $(function(){
   });
 
   /* Click on menus */
-  $('a.nav-icon-files').click(function() {
+  $('a.nav-icon-files').click(function(e) {
+    e.preventDefault();
     switch_menu(0);
   });
 
-  $('a.nav-icon-recent').click(function() {
+  $('a.nav-icon-recent').click(function(e) {
+    e.preventDefault();
     switch_menu(1);
   });
 
-  $('a.nav-icon-favorites').click(function() {
+  $('a.nav-icon-favorites').click(function(e) {
+    e.preventDefault();
     switch_menu(2);
   });
 
@@ -347,14 +350,17 @@ $(function(){
         save_menu_state(state)
         switch (state) {
           case 0:
+            history.pushState("", "", "#top");
             $('li.nav-files').addClass('active');
             radio_query(1);
             break;
           case 1:
+            history.pushState("", "", "#recent");
             $('li.nav-recent').addClass('active');
             radio_query(2);
             break;
           case 2:
+            history.pushState("", "", "#favorites");
             $('li.nav-favorites').addClass('active');
             action_load_favorites();
             break;

templates/main.php

@@ -7,32 +7,33 @@
         <div id="app-navigation">
             <ul class="with-icon">
                 <li data-id="files" class="nav-files">
-                    <a href="#" class="nav-icon-files svg">
+                    <a href="#top" class="nav-icon-files svg">
 				Top			</a>
                 </li>
                 <li data-id="recent" class="nav-recent">
-                    <a href="#" class="nav-icon-recent svg">
+                    <a href="#recent" class="nav-icon-recent svg">
 				Recent			</a>
                 </li>
                 <li data-id="favorites" class="nav-favorites">
-                    <a href="#" class="nav-icon-favorites svg">
+                    <a href="#favorites" class="nav-icon-favorites svg">
 				Favorites			</a>
                 </li>
-                <li data-id="sharingin" class="nav-sharingin">
-                    <a href="#" class="nav-icon-sharingin svg">
+                <li data-id="categories" class="nav-categories">
+                    <a href="#categories" class="nav-icon-sharingin svg">
 				Categories			</a>
                 </li>
             </ul>
             <div id="app-settings">
                 <audio id="player" src=""></audio>
                 <button id="playbutton" class="play"></button>
-                <div id="volumeslider"></div>
+                <div id="volumeslider">
+                  <!-- <img src="img/sound_full.png"> -->
+                </div>
                 <p id="station_metadata"></p>
             </div>
         </div>
     <div id="app-content">
         <div id="app-content-files" class="viewcontainer">
-            <!-- <div class="mask transparent icon-loading"></div> -->
 
             <div class="nofilterresults emptycontent hidden">
             	<div class="icon-search"></div>