1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

display songs in a table

This commit is contained in:
Luke Pulverenti 2013-04-22 16:06:43 -04:00
parent 7603892906
commit 3798443c4c
4 changed files with 157 additions and 57 deletions

View file

@ -188,7 +188,7 @@
font-weight: bold;
}
.posterDetailViewItem {
.tileItem {
background: #333;
padding: 10px 10px 3px;
margin: 3px 0;
@ -200,30 +200,38 @@
}
.posterDetailViewItem .itemProgress {
.tileItem .itemProgress {
font-size: 14px;
}
.posterDetailViewItem .starRating {
.tileItem .starRating {
width: 15px;
height: 13px;
}
.posterDetailViewImage {
max-height: 90px;
max-width: 46.5%;
.tileImage {
height: 90px;
width: 45%;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center top;
}
.posterDetailViewItem p {
.defaultTileImage {
background-color: #999;
}
.tileItem p {
margin: .35em 0;
}
.posterDetailViewItem .imgUserItemRating {
.tileItem .imgUserItemRating {
height: 18px;
width: 18px;
}
.posterDetailViewContentContainer {
.tileContent {
display: inline-block;
width: 50%;
padding-left: 10px;
@ -233,11 +241,11 @@
overflow: hidden;
}
.posterDetailViewName {
.tileName {
font-weight: bold;
}
.posterDetailViewItem .userDataIcons img {
.tileItem .userDataIcons img {
height: 14px;
width: 14px;
}
@ -262,33 +270,33 @@
}
@media all and (min-width: 850px) {
.posterDetailViewItem {
.tileItem {
width: 46%;
display: inline-block;
margin-left: 3px;
margin-right: 3px;
}
.posterDetailViewImage {
max-height: 140px;
.tileImage {
height: 140px;
}
.posterDetailViewItem .userDataIcons img {
.tileItem .userDataIcons img {
height: 18px;
width: 18px;
}
.posterDetailViewItem p {
.tileItem p {
margin: .75em 0;
}
.posterDetailViewItem .itemProgress {
.tileItem .itemProgress {
font-size: 17px;
}
}
@media all and (min-width: 1200px) {
.posterDetailViewItem {
.tileItem {
width: 30.6%;
}
@ -298,30 +306,56 @@
}
@media all and (min-width: 1440px) {
.posterDetailViewImage {
max-height: 170px;
.tileImage {
height: 170px;
}
}
@media all and (min-width: 1920px) {
.posterDetailViewItem {
.tileItem {
width: 31.3%;
}
.posterDetailViewImage {
max-height: 200px;
.tileImage {
height: 200px;
}
}
@media all and (min-width: 2000px) {
.posterDetailViewItem {
.tileItem {
width: 23%;
}
}
@media all and (min-width: 2540px) {
.posterDetailViewItem {
.tileItem {
width: 18.75%;
}
}
.detailTable {
border-collapse: collapse;
border-spacing: 0;
min-width: 70%;
}
.detailTable td {
border-spacing: 0;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
padding: 3px 5px;
}
.detailTable th {
border-spacing: 0;
border-bottom: 1px solid #444;
padding: 5px;
font-weight: normal;
text-align: left;
}
.detailTable .imgUserItemRating {
width: 20px;
height: 20px;
}