evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: correctly hidden empty sections after performing a search; style: added CoverContainer component; style: removed some CSS classes

Browse Source
This commit is contained in:
Roberto Tonino
2020-11-02 22:33:00 +01:00
parent 738a2ff35e
commit d0f7e11afd
19 changed files with 440 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/globals/CoverContainer.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<div class="cover_container">
<img aria-hidden="true" class="coverart" :class="{ rounded: isRounded, circle: isCircle }" :src="cover" />
<button
role="button"
aria-label="download"
v-on="$listeners"
:data-link="link"
class="bg-black download_overlay hover:bg-primary"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
</template>
<script>
export default {
inheritAttrs: false,
props: {
cover: {
type: String,
reqired: true
},
isRounded: {
type: Boolean,
required: false
},
isCircle: {
type: Boolean,
required: false
},
link: {
type: String,
reqired: true
}
}
}
</script>

2
src/components/globals/TheTrackPreview.vue
View File

@@ -144,5 +144,3 @@ export default {
}
</script>
<style>
</style>

15
src/components/pages/Charts.vue
View File

@@ -42,7 +42,7 @@
<img class="rounded coverart" :src="track.album.cover_small" />
</a>
</td>
<td class="table__cell--large breakline">
<td class="table__cell--large">
{{
track.title +
(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
@@ -50,14 +50,14 @@
</td>
<router-link
tag="td"
class="table__cell table__cell--medium table__cell--center breakline clickable"
class="table__cell table__cell--medium table__cell--center clickable"
:to="{ name: 'Artist', params: { id: track.artist.id } }"
>
{{ track.artist.name }}
</router-link>
<router-link
tag="td"
class="table__cell--medium table__cell--center breakline clickable"
class="table__cell--medium table__cell--center clickable"
:to="{ name: 'Album', params: { id: track.album.id } }"
>
{{ track.album.title }}
@@ -66,13 +66,18 @@
{{ convertDuration(track.duration) }}
</td>
<td
class="table__cell--download"
class="cursor-pointer group"
@click.stop="addToQueue"
:data-link="track.link"
role="button"
aria-label="download"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
<i
class="transition-colors duration-150 ease-in-out material-icons group-hover:text-primary"
:title="$t('globals.download_hint')"
>
get_app
</i>
</td>
</tr>
</tbody>

81
src/components/pages/Favorites.vue
View File

@@ -41,20 +41,9 @@
class="release clickable"
:to="{ name: 'Playlist', params: { id: release.id } }"
>
<div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
<button
role="button"
aria-label="download"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{
`${$t('globals.by', { artist: release.creator.name })} - ${$tc(
@@ -64,6 +53,7 @@
}}
</p>
</router-link>
<router-link
tag="div"
v-for="release in spotifyPlaylists"
@@ -71,20 +61,9 @@
class="release clickable"
:to="{ name: 'Spotify Playlist', params: { id: release.id } }"
>
<div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
<button
role="button"
aria-label="download"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{
`${$t('globals.by', { artist: release.creator.name })} - ${$tc(
@@ -109,22 +88,11 @@
:key="release.id"
:to="{ name: 'Album', params: { id: release.id } }"
>
<div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.cover_medium" />
<button
role="button"
aria-label="download"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<CoverContainer is-rounded :cover="release.cover_medium" :link="release.link" @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</router-link>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</div>
</div>
@@ -140,19 +108,7 @@
:key="release.id"
:to="{ name: 'Artist', params: { id: release.id } }"
>
<div class="cover_container">
<img aria-hidden="true" class="circle coverart" :src="release.picture_medium" />
<button
role="button"
aria-label="download"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<CoverContainer is-circle :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
<p class="primary-text">{{ release.name }}</p>
</router-link>
</div>
@@ -180,7 +136,7 @@
<img class="rounded coverart" :src="track.album.cover_small" />
</a>
</td>
<td class="table__cell--large breakline">
<td class="table__cell--large">
{{
track.title +
(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
@@ -188,14 +144,14 @@
</td>
<router-link
tag="td"
class="table__cell table__cell--medium table__cell--center breakline clickable"
class="table__cell table__cell--medium table__cell--center clickable"
:to="{ name: 'Artist', params: { id: track.artist.id } }"
>
{{ track.artist.name }}
</router-link>
<router-link
tag="td"
class="table__cell--medium table__cell--center breakline clickable"
class="table__cell--medium table__cell--center clickable"
:to="{ name: 'Album', params: { id: track.album.id } }"
>
{{ track.album.title }}
@@ -204,14 +160,19 @@
{{ convertDuration(track.duration) }}
</td>
<td
class="table__cell--download clickable"
class="cursor-pointer group"
@click.stop="addToQueue"
:data-link="track.link"
role="button"
aria-label="download"
>
<div class="table__cell-content table__cell-content--vertical-center">
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
<i
class="transition-colors duration-150 ease-in-out material-icons group-hover:text-primary"
:title="$t('globals.download_hint')"
>
get_app
</i>
</div>
</td>
</tr>
@@ -247,10 +208,12 @@ import { getFavoritesData } from '@/data/favorites'
import EventBus from '@/utils/EventBus'
import PreviewControls from '@components/globals/PreviewControls.vue'
import CoverContainer from '@components/globals/CoverContainer.vue'
export default {
components: {
PreviewControls
PreviewControls,
CoverContainer
},
data() {
return {

33
src/components/pages/Home.vue
View File

@@ -21,19 +21,7 @@
@keyup.enter.native="$router.push({ name: 'Playlist', params: { id: release.id } })"
tabindex="0"
>
<div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
<button
role="button"
aria-label="download"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{
@@ -60,19 +48,7 @@
:data-id="release.id"
tabindex="0"
>
<div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.cover_medium" />
<button
role="button"
aria-label="download"
@click.stop="addToQueue"
:data-link="release.link"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<CoverContainer is-rounded :cover="release.cover_medium" :link="release.link" @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</router-link>
@@ -87,7 +63,12 @@ import { mapGetters } from 'vuex'
import { sendAddToQueue } from '@/utils/downloads'
import { getHomeData } from '@/data/home'
import CoverContainer from '@components/globals/CoverContainer.vue'
export default {
components: {
CoverContainer
},
data() {
return {
playlists: [],

49
src/components/search/ResultsAlbums.vue
View File

@@ -8,38 +8,29 @@
</div>
<div class="release_grid" v-else>
<router-link
tag="div"
v-for="release in viewInfo.data.slice(0, itemsToShow)"
:key="release.albumID"
class="release clickable"
:to="{ name: 'Album', params: { id: release.albumID } }"
>
<div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.albumCoverMedium" />
<button
role="button"
aria-label="download"
<div class="w-40 release" v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.albumID">
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Album', params: { id: release.albumID } }">
<CoverContainer
is-rounded
:cover="release.albumCoverMedium"
:link="release.albumLink"
@click.stop="$emit('add-to-queue', $event)"
:data-link="release.albumLink"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<p class="primary-text flex items-center">
<i v-if="release.isAlbumExplicit" class="material-icons explicit-icon">explicit</i>
{{ release.albumTitle }}
</p>
<p class="secondary-text">
/>
<span class="mb-1 transition-colors duration-200 ease-in-out hover:text-primary">
<i v-if="release.isAlbumExplicit" class="material-icons explicit-icon">explicit</i>
{{ release.albumTitle }}
</span>
</router-link>
<p class="mb-1 text-sm opacity-75">
{{
$t('globals.by', { artist: release.artistName }) +
' - ' +
$tc('globals.listTabs.trackN', release.albumTracks)
}}
</p>
</router-link>
</div>
</div>
</template>
</section>
@@ -47,8 +38,13 @@
<script>
import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
import CoverContainer from '@components/globals/CoverContainer.vue'
export default {
components: {
BaseLoadingPlaceholder,
CoverContainer
},
props: {
viewInfo: {
validator: function (value) {
@@ -73,9 +69,6 @@ export default {
isLoading() {
return !this.viewInfo || !this.viewInfo.hasLoaded
}
},
components: {
BaseLoadingPlaceholder
}
}
</script>

120
src/components/search/ResultsAll.vue
View File

@@ -8,70 +8,60 @@
<section
v-for="section in viewInfo.ORDER"
:key="section"
class="float-none py-5 border-grayscale-500 border-t first:border-t-0"
class="float-none py-5 border-t border-grayscale-500 first:border-t-0"
>
<h2
@click="$emit('change-search-tab', section)"
class="mb-6 capitalize"
:class="{
'text-4xl text-center': section === 'TOP_RESULT',
'inline-block cursor-pointer text-3xl hover:text-primary transition-colors duration-200 ease-in-out':
section !== 'TOP_RESULT'
}"
>
{{ $tc(`globals.listTabs.${section.toLowerCase()}`, 2) }}
</h2>
<template v-if="checkSectionResults(section)">
<h2
@click="$emit('change-search-tab', section)"
class="mb-6 capitalize"
:class="{
'text-4xl text-center': section === 'TOP_RESULT',
'inline-block cursor-pointer text-3xl hover:text-primary transition-colors duration-200 ease-in-out':
section !== 'TOP_RESULT'
}"
>
{{ $tc(`globals.listTabs.${section.toLowerCase()}`, 2) }}
</h2>
<TopResult
v-if="section === 'TOP_RESULT'"
:info="viewInfo.TOP_RESULT[0]"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<TopResult
v-if="section === 'TOP_RESULT'"
:info="viewInfo.TOP_RESULT[0]"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<ResultsTracks
v-else-if="section === 'TRACK'"
:viewInfo="formatSearchResults(viewInfo.TRACK, formatSingleTrack)"
:itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<ResultsTracks
v-else-if="section === 'TRACK'"
:viewInfo="formatSearchResults(viewInfo.TRACK, formatSingleTrack)"
:itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<ResultsAlbums
v-else-if="section == 'ALBUM'"
:viewInfo="formatSearchResults(viewInfo.ALBUM, formatAlbums)"
:itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<ResultsAlbums
v-else-if="section == 'ALBUM'"
:viewInfo="formatSearchResults(viewInfo.ALBUM, formatAlbums)"
:itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<ResultsPlaylists
v-else-if="section == 'PLAYLIST'"
:viewInfo="formatSearchResults(viewInfo.PLAYLIST, formatPlaylist)"
:itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<ResultsPlaylists
v-else-if="section == 'PLAYLIST'"
:viewInfo="formatSearchResults(viewInfo.PLAYLIST, formatPlaylist)"
:itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<ResultsArtists
v-else-if="section === 'ARTIST'"
:viewInfo="formatSearchResults(viewInfo.ARTIST, formatArtist)"
:itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<ResultsArtists
v-else-if="section === 'ARTIST'"
:viewInfo="formatSearchResults(viewInfo.ARTIST, formatArtist)"
:itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
</template>
</section>
</template>
</section>
</template>
<style scoped>
.tag {
background-color: var(--tag-background);
border-radius: 2px;
color: var(--tag-text);
display: inline-block;
font-size: 10px;
padding: 3px 6px;
text-transform: capitalize;
}
</style>
<script>
import { convertDuration } from '@/utils/utils'
import { upperCaseFirstLowerCaseRest } from '@/utils/texts'
@@ -110,21 +100,6 @@ export default {
)
return !noResultsPresent
},
fansNumber() {
let number
try {
number = this.$n(this.viewInfo.TOP_RESULT[0].nb_fan)
} catch (error) {
number = this.$n(this.viewInfo.TOP_RESULT[0].nb_fan, { locale: 'en' })
}
return this.viewInfo.TOP_RESULT[0].type == 'artist'
? this.$t('search.fans', { n: number })
: this.$t('globals.by', { artist: this.viewInfo.TOP_RESULT[0].artist }) +
' - ' +
this.$tc('globals.listTabs.trackN', this.viewInfo.TOP_RESULT[0].nb_song)
}
},
methods: {
@@ -134,7 +109,14 @@ export default {
formatSingleTrack,
formatAlbums,
formatArtist,
formatPlaylist
formatPlaylist,
checkSectionResults(section) {
if (section === 'TOP_RESULT') {
return !!this.viewInfo.TOP_RESULT[0]
} else {
return !!this.viewInfo[section].data[0]
}
}
}
}
</script>

42
src/components/search/ResultsArtists.vue
View File

@@ -8,29 +8,23 @@
</div>
<div v-else class="release_grid">
<router-link
tag="div"
v-for="release in viewInfo.data.slice(0, itemsToShow)"
class="release clickable"
:key="release.artistID"
:to="{ name: 'Artist', params: { id: release.artistID } }"
>
<div class="cover_container">
<img aria-hidden="true" class="circle coverart" :src="release.artistPictureMedium" />
<button
role="button"
aria-label="download"
<div class="w-40 release" v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.artistID">
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Artist', params: { id: release.artistID } }">
<CoverContainer
is-circle
:cover="release.artistPictureMedium"
:link="release.artistLink"
@click.stop="$emit('add-to-queue', $event)"
:data-link="release.artistLink"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<p class="primary-text">{{ release.artistName }}</p>
<p class="secondary-text">{{ $tc('globals.listTabs.releaseN', release.artistAlbumsNumber) }}</p>
</router-link>
/>
<span class="mb-1 transition-colors duration-200 ease-in-out hover:text-primary">
{{ release.artistName }}
</span>
</router-link>
<!-- TODO Fix, depending on the tab there are albums number or fans number -->
<!-- <p class="mb-1 text-sm opacity-75">{{ $tc('globals.listTabs.releaseN', release.artistAlbumsNumber) }}</p> -->
</div>
</div>
</template>
</section>
@@ -38,10 +32,12 @@
<script>
import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
import CoverContainer from '@components/globals/CoverContainer.vue'
export default {
components: {
BaseLoadingPlaceholder
BaseLoadingPlaceholder,
CoverContainer
},
props: {
viewInfo: {

41
src/components/search/ResultsPlaylists.vue
View File

@@ -7,28 +7,21 @@
<h1>{{ $t('search.noResultsPlaylist') }}</h1>
</div>
<div class="release_grid" v-else>
<router-link
tag="div"
v-for="playlist in viewInfo.data.slice(0, itemsToShow)"
class="release clickable"
:key="playlist.playlistID"
:to="{ name: 'Playlist', params: { id: playlist.playlistID } }"
>
<div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="playlist.playlistPictureMedium" />
<button
role="button"
aria-label="download"
<div class="w-40 release" v-for="playlist in viewInfo.data.slice(0, itemsToShow)" :key="playlist.playlistID">
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: playlist.playlistID } }">
<CoverContainer
is-rounded
:cover="playlist.playlistPictureMedium"
:link="playlist.playlistLink"
@click.stop="$emit('add-to-queue', $event)"
:data-link="playlist.playlistLink"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<p class="primary-text">{{ playlist.playlistTitle }}</p>
<p class="secondary-text">
/>
<span class="mb-1 transition-colors duration-200 ease-in-out hover:text-primary">
{{ playlist.playlistTitle }}
</span>
</router-link>
<p class="mb-1 text-sm opacity-75">
{{
`${$t('globals.by', { artist: playlist.artistName })} - ${$tc(
'globals.listTabs.trackN',
@@ -36,7 +29,7 @@
)}`
}}
</p>
</router-link>
</div>
</div>
</template>
</section>
@@ -44,10 +37,12 @@
<script>
import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
import CoverContainer from '@components/globals/CoverContainer.vue'
export default {
components: {
BaseLoadingPlaceholder
BaseLoadingPlaceholder,
CoverContainer
},
props: {
viewInfo: {

55
src/components/search/ResultsTracks.vue
View File

@@ -7,16 +7,16 @@
<h1>{{ $t('search.noResultsTrack') }}</h1>
</div>
<table v-else class="table table--tracks">
<table v-else class="table w-full table--tracks">
<thead v-if="wantHeaders">
<tr class="capitalize">
<th colspan="2">{{ $tc('globals.listTabs.title', 1) }}</th>
<th>{{ $tc('globals.listTabs.artist', 1) }}</th>
<th>{{ $tc('globals.listTabs.album', 1) }}</th>
<th>
<th class="h-12 pb-3" colspan="2">{{ $tc('globals.listTabs.title', 1) }}</th>
<th class="h-12 pb-3">{{ $tc('globals.listTabs.artist', 1) }}</th>
<th class="h-12 pb-3">{{ $tc('globals.listTabs.album', 1) }}</th>
<th class="h-12 pb-3">
<i class="material-icons">timer</i>
</th>
<th style="width: 3.5rem"></th>
<th class="h-12 pb-3" style="width: 3.5rem"></th>
</tr>
</thead>
@@ -25,7 +25,7 @@
<td class="table__icon table__icon--big">
<a
href="#"
@click="playPausePreview"
@click="playPausePreview($event)"
class="rounded"
:class="{ 'single-cover': !!track.trackPreview }"
:data-preview="track.trackPreview"
@@ -35,37 +35,50 @@
<img class="rounded coverart" :src="track.albumPicture" />
</a>
</td>
<td class="table__cell table__cell--large breakline">
<div class="table__cell-content table__cell-content--vertical-center">
<td class="table__cell table__cell--large">
<div class="break-words table__cell-content table__cell-content--vertical-center">
<i v-if="track.isTrackExplicit" class="material-icons explicit-icon">explicit</i>
{{ getTitle(track) }}
{{ formatTitle(track) }}
</div>
</td>
<router-link
tag="td"
class="table__cell table__cell--medium table__cell--center breakline clickable"
class="break-words table__cell table__cell--medium table__cell--center"
:to="{ name: 'Artist', params: { id: track.artistID } }"
>
{{ track.artistName }}
<span class="cursor-pointer hover:underline">
{{ track.artistName }}
</span>
</router-link>
<router-link
tag="td"
class="table__cell table__cell--medium table__cell--center breakline clickable"
class="break-words table__cell table__cell--medium table__cell--center"
:to="{ name: 'Album', params: { id: track.albumID } }"
>
{{ track.albumTitle }}
<span class="cursor-pointer hover:underline">
{{ track.albumTitle }}
</span>
</router-link>
<td class="table__cell table__cell--small table__cell--center">
{{ convertDuration(track.trackDuration) }}
</td>
<td
class="table__cell--download table__cell--center clickable"
class="cursor-pointer table__cell--center group"
@click.stop="$emit('add-to-queue', $event)"
:data-link="track.trackLink"
role="button"
aria-label="download"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
<i
class="transition-colors duration-150 ease-in-out material-icons group-hover:text-primary"
:title="$t('globals.download_hint')"
>
get_app
</i>
</td>
</tr>
</tbody>
@@ -81,6 +94,8 @@ import PreviewControls from '@components/globals/PreviewControls.vue'
import EventBus from '@/utils/EventBus'
import { convertDuration } from '@/utils/utils'
import { formatTitle } from '@/data/search'
export default {
components: {
BaseLoadingPlaceholder,
@@ -113,13 +128,9 @@ export default {
},
methods: {
convertDuration,
formatTitle,
playPausePreview(e) {
EventBus.$emit('trackPreview:playPausePreview', e)
},
getTitle(track) {
const hasTitleVersion = track.trackTitleVersion && track.trackTitle.indexOf(track.trackTitleVersion) === -1
return `${track.trackTitle}${hasTitleVersion ? ` ${track.trackTitleVersion}` : ''}`
}
}
}

68
src/components/search/TopResult.vue
View File

@@ -1,54 +1,42 @@
<template>
<router-link
tag="div"
class="top_result cursor-pointer flex items-center flex-col"
:to="{ name: upperCaseFirstLowerCaseRest($attrs.info.type), params: { id: $attrs.info.id } }"
>
<div class="cover_container">
<img
aria-hidden="true"
class="coverart"
:src="$attrs.info.picture"
:class="$attrs.info.type == 'artist' ? 'circle' : 'rounded'"
<div class="flex flex-col items-center justify-center">
<router-link
tag="div"
class="cursor-pointer"
:to="{ name: upperCaseFirstLowerCaseRest($attrs.info.type), params: { id: $attrs.info.id } }"
>
<CoverContainer
class="w-40 h-40"
:is-rounded="$attrs.info.type !== 'artist'"
:is-circle="$attrs.info.type === 'artist'"
:cover="$attrs.info.picture"
:link="$attrs.info.link"
@click.stop="$emit('add-to-queue', $event)"
/>
<button
role="button"
aria-label="download"
@click.stop="$emit('add-to-queue', $event)"
:data-link="$attrs.info.link"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<div class="info_box">
<p class="primary-text">{{ $attrs.info.title }}</p>
<p class="secondary-text">
{{ fansNumber }}
<p class="mt-4 mb-1 text-xl text-center transition-colors duration-200 ease-in-out hover:text-primary">
{{ $attrs.info.title }}
</p>
<span class="tag">{{ $tc(`globals.listTabs.${$attrs.info.type}`, 1) }}</span>
</div>
</router-link>
</router-link>
<p class="mb-3 text-center secondary-text">
{{ fansNumber }}
</p>
<span class="p-1 px-2 text-xs text-center capitalize bg-primary rounded-xl">
{{ $tc(`globals.listTabs.${$attrs.info.type}`, 1) }}
</span>
</div>
</template>
<style scoped>
.tag {
background-color: var(--tag-background);
border-radius: 2px;
color: var(--tag-text);
display: inline-block;
font-size: 10px;
padding: 3px 6px;
text-transform: capitalize;
}
</style>
<script>
import { upperCaseFirstLowerCaseRest } from '@/utils/texts'
import CoverContainer from '@components/globals/CoverContainer.vue'
export default {
components: {
CoverContainer
},
methods: {
upperCaseFirstLowerCaseRest
},

7
src/data/search.js
View File

@@ -106,6 +106,7 @@ export function formatArtist(artist) {
getProperty(artist, 'picture_medium') ||
`https://e-cdns-images.dzcdn.net/images/artist/${artist.ART_PICTURE}/156x156-000000-80-0-0.jpg`,
artistLink: getProperty(artist, 'link') || `https://deezer.com/artist/${artist.ART_ID}`,
// TODO Fix
artistAlbumsNumber: getProperty(artist, 'nb_album', 'NB_FAN')
}
}
@@ -127,3 +128,9 @@ export function formatPlaylist(playlist) {
artistName: getProperty(playlist, 'user.name')
}
}
export function formatTitle(track) {
const hasTitleVersion = track.trackTitleVersion && track.trackTitle.indexOf(track.trackTitleVersion) === -1
return `${track.trackTitle}${hasTitleVersion ? ` ${track.trackTitleVersion}` : ''}`
}

2
src/styles/scss/base/_base.scss
View File

@@ -1,8 +1,6 @@
:root {
--main-scroll: theme('colors.grayscale.300');
--panels-scroll: hsl(180, 2%, 17%);
--tag-background: hsl(210, 100%, 38%);
--tag-text: theme('colors.white');
--toast-background: hsla(240, 12%, 16%, 0.85);
--toast-secondary: hsla(240, 12%, 16%, 0.15);
--toast-text: hsla(0, 0%, 100%, 0.85);

3
src/styles/scss/globals/_globals.scss
View File

@@ -88,6 +88,7 @@ img {
}
.coverart {
// ? Why?
background-color: var(--secondary-background);
}
@@ -113,7 +114,7 @@ img {
opacity: 0;
border: 0px;
border-radius: 50%;
background-color: #000000;
// background-color: #000000;
padding: 0px;
min-width: 32px;
height: 44px;

28
src/styles/scss/globals/_tables.scss
View File

@@ -34,7 +34,6 @@ $table-border-radius: 3px;
th {
.sortable {
-webkit-user-select: none;
user-select: none;
}
@@ -80,19 +79,6 @@ $table-border-radius: 3px;
border-bottom: 2px solid var(--table-highlight);
}
th {
padding-bottom: 10px;
height: 45px;
}
td {
height: 35px;
&.breakline {
word-break: break-word;
}
}
tr {
&:first-child {
td {
@@ -190,20 +176,6 @@ $table-border-radius: 3px;
&--right {
text-align: right;
}
&--download {
cursor: pointer;
i.material-icons {
transition: color 175ms ease-in-out;
}
&:hover {
i.material-icons {
@apply text-primary;
}
}
}
}
.table__cell-content {

47
src/styles/scss/tabs/_search-tab.scss
View File

@@ -1,43 +1,3 @@
/* Top Result */
.top_result {
@apply flex items-center flex-col;
// display: flex;
// align-items: center;
// flex-direction: column;
> .cover_container {
width: 9.75rem;
height: 9.75rem;
}
.info_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 0.9375rem;
.primary-text,
.secondary-text {
font-size: 1.125rem;
text-align: center;
}
.primary-text {
margin-bottom: 0.3125rem;
}
.secondary-text {
margin-bottom: 0.625rem;
}
.tag {
width: 2.5rem;
text-align: center;
}
}
}
/* Releases */
.release {
.primary-text,
@@ -61,11 +21,4 @@
display: grid;
grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
grid-gap: 1rem;
&.firstrow_only {
grid-template-rows: 1fr;
grid-auto-rows: 0;
grid-row-gap: 0rem;
overflow-y: hidden;
}
}