style: CoverContainer; style: primary and secondary text
This commit is contained in:
Roberto Tonino
parent
1cd84d39e9
commit
d5973c067b
File diff suppressed because one or more lines are too long
@ -1,20 +1,65 @@
|
||||
<template>
|
||||
<div class="cover_container">
|
||||
<img aria-hidden="true" class="coverart" :class="{ rounded: isRounded, circle: isCircle }" :src="cover" />
|
||||
<div class="relative cover_container group">
|
||||
<img
|
||||
aria-hidden="true"
|
||||
class="block w-full opacity-100 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"
|
||||
class="absolute p-0 text-center bg-black border-0 rounded-full opacity-0 download_overlay hover:bg-primary"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
<i class="text-white cursor-pointer material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cover_container {
|
||||
.coverart {
|
||||
backface-visibility: hidden;
|
||||
transition: 0.5s ease;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.download_overlay {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: 0.5s ease;
|
||||
opacity: 0;
|
||||
min-width: 2rem;
|
||||
height: 2.75rem;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
padding: 0.625rem;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.coverart {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.download_overlay {
|
||||
opacity: 1;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
|
||||
@ -34,15 +34,11 @@
|
||||
<h1>{{ $t('favorites.noPlaylists') }}</h1>
|
||||
</div>
|
||||
<div class="release_grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
|
||||
<router-link
|
||||
tag="div"
|
||||
v-for="release in playlists"
|
||||
:key="release.id"
|
||||
class="release clickable"
|
||||
:to="{ name: 'Playlist', params: { id: release.id } }"
|
||||
>
|
||||
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
|
||||
<p class="primary-text">{{ release.title }}</p>
|
||||
<div class="release" v-for="release in playlists" :key="release.id">
|
||||
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: release.id } }">
|
||||
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
|
||||
<p class="primary-text">{{ release.title }}</p>
|
||||
</router-link>
|
||||
|
||||
<p class="secondary-text">
|
||||
{{
|
||||
@ -52,17 +48,13 @@
|
||||
)}`
|
||||
}}
|
||||
</p>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<router-link
|
||||
tag="div"
|
||||
v-for="release in spotifyPlaylists"
|
||||
:key="release.id"
|
||||
class="release clickable"
|
||||
:to="{ name: 'Spotify Playlist', params: { id: release.id } }"
|
||||
>
|
||||
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
|
||||
<p class="primary-text">{{ release.title }}</p>
|
||||
<div class="release" v-for="release in spotifyPlaylists" :key="release.id">
|
||||
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Spotify Playlist', params: { id: release.id } }">
|
||||
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
|
||||
<p class="primary-text">{{ release.title }}</p>
|
||||
</router-link>
|
||||
|
||||
<p class="secondary-text">
|
||||
{{
|
||||
@ -72,7 +64,7 @@
|
||||
)}`
|
||||
}}
|
||||
</p>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -17,13 +17,19 @@
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<span class="primary-text">
|
||||
<i
|
||||
v-if="release.isAlbumExplicit"
|
||||
class="material-icons explicit-icon"
|
||||
style="font-size: 1.0625rem !important"
|
||||
>
|
||||
explicit
|
||||
</i>
|
||||
{{ release.albumTitle }}
|
||||
</span>
|
||||
</router-link>
|
||||
|
||||
<p class="mb-1 text-sm opacity-75">
|
||||
<p class="secondary-text">
|
||||
{{
|
||||
$t('globals.by', { artist: release.artistName }) +
|
||||
' - ' +
|
||||
|
||||
@ -17,13 +17,13 @@
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
/>
|
||||
|
||||
<span class="mb-1 transition-colors duration-200 ease-in-out hover:text-primary">
|
||||
<span class="primary-text">
|
||||
{{ 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> -->
|
||||
<!-- <p class="secondary-text">{{ $tc('globals.listTabs.releaseN', release.artistAlbumsNumber) }}</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -16,12 +16,12 @@
|
||||
@click.stop="$emit('add-to-queue', $event)"
|
||||
/>
|
||||
|
||||
<span class="mb-1 transition-colors duration-200 ease-in-out hover:text-primary">
|
||||
<span class="primary-text">
|
||||
{{ playlist.playlistTitle }}
|
||||
</span>
|
||||
</router-link>
|
||||
|
||||
<p class="mb-1 text-sm opacity-75">
|
||||
<p class="secondary-text">
|
||||
{{
|
||||
`${$t('globals.by', { artist: playlist.artistName })} - ${$tc(
|
||||
'globals.listTabs.trackN',
|
||||
|
||||
@ -91,54 +91,3 @@ img {
|
||||
// ? Why?
|
||||
background-color: var(--secondary-background);
|
||||
}
|
||||
|
||||
// ? Maybe make a component?
|
||||
.cover_container {
|
||||
position: relative;
|
||||
|
||||
.coverart {
|
||||
display: block;
|
||||
backface-visibility: hidden;
|
||||
transition: 0.5s ease;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.download_overlay {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: 0.5s ease;
|
||||
opacity: 0;
|
||||
border: 0px;
|
||||
border-radius: 50%;
|
||||
// background-color: #000000;
|
||||
padding: 0px;
|
||||
min-width: 32px;
|
||||
height: 44px;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.coverart {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.download_overlay {
|
||||
opacity: 1;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,6 +24,6 @@ body {
|
||||
@import './globals/globals';
|
||||
@import './globals/tables';
|
||||
|
||||
@import './tabs/search-tab';
|
||||
@import './tabs/release-grid';
|
||||
@import './tabs/settings-tab';
|
||||
@import './tabs/tabs';
|
||||
|
||||
17
src/styles/scss/tabs/_release-grid.scss
Normal file
17
src/styles/scss/tabs/_release-grid.scss
Normal file
@ -0,0 +1,17 @@
|
||||
.release_grid {
|
||||
@apply gap-4 grid;
|
||||
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
}
|
||||
|
||||
.primary-text {
|
||||
@apply mb-1 transition-colors duration-200 ease-in-out;
|
||||
|
||||
&:hover {
|
||||
@apply text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-text {
|
||||
@apply mb-1 text-sm opacity-75;
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
/* Releases */
|
||||
.release {
|
||||
.primary-text,
|
||||
.secondary-text {
|
||||
margin: 0rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.secondary-text {
|
||||
opacity: 0.75;
|
||||
font-size: 0.875rem;
|
||||
|
||||
.material-icons {
|
||||
font-size: 1.0625rem !important;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.release_grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user