Fix Audio player should be fixed to bottom (imusify#135)

iamonuwa · Oct 30, 2018 · 55b722a · 55b722a
1 parent e6acb72
commit 55b722a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -135,11 +135,14 @@ export default {
 
     > aside {
       width: 19rem;
-      position: sticky;
+      position: fixed;
+      z-index: 1;
       top: 0;
       left: 0;
       bottom: 0;
       height: 100vh;
+      overflow: hidden;
+      flex-shrink: 0;
     }
   }
 }

diff --git a/src/components/CategoriesMenu.vue b/src/components/CategoriesMenu.vue
@@ -163,7 +163,7 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    flex-grow: 1;
+    flex-grow: 0;
     position: sticky;
     top: 0;
     z-index: 1;

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -81,14 +81,21 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+#app > section {
+  height: 100vh;
+}
 .home {
+  display: flex;
+  flex-direction: column;
+  margin-left: 19rem;
   transform: translateY(1px); /* fix sticky 1px gap with audio player */
 
   .lists {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
-    overflow: hidden;
+    overflow-y: visible;
+    flex-grow: 1;
   }
 }