update list styles

This commit is contained in:
Luke Pulverenti 2016-08-05 15:34:10 -04:00
parent 5b72e1c91b
commit fad66be11a
23 changed files with 183 additions and 279 deletions

View file

@ -35,12 +35,6 @@
margin-right: .25em !important;
}
.cardOverlayFab-md-icon {
width: auto !important;
height: auto !important;
font-size: 30px !important;
}
.withHoverMenu {
overflow: hidden;
}

View file

@ -16,16 +16,18 @@ button.listItem {
display: block;
align-items: center;
text-align: left;
padding: .25em .25em .25em .25em !important;
line-height: 170%;
padding: .25em 1.15em;
line-height: 160%;
border-bottom: 1px solid #2a2a2a;
}
div.listItem {
cursor: pointer;
}
.listItem.largeImage {
.listItem-nosidepadding {
padding-left: 0;
padding-right: 0;
}
.listItem-largeImage {
padding: .5em !important;
}
@ -57,27 +59,16 @@ div.listItem {
min-height: 48px;
}
.listItemBody.two-line {
min-height: 72px;
padding-top: 0;
padding-bottom: 0;
}
.two-line {
min-height: 72px;
padding-top: 0;
padding-bottom: 0;
}
.listItemBody.three-line {
min-height: 88px;
padding-top: 0;
padding-bottom: 0;
}
.listItemBody h2, .listItemBody h3 {
margin: 0;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.layout-tv .listItemBody h3 {
padding: 0;
.three-line {
min-height: 88px;
padding-top: 0;
padding-bottom: 0;
}
.listItemBody > div:not(.secondary) {
@ -85,10 +76,16 @@ div.listItem {
}
.listItemBodyText {
margin: 0;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.listItemBodyText-nowrap {
white-space: nowrap;
}
.listItemImage {
width: 7.4vh;
height: 7.4vh;
@ -101,6 +98,14 @@ div.listItem {
position: relative;
}
.listItemImage-large {
width: 45vh;
height: 30vh;
background-position: center center;
margin-right: 2%;
margin-left: 1%;
}
.listItemIcon {
width: auto !important;
height: auto !important;
@ -112,14 +117,6 @@ div.listItem {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.listItem.largeImage .listItemImage {
width: 45vh;
height: 30vh;
background-position: center center;
margin-right: 2%;
margin-left: 1%;
}
.listItemImage .itemProgressBar {
position: absolute;
bottom: 0;
@ -128,7 +125,7 @@ div.listItem {
}
.listItem .secondary {
color: #737373;
color: #888;
}
.listItem:focus .secondary {
@ -143,14 +140,6 @@ div.listItem {
transform: scale(1.025, 1.025);
}
.listItem > .fab:first-child, .listItem > i:first-child {
margin-left: .3em;
}
.paperList .listItem > .fab:first-child, .paperList .listItem > i:first-child {
margin-left: .65em;
}
.paperList {
padding: .5em 0;
margin: 1em auto;
@ -166,25 +155,23 @@ div.listItem {
border-bottom: 0;
}
.listItemMediaInfo {
align-items: center;
}
.layout-tv .listItemMediaInfo {
margin: .5em 0;
}
.listItemMediaInfo > * {
display: inline-block;
.listItemMediaInfo {
/* Don't display if flex not supported */
display: none;
align-items: center;
}
.listGroupHeader {
margin: 2em 0 1em;
}
.listGroupHeader.first {
margin-top: 0;
}
.listGroupHeader-first {
margin-top: 0;
}
.listItem .indicators {
right: .5vh;
@ -196,10 +183,6 @@ div.listItem {
@supports (display: flex) {
.listItem > * {
display: flex;
}
.listItem, .listItemBody, .listItemMediaInfo {
display: flex;
}

View file

@ -113,12 +113,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (i === 0) {
if (isLargeStyle) {
html += '<h2>';
html += '<h2 class="listItemBodyText">';
} else {
html += '<div>';
html += '<div class="listItemBodyText">';
}
} else {
html += '<div class="secondary">';
html += '<div class="secondary listItemBodyText">';
}
html += (textlines[i] || '&nbsp;');
if (i === 0 && isLargeStyle) {
@ -164,7 +164,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
}
if (i == 0) {
html += '<h1 class="listGroupHeader first">';
html += '<h1 class="listGroupHeader listGroupHeader-first">';
}
else {
html += '<h1 class="listGroupHeader">';
@ -178,7 +178,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
}
}
var cssClass = "listItem";
var cssClass = "listItem listItem-nosidepadding";
if (clickEntireItem) {
cssClass += ' itemAction';
@ -187,7 +187,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
var downloadWidth = 80;
if (isLargeStyle) {
cssClass += " largeImage";
cssClass += " listItem-largeImage";
downloadWidth = 500;
}
@ -208,10 +208,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
var imgUrl = getImageUrl(item, downloadWidth);
var imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
if (imgUrl) {
html += '<div class="listItemImage lazy" data-src="' + imgUrl + '" item-icon>';
html += '<div class="' + imageClass + ' lazy" data-src="' + imgUrl + '" item-icon>';
} else {
html += '<div class="listItemImage">';
html += '<div class="' + imageClass + '">';
}
var indicatorsHtml = '';
@ -277,11 +279,11 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
html += getTextLinesHtml(textlines, isLargeStyle);
if (!enableSideMediaInfo) {
html += '<div class="secondary listItemMediaInfo">' + mediaInfo.getPrimaryMediaInfoHtml(item) + '</div>';
html += '<div class="secondary listItemMediaInfo listItemBodyText">' + mediaInfo.getPrimaryMediaInfoHtml(item) + '</div>';
}
if (enableOverview && item.Overview) {
html += '<div class="secondary overview">';
html += '<div class="secondary overview listItemBodyText">';
html += item.Overview;
html += '</div>';
}