TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

improve playlist modal UI

Browse source
This commit is contained in:
Bnyro 2022-08-28 16:42:55 +02:00 committed by Kavin
parent ed9379dad7
commit 26f77e4aec
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
2 changed files with 37 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/components/PlaylistAddModal.vue
View file

@ -6,7 +6,7 @@
<span class="text-2xl w-max inline-block" v-t="'actions.select_playlist'" />
<button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
</div>
<select class="select w-full" v-model="selectedPlaylist">
<select class="select w-full mt-3" v-model="selectedPlaylist">
<option
v-for="playlist in playlists"
:value="playlist.id"
@ -14,31 +14,19 @@
v-text="playlist.name"
/>
</select>
<button
class="btn mt-2"
@click="handleClick(selectedPlaylist)"
ref="addButton"
v-t="'actions.add_to_playlist'"
/>
<div class="flex justify-end mt-3">
<button
class="btn"
@click="handleClick(selectedPlaylist)"
ref="addButton"
v-t="'actions.add_to_playlist'"
/>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.modal {
@apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
}
.modal > div {
@apply table-cell align-middle;
}
.modal-container {
@apply w-min m-auto px-8 bg-dark-700 p-6;
}
</style>
<script>
export default {
props: {
@ -111,3 +99,17 @@ export default {
},
};
</script>
<style scoped>
.modal {
@apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
}
.modal > div {
@apply table-cell align-middle;
}
.modal-container {
@apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl;
}
</style>

28
src/components/ShareModal.vue
View file

@ -21,20 +21,6 @@
</div>
</template>
<style scoped>
.modal {
@apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
}
.modal > div {
@apply table-cell align-middle;
}
.modal-container {
@apply w-100 m-auto px-8 bg-dark-700 p-5 flex flex-col rounded-xl;
}
</style>
<script>
export default {
props: {
@ -93,3 +79,17 @@ export default {
},
};
</script>
<style scoped>
.modal {
@apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
}
.modal > div {
@apply table-cell align-middle;
}
.modal-container {
@apply w-100 m-auto px-8 bg-dark-700 p-5 flex flex-col rounded-xl;
}
</style>