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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
package-lock.json generated
View File

@ -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": { "@fullhuman/postcss-purgecss": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz", "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",
@ -237,31 +246,23 @@
"source-map": "0.6.*" "source-map": "0.6.*"
}, },
"dependencies": { "dependencies": {
"source-map": { "@vue/component-compiler-utils": {
"version": "0.6.1", "version": "2.6.0",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-2.6.0.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", "integrity": "sha512-IHjxt7LsOFYc0DkTncB7OXJL7UzwOLPPQCfEUNyxL2qt+tF12THV+EO33O1G2Uk4feMSWua3iD39Itszx0f0bw==",
"dev": true "dev": true,
} "requires": {
} "consolidate": "^0.15.1",
}, "hash-sum": "^1.0.2",
"@vue/component-compiler-utils": { "lru-cache": "^4.1.2",
"version": "2.6.0", "merge-source-map": "^1.1.0",
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-2.6.0.tgz", "postcss": "^7.0.14",
"integrity": "sha512-IHjxt7LsOFYc0DkTncB7OXJL7UzwOLPPQCfEUNyxL2qt+tF12THV+EO33O1G2Uk4feMSWua3iD39Itszx0f0bw==", "postcss-selector-parser": "^5.0.0",
"dev": true, "prettier": "1.16.3",
"requires": { "source-map": "~0.6.1",
"consolidate": "^0.15.1", "vue-template-es2015-compiler": "^1.9.0"
"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": {
"ansi-styles": { "ansi-styles": {
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "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": { "abbrev": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@ -1512,12 +1597,12 @@
"dev": true "dev": true
}, },
"debug": { "debug": {
"version": "4.2.0", "version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"dev": true, "dev": true,
"requires": { "requires": {
"ms": "2.1.2" "ms": "2.0.0"
} }
}, },
"decamelize": { "decamelize": {
@ -2658,9 +2743,9 @@
} }
}, },
"ms": { "ms": {
"version": "2.1.2", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true "dev": true
}, },
"nan": { "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": { "repeating": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz", "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
@ -6381,27 +6472,66 @@
} }
}, },
"rollup-plugin-vue": { "rollup-plugin-vue": {
"version": "4.7.2", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-4.7.2.tgz", "resolved": "https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-4.2.0.tgz",
"integrity": "sha512-RuAK+YTL81/iccOWoadqQz2TXqOogivjbvtCuU6EfVP9/E5XIjuMNVsVWHkSelZQblI1z2b5tshWL7XoiOfABQ==", "integrity": "sha512-n8NDvhYtA9HC3hRyLNAV+0Ei4FHlaOB8LoiXxVwYclgHxOR4aku57zIw8EPf+ETSf45w49UP4VUXgpX6XNwdOA==",
"dev": true, "dev": true,
"requires": { "requires": {
"@vue/component-compiler": "^3.6", "@babel/runtime": "^7.0.0-beta.46",
"@vue/component-compiler-utils": "^2.1.0", "@vue/component-compiler": "^3.3.2",
"debug": "^4.1.1", "@vue/component-compiler-utils": "^1.2.1",
"debug": "^2.6.0",
"hash-sum": "^1.0.2", "hash-sum": "^1.0.2",
"magic-string": "^0.25.2", "postcss": "^6.0.22",
"querystring": "^0.2.0", "querystring": "^0.2.0",
"rollup-pluginutils": "^2.0.1", "rollup-pluginutils": "^2.0.1"
"source-map": "0.7.3",
"vue-runtime-helpers": "1.0.0"
}, },
"dependencies": { "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": { "source-map": {
"version": "0.7.3", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true "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", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.8.tgz",
"integrity": "sha512-3BsR84AqarcmweXjItxw3jwQsiYNssYg090yi4rlzTnCJxmHtkyCvhNz9Z7qRSOkmiV485KkUCReTp5AjNY4wg==" "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": { "vue-template-compiler": {
"version": "2.6.12", "version": "2.6.12",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz", "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz",

10
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

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> </script>
<style>
</style>

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

@ -42,7 +42,7 @@
<img class="rounded coverart" :src="track.album.cover_small" /> <img class="rounded coverart" :src="track.album.cover_small" />
</a> </a>
</td> </td>
<td class="table__cell--large breakline"> <td class="table__cell--large">
{{ {{
track.title + track.title +
(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '') (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
@ -50,14 +50,14 @@
</td> </td>
<router-link <router-link
tag="td" 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 } }" :to="{ name: 'Artist', params: { id: track.artist.id } }"
> >
{{ track.artist.name }} {{ track.artist.name }}
</router-link> </router-link>
<router-link <router-link
tag="td" 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 } }" :to="{ name: 'Album', params: { id: track.album.id } }"
> >
{{ track.album.title }} {{ track.album.title }}
@ -66,13 +66,18 @@
{{ convertDuration(track.duration) }} {{ convertDuration(track.duration) }}
</td> </td>
<td <td
class="table__cell--download" class="cursor-pointer group"
@click.stop="addToQueue" @click.stop="addToQueue"
:data-link="track.link" :data-link="track.link"
role="button" role="button"
aria-label="download" 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> </td>
</tr> </tr>
</tbody> </tbody>

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

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

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

@ -21,19 +21,7 @@
@keyup.enter.native="$router.push({ name: 'Playlist', params: { id: release.id } })" @keyup.enter.native="$router.push({ name: 'Playlist', params: { id: release.id } })"
tabindex="0" tabindex="0"
> >
<div class="cover_container"> <CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
<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>
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
<p class="secondary-text"> <p class="secondary-text">
{{ {{
@ -60,19 +48,7 @@
:data-id="release.id" :data-id="release.id"
tabindex="0" tabindex="0"
> >
<div class="cover_container"> <CoverContainer is-rounded :cover="release.cover_medium" :link="release.link" @click.stop="addToQueue" />
<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>
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p> <p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</router-link> </router-link>
@ -87,7 +63,12 @@ import { mapGetters } from 'vuex'
import { sendAddToQueue } from '@/utils/downloads' import { sendAddToQueue } from '@/utils/downloads'
import { getHomeData } from '@/data/home' import { getHomeData } from '@/data/home'
import CoverContainer from '@components/globals/CoverContainer.vue'
export default { export default {
components: {
CoverContainer
},
data() { data() {
return { return {
playlists: [], playlists: [],

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

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

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

@ -8,70 +8,60 @@
<section <section
v-for="section in viewInfo.ORDER" v-for="section in viewInfo.ORDER"
:key="section" :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 <template v-if="checkSectionResults(section)">
@click="$emit('change-search-tab', section)" <h2
class="mb-6 capitalize" @click="$emit('change-search-tab', section)"
:class="{ class="mb-6 capitalize"
'text-4xl text-center': section === 'TOP_RESULT', :class="{
'inline-block cursor-pointer text-3xl hover:text-primary transition-colors duration-200 ease-in-out': 'text-4xl text-center': section === 'TOP_RESULT',
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> {{ $tc(`globals.listTabs.${section.toLowerCase()}`, 2) }}
</h2>
<TopResult <TopResult
v-if="section === 'TOP_RESULT'" v-if="section === 'TOP_RESULT'"
:info="viewInfo.TOP_RESULT[0]" :info="viewInfo.TOP_RESULT[0]"
@add-to-queue="$emit('add-to-queue', $event)" @add-to-queue="$emit('add-to-queue', $event)"
/> />
<ResultsTracks <ResultsTracks
v-else-if="section === 'TRACK'" v-else-if="section === 'TRACK'"
:viewInfo="formatSearchResults(viewInfo.TRACK, formatSingleTrack)" :viewInfo="formatSearchResults(viewInfo.TRACK, formatSingleTrack)"
:itemsToShow="6" :itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)" @add-to-queue="$emit('add-to-queue', $event)"
/> />
<ResultsAlbums <ResultsAlbums
v-else-if="section == 'ALBUM'" v-else-if="section == 'ALBUM'"
:viewInfo="formatSearchResults(viewInfo.ALBUM, formatAlbums)" :viewInfo="formatSearchResults(viewInfo.ALBUM, formatAlbums)"
:itemsToShow="6" :itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)" @add-to-queue="$emit('add-to-queue', $event)"
/> />
<ResultsPlaylists <ResultsPlaylists
v-else-if="section == 'PLAYLIST'" v-else-if="section == 'PLAYLIST'"
:viewInfo="formatSearchResults(viewInfo.PLAYLIST, formatPlaylist)" :viewInfo="formatSearchResults(viewInfo.PLAYLIST, formatPlaylist)"
:itemsToShow="6" :itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)" @add-to-queue="$emit('add-to-queue', $event)"
/> />
<ResultsArtists <ResultsArtists
v-else-if="section === 'ARTIST'" v-else-if="section === 'ARTIST'"
:viewInfo="formatSearchResults(viewInfo.ARTIST, formatArtist)" :viewInfo="formatSearchResults(viewInfo.ARTIST, formatArtist)"
:itemsToShow="6" :itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)" @add-to-queue="$emit('add-to-queue', $event)"
/> />
</template>
</section> </section>
</template> </template>
</section> </section>
</template> </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> <script>
import { convertDuration } from '@/utils/utils' import { convertDuration } from '@/utils/utils'
import { upperCaseFirstLowerCaseRest } from '@/utils/texts' import { upperCaseFirstLowerCaseRest } from '@/utils/texts'
@ -110,21 +100,6 @@ export default {
) )
return !noResultsPresent 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: { methods: {
@ -134,7 +109,14 @@ export default {
formatSingleTrack, formatSingleTrack,
formatAlbums, formatAlbums,
formatArtist, formatArtist,
formatPlaylist formatPlaylist,
checkSectionResults(section) {
if (section === 'TOP_RESULT') {
return !!this.viewInfo.TOP_RESULT[0]
} else {
return !!this.viewInfo[section].data[0]
}
}
} }
} }
</script> </script>

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

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

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

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

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

@ -7,16 +7,16 @@
<h1>{{ $t('search.noResultsTrack') }}</h1> <h1>{{ $t('search.noResultsTrack') }}</h1>
</div> </div>
<table v-else class="table table--tracks"> <table v-else class="table w-full table--tracks">
<thead v-if="wantHeaders"> <thead v-if="wantHeaders">
<tr class="capitalize"> <tr class="capitalize">
<th colspan="2">{{ $tc('globals.listTabs.title', 1) }}</th> <th class="h-12 pb-3" colspan="2">{{ $tc('globals.listTabs.title', 1) }}</th>
<th>{{ $tc('globals.listTabs.artist', 1) }}</th> <th class="h-12 pb-3">{{ $tc('globals.listTabs.artist', 1) }}</th>
<th>{{ $tc('globals.listTabs.album', 1) }}</th> <th class="h-12 pb-3">{{ $tc('globals.listTabs.album', 1) }}</th>
<th> <th class="h-12 pb-3">
<i class="material-icons">timer</i> <i class="material-icons">timer</i>
</th> </th>
<th style="width: 3.5rem"></th> <th class="h-12 pb-3" style="width: 3.5rem"></th>
</tr> </tr>
</thead> </thead>
@ -25,7 +25,7 @@
<td class="table__icon table__icon--big"> <td class="table__icon table__icon--big">
<a <a
href="#" href="#"
@click="playPausePreview" @click="playPausePreview($event)"
class="rounded" class="rounded"
:class="{ 'single-cover': !!track.trackPreview }" :class="{ 'single-cover': !!track.trackPreview }"
:data-preview="track.trackPreview" :data-preview="track.trackPreview"
@ -35,37 +35,50 @@
<img class="rounded coverart" :src="track.albumPicture" /> <img class="rounded coverart" :src="track.albumPicture" />
</a> </a>
</td> </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> <i v-if="track.isTrackExplicit" class="material-icons explicit-icon">explicit</i>
{{ getTitle(track) }} {{ formatTitle(track) }}
</div> </div>
</td> </td>
<router-link <router-link
tag="td" 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 } }" :to="{ name: 'Artist', params: { id: track.artistID } }"
> >
{{ track.artistName }} <span class="cursor-pointer hover:underline">
{{ track.artistName }}
</span>
</router-link> </router-link>
<router-link <router-link
tag="td" 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 } }" :to="{ name: 'Album', params: { id: track.albumID } }"
> >
{{ track.albumTitle }} <span class="cursor-pointer hover:underline">
{{ track.albumTitle }}
</span>
</router-link> </router-link>
<td class="table__cell table__cell--small table__cell--center"> <td class="table__cell table__cell--small table__cell--center">
{{ convertDuration(track.trackDuration) }} {{ convertDuration(track.trackDuration) }}
</td> </td>
<td <td
class="table__cell--download table__cell--center clickable" class="cursor-pointer table__cell--center group"
@click.stop="$emit('add-to-queue', $event)" @click.stop="$emit('add-to-queue', $event)"
:data-link="track.trackLink" :data-link="track.trackLink"
role="button"
aria-label="download" 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> </td>
</tr> </tr>
</tbody> </tbody>
@ -81,6 +94,8 @@ import PreviewControls from '@components/globals/PreviewControls.vue'
import EventBus from '@/utils/EventBus' import EventBus from '@/utils/EventBus'
import { convertDuration } from '@/utils/utils' import { convertDuration } from '@/utils/utils'
import { formatTitle } from '@/data/search'
export default { export default {
components: { components: {
BaseLoadingPlaceholder, BaseLoadingPlaceholder,
@ -113,13 +128,9 @@ export default {
}, },
methods: { methods: {
convertDuration, convertDuration,
formatTitle,
playPausePreview(e) { playPausePreview(e) {
EventBus.$emit('trackPreview: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> <template>
<router-link <div class="flex flex-col items-center justify-center">
tag="div" <router-link
class="top_result cursor-pointer flex items-center flex-col" tag="div"
:to="{ name: upperCaseFirstLowerCaseRest($attrs.info.type), params: { id: $attrs.info.id } }" class="cursor-pointer"
> :to="{ name: upperCaseFirstLowerCaseRest($attrs.info.type), params: { id: $attrs.info.id } }"
<div class="cover_container"> >
<img <CoverContainer
aria-hidden="true" class="w-40 h-40"
class="coverart" :is-rounded="$attrs.info.type !== 'artist'"
:src="$attrs.info.picture" :is-circle="$attrs.info.type === 'artist'"
:class="$attrs.info.type == 'artist' ? 'circle' : 'rounded'" :cover="$attrs.info.picture"
:link="$attrs.info.link"
@click.stop="$emit('add-to-queue', $event)"
/> />
<button <p class="mt-4 mb-1 text-xl text-center transition-colors duration-200 ease-in-out hover:text-primary">
role="button" {{ $attrs.info.title }}
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> </p>
<span class="tag">{{ $tc(`globals.listTabs.${$attrs.info.type}`, 1) }}</span> </router-link>
</div>
</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> </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> <script>
import { upperCaseFirstLowerCaseRest } from '@/utils/texts' import { upperCaseFirstLowerCaseRest } from '@/utils/texts'
import CoverContainer from '@components/globals/CoverContainer.vue'
export default { export default {
components: {
CoverContainer
},
methods: { methods: {
upperCaseFirstLowerCaseRest upperCaseFirstLowerCaseRest
}, },

7
src/data/search.js
View File

@ -106,6 +106,7 @@ export function formatArtist(artist) {
getProperty(artist, 'picture_medium') || getProperty(artist, 'picture_medium') ||
`https://e-cdns-images.dzcdn.net/images/artist/${artist.ART_PICTURE}/156x156-000000-80-0-0.jpg`, `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}`, artistLink: getProperty(artist, 'link') || `https://deezer.com/artist/${artist.ART_ID}`,
// TODO Fix
artistAlbumsNumber: getProperty(artist, 'nb_album', 'NB_FAN') artistAlbumsNumber: getProperty(artist, 'nb_album', 'NB_FAN')
} }
} }
@ -127,3 +128,9 @@ export function formatPlaylist(playlist) {
artistName: getProperty(playlist, 'user.name') 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 { :root {
--main-scroll: theme('colors.grayscale.300'); --main-scroll: theme('colors.grayscale.300');
--panels-scroll: hsl(180, 2%, 17%); --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-background: hsla(240, 12%, 16%, 0.85);
--toast-secondary: hsla(240, 12%, 16%, 0.15); --toast-secondary: hsla(240, 12%, 16%, 0.15);
--toast-text: hsla(0, 0%, 100%, 0.85); --toast-text: hsla(0, 0%, 100%, 0.85);

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

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

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

@ -34,7 +34,6 @@ $table-border-radius: 3px;
th { th {
.sortable { .sortable {
-webkit-user-select: none;
user-select: none; user-select: none;
} }
@ -80,19 +79,6 @@ $table-border-radius: 3px;
border-bottom: 2px solid var(--table-highlight); border-bottom: 2px solid var(--table-highlight);
} }
th {
padding-bottom: 10px;
height: 45px;
}
td {
height: 35px;
&.breakline {
word-break: break-word;
}
}
tr { tr {
&:first-child { &:first-child {
td { td {
@ -190,20 +176,6 @@ $table-border-radius: 3px;
&--right { &--right {
text-align: 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 { .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 */ /* Releases */
.release { .release {
.primary-text, .primary-text,
@ -61,11 +21,4 @@
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
grid-gap: 1rem; grid-gap: 1rem;
&.firstrow_only {
grid-template-rows: 1fr;
grid-auto-rows: 0;
grid-row-gap: 0rem;
overflow-y: hidden;
}
} }

3
tailwind.config.js
View File

@ -49,7 +49,8 @@ module.exports = {
}, },
variants: { variants: {
textColor: ({ after }) => after(['group-hover']), textColor: ({ after }) => after(['group-hover']),
borderWidth: ['responsive', 'first', 'hover', 'focus'] borderWidth: ['responsive', 'first', 'hover', 'focus'],
cursor: ['responsive', 'hover']
}, },
corePlugins: { corePlugins: {
preflight: false preflight: false