mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-30 08:37:59 +01:00
Cards in album list
This commit is contained in:
parent
8acf5f92d4
commit
4b552a8358
3 changed files with 25 additions and 5 deletions
|
@ -1,7 +1,7 @@
|
||||||
<ul class="albums-listing {{::class}}">
|
<ul class="albums-listing {{::class}}">
|
||||||
<li ng-repeat="album in albums track by album.id">
|
<li ng-repeat="album in albums track by album.id">
|
||||||
<a ng-href="{{::album.url}}">
|
<a ng-href="{{::album.url}}">
|
||||||
<img class="image" pfm-src-loader="::album.covers.small" pfm-src-size="small" />
|
<img class="image" pfm-src-loader="::album.covers.normal" pfm-src-size="normal" />
|
||||||
<span class="info">
|
<span class="info">
|
||||||
<span class="title">{{::album.title}}</span>
|
<span class="title">{{::album.title}}</span>
|
||||||
<span class="published">
|
<span class="published">
|
||||||
|
|
11
resources/assets/styles/content.less
vendored
11
resources/assets/styles/content.less
vendored
|
@ -56,6 +56,7 @@
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
&.two-columns {
|
&.two-columns {
|
||||||
li {
|
li {
|
||||||
|
@ -69,6 +70,8 @@
|
||||||
width: 25%;
|
width: 25%;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
.material-shadow(1);
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
background: #eee;
|
background: #eee;
|
||||||
|
@ -78,14 +81,14 @@
|
||||||
|
|
||||||
img {
|
img {
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
width: 100%;
|
||||||
width: 67px;
|
height: auto;
|
||||||
height: 67px;
|
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
|
border-radius: 2px 2px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
margin-left: 72px;
|
padding: 5px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
17
resources/assets/styles/mobile.less
vendored
17
resources/assets/styles/mobile.less
vendored
|
@ -370,6 +370,10 @@
|
||||||
.secondary-content {
|
.secondary-content {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.albums-listing {
|
||||||
|
width: 50% !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Super small phones like the iPhone 5
|
// Super small phones like the iPhone 5
|
||||||
|
@ -400,6 +404,19 @@
|
||||||
width: 122px;
|
width: 122px;
|
||||||
padding-top: 18px;
|
padding-top: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-bar .burger-wrapper {
|
||||||
|
top: 22px;
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.albums-listing {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-height: 500px) {
|
@media only screen and (max-height: 500px) {
|
||||||
|
|
Loading…
Reference in a new issue