Skip to content

Commit

Permalink
Implements a better layout for the buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@webmatze
webmatze committed Apr 22, 2024
1 parent cfe0f9d commit 3ecc1ab
Showing 1 changed file with 42 additions and 21 deletions.
63 changes: 42 additions & 21 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Mixtape Creator</title>
<title>Mixtape Creator</title>
<script src="https://unpkg.com/vue@3.4.23/dist/vue.global.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.0/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
Expand Down Expand Up @@ -61,14 +61,21 @@ <h2 class="title is-5">Side A</h2>
<div>Remaining: {{ formattedTime(remainingTimeA) }}</div>
<ul>
<li v-for="song in sideA" :key="song.id" class="song-details">
{{ song.name }} by {{ song.artists[0].name }} <span class="tag is-info is-light">{{ formattedTime(song.duration_ms / 1000) }}</span>
<div class="buttons are-small">
<button class="button is-small is-danger is-outlined" @click="removeSong('A', song)">
<span class="icon"><i class="fa fa-times"></i></span> <span>Remove</span>
</button>
<button class="button is-small is-info" @click="moveSong('B', song)">
<span class="icon"><i class="fas fa-arrow-right"></i></span> <span>Move to B</span>
</button>
<div class="columns">
<div class="column">
{{ song.name }} by {{ song.artists[0].name }} <span class="tag is-info is-light">{{
formattedTime(song.duration_ms / 1000) }}</span>
</div>
<div class="column is-narrow">
<div class="buttons are-small">
<button class="button is-small is-danger is-outlined" @click="removeSong('A', song)">
<span class="icon"><i class="fa fa-times"></i></span> <span>Remove</span>
</button>
<button class="button is-small is-info" @click="moveSong('B', song)">
<span class="icon"><i class="fas fa-arrow-right"></i></span> <span>Move to B</span>
</button>
</div>
</div>
</div>
</li>
</ul>
Expand All @@ -80,14 +87,20 @@ <h2 class="title is-5">Side B</h2>
<div>Remaining: {{ formattedTime(remainingTimeB) }}</div>
<ul>
<li v-for="song in sideB" :key="song.id" class="song-details">
{{ song.name }} by {{ song.artists[0].name }} <span class="tag is-info is-light">{{ formattedTime(song.duration_ms / 1000) }}</span>
<div class="buttons are-small">
<button class="button is-small is-danger is-outlined" @click="removeSong('B', song)">
<span class="icon"><i class="fa fa-times"></i></span> <span>Remove</span>
</button>
<button class="button is-small is-info" @click="moveSong('A', song)">
<span class="icon"><i class="fas fa-arrow-left"></i></span> <span>Move to A</span>
</button>
<div class="columns">
<div class="column">
{{ song.name }} by {{ song.artists[0].name }} <span class="tag is-info is-light">{{ formattedTime(song.duration_ms / 1000) }}</span>
</div>
<div class="column is-narrow">
<div class="buttons are-small">
<button class="button is-small is-danger is-outlined" @click="removeSong('B', song)">
<span class="icon"><i class="fa fa-times"></i></span> <span>Remove</span>
</button>
<button class="button is-small is-info" @click="moveSong('A', song)">
<span class="icon"><i class="fas fa-arrow-left"></i></span> <span>Move to A</span>
</button>
</div>
</div>
</div>
</li>
</ul>
Expand All @@ -104,9 +117,17 @@ <h2 class="title is-5">Side B</h2>
</div>
<ul>
<li v-for="song in searchResults" :key="song.id" class="song">
{{ song.name }} ({{song.album.name}}) by {{ song.artists[0].name }} - {{ formattedTime(song.duration_ms / 1000) }}
<button class="button is-small is-success" @click="addSong('A', song)">Add to Side A</button>
<button class="button is-small is-success" @click="addSong('B', song)">Add to Side B</button>
<div class="columns">
<div class="column">
{{ song.name }} ({{song.album.name}}) by {{ song.artists[0].name }} <span class="tag is-info is-light">{{ formattedTime(song.duration_ms / 1000) }}</span>
</div>
<div class="column">
<div class="buttons">
<button class="button is-small is-success" @click="addSong('A', song)">Add to Side A</button>
<button class="button is-small is-success" @click="addSong('B', song)">Add to Side B</button>
</div>
</div>
</div>
</li>
</ul>
</div>
Expand Down Expand Up @@ -202,7 +223,7 @@ <h2 class="title is-5">Side B</h2>
sideB.value.push(song);
remainingTimeB.value -= song.duration_ms / 1000;
} else {
alert(`Cannot add "${song.title}" to Side ${side}. Not enough remaining time.`);
alert(`Cannot add "${song.name}" to Side ${side}. Not enough remaining time.`);
}
}

Expand Down

0 comments on commit 3ecc1ab

Please sign in to comment.