mirror of
https://github.com/koel/koel
synced 2024-09-20 06:11:53 +00:00
Refactor and restyle
This commit is contained in:
An Phan
parent
5f70dee097
commit
c65414c3bf
27 changed files with 60 additions and 117 deletions
|
|
@ -34,9 +34,7 @@
|
|||
<footer>Data © <a target="_blank" href="{{{ song.album.info.url }}}">Last.fm</a></footer>
|
||||
</div>
|
||||
|
||||
<p class="none" v-else>
|
||||
No album information found. At all.
|
||||
</p>
|
||||
<p class="none" v-else>No album information found. At all.</p>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<article v-if="song" id="artistInfo">
|
||||
<h1>
|
||||
<span>{{ song ? song.album.artist.name : '' }}</span>
|
||||
<span>{{ song.album.artist.name }}</span>
|
||||
|
||||
<a class="shuffle" @click.prevent="shuffleAll"><i class="fa fa-random"></i></a>
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -3,17 +3,17 @@
|
|||
<div class="tabs">
|
||||
<div class="header clear">
|
||||
<a @click.prevent="currentView = 'lyrics'"
|
||||
:class="{ active: currentView == 'lyrics' }">Lyrics</a>
|
||||
:class="{ active: currentView === 'lyrics' }">Lyrics</a>
|
||||
<a @click.prevent="currentView = 'artistInfo'"
|
||||
:class="{ active: currentView == 'artistInfo' }">Artist</a>
|
||||
:class="{ active: currentView === 'artistInfo' }">Artist</a>
|
||||
<a @click.prevent="currentView = 'albumInfo'"
|
||||
:class="{ active: currentView == 'albumInfo' }">Album</a>
|
||||
:class="{ active: currentView === 'albumInfo' }">Album</a>
|
||||
</div>
|
||||
|
||||
<div class="panes">
|
||||
<lyrics v-ref:lyrics v-show="currentView == 'lyrics'"></lyrics>
|
||||
<artist-info v-ref:artist-info v-show="currentView == 'artistInfo'"></artist-info>
|
||||
<album-info v-ref:album-info v-show="currentView == 'albumInfo'"></album-info>
|
||||
<lyrics v-ref:lyrics v-show="currentView === 'lyrics'"></lyrics>
|
||||
<artist-info v-ref:artist-info v-show="currentView === 'artistInfo'"></artist-info>
|
||||
<album-info v-ref:album-info v-show="currentView === 'albumInfo'"></album-info>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
|
||||
methods: {
|
||||
/**
|
||||
* Reset all applicable child components' states
|
||||
* Reset all applicable child components' states.
|
||||
*/
|
||||
resetChildrenStates() {
|
||||
_.each(this.$refs, child => {
|
||||
|
|
@ -187,8 +187,7 @@
|
|||
}
|
||||
|
||||
|
||||
@media only screen
|
||||
and (max-device-width : 1024px) {
|
||||
@media only screen and (max-device-width : 1024px) {
|
||||
position: fixed;
|
||||
height: calc(100vh - #{$headerHeight + $footerHeight});
|
||||
padding-bottom: $footerHeight; // make sure the footer can never overlap the content
|
||||
|
|
@ -203,8 +202,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (max-device-width : 667px) {
|
||||
@media only screen and (max-device-width : 667px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,10 +21,7 @@
|
|||
</span>
|
||||
|
||||
<div class="buttons" v-show="!isPhone || showingControls">
|
||||
<button class="play-shuffle"
|
||||
@click.prevent="shuffle"
|
||||
v-if="selectedSongs.length < 2"
|
||||
>
|
||||
<button class="play-shuffle" @click.prevent="shuffle" v-if="selectedSongs.length < 2">
|
||||
<i class="fa fa-random"></i> All
|
||||
</button>
|
||||
<button class="play-shuffle" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
|
||||
|
|
@ -34,18 +31,11 @@
|
|||
{{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
|
||||
</button>
|
||||
|
||||
<add-to-menu
|
||||
:songs="selectedSongs"
|
||||
:showing="showingAddToMenu"
|
||||
</add-to-menu>
|
||||
<add-to-menu :songs="selectedSongs" :showing="showingAddToMenu"></add-to-menu>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<song-list
|
||||
:items="album.songs"
|
||||
:selected-songs.sync="selectedSongs"
|
||||
type="album">
|
||||
</song-list>
|
||||
<song-list :items="album.songs" :selected-songs.sync="selectedSongs" type="album"></song-list>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,14 +14,7 @@
|
|||
Add several more items to make sure the last row is left-aligned.
|
||||
Credits: http://codepen.io/dalgard/pen/Dbnus
|
||||
-->
|
||||
<span class="item"></span>
|
||||
<span class="item"></span>
|
||||
<span class="item"></span>
|
||||
<span class="item"></span>
|
||||
<span class="item"></span>
|
||||
<span class="item"></span>
|
||||
<span class="item"></span>
|
||||
<span class="item"></span>
|
||||
<span class="item" v-for="n in 10"></span>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -21,10 +21,7 @@
|
|||
</span>
|
||||
|
||||
<div class="buttons" v-show="!isPhone || showingControls">
|
||||
<button class="play-shuffle"
|
||||
@click.prevent="shuffle"
|
||||
v-if="selectedSongs.length < 2"
|
||||
>
|
||||
<button class="play-shuffle" @click.prevent="shuffle" v-if="selectedSongs.length < 2">
|
||||
<i class="fa fa-random"></i> All
|
||||
</button>
|
||||
<button class="play-shuffle" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
|
||||
|
|
@ -34,18 +31,11 @@
|
|||
{{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
|
||||
</button>
|
||||
|
||||
<add-to-menu
|
||||
:songs="selectedSongs"
|
||||
:showing="showingAddToMenu"
|
||||
</add-to-menu>
|
||||
<add-to-menu :songs="selectedSongs" :showing="showingAddToMenu"><add-to-menu>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<song-list
|
||||
:items="artist.songs"
|
||||
:selected-songs.sync="selectedSongs"
|
||||
type="artist">
|
||||
</song-list>
|
||||
<song-list :items="artist.songs" :selected-songs.sync="selectedSongs" type="artist"></song-list>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -13,14 +13,7 @@
|
|||
Add several more items to make sure the last row is left-aligned.
|
||||
Credits: http://codepen.io/dalgard/pen/Dbnus
|
||||
-->
|
||||
<span class="item"></span>
|
||||
<span class="item"></span>
|
||||
<span class="item"></span>
|
||||
<span class="item"></span>
|
||||
<span class="item"></span>
|
||||
<span class="item"></span>
|
||||
<span class="item"></span>
|
||||
<span class="item"></span>
|
||||
<span class="item" v-for="n in 10"></span>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
:songs="selectedSongs"
|
||||
:showing="showingAddToMenu && state.songs.length"
|
||||
:settings="{ canLike: false }">
|
||||
</add-to-menu>
|
||||
<add-to-menu>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
|
|
|
|||
|
|
@ -35,10 +35,7 @@
|
|||
<i class="fa fa-times"></i> Playlist
|
||||
</button>
|
||||
|
||||
<add-to-menu
|
||||
:songs="selectedSongs"
|
||||
:showing="showingAddToMenu && playlist.songs.length"
|
||||
</add-to-menu>
|
||||
<add-to-menu :songs="selectedSongs" :showing="showingAddToMenu && playlist.songs.length"><add-to-menu>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<div class="preferences">
|
||||
<div class="form-row">
|
||||
<label>
|
||||
<input type="checkbox" v-model="prefs.notify" @change="savePreference()">
|
||||
<input type="checkbox" v-model="prefs.notify" @change="savePreference">
|
||||
Show “Now Playing” song notification
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -258,8 +258,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (max-device-width : 667px) {
|
||||
@media only screen and (max-device-width : 667px) {
|
||||
input {
|
||||
&[type="text"], &[type="email"], &[type="password"] {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -163,8 +163,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (max-device-width : 667px) {
|
||||
@media only screen and (max-device-width : 667px) {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -68,8 +68,7 @@
|
|||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (max-device-width : 667px) {
|
||||
@media only screen and (max-device-width : 667px) {
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,18 +32,11 @@
|
|||
{{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
|
||||
</button>
|
||||
|
||||
<add-to-menu
|
||||
:songs="selectedSongs"
|
||||
:showing="showingAddToMenu">
|
||||
</add-to-menu>
|
||||
<add-to-menu :songs="selectedSongs" :showing="showingAddToMenu"><add-to-menu>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<song-list
|
||||
:items="state.songs"
|
||||
:selected-songs.sync="selectedSongs"
|
||||
type="allSongs">
|
||||
</song-list>
|
||||
<song-list :items="state.songs" :selected-songs.sync="selectedSongs" type="allSongs"></song-list>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -85,12 +85,7 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
<article class="user-item"></article>
|
||||
<article class="user-item"></article>
|
||||
<article class="user-item"></article>
|
||||
<article class="user-item"></article>
|
||||
<article class="user-item"></article>
|
||||
<article class="user-item"></article>
|
||||
<article class="user-item" v-for="n in 6"></article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -335,8 +330,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (max-device-width : 667px) {
|
||||
@media only screen and (max-device-width : 667px) {
|
||||
form.user-create, form.user-edit {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
|
|
|||
|
|
@ -250,9 +250,7 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
@media only screen
|
||||
and (max-device-width : 667px) {
|
||||
@media only screen and (max-device-width : 667px) {
|
||||
position: fixed;
|
||||
height: calc(100vh - #{$headerHeight + $footerHeight});
|
||||
padding-bottom: $footerHeight; // make sure the footer can never overlap the content
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
@dragleave="removeDroppableState"
|
||||
@dragover.prevent="allowDrop"
|
||||
@drop.stop.prevent="handleDrop"
|
||||
:class="{ 'active': active }"
|
||||
:class="{ active: active }"
|
||||
>{{ playlist.name }}</a>
|
||||
|
||||
<input type="text"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<section id="playlists">
|
||||
<h1>Playlists
|
||||
<i class="fa fa-plus-circle control create"
|
||||
:class="{ creating : this.creating }"
|
||||
:class="{ creating: creating }"
|
||||
@click="creating = !creating"></i>
|
||||
</h1>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,25 @@
|
|||
<template>
|
||||
<div class="add-to-playlist" v-show="showing">
|
||||
<p>Add {{ songs.length }} song{{ songs.length > 1 ? 's' : '' }} to</p>
|
||||
<p>Add {{ songs.length }} {{ songs.length | pluralize 'song' }} to</p>
|
||||
|
||||
<ul>
|
||||
<li v-if="mergedSettings.canQueue" @click="queueSongsToBottom">Bottom of Queue</li>
|
||||
<li v-if="mergedSettings.canQueue" @click="queueSongsToTop">Top of Queue</li>
|
||||
<li v-if="mergedSettings.canLike" @click="addSongsToFavorite">Favorites</li>
|
||||
<li v-for="playlist in playlistState.playlists" @click="addSongsToExistingPlaylist(playlist)">{{ playlist.name }}</li>
|
||||
</ul>
|
||||
|
||||
<p>or create a new playlist</p>
|
||||
|
||||
<form class="form-save form-simple" @submit.prevent="createNewPlaylistFromSongs">
|
||||
<input type="text"
|
||||
@keyup.esc.prevent="hideMenu"
|
||||
v-model="newPlaylistName"
|
||||
placeholder="Playlist name"
|
||||
required>
|
||||
<button type="submit"><i class="fa fa-save"></i></button>
|
||||
<button type="submit">
|
||||
<i class="fa fa-save"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<article class="item" v-if="artist.songCount">
|
||||
<span class="cover" :style="{ backgroundImage: 'url('+artist.image+')' }">
|
||||
<span class="cover" :style="{ backgroundImage: 'url(' + artist.image + ')' }">
|
||||
<a class="control" @click.prevent="play">
|
||||
<i class="fa fa-play"></i>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
<tr
|
||||
@dblclick.prevent="playRighAwayyyyyyy"
|
||||
class="song-item"
|
||||
:class="{ 'selected': selected, 'playing': playbackState === 'playing' || playbackState === 'paused' }"
|
||||
|
||||
:class="{ selected: selected, playing: playbackState === 'playing' || playbackState === 'paused' }"
|
||||
>
|
||||
<td class="title">{{ song.title }}</td>
|
||||
<td class="artist">{{ song.album.artist.name }}</td>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div class="song-list-wrap main-scroll-wrap {{ type }}" tabindex="1" v-el:wrapper
|
||||
<div class="song-list-wrap main-scroll-wrap {{ type }}"
|
||||
v-el:wrapper
|
||||
tabindex="1"
|
||||
@scroll="scrolling"
|
||||
@keydown.delete.prevent.stop="handleDelete"
|
||||
@keydown.8.prevent.stop="handleDelete"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
<template>
|
||||
<div id="bars">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar" v-for="n in 5"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
<template>
|
||||
<div id="equalizer">
|
||||
<div class="presets">
|
||||
<button v-for="preset in presets" @click.prevent="loadPreset(preset)">{{ preset.name }}</button>
|
||||
<button v-for="preset in presets" @click.prevent="loadPreset(preset)">{{* preset.name }}</button>
|
||||
</div>
|
||||
<div class="bands">
|
||||
<span class="band" v-for="band in bands">
|
||||
<label>{{ band.label }}</label>
|
||||
<input type="range" min="-20" max="20" step="0.01" :value="band.filter.gain.value" orient="vertical"
|
||||
<label>{{* band.label }}</label>
|
||||
<input
|
||||
type="range"
|
||||
min="-20"
|
||||
max="20"
|
||||
step="0.01"
|
||||
orient="vertical"
|
||||
:value="band.filter.gain.value"
|
||||
@input="changeGain(band.filter, $event)">
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,7 @@
|
|||
<div class="media-info-wrap">
|
||||
<div class="middle-pane">
|
||||
|
||||
<span class="album-thumb"
|
||||
v-if="cover"
|
||||
:style="{ backgroundImage: 'url(' + cover + ')' }">
|
||||
</span>
|
||||
<span class="album-thumb" v-if="cover" :style="{ backgroundImage: 'url(' + cover + ')' }"></span>
|
||||
|
||||
<div class="progress" id="progressPane">
|
||||
<h3 class="title">{{ song.title }}</h3>
|
||||
|
|
@ -39,7 +36,7 @@
|
|||
|
||||
<sound-bar v-show="playing"></sound-bar>
|
||||
|
||||
<i class="like control fa fa-heart" :class="{ 'liked': liked }"
|
||||
<i class="like control fa fa-heart" :class="{ liked: liked }"
|
||||
@click.prevent="like"></i>
|
||||
|
||||
<span class="control"
|
||||
|
|
@ -53,7 +50,7 @@
|
|||
|
||||
<i v-else
|
||||
class="queue control fa fa-list-ol control"
|
||||
:class="{ 'active': viewingQueue }"
|
||||
:class="{ active: viewingQueue }"
|
||||
@click.prevent="$root.loadMainView('queue')"></i>
|
||||
|
||||
<span class="repeat control {{ prefs.repeatMode }}" @click.prevent="changeRepeatMode">
|
||||
|
|
|
|||
|
|
@ -62,8 +62,7 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (max-device-width : 667px) {
|
||||
@media only screen and (max-device-width : 667px) {
|
||||
display: flex;
|
||||
align-content: stretch;
|
||||
justify-content: flext-start;
|
||||
|
|
|
|||
|
|
@ -63,8 +63,7 @@
|
|||
|
||||
|
||||
|
||||
@media only screen
|
||||
and (max-device-width : 667px) {
|
||||
@media only screen and (max-device-width : 667px) {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -57,8 +57,7 @@
|
|||
@include vertical-center();
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (max-device-width : 667px) {
|
||||
@media only screen and (max-device-width : 667px) {
|
||||
flex: 0 0 96px;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
|
|
|
|||
Loading…
Reference in a new issue