janishutz/MusicPlayer
1
0
Fork 0
mirror of https://github.com/janishutz/MusicPlayer.git synced 2026-09-10 14:25:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: modernize popup component

Browse Source
This commit is contained in:
janishutz
2026-08-31 18:20:01 +02:00
parent 5f6e034dac
commit 72dada18eb
1 changed files with 38 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/PopupElement.vue
+38 -19
View File
@@ -1,10 +1,9 @@
<template> <template>
<div> <div :class="['popup', isOpen ? undefined : 'hidden' ]">
<div :class="'popup-backdrop' + ( isOpen ? '' : ' hidden' )"> <div class="popup-backdrop"></div>
<div class="popup-main"> <div class="popup-main">
<span v-if="props.showClose" class="material-symbols-outlined close-icon" @click="closePopup()">close</span> <i v-if="props.showClose" class="fa-solid fa-xmark close-icon" @click="closePopup()"></i>
<slot></slot> <slot></slot>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -23,43 +22,63 @@
<style scoped lang="scss"> <style scoped lang="scss">
.popup-backdrop { .popup {
position: fixed;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: fixed;
background-color: var( --overlay-color );
top: 0; top: 0;
left: 0; left: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden; z-index: 1000;
transition: all 0.5s; transition-delay: 0;
transform: scale(1);
z-index: 99;
&.hidden { .popup-backdrop {
transform: scale(0); width: 100vw;
height: 100vh;
position: absolute;
background-color: var( --overlay-color );
top: 0;
left: 0;
overflow: hidden;
transition: all 0.5s;
} }
>.popup-main { .popup-main {
width: 40%; width: fit-content;
height: 50%; height: fit-content;
background-color: var( --secondary-color ); background-color: var( --secondary-color );
padding: 2.5%; padding: 2.5%;
border-radius: 20px; border-radius: 20px;
transform: scale(1);
position: relative; position: relative;
overflow-y: scroll; overflow-y: scroll;
display: block; display: block;
transition: transform 0.5s ease, opacity 0.5s ease;
>.close-icon { >.close-icon {
position: absolute; position: absolute;
top: 20px; top: 20px;
right: 20px; right: 20px;
font-size: 2rem; font-size: 1.5rem;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
} }
&.hidden {
top: -100vh;
transition-delay: 0.5s;
.popup-main {
transform: scale(1.25);
opacity: 0;
}
.popup-backdrop {
opacity: 0;
}
}
} }
</style> </style>