Commit de919a9c authored by Agate's avatar Agate 💬

Attement to help with #16, removed a lot of color and clutter from the interface

parent 0bfe12ae
......@@ -21,11 +21,11 @@ export default {
// see https://github.com/webpack/webpack/issues/215
@import 'semantic/semantic.css';
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
.main.pusher {
margin-left: 350px !important;
......@@ -52,4 +52,8 @@ export default {
}
}
}
.discrete.link {
color: rgba(0, 0, 0, 0.87);
}
</style>
......@@ -16,14 +16,12 @@
<a class="active item" data-tab="browse">Browse</a>
<a class="item" data-tab="queue">
Queue &nbsp;
<div class="ui tiny orange label">
<template v-if="queue.tracks.length === 0">
0
</template>
<template v-else>
{{ queue.currentIndex + 1}}/{{ queue.tracks.length }}
</template>
</div>
<template v-if="queue.tracks.length === 0">
(empty)
</template>
<template v-else>
({{ queue.currentIndex + 1}} of {{ queue.tracks.length }})
</template>
</a>
</div>
</div>
......@@ -174,7 +172,8 @@ $sidebar-color: #1B1C1D;
}
.player-wrapper {
border-top: 1px solid white;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
background-color: rgb(46, 46, 46) !important;
}
.logo {
......
<template>
<div :class="['ui', {'teal': !discrete}, {'tiny': discrete}, 'buttons']">
<button title="Add to current queue" @click="add" :class="['ui', {'mini': discrete}, 'icon', {'labeled': !discrete}, 'button']">
<div :class="['ui', {'tiny': discrete}, 'buttons']">
<button title="Add to current queue" @click="add" :class="['ui', {'mini': discrete}, 'button']">
<i class="ui play icon"></i>
<template v-if="!discrete"><slot>Play</slot></template>
</button>
......
<template>
<div class="player">
<div v-if="queue.currentTrack" class="track-area ui items">
<div class="ui item">
<div class="ui inverted item">
<div class="ui tiny image">
<img v-if="queue.currentTrack.album.cover" :src="Track.getCover(queue.currentTrack)">
<img v-else src="../../assets/audio/default-cover.png">
</div>
<div class="middle aligned content">
<a class="header">
<router-link class="track" :to="{name: 'browse.track', params: {id: queue.currentTrack.id }}">
{{ queue.currentTrack.title }}
</router-link>
</a>
<router-link class="small header discrete link track" :to="{name: 'browse.track', params: {id: queue.currentTrack.id }}">
{{ queue.currentTrack.title }}
</router-link>
<div class="meta">
<router-link class="artist" :to="{name: 'browse.artist', params: {id: queue.currentTrack.artist.id }}">
<i class="users icon"></i> {{ queue.currentTrack.artist.name }}
</router-link>
{{ queue.currentTrack.artist.name }}
</router-link> /
<router-link class="album" :to="{name: 'browse.album', params: {id: queue.currentTrack.album.id }}">
<i class="sound icon"></i> {{ queue.currentTrack.album.title }}
{{ queue.currentTrack.album.title }}
</router-link>
</div>
<div class="description">
<track-favorite-icon :track="queue.currentTrack"></track-favorite-icon>
</div>
</div>
</div>
</div>
......@@ -28,9 +29,6 @@
<div class="left floated four wide column">
<p class="timer start" @click="queue.audio.setTime(0)">{{queue.audio.state.currentTimeFormat}}</p>
</div>
<div class=" actions eight wide column">
<track-favorite-icon v-if="queue.currentTrack" :track="queue.currentTrack"></track-favorite-icon>
</div>
<div class="right floated four wide column">
<p class="timer total">{{queue.audio.state.durationTimerFormat}}</p>
......@@ -134,6 +132,16 @@ export default {
}
}
.ui.inverted.item > .content > .description {
color: rgba(255, 255, 255, 0.9) !important;
}
.ui.item {
.meta {
font-size: 90%;
line-height: 1.2
}
}
.timer.total {
text-align: right;
}
......@@ -143,12 +151,6 @@ export default {
.track-area {
.header, .meta, .artist, .album {
color: white !important;
},
.artist, .album {
display: block;
}
.artist {
margin-bottom: 0.3rem;
}
}
......
......@@ -2,7 +2,7 @@
<div>
<h2>Search for some music</h2>
<div :class="['ui', {'loading': isLoading }, 'search']">
<div class="ui icon massive input">
<div class="ui icon big input">
<i class="search icon"></i>
<input ref="search" class="prompt" placeholder="Artist, album, track..." v-model.trim="query" type="text" />
</div>
......
......@@ -6,7 +6,7 @@
<img v-else src="../../../assets/audio/default-cover.png">
</div>
<div class="header">
<router-link :to="{name: 'browse.album', params: {id: album.id }}">{{ album.title }}</router-link>
<router-link class="discrete link" :to="{name: 'browse.album', params: {id: album.id }}">{{ album.title }}</router-link>
</div>
<div class="meta">
By <router-link :to="{name: 'browse.artist', params: {id: album.artist.id }}">
......@@ -18,10 +18,10 @@
<tbody>
<tr v-for="track in tracks">
<td>
<play-button :track="track" :discrete="true"></play-button>
<play-button class="basic icon" :track="track" :discrete="true"></play-button>
</td>
<td colspan="6">
<router-link class="track" :to="{name: 'browse.track', params: {id: track.id }}">
<router-link class="track discrete link" :to="{name: 'browse.track', params: {id: track.id }}">
{{ track.title }}
</router-link>
</td>
......@@ -38,7 +38,7 @@
</div>
</div>
<div class="extra content">
<play-button class="mini right floated" :tracks="album.tracks">Play all</play-button>
<play-button class="mini basic right floated" :tracks="album.tracks">Play all</play-button>
<span>
<i class="music icon"></i>
{{ album.tracks.length }} tracks
......
......@@ -2,7 +2,7 @@
<div class="ui card">
<div class="content">
<div class="header">
<router-link :to="{name: 'browse.artist', params: {id: artist.id }}">
<router-link class="discrete link" :to="{name: 'browse.artist', params: {id: artist.id }}">
{{ artist.name }}
</router-link>
</div>
......@@ -15,13 +15,13 @@
<img class="ui mini image" v-else src="../../../assets/audio/default-cover.png">
</td>
<td colspan="4">
<router-link :to="{name: 'browse.album', params: {id: album.id }}">
<router-link class="discrete link":to="{name: 'browse.album', params: {id: album.id }}">
<strong>{{ album.title }}</strong>
</router-link><br />
{{ album.tracks.length }} tracks
</td>
<td>
<play-button class="right floated" :discrete="true" :tracks="album.tracks"></play-button>
<play-button class="right floated basic icon" :discrete="true" :tracks="album.tracks"></play-button>
</td>
</tr>
</tbody>
......@@ -33,12 +33,12 @@
</div>
</div>
<div class="extra content">
<play-button class="mini right floated" :tracks="allTracks">Play all</play-button>
<span>
<i class="sound icon"></i>
{{ artist.albums.length }} albums
</span>
</div>
<play-button class="mini basic right floated" :tracks="allTracks">Play all</play-button>
</div>
</div>
</template>
......
......@@ -13,7 +13,7 @@
<tbody>
<tr v-for="track in tracks">
<td>
<play-button :discrete="true" :track="track"></play-button>
<play-button class="basic icon" :discrete="true" :track="track"></play-button>
</td>
<td>
<img class="ui mini image" v-if="track.album.cover" :src="backend.absoluteUrl(track.album.cover)">
......@@ -25,16 +25,16 @@
</router-link>
</td>
<td colspan="6">
<router-link class="artist" :to="{name: 'browse.artist', params: {id: track.artist.id }}">
<router-link class="artist discrete link" :to="{name: 'browse.artist', params: {id: track.artist.id }}">
{{ track.artist.name }}
</router-link>
</td>
<td colspan="6">
<router-link class="album" :to="{name: 'browse.album', params: {id: track.album.id }}">
<router-link class="album discrete link" :to="{name: 'browse.album', params: {id: track.album.id }}">
{{ track.album.title }}
</router-link>
</td>
<td><track-favorite-icon :track="track"></track-favorite-icon></td>
<td><track-favorite-icon class="favorite-icon" :track="track"></track-favorite-icon></td>
</tr>
</tbody>
</table>
......@@ -61,4 +61,8 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
tr:not(:hover) .favorite-icon:not(.favorited) {
display: none;
}
</style>
......@@ -20,13 +20,13 @@
</h2>
<div class="ui hidden divider"></div>
</button>
<play-button :tracks="album.tracks">Play all</play-button>
<play-button class="orange" :tracks="album.tracks">Play all</play-button>
<a :href="wikipediaUrl" target="_blank" class="ui labeled icon button">
<a :href="wikipediaUrl" target="_blank" class="ui button">
<i class="wikipedia icon"></i>
Search on wikipedia
</a>
<a :href="musicbrainzUrl" target="_blank" class="ui labeled icon button">
<a :href="musicbrainzUrl" target="_blank" class="ui button">
<i class="external icon"></i>
View on MusicBrainz
</a>
......
......@@ -16,13 +16,13 @@
<div class="ui hidden divider"></div>
<radio-button type="artist" :object-id="artist.id"></radio-button>
</button>
<play-button :tracks="allTracks">Play all albums</play-button>
<play-button class="orange" :tracks="allTracks">Play all albums</play-button>
<a :href="wikipediaUrl" target="_blank" class="ui labeled icon button">
<a :href="wikipediaUrl" target="_blank" class="ui button">
<i class="wikipedia icon"></i>
Search on wikipedia
</a>
<a :href="musicbrainzUrl" target="_blank" class="ui labeled icon button">
<a :href="musicbrainzUrl" target="_blank" class="ui button">
<i class="external icon"></i>
View on MusicBrainz
</a>
......
<template>
<div>
<div class="ui vertical center aligned stripe segment">
<div class="ui vertical stripe segment">
<search :autofocus="true"></search>
</div>
<div class="ui vertical stripe segment">
......
......@@ -22,17 +22,17 @@
</div>
</h2>
<play-button :track="track">Play</play-button>
<play-button class="orange" :track="track">Play</play-button>
<track-favorite-icon :track="track" :button="true"></track-favorite-icon>
<a :href="wikipediaUrl" target="_blank" class="ui labeled icon button">
<a :href="wikipediaUrl" target="_blank" class="ui button">
<i class="wikipedia icon"></i>
Search on wikipedia
</a>
<a :href="musicbrainzUrl" target="_blank" class="ui labeled icon button">
<a :href="musicbrainzUrl" target="_blank" class="ui button">
<i class="external icon"></i>
View on MusicBrainz
</a>
<a v-if="downloadUrl" :href="downloadUrl" target="_blank" class="ui labeled icon button">
<a v-if="downloadUrl" :href="downloadUrl" target="_blank" class="ui button">
<i class="download icon"></i>
Download
</a>
......
<template>
<button @click="favoriteTracks.set(track.id, !isFavorite)" v-if="button" :class="['ui', 'pink', 'labeled', {'inverted': isFavorite}, {'favorited': isFavorite}, 'icon', 'button']">
<button @click="favoriteTracks.set(track.id, !isFavorite)" v-if="button" :class="['ui', 'pink', {'inverted': isFavorite}, {'favorited': isFavorite}, 'button']">
<i class="heart icon"></i>
<template v-if="isFavorite">
In favorites
......@@ -8,7 +8,7 @@
Add to favorites
</template>
</button>
<i v-else @click="favoriteTracks.set(track.id, !isFavorite)" :class="['favorite-icon', 'heart', {'pink': isFavorite}, {'favorited': isFavorite}, 'icon']" :title="title"></i>
<i v-else @click="favoriteTracks.set(track.id, !isFavorite)" :class="['favorite-icon', 'heart', {'pink': isFavorite}, {'favorited': isFavorite}, 'link', 'icon']" :title="title"></i>
</template>
<script>
......@@ -47,7 +47,4 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
i {
cursor: pointer;
}
</style>
<template>
<button @click="toggleRadio" :class="['ui', 'blue', 'labeled', {'inverted': running}, 'icon', 'button']">
<button @click="toggleRadio" :class="['ui', 'blue', {'inverted': running}, 'button']">
<i class="ui feed icon"></i>
<template v-if="running">Stop</template>
<template v-else>Start</template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment