Better music layout
continuous-integration/drone/push Build is passing Details

This commit is contained in:
DutchEllie 2022-07-03 23:04:35 +02:00
parent 39f0c45990
commit 4b986a9ed3
Signed by: DutchEllie
SSH Key Fingerprint: SHA256:dKq6ZSgN5E3Viqrw/+xAdf2VdR6hdRGNyrYqXXwfjTY
3 changed files with 28 additions and 19 deletions

View File

@ -22,14 +22,18 @@
$CurrentMusicStore.paused = true;
await sleep(10);
$CurrentMusicStore.paused = false;
close();
};
function close() {
show = !show;
showMusicMan = false;
}
</script>
{#if show}
<div
on:click={() => {
show = !show;
showMusicMan = false;
close()
}}
class="h-screen w-screen bg-opacity-60 bg-black fixed top-0 left-0 z-10 py-20 "
>

View File

@ -25,24 +25,36 @@
// Modal stuff
let modalShow = false;
// Footer stuff
/**
* @type {number}
*/
let footerHeight;
</script>
<div class="-z-20 absolute">
<Musicplayer />
</div>
<div
class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-screen h-screen text-murasaki overflow-auto"
class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-screen text-murasaki overflow-auto min-h-screen relative "
>
<!-- Page content -->
<div class="" style="padding-bottom: {footerHeight + 10}px;">
<!-- modal -->
<Musicselectionmodal bind:show={modalShow} />
<!-- Possible alert header -->
<!--<AlertHeader text='ALERT'/>-->
<div class="bg-slate-100 w-full h-min md:h-10 lg:pl-20">
<!-- Header -->
<Header />
<!-- Main content -->
<slot />
</div>
<!-- Footer -->
<div bind:clientHeight={footerHeight} class="bg-slate-100 w-full h-min md:h-10 lg:pl-20 absolute bottom-0">
<div class="h-full">
<button
on:click={onMusicToggle}
class="bg-white border-black border rounded h-min w-20 my-auto"
>
<button on:click={onMusicToggle} class="bg-white border-black border rounded h-min w-20 mt-1">
{#if musicPaused}
<span class="font-mono"></span>
Play
@ -61,10 +73,6 @@
<span>Current song: {musicArtist} - {musicTitle}</span>
</div>
</div>
<!-- Header -->
<Header />
<!-- Main content -->
<slot />
</div>
<!-- background-image: linear-gradient(to right top, #051937, #1a325b, #304d82, #466aab, #5d88d6);

View File

@ -22,9 +22,6 @@ module.exports = {
container: {
center: true,
},
minHeight: {
'1/2': '50%',
},
screens: {
'sm': '640px',
// => @media (min-width: 640px) { ... }