completed tables styling
This commit is contained in:
Roberto Tonino
parent
375b25cb0c
commit
3f1ca5a75c
@ -6,12 +6,22 @@
|
||||
--vertical-separator: 7px;
|
||||
}
|
||||
|
||||
.table td:first-child {
|
||||
padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
|
||||
.table tr {
|
||||
background: var(--table-bg);
|
||||
transition: background-color 175ms ease-in-out;
|
||||
}
|
||||
|
||||
.table td:last-child {
|
||||
padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
|
||||
.table tr:nth-child(even) {
|
||||
background: var(--table-zebra);
|
||||
transition: background-color 175ms ease-in-out;
|
||||
}
|
||||
|
||||
.table tr:not(:last-child) {
|
||||
border-bottom: 1px solid var(--table-highlight);
|
||||
}
|
||||
|
||||
.table tbody tr:not(.table__row-no-highlight):hover {
|
||||
background: var(--table-highlight);
|
||||
}
|
||||
|
||||
.table td,
|
||||
@ -23,23 +33,18 @@
|
||||
padding: var(--vertical-separator) 10px;
|
||||
}
|
||||
|
||||
.table td:first-child {
|
||||
padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
|
||||
}
|
||||
|
||||
.table td:last-child {
|
||||
padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
|
||||
}
|
||||
|
||||
.table td img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table tr {
|
||||
background: var(--table-bg);
|
||||
transition: background-color 175ms ease-in-out;
|
||||
}
|
||||
|
||||
.table tr:not(:last-child) {
|
||||
border-bottom: 1px solid var(--table-highlight);
|
||||
}
|
||||
|
||||
.table tbody tr:not(.table__row-no-highlight):hover {
|
||||
background: var(--table-highlight);
|
||||
}
|
||||
|
||||
.table .table__icon {
|
||||
box-sizing: content-box;
|
||||
width: 32px;
|
||||
@ -82,7 +87,9 @@
|
||||
|
||||
/* .table__cell-content {} */
|
||||
|
||||
.table__cell-content--vertical-center {
|
||||
.table__cell-content.table__cell-content--vertical-center {
|
||||
/* Wrap cell content in this to center vertically cells
|
||||
with material icons or both material icons and text */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -99,6 +106,22 @@
|
||||
color: var(--table-bg);
|
||||
}
|
||||
|
||||
.track_row > td > img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.track_row > td > a > img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.top-tracks-position {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* === Tracks Table === */
|
||||
.table--tracks {
|
||||
border-collapse: collapse;
|
||||
@ -139,8 +162,6 @@
|
||||
border-bottom-right-radius: var(--radius);
|
||||
}
|
||||
|
||||
/* === Tracks Table End === */
|
||||
|
||||
/* === Tracklist Table === */
|
||||
|
||||
/* .table--tracklist {} */
|
||||
@ -166,18 +187,10 @@
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.tracklist_table .track_position_head,
|
||||
.tracklist_table .track_position {
|
||||
width: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.explicit_tracklist {
|
||||
margin-left: var(--explicit-separator);
|
||||
}
|
||||
|
||||
/* === Tracklist Table End === */
|
||||
|
||||
/* === Charts Table === */
|
||||
|
||||
/* .table--charts {} */
|
||||
@ -185,21 +198,3 @@
|
||||
.table--charts td {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
/* === Charts Table End === */
|
||||
|
||||
.track_row > td > img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.track_row > td > a > img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.top-tracks-position {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.preview_controls {
|
||||
opacity: 0;
|
||||
display: block;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
text-align: center;
|
||||
@ -11,8 +11,9 @@
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.preview_playlist_controls{
|
||||
cursor:pointer;
|
||||
|
||||
.preview_playlist_controls {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.single-cover {
|
||||
|
||||
@ -244,6 +244,7 @@
|
||||
play_arrow
|
||||
</i>
|
||||
<img class="rounded coverart" :src="track.album.cover_small">
|
||||
</a>
|
||||
</td>
|
||||
<td class="table__cell table__cell--large breakline">
|
||||
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
|
||||
@ -530,31 +531,35 @@
|
||||
<td class="top-tracks-position" :class="{ first: track.position === 1 }">
|
||||
{{ track.position }}
|
||||
</td>
|
||||
<td style="width: 48px; text-align: center;">
|
||||
<a href="#" @click="playPausePreview" :class="'rounded' + (track.preview ? ' single-cover' : '')"
|
||||
:data-preview="track.preview">
|
||||
<td>
|
||||
<a href="#" class="rounded" :class="{ 'single-cover' : !!track.preview }"
|
||||
@click="playPausePreview" :data-preview="track.preview">
|
||||
<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
|
||||
class="material-icons preview_controls">
|
||||
play_arrow
|
||||
</i>
|
||||
<img class="rounded coverart" :src="track.album.cover_small">
|
||||
</a>
|
||||
</td>
|
||||
<td class="breakline">
|
||||
<td class="table__cell--large breakline">
|
||||
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
|
||||
</td>
|
||||
<td class="breakline clickable" @click="artistView" :data-id="track.artist.id">
|
||||
<td class="table__cell--medium table__cell--center breakline clickable" @click="artistView"
|
||||
:data-id="track.artist.id">
|
||||
{{track.artist.name}}
|
||||
</td>
|
||||
<td class="breakline clickable" @click="albumView" :data-id="track.album.id">
|
||||
<td class="table__cell--medium table__cell--center breakline clickable" @click="albumView"
|
||||
:data-id="track.album.id">
|
||||
{{track.album.title}}
|
||||
</td>
|
||||
<td>
|
||||
<td class="table__cell--small">
|
||||
{{convertDuration(track.duration)}}
|
||||
</td>
|
||||
<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
||||
@click.stop="addToQueue" :data-link="track.link" style="width: 56px; text-align: center;"
|
||||
class="clickable">
|
||||
<td class="table__cell--download clickable" @contextmenu.prevent="openQualityModal"
|
||||
@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">get_app</i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
42212
public/js/bundle.js
42212
public/js/bundle.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -18,7 +18,7 @@ function init() {
|
||||
preview_track.addEventListener('canplay', function () {
|
||||
preview_track.play()
|
||||
preview_stopped = false
|
||||
$(preview_track).animate({ volume: vol.preview_max_volume/100 }, 500)
|
||||
$(preview_track).animate({ volume: vol.preview_max_volume / 100 }, 500)
|
||||
})
|
||||
|
||||
// auto fadeout when at the end of the song
|
||||
@ -50,6 +50,7 @@ function stopStackedTabsPreview() {
|
||||
|
||||
// on hover event
|
||||
function previewMouseEnter(e) {
|
||||
console.log('mouse Enter')
|
||||
$(e.currentTarget).css({ opacity: 1 })
|
||||
}
|
||||
|
||||
@ -68,12 +69,13 @@ function playPausePreview(e) {
|
||||
const { currentTarget: obj } = event
|
||||
|
||||
var icon = obj.tagName == 'I' ? $(obj) : $(obj).children('i')
|
||||
|
||||
if ($(obj).attr('playing')) {
|
||||
if (preview_track.paused) {
|
||||
preview_track.play()
|
||||
preview_stopped = false
|
||||
icon.text('pause')
|
||||
$(preview_track).animate({ volume: vol.preview_max_volume/100 }, 500)
|
||||
$(preview_track).animate({ volume: vol.preview_max_volume / 100 }, 500)
|
||||
} else {
|
||||
preview_stopped = true
|
||||
icon.text('play_arrow')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user