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

* Fix Audio player should be fixed to bottom (#135) * Remove parent scrollbar and add inner scrollbar (#54) * Change position from fixed to sticky * Remove overflow styles * Fix: add z-index to aside to slide out lists from behind * Remove console.log
imusify · Nov 1, 2018 · 513676c · 513676c
1 parent 6c4570e
commit 513676c
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 9 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta name="msapplication-TileColor" content="#0d0d0e">
     <meta name="msapplication-TileImage" content="/mstile-150x150.png">
     <link rel="manifest" href="/manifest.json">

diff --git a/src/App.vue b/src/App.vue
@@ -140,6 +140,7 @@ export default {
       left: 0;
       bottom: 0;
       height: 100vh;
+      z-index: 1;
     }
   }
 }

diff --git a/src/components/AudioPlayer.vue b/src/components/AudioPlayer.vue
@@ -47,6 +47,7 @@ export default {
   bottom: 0;
   left: 0;
   right: 0;
+  flex-grow: 0;
   height: 6.7rem;
   font-size: 1.4rem;
   box-shadow: 0px -20px 30px 6px rgba(0,0,0,0.74);

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/components/artist/ArtistList.vue b/src/components/artist/ArtistList.vue
@@ -21,7 +21,6 @@ export default {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
-    flex-grow: 1;
     flex-wrap: wrap;
     margin-top: 1rem;
   }

diff --git a/src/components/artist/TrackList.vue b/src/components/artist/TrackList.vue
@@ -21,7 +21,6 @@ export default {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  flex-grow: 1;
   flex-wrap: wrap;
   margin-top: 1rem;
 }

diff --git a/src/store/api/posts.js b/src/store/api/posts.js
@@ -17,7 +17,7 @@ export default {
   },
 
   get(id) {
-    return api.get(`/posts/${id}`)
+    return api.get(`/posts/${id}/`)
       .catch(globalErrorHandler);
   },
 

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -41,7 +41,7 @@ export default {
     ...mapGetters({
       artists: types.ARTIST_LIST,
       tracks: types.POST_LIST,
-      track: types.TRACK,
+      track: types.POST,
     }),
 
     selected() {
@@ -57,7 +57,7 @@ export default {
     ...mapActions({
       getArtists: types.ARTIST_LIST,
       getTracks: types.POST_LIST,
-      getTrack: types.TRACK_GET,
+      getTrack: types.POST_GET,
     }),
     ...mapMutations({
       resetArtists: types.ARTIST_LIST,
@@ -71,7 +71,7 @@ export default {
       .then(() => {
         this.isLoading = false;
       });
-    this.getTrack(1);
+    this.getTrack(20);
   },
 
   beforeDestroy() {
@@ -81,14 +81,20 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+#app > section {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
 .home {
   transform: translateY(1px); /* fix sticky 1px gap with audio player */
 
   .lists {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
-    overflow: hidden;
+    flex-grow: 1;
+    width: calc(100vw - 19rem);
   }
 }