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 = [{
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",
}
const songs = [
{
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",
},{
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 {
songs
}
songs,
};
+18 -1
View File
@@ -1,7 +1,11 @@
<template>
<Header />
<div class="p-bg rounded">
<SongList />
<div class="clip">
<div class="scrollable">
<SongList />
</div>
</div>
<div class="f-artists-p">
<FeaturedArtists />
</div>
@@ -33,6 +37,19 @@ export default {
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 {
position: absolute;
bottom: 0;