Move song controls, preset and add buttons to bottom of the screen on…

… mobile

Add many CSS breakpoints to ensure elements continue to work on the smallest screens

CHANGELOG.md

@@ -3,6 +3,9 @@
 ## 0.4.6
 * System
   * Automatically persist logs during (and for a short time after) updates
+* Webapp
+  * Move home screen, player page controls to bottom of screen on mobile
+  * Update CSS breakpoints to scale the player page better on the smallest of screens
 
 ## 0.4.5
 * Web App

web/src/components/CustomMarquee/CustomMarquee.jsx

@@ -42,14 +42,11 @@ export default function CustomMarquee(props) {
         }
     }
 
-    let resizeTimout;
     function handleResize(){
         if(!resizeCooldown.current){
             resizeCooldown.current = true;
 
             assessMarquee()
-
-            resizeTimout = setTimeout(()=>{resizeCooldown.current = false;}, 1000) // set a cooldown for resize checks to avoid excessive renders
         }
     }
     window.addEventListener("resize", handleResize()); // Doesn't call assessMarquee directly to avoid calling thousands of times per second when resizing window

web/src/components/MediaControl/MediaControl.scss

@@ -12,6 +12,11 @@
 }
 
 .media-inner {
+  @media (max-width: 425px) {
+    position: fixed;
+    bottom: 15vh;
+  }
+
   width: fit-content;
   display: flex;
   justify-content: center;

web/src/components/StreamBar/StreamBar.scss

@@ -21,15 +21,26 @@
   color: general.$text-color;
   width: 100%;
   max-width: 80%; // Leave space for icon
-  font-size: 2.5rem;
   font-weight: medium;
   white-space: nowrap;
   overflow: hidden;
   @include general.header-font;
   padding: 0.5rem;
+  @media (max-height: 500px){
+    font-size: 1.5rem;
+  }
+  @media (min-height: 500px){
+    font-size: 2.5rem;
+  }
 }
 
 .stream-bar-icon {
-  width: 4rem;
-  height: 4rem;
+  @media (max-height: 500px){
+    width: 2rem;
+    height: 2rem;
+  }
+  @media (min-height: 500px){
+    width: 4rem;
+    height: 4rem;
+  }
 }

web/src/pages/Home/Home.scss

@@ -69,6 +69,11 @@
 }
 
 .home-presets-container {
+  @media (max-width: 425px) {
+    position: fixed;
+    bottom: 65px;
+  }
+
   display: flex;
 
   flex-direction: row;

web/src/pages/Player/Player.scss

@@ -29,7 +29,7 @@
 .player-album-art {
   align-self: center;
   max-width: 95vw;
-  max-height: 22rem;
+  max-height: 50vh;
   border-radius: 2.5%;
 }