Some mobile optimizations

resources/assets/js/components/shared/to-top-button.vue

@@ -20,7 +20,7 @@ export default {
 .to-top-btn-wrapper {
   position: fixed;
   width: 100%;
-  bottom: $footerHeight + 16px;
+  bottom: $footerHeightMobile + 30px;
   left: 0;
   text-align: center;
   z-index: 9999;

resources/assets/js/components/site-footer/equalizer.vue

@@ -385,7 +385,7 @@ export default {
     max-width: 414px;
     left: auto;
     right: 0;
-    bottom: $footerHeight + 5px;
+    bottom: $footerHeightMobile + 5px;
     display: block;
     height: auto;
 

resources/assets/js/components/site-footer/index.vue

@@ -351,7 +351,7 @@ export default {
       text-align: right;
       top: 0;
       line-height: $footerHeight;
-      width: 168px;
+      width: 188px;
       text-align: center;
 
       &::before {
@@ -363,11 +363,15 @@ export default {
       }
 
       .control {
-        margin: 0;
+        margin: 10px 0 0;
         padding: 0 8px;
       }
     }
   }
+
+  @media only screen and (max-width: 768px) {
+    height: $footerHeightMobile;
+  }
 }
 
 #playerControls {
@@ -442,12 +446,6 @@ export default {
     ::before {
       display: none;
     }
-
-    #progressPane {
-      width: 100%;
-      position: absolute;
-      top: 0;
-    }
   }
 }
 
@@ -495,8 +493,22 @@ export default {
       display: none;
     }
 
-    top: -5px !important;
+    top: -15px;
     padding-top: 0;
+    width: 100%;
+    position: absolute;
+
+    .plyr {
+      &__progress {
+        height: 16px;
+
+        &--buffer[value],
+        &--played[value],
+        &--seek[type='range'] {
+          height: 16px;
+        }
+      }
+    }
   }
 }
 

resources/assets/sass/partials/_vars.scss

@@ -32,6 +32,7 @@ $fontWeight_Normal: 500;
 
 $headerHeight: 48px;
 $footerHeight: 64px;
+$footerHeightMobile: 74px;
 $mainHeadingHeight: 64px;
 
 $extraPanelWidth: 334px;