make playlist body scrollable

This commit is contained in:
geoffrey45
2021-12-10 16:50:46 +03:00
parent 43c1f70380
commit 71e6a06114
2 changed files with 206 additions and 27 deletions
+188 -26
View File
@@ -1,29 +1,191 @@
const songs = [{ const songs = [
title: "Because I got high", {
album: "The best of", title: "Because I got high",
artists: ["Weedman, ", "Bobby Brown"], album: "The best of",
duration: "03:14", artists: ["Weedman, ", "Bobby Brown"],
}, duration: "03:14",
{ },
title: "Is this love", {
album: "Natural Mystic", title: "Is this love",
artists: ["Bob Marley"], album: "Natural Mystic",
duration: "03:14", artists: ["Bob Marley"],
}, duration: "03:14",
{ },
title: "I'm a little teapot", {
album: "Love songs", title: "I'm a little teapot",
artists: ["Ricky Martin"], album: "Love songs",
duration: "03:14", artists: ["Ricky Martin"],
}, duration: "03:14",
{ },
title: "Don't stop me now", {
album: "Remastered 2011", title: "Don't stop me now",
artists: ["Queen"], album: "Remastered 2011",
duration: "03:14", artists: ["Queen"],
} duration: "03:14",
},{
title: "Because I got high",
album: "The best of",
artists: ["Weedman, ", "Bobby Brown"],
duration: "03:14",
},
{
title: "Is this love",
album: "Natural Mystic",
artists: ["Bob Marley"],
duration: "03:14",
},
{
title: "I'm a little teapot",
album: "Love songs",
artists: ["Ricky Martin"],
duration: "03:14",
},
{
title: "Don't stop me now",
album: "Remastered 2011",
artists: ["Queen"],
duration: "03:14",
},{
title: "Because I got high",
album: "The best of",
artists: ["Weedman, ", "Bobby Brown"],
duration: "03:14",
},
{
title: "Is this love",
album: "Natural Mystic",
artists: ["Bob Marley"],
duration: "03:14",
},
{
title: "I'm a little teapot",
album: "Love songs",
artists: ["Ricky Martin"],
duration: "03:14",
},
{
title: "Don't stop me now",
album: "Remastered 2011",
artists: ["Queen"],
duration: "03:14",
},{
title: "Because I got high",
album: "The best of",
artists: ["Weedman, ", "Bobby Brown"],
duration: "03:14",
},
{
title: "Is this love",
album: "Natural Mystic",
artists: ["Bob Marley"],
duration: "03:14",
},
{
title: "I'm a little teapot",
album: "Love songs",
artists: ["Ricky Martin"],
duration: "03:14",
},
{
title: "Don't stop me now",
album: "Remastered 2011",
artists: ["Queen"],
duration: "03:14",
},{
title: "Because I got high",
album: "The best of",
artists: ["Weedman, ", "Bobby Brown"],
duration: "03:14",
},
{
title: "Is this love",
album: "Natural Mystic",
artists: ["Bob Marley"],
duration: "03:14",
},
{
title: "I'm a little teapot",
album: "Love songs",
artists: ["Ricky Martin"],
duration: "03:14",
},
{
title: "Don't stop me now",
album: "Remastered 2011",
artists: ["Queen"],
duration: "03:14",
},{
title: "Because I got high",
album: "The best of",
artists: ["Weedman, ", "Bobby Brown"],
duration: "03:14",
},
{
title: "Is this love",
album: "Natural Mystic",
artists: ["Bob Marley"],
duration: "03:14",
},
{
title: "I'm a little teapot",
album: "Love songs",
artists: ["Ricky Martin"],
duration: "03:14",
},
{
title: "Don't stop me now",
album: "Remastered 2011",
artists: ["Queen"],
duration: "03:14",
},{
title: "Because I got high",
album: "The best of",
artists: ["Weedman, ", "Bobby Brown"],
duration: "03:14",
},
{
title: "Is this love",
album: "Natural Mystic",
artists: ["Bob Marley"],
duration: "03:14",
},
{
title: "I'm a little teapot",
album: "Love songs",
artists: ["Ricky Martin"],
duration: "03:14",
},
{
title: "Don't stop me now",
album: "Remastered 2011",
artists: ["Queen"],
duration: "03:14",
},{
title: "Because I got high",
album: "The best of",
artists: ["Weedman, ", "Bobby Brown"],
duration: "03:14",
},
{
title: "Is this love",
album: "Natural Mystic",
artists: ["Bob Marley"],
duration: "03:14",
},
{
title: "I'm a little teapot",
album: "Love songs",
artists: ["Ricky Martin"],
duration: "03:14",
},
{
title: "Don't stop me now",
album: "Remastered 2011",
artists: ["Queen"],
duration: "03:14",
},
]; ];
export default { export default {
songs songs,
} };
+18 -1
View File
@@ -1,7 +1,11 @@
<template> <template>
<Header /> <Header />
<div class="p-bg rounded"> <div class="p-bg rounded">
<SongList /> <div class="clip">
<div class="scrollable">
<SongList />
</div>
</div>
<div class="f-artists-p"> <div class="f-artists-p">
<FeaturedArtists /> <FeaturedArtists />
</div> </div>
@@ -33,6 +37,19 @@ export default {
padding: $small; padding: $small;
} }
.p-bg .clip {
height: calc(100% - 14em);
padding-bottom: $small;
border-bottom: solid 1px $seperator;
}
.p-bg .scrollable {
height: 100%;
border-radius: $small;
overflow-y: auto;
padding-right: $small;
}
.p-bg .f-artists { .p-bg .f-artists {
position: absolute; position: absolute;
bottom: 0; bottom: 0;