update list styles
This commit is contained in:
parent
5b72e1c91b
commit
fad66be11a
23 changed files with 183 additions and 279 deletions
|
@ -35,12 +35,6 @@
|
|||
margin-right: .25em !important;
|
||||
}
|
||||
|
||||
.cardOverlayFab-md-icon {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
font-size: 30px !important;
|
||||
}
|
||||
|
||||
.withHoverMenu {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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] || ' ');
|
||||
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>';
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue