From 513676c86101429756e343a3156c56a703f415be Mon Sep 17 00:00:00 2001 From: Onuwa Nnachi Isaac Date: Thu, 1 Nov 2018 19:20:12 +0100 Subject: [PATCH] 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 --- public/index.html | 2 +- src/App.vue | 1 + src/components/AudioPlayer.vue | 1 + src/components/CategoriesMenu.vue | 2 +- src/components/artist/ArtistList.vue | 1 - src/components/artist/TrackList.vue | 1 - src/store/api/posts.js | 2 +- src/views/Home.vue | 14 ++++++++++---- 8 files changed, 15 insertions(+), 9 deletions(-) diff --git a/public/index.html b/public/index.html index 44e016b..818d2e3 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,7 @@ - + diff --git a/src/App.vue b/src/App.vue index 838cdb2..549ca9b 100644 --- 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 index a61e355..9989dc2 100644 --- 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 index e4a5840..5e3b704 100644 --- 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 index a3370c9..7b3853c 100644 --- 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 index fdfe09b..f1732de 100644 --- 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 index 63c7653..15e4520 100644 --- 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 index 14228b4..710e4a0 100644 --- 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,6 +81,11 @@ export default { };