Skip to content

Commit ab3b5b7

Browse files
jaedbjaedb
committed
Album view, handle artist grid overflow
1 parent 0884941 commit ab3b5b7

8 files changed

Lines changed: 137 additions & 110 deletions

File tree

‎mopidy_spotmop/static/app.css‎

Lines changed: 34 additions & 35 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎mopidy_spotmop/static/app.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎mopidy_spotmop/static/app.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎mopidy_spotmop/static/app.min.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎mopidy_spotmop/static/app/browse/album/template.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h2 class="description">
2424

2525
<div class="artist-grid small">
2626
<a
27-
ng-repeat="artist in album.artists"
27+
ng-repeat="artist in album.artists | limitTo: 3"
2828
class="artist draggable"
2929
ui-sref="browse.artist.overview({ uri: artist.uri })"
3030
draggable="false"
@@ -33,6 +33,12 @@ <h2 class="description">
3333
<thumbnail size="medium" images="artist.images"></thumbnail>
3434
<div class="name-wrapper animate"><div class="name" ng-bind="artist.name"></div></div>
3535
</a>
36+
<a
37+
class="artist artist-overflow"
38+
ng-if="album.artists.length > 3">
39+
<div size="medium" class="thumbnail-image image animate ng-isolate-scope"></div>
40+
<div class="name-wrapper animate"><div class="name">+ {{ album.artists.length }} more</div></div>
41+
</a>
3642
</div>
3743

3844
<div class="clear-left"><!-- clear --></div>

‎mopidy_spotmop/static/scss/global/_core.scss‎

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1142,49 +1142,57 @@ h1 .flag {
11421142

11431143
.artist-grid {
11441144
padding: 0;
1145-
}
11461145

1147-
.artist-grid .artist {
1148-
display: block;
1149-
float: left;
1150-
border: 0 !important;
1151-
width: 50%;
1152-
position: relative;
1153-
}
1146+
.artist {
1147+
display: block;
1148+
float: left;
1149+
border: 0 !important;
1150+
width: 50%;
1151+
position: relative;
11541152

1155-
.artist-grid .artist .image {
1156-
display: block;
1157-
width: 100%;
1158-
padding-bottom: 100%;
1159-
background-image: url('assets/svg/no-image.svg');
1160-
background-repeat: no-repeat;
1161-
background-position: 50% 50%;
1162-
background-size: cover;
1163-
background-color: #777777;
1164-
}
1153+
.image {
1154+
display: block;
1155+
width: 100%;
1156+
padding-bottom: 100%;
1157+
background-image: url('assets/svg/no-image.svg');
1158+
background-repeat: no-repeat;
1159+
background-position: 50% 50%;
1160+
background-size: cover;
1161+
background-color: #777777;
1162+
}
11651163

1166-
.artist-grid .artist .name-wrapper {
1167-
position: absolute;
1168-
top: 0;
1169-
left: 0;
1170-
bottom: -0.5px;
1171-
right: 0;
1172-
text-align: center;
1173-
color: #FFFFFF;
1174-
opacity: 0;
1175-
background: rgba(0,0,0,0.8);
1176-
}
1164+
.name {
1165+
padding-top: 45%;
1166+
font-weight: bold;
1167+
}
11771168

1178-
.artist-grid .artist:hover .name-wrapper {
1179-
opacity: 1;
1180-
}
1169+
.name-wrapper {
1170+
position: absolute;
1171+
top: 0;
1172+
left: 0;
1173+
bottom: -0.5px;
1174+
right: 0;
1175+
text-align: center;
1176+
color: #FFFFFF;
1177+
opacity: 0;
1178+
background: rgba(0,0,0,0.8);
1179+
}
11811180

1182-
.artist-grid .artist .name {
1183-
padding-top: 45%;
1184-
font-weight: bold;
1181+
&.artist-overflow .name-wrapper {
1182+
opacity: 1;
1183+
background: #CCCCCC;
1184+
cursor: default;
1185+
}
1186+
1187+
&:hover .name-wrapper {
1188+
opacity: 1;
1189+
}
1190+
}
11851191
}
11861192

11871193

1194+
1195+
11881196
/**
11891197
* Square panels
11901198
* The basis for all playlist, album and artist thumbnails

‎src/app/browse/album/template.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h2 class="description">
2424

2525
<div class="artist-grid small">
2626
<a
27-
ng-repeat="artist in album.artists"
27+
ng-repeat="artist in album.artists | limitTo: 3"
2828
class="artist draggable"
2929
ui-sref="browse.artist.overview({ uri: artist.uri })"
3030
draggable="false"
@@ -33,6 +33,12 @@ <h2 class="description">
3333
<thumbnail size="medium" images="artist.images"></thumbnail>
3434
<div class="name-wrapper animate"><div class="name" ng-bind="artist.name"></div></div>
3535
</a>
36+
<a
37+
class="artist artist-overflow"
38+
ng-if="album.artists.length > 3">
39+
<div size="medium" class="thumbnail-image image animate ng-isolate-scope"></div>
40+
<div class="name-wrapper animate"><div class="name">+ {{ album.artists.length }} more</div></div>
41+
</a>
3642
</div>
3743

3844
<div class="clear-left"><!-- clear --></div>

‎src/scss/global/_core.scss‎

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1142,49 +1142,57 @@ h1 .flag {
11421142

11431143
.artist-grid {
11441144
padding: 0;
1145-
}
11461145

1147-
.artist-grid .artist {
1148-
display: block;
1149-
float: left;
1150-
border: 0 !important;
1151-
width: 50%;
1152-
position: relative;
1153-
}
1146+
.artist {
1147+
display: block;
1148+
float: left;
1149+
border: 0 !important;
1150+
width: 50%;
1151+
position: relative;
11541152

1155-
.artist-grid .artist .image {
1156-
display: block;
1157-
width: 100%;
1158-
padding-bottom: 100%;
1159-
background-image: url('assets/svg/no-image.svg');
1160-
background-repeat: no-repeat;
1161-
background-position: 50% 50%;
1162-
background-size: cover;
1163-
background-color: #777777;
1164-
}
1153+
.image {
1154+
display: block;
1155+
width: 100%;
1156+
padding-bottom: 100%;
1157+
background-image: url('assets/svg/no-image.svg');
1158+
background-repeat: no-repeat;
1159+
background-position: 50% 50%;
1160+
background-size: cover;
1161+
background-color: #777777;
1162+
}
11651163

1166-
.artist-grid .artist .name-wrapper {
1167-
position: absolute;
1168-
top: 0;
1169-
left: 0;
1170-
bottom: -0.5px;
1171-
right: 0;
1172-
text-align: center;
1173-
color: #FFFFFF;
1174-
opacity: 0;
1175-
background: rgba(0,0,0,0.8);
1176-
}
1164+
.name {
1165+
padding-top: 45%;
1166+
font-weight: bold;
1167+
}
11771168

1178-
.artist-grid .artist:hover .name-wrapper {
1179-
opacity: 1;
1180-
}
1169+
.name-wrapper {
1170+
position: absolute;
1171+
top: 0;
1172+
left: 0;
1173+
bottom: -0.5px;
1174+
right: 0;
1175+
text-align: center;
1176+
color: #FFFFFF;
1177+
opacity: 0;
1178+
background: rgba(0,0,0,0.8);
1179+
}
11811180

1182-
.artist-grid .artist .name {
1183-
padding-top: 45%;
1184-
font-weight: bold;
1181+
&.artist-overflow .name-wrapper {
1182+
opacity: 1;
1183+
background: #CCCCCC;
1184+
cursor: default;
1185+
}
1186+
1187+
&:hover .name-wrapper {
1188+
opacity: 1;
1189+
}
1190+
}
11851191
}
11861192

11871193

1194+
1195+
11881196
/**
11891197
* Square panels
11901198
* The basis for all playlist, album and artist thumbnails

0 commit comments

Comments
 (0)