fix: correctly hidden empty sections after performing a search; style: added CoverContainer component; style: removed some CSS classes
This commit is contained in:
Roberto Tonino
parent
738a2ff35e
commit
d0f7e11afd
226
package-lock.json
generated
226
package-lock.json
generated
@ -61,6 +61,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/runtime": {
|
||||
"version": "7.12.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.1.tgz",
|
||||
"integrity": "sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
},
|
||||
"@fullhuman/postcss-purgecss": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",
|
||||
@ -237,31 +246,23 @@
|
||||
"source-map": "0.6.*"
|
||||
},
|
||||
"dependencies": {
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"@vue/component-compiler-utils": {
|
||||
"version": "2.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-2.6.0.tgz",
|
||||
"integrity": "sha512-IHjxt7LsOFYc0DkTncB7OXJL7UzwOLPPQCfEUNyxL2qt+tF12THV+EO33O1G2Uk4feMSWua3iD39Itszx0f0bw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"consolidate": "^0.15.1",
|
||||
"hash-sum": "^1.0.2",
|
||||
"lru-cache": "^4.1.2",
|
||||
"merge-source-map": "^1.1.0",
|
||||
"postcss": "^7.0.14",
|
||||
"postcss-selector-parser": "^5.0.0",
|
||||
"prettier": "1.16.3",
|
||||
"source-map": "~0.6.1",
|
||||
"vue-template-es2015-compiler": "^1.9.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vue/component-compiler-utils": {
|
||||
"version": "2.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-2.6.0.tgz",
|
||||
"integrity": "sha512-IHjxt7LsOFYc0DkTncB7OXJL7UzwOLPPQCfEUNyxL2qt+tF12THV+EO33O1G2Uk4feMSWua3iD39Itszx0f0bw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"consolidate": "^0.15.1",
|
||||
"hash-sum": "^1.0.2",
|
||||
"lru-cache": "^4.1.2",
|
||||
"merge-source-map": "^1.1.0",
|
||||
"postcss": "^7.0.14",
|
||||
"postcss-selector-parser": "^5.0.0",
|
||||
"prettier": "1.16.3",
|
||||
"source-map": "~0.6.1",
|
||||
"vue-template-es2015-compiler": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
|
||||
@ -338,6 +339,90 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@vue/component-compiler-utils": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-1.3.1.tgz",
|
||||
"integrity": "sha512-IyjJW6ToMitgAhp3xh22QiEW8JvHfLyzlyY/J+GjJ71miod9tNsy6xT2ckm/VirlhPMfeM43kgYZe34jhmmzpw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"consolidate": "^0.15.1",
|
||||
"hash-sum": "^1.0.2",
|
||||
"lru-cache": "^4.1.2",
|
||||
"merge-source-map": "^1.1.0",
|
||||
"postcss": "^6.0.20",
|
||||
"postcss-selector-parser": "^3.1.1",
|
||||
"prettier": "^1.13.0",
|
||||
"source-map": "^0.5.6",
|
||||
"vue-template-es2015-compiler": "^1.6.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
|
||||
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
|
||||
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^3.2.1",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"supports-color": "^5.3.0"
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"version": "6.0.23",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
|
||||
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.1",
|
||||
"source-map": "^0.6.1",
|
||||
"supports-color": "^5.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-selector-parser": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
|
||||
"integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"dot-prop": "^5.2.0",
|
||||
"indexes-of": "^1.0.1",
|
||||
"uniq": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
|
||||
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"abbrev": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
|
||||
@ -1512,12 +1597,12 @@
|
||||
"dev": true
|
||||
},
|
||||
"debug": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
|
||||
"integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ms": "2.1.2"
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"decamelize": {
|
||||
@ -2658,9 +2743,9 @@
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true
|
||||
},
|
||||
"nan": {
|
||||
@ -6081,6 +6166,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.7",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
|
||||
"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
|
||||
"dev": true
|
||||
},
|
||||
"repeating": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
|
||||
@ -6381,27 +6472,66 @@
|
||||
}
|
||||
},
|
||||
"rollup-plugin-vue": {
|
||||
"version": "4.7.2",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-4.7.2.tgz",
|
||||
"integrity": "sha512-RuAK+YTL81/iccOWoadqQz2TXqOogivjbvtCuU6EfVP9/E5XIjuMNVsVWHkSelZQblI1z2b5tshWL7XoiOfABQ==",
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-4.2.0.tgz",
|
||||
"integrity": "sha512-n8NDvhYtA9HC3hRyLNAV+0Ei4FHlaOB8LoiXxVwYclgHxOR4aku57zIw8EPf+ETSf45w49UP4VUXgpX6XNwdOA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@vue/component-compiler": "^3.6",
|
||||
"@vue/component-compiler-utils": "^2.1.0",
|
||||
"debug": "^4.1.1",
|
||||
"@babel/runtime": "^7.0.0-beta.46",
|
||||
"@vue/component-compiler": "^3.3.2",
|
||||
"@vue/component-compiler-utils": "^1.2.1",
|
||||
"debug": "^2.6.0",
|
||||
"hash-sum": "^1.0.2",
|
||||
"magic-string": "^0.25.2",
|
||||
"postcss": "^6.0.22",
|
||||
"querystring": "^0.2.0",
|
||||
"rollup-pluginutils": "^2.0.1",
|
||||
"source-map": "0.7.3",
|
||||
"vue-runtime-helpers": "1.0.0"
|
||||
"rollup-pluginutils": "^2.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
|
||||
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
|
||||
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^3.2.1",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"supports-color": "^5.3.0"
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"version": "6.0.23",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
|
||||
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.1",
|
||||
"source-map": "^0.6.1",
|
||||
"supports-color": "^5.4.0"
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
|
||||
"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -7278,12 +7408,6 @@
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.8.tgz",
|
||||
"integrity": "sha512-3BsR84AqarcmweXjItxw3jwQsiYNssYg090yi4rlzTnCJxmHtkyCvhNz9Z7qRSOkmiV485KkUCReTp5AjNY4wg=="
|
||||
},
|
||||
"vue-runtime-helpers": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-runtime-helpers/-/vue-runtime-helpers-1.0.0.tgz",
|
||||
"integrity": "sha512-DgwCNgIXkq1GJsWwtFOjA/K2nxpjyon/QqAut0EiwrMHBatAPbfdqksDdRoK15b5YrSJRa59rx3pc0L6V4udUA==",
|
||||
"dev": true
|
||||
},
|
||||
"vue-template-compiler": {
|
||||
"version": "2.6.12",
|
||||
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz",
|
||||
|
||||
File diff suppressed because one or more lines are too long
40
src/components/globals/CoverContainer.vue
Normal file
40
src/components/globals/CoverContainer.vue
Normal 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>
|
||||
@ -144,5 +144,3 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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: [],
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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}` : ''}`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
},
|
||||
|
||||
@ -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}` : ''}`
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,7 +49,8 @@ module.exports = {
|
||||
},
|
||||
variants: {
|
||||
textColor: ({ after }) => after(['group-hover']),
|
||||
borderWidth: ['responsive', 'first', 'hover', 'focus']
|
||||
borderWidth: ['responsive', 'first', 'hover', 'focus'],
|
||||
cursor: ['responsive', 'hover']
|
||||
},
|
||||
corePlugins: {
|
||||
preflight: false
|
||||
|
||||
Loading…
Reference in New Issue
Block a user