Webserver: fix layout and mini player visibility

buildsystem/network-sharing-server/src/App.vue

@@ -122,6 +122,11 @@ export default {
   },
   created: function () {
     this.startWebSocket()
+    window.addEventListener('resize', () => {
+      // We execute the same script as before
+      let vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+    });
   }
 }
 </script>

buildsystem/network-sharing-server/src/components/MiniPlayer.vue

@@ -48,7 +48,7 @@
     </div>
   </div>
   <div class="mini-player-fab" v-on:click.stop="showResponsivePlayer()"
-    v-show="!this.playerStore.responsivePlayerShowing">
+    v-show="!this.playerStore.responsivePlayerShowing && this.playerStore.playing">
     <div class="playing">
       <span class="playing-bar playing-bar1"></span>
       <span class="playing-bar playing-bar2"></span>
@@ -182,15 +182,22 @@ export default {
   --playerHeight: 156px;
 }
 
+@media screen and (max-width: 768px) {
+  #player {
+
+    display: none;
+  }
+
+  #playqueue {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 768px) {
   :root {
     --playerHeight: 98px;
   }
 
-  #player {
-    display: block !important;
-  }
-
   .mini-player-fab {
     display: none;
   }
@@ -214,7 +221,6 @@ export default {
 #player {
   width: 100%;
   color: #000;
-  display: none;
   align-items: center;
   z-index: 1022;
 }

buildsystem/network-sharing-server/src/scss/app.scss

@@ -57,10 +57,10 @@ footer {
 }
 
 main {
-  min-height: calc(100vh - var(--navbar-height));
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  overflow: auto;
 }
 
 // This sets all <h1>,...,<h6> elements with Material headline1,...,headline6 typography styles
@@ -70,11 +70,13 @@ body {
   background: $background;
   color: $text-color;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   overflow: hidden;
+  min-height: -webkit-fill-available;
 }
 
 #app {
-  height: 100vh;
+  height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;