Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-30 18:43:17 +00:00
Code Issues Packages Projects Releases 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'" /> <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> <button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
</div> </div>
<select class="select w-full" v-model="selectedPlaylist"> <select class="select w-full mt-3" v-model="selectedPlaylist">
<option <option
v-for="playlist in playlists" v-for="playlist in playlists"
:value="playlist.id" :value="playlist.id"
@ -14,31 +14,19 @@
v-text="playlist.name" v-text="playlist.name"
/> />
</select> </select>
<button <div class="flex justify-end mt-3">
class="btn mt-2" <button
@click="handleClick(selectedPlaylist)" class="btn"
ref="addButton" @click="handleClick(selectedPlaylist)"
v-t="'actions.add_to_playlist'" ref="addButton"
/> v-t="'actions.add_to_playlist'"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </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> <script>
export default { export default {
props: { props: {
@ -111,3 +99,17 @@ export default {
}, },
}; };
</script> </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> </div>
</template> </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> <script>
export default { export default {
props: { props: {
@ -93,3 +79,17 @@ export default {
}, },
}; };
</script> </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>