style: CoverContainer; style: primary and secondary text

This commit is contained in:
Roberto Tonino 2020-11-02 23:24:10 +01:00
parent 1cd84d39e9
commit d5973c067b
10 changed files with 96 additions and 111 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,20 +1,65 @@
<template> <template>
<div class="cover_container"> <div class="relative cover_container group">
<img aria-hidden="true" class="coverart" :class="{ rounded: isRounded, circle: isCircle }" :src="cover" /> <img
aria-hidden="true"
class="block w-full opacity-100 coverart"
:class="{ rounded: isRounded, circle: isCircle }"
:src="cover"
/>
<button <button
role="button" role="button"
aria-label="download" aria-label="download"
v-on="$listeners" v-on="$listeners"
:data-link="link" :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" 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> </button>
</div> </div>
</template> </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> <script>
export default { export default {
inheritAttrs: false, inheritAttrs: false,

View File

@ -34,15 +34,11 @@
<h1>{{ $t('favorites.noPlaylists') }}</h1> <h1>{{ $t('favorites.noPlaylists') }}</h1>
</div> </div>
<div class="release_grid" v-if="playlists.length > 0 || spotifyPlaylists > 0"> <div class="release_grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
<router-link <div class="release" v-for="release in playlists" :key="release.id">
tag="div" <router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: release.id } }">
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" /> <CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
</router-link>
<p class="secondary-text"> <p class="secondary-text">
{{ {{
@ -52,17 +48,13 @@
)}` )}`
}} }}
</p> </p>
</router-link> </div>
<router-link <div class="release" v-for="release in spotifyPlaylists" :key="release.id">
tag="div" <router-link tag="div" class="cursor-pointer" :to="{ name: 'Spotify Playlist', params: { id: release.id } }">
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" /> <CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
</router-link>
<p class="secondary-text"> <p class="secondary-text">
{{ {{
@ -72,7 +64,7 @@
)}` )}`
}} }}
</p> </p>
</router-link> </div>
</div> </div>
</div> </div>

View File

@ -17,13 +17,19 @@
@click.stop="$emit('add-to-queue', $event)" @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">
<i v-if="release.isAlbumExplicit" class="material-icons explicit-icon">explicit</i> <i
v-if="release.isAlbumExplicit"
class="material-icons explicit-icon"
style="font-size: 1.0625rem !important"
>
explicit
</i>
{{ release.albumTitle }} {{ release.albumTitle }}
</span> </span>
</router-link> </router-link>
<p class="mb-1 text-sm opacity-75"> <p class="secondary-text">
{{ {{
$t('globals.by', { artist: release.artistName }) + $t('globals.by', { artist: release.artistName }) +
' - ' + ' - ' +

View File

@ -17,13 +17,13 @@
@click.stop="$emit('add-to-queue', $event)" @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 }} {{ release.artistName }}
</span> </span>
</router-link> </router-link>
<!-- TODO Fix, depending on the tab there are albums number or fans number --> <!-- 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>
</div> </div>
</template> </template>

View File

@ -16,12 +16,12 @@
@click.stop="$emit('add-to-queue', $event)" @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 }} {{ playlist.playlistTitle }}
</span> </span>
</router-link> </router-link>
<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',

View File

@ -91,54 +91,3 @@ img {
// ? Why? // ? Why?
background-color: var(--secondary-background); 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;
}
}
}

View File

@ -24,6 +24,6 @@ body {
@import './globals/globals'; @import './globals/globals';
@import './globals/tables'; @import './globals/tables';
@import './tabs/search-tab'; @import './tabs/release-grid';
@import './tabs/settings-tab'; @import './tabs/settings-tab';
@import './tabs/tabs'; @import './tabs/tabs';

View 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;
}

View File

@ -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;
}