secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Refreshing track list

Browse Source
This commit is contained in:
James Barnsley
2018-11-07 17:01:18 +13:00
parent aa32904b9a
commit ccc8ec26c2
8 changed files with 334 additions and 968 deletions
Download Patch File Download Diff File Expand all files Collapse all files

436
src/scss/components/_lists.scss
View File

@ -12,23 +12,28 @@
display: block;
position: relative;
margin: 0 -10px 0 -10px;
padding: 14px 30px 13px 10px;
padding: 0 10px;
border-radius: 3px;
&:not(.no-click){
cursor: pointer;
}
&:before {
pointer-events: none;
content: '';
display: block;
position: absolute;
top: 0;
top: -5px;
left: 0;
bottom: 0;
right: 0;
border-top: 3px solid transparent;
border-bottom: 1px solid rgba(125,125,125,0.15);
height: 3px;
background: colour(blue);
opacity: 0;
}
:root .notouch:not(.dragging) &:not(.header):not(.no-click).hover {
:root .notouch:not(.dragging) &:not(.no-click).list__item--hover {
background: rgba(255,255,255,0.03);
cursor: pointer;
@ -37,14 +42,6 @@
}
}
&.selected {
background: rgba(125,125,125,0.15) !important;
}
&.playing {
color: colour(turquoise);
}
.select-zone,
.drag-zone {
display: none;
@ -54,18 +51,6 @@
}
}
.context-menu-trigger {
position: absolute;
top: 0;
right: 0;
font-size: 14px;
z-index: 2;
&:before {
display: none !important;
}
}
.icon.source {
color: colour(mid_grey);
position: absolute;
@ -73,13 +58,6 @@
right: 40px;
}
&.header {
font-size: 10px;
color: colour(grey);
text-transform: uppercase;
padding-bottom: 2px;
}
&.field {
padding: 0 !important;
@ -94,37 +72,76 @@
.uri-placeholder {
word-break: break-all;
}
&--selected {
background: rgba(125,125,125,0.15) !important;
}
&--playing {
.list__item {
&__name {
color: colour(turquoise);
}
}
}
&__content {
padding: 14px 0;
}
&__name {
padding-bottom: 2px;
.light-theme & .flag {
background: colour(light_grey);
color: colour(white);
}
}
&__details {
padding: 0;
margin: 0;
opacity: 0.5;
&__item {
display: inline-block;
&:not(:first-child) {
@include bullet();
}
}
}
&__actions {
float: right;
padding-top: 14px;
&__item {
padding: 10px 0 0 14px;
display: inline-block;
&--context-menu-trigger {
font-size: 14px;
&:before {
display: none !important;
}
}
&--added {
}
}
}
}
&.track-list {
.list__item {
cursor: pointer;
.col {
&.name {
width: 36%;
.light-theme & .flag {
background: colour(light_grey);
color: colour(white);
}
}
&.artists,
&.album {
width: 25%;
}
&.duration {
width: 7%;
}
&.popularity {
width: 3%;
}
}
:root .dragging &.hover,
:root .dragging &--hover,
&.touch-drag-hover {
&:before {
border-top-color: colour(blue);
opacity: 1;
}
}
@ -153,134 +170,6 @@
}
}
&.playlist-list {
.list__item {
cursor: pointer;
.col {
&.name {
width: 50%;
}
&.owner {
width: 20%
}
&.source,
&.can_edit,
&.tracks_total,
&.popularity {
width: 10%;
}
}
}
}
&.album-list {
.list__item {
cursor: pointer;
.col {
&.name,
&.artists {
width: 30%;
}
&.added_at,
&.release_date {
width: 15%;
}
&.tracks_total {
width: 10%;
}
}
}
}
&.library-local-album-list {
.list__item {
cursor: pointer;
.col {
&.name,
&.artists {
width: 45%;
}
&.tracks_total {
width: 10%;
}
}
}
}
&.artist-list {
.list__item {
cursor: pointer;
.col {
&.name {
width: 60%;
}
&.followers_total {
width: 25%;
}
&.popularity {
width: 10%;
}
}
}
}
&.queue-track-list {
cursor: pointer;
.list__item {
padding-right: 60px;
.col {
&.name,
&.artists,
&.album {
width: 25%;
}
&.added {
width: 20%;
.by {
padding-right: 0.25em;
}
.from {
&:before {
content: '(';
display: inline-block;
}
&:after {
content: ')';
display: inline-block;
}
}
}
&.duration {
width: 5%;
}
}
}
}
&.queue-history-track-list {
.list__item {
cursor: pointer;
.col {
&.name,
&.artists,
&.album {
width: 25%;
}
&.played_at {
width: 15%;
}
}
}
}
&.related-artist-list {
padding-bottom: 20px;
cursor: pointer;
@ -326,161 +215,42 @@
&__item {
padding: 12px !important;
.source {
position: static;
float: none;
&__details {
&__item {
&--source {
display: none;
}
&--added {
width: auto !important;
float: none !important;
padding-left: 0.25em;
.by,
.empty {
display: none;
}
.from {
@include bullet();
text-transform: capitalize;
&:after {
display: none !important;
}
.label {
display: none;
}
}
}
}
}
.context-zone {
top: 14px;
}
.col {
&.name {
width: auto !important;
padding-right: 10%;
display: block;
float: none;
}
&.duration {
width: auto !important;
position: absolute;
right: 10px;
text-align: right;
z-index: 1;
}
&:not(.name):not(.duration):not(.album):not(.added){
color: colour(mid_grey);
display: inline;
width: auto !important;
float: none !important;
word-wrap: break-word;
}
&.followers_total:after {
content: ' followers';
}
&.tracks_total:after {
content: ' tracks';
}
&.popularity {
@include bullet();
.popularity {
&-bars {
margin: 0.1em 0 0 0;
}
}
}
&.album,
&.can_edit,
&.release_date {
display: none;
}
}
&.header {
padding: 0 !important;
&:before {
border-top: none;
}
.liner {
display: none;
}
}
}
&.queue-track-list {
.list__item {
.artists {
padding-left: 0 !important;
&:before {
display: none !important;
}
}
.source {
display: none !important;
}
.added {
width: auto !important;
float: none !important;
padding-left: 0.25em;
.by,
.empty {
display: none;
}
.from {
@include bullet();
text-transform: capitalize;
&:after {
display: none !important;
}
.label {
display: none;
}
}
}
}
}
&.queue-history-track-list {
.list__item {
.source {
display: none !important;
}
}
}
&.track-list {
.list__item {
&.can-sort {
padding-left: 40px !important;
}
}
}
&.album-list {
.list__item {
.col {
&.added_at,
&.source {
display: none !important;
}
&.tracks_total {
@include bullet();
}
}
}
}
&.playlist-list {
.list__item {
.col {
&.can_edit,
&.source {
display: none !important;
}
&.tracks_total {
@include bullet();
}
}
}
}
}
}