evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

completed tables styling

Browse Source
This commit is contained in:
Roberto Tonino 2020-06-02 15:25:15 +02:00
parent 375b25cb0c
commit 3f1ca5a75c
6 changed files with 70 additions and 42271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
public/css/modules/globals/tables.css
View File

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

3
public/css/modules/track-preview.css
View File

@ -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,6 +11,7 @@
top: 0;
right: 0;
}
.preview_playlist_controls {
cursor: pointer;
}

25
public/index.html
View File

@ -244,6 +244,7 @@ <h1>No Tracks found</h1>
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 @@ <h1>No Favorite Tracks found</h1>
<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
View File

File diff suppressed because one or more lines are too long

2
public/js/bundle.js.map
View File

File diff suppressed because one or more lines are too long

2
src/js/modules/track-preview.js
View File

@ -50,6 +50,7 @@ function stopStackedTabsPreview() {
// on hover event
function previewMouseEnter(e) {
console.log('mouse Enter')
$(e.currentTarget).css({ opacity: 1 })
}
@ -68,6 +69,7 @@ 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()