Spotify/top-lists
0
0
Fork 0
Code Issues Activity

Add interface elements of the playlist export modal

Browse source
This commit is contained in:
Oliver-Akins 2020-08-14 00:23:12 -06:00
parent 8e862c61da
commit 9c0d7e27a3
1 changed files with 58 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/components/modals/PlaylistExport.vue
View file

@ -8,6 +8,30 @@
<transition name="burst" @after-leave="$emit('close')">
<div v-if="content" class="modal">
<h2 class="center">Export Playlist</h2>
<div class="modal-form">
<div class="input-row">
<input
type="text"
name="Playlist Name"
id="playlist-name"
v-model="name"
>
</div>
<div class="input-row">
<textarea-autosize
v-model="description"
placeholder="Type something here..."
:min-height="100"
/>
</div>
<div class="input-row">
<select v-model="is_private">
<option value="true">Private Playlist</option>
<option value="false">Public Playlist</option>
</select>
<button>Create Playlist</button>
</div>
</div>
</div>
</transition>
</div>
@ -17,11 +41,25 @@
<script>
export default {
name: `PlaylistExportModal`,
props: {
config: {
type: Object,
required: true,
}
},
data() {return {
container: false,
content: false,
name: ``,
is_private: true,
description: `Playlist auto-generated by Top Lists for Spotify`,
}},
mounted() {
let date = new Date();
let month = date.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
this.name = `Top ${this.config.limit || 10} Tracks - ${date.getFullYear()}/${month}/${date.getDate()}`;
this.$nextTick(function() {
this.container = true;
});
@ -47,13 +85,33 @@ export default {
.modal {
background-color: var(--modal-background);
border-radius: var(--corner-rounding);
color: var(--modal-text);
text-align: center;
overflow-y: auto;
max-height: 85%;
padding: 0 15px;
z-index: 11;
width: 90%;
}
div.modal-form {
flex-direction: column;
align-items: center;
display: flex;
}
.input-row {
justify-content: space-evenly;
margin-bottom: 10px;
flex-wrap: wrap;
display: flex;
width: 100%;
}
button {
margin: 10px;
}
@media only screen and (min-width: 768px) {
.modal {
width: 50%;