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

separate card style

Browse source
This commit is contained in:
Luke Pulverenti 2016-08-08 22:10:12 -04:00
parent 274d8f6809
commit 782d50532d
16 changed files with 93 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

51
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css vendored
View file

@ -1,4 +1,7 @@
.card {
border: 0;
font-size: inherit !important;
font-family: inherit !important;
text-transform: none;
background-color: transparent !important;
background: none !important;
@ -41,12 +44,6 @@
contain: layout style;
}
button.card {
border: 0 !important;
font-size: inherit !important;
font-family: inherit !important;
}
.cardScalable {
position: relative;
}
@ -70,7 +67,7 @@ button.card {
.card .cardBox {
padding: 0 !important;
margin: 0;
transition: none !important;
transition: none;
border: 3px solid transparent;
}
@ -85,14 +82,6 @@ button.card {
}
}
.round .cardBox {
border: .7em solid transparent;
}
.round .cardImageContainer {
border: .15em solid transparent;
}
.card:focus {
position: relative !important;
z-index: 10 !important;
@ -103,20 +92,6 @@ button.card {
border-color: transparent;
}
.cardImageContainer, .round:focus .cardImageContainer {
border-color: #fff;
}
.round .cardBox {
transition: transform 180ms ease-out !important;
-webkit-transform-origin: center center;
transform-origin: center center;
}
.layout-tv .round:focus .cardBox {
transform: scale(1.34, 1.34);
}
.bottomPaddedCard .cardBox:not(.visualCardBox) {
margin-bottom: 1em;
}
@ -184,7 +159,7 @@ button.card {
border-radius: 0;
}
button.cardImageContainer {
.cardImageContainer-button {
border: 0;
padding: 0;
background-color: transparent;
@ -209,18 +184,10 @@ button.cardImageContainer {
display: block;
}
.round .cardContent {
overflow: visible;
}
.scalableCard .cardImageContainer {
height: 100%;
}
.round .cardImageContainer, .round .cardImage {
border-radius: 1000px;
}
.cardImage.coveredImage, .cardImageContainer.coveredImage, .coveredImage .cardImage {
background-size: 100% 100%;
background-position: center center;
@ -234,10 +201,6 @@ button.cardImageContainer {
padding: .5em .3em;
}
.cardFooter .cardText + .cardText {
opacity: .6;
}
.visualCardBox .cardScalable, .visualCardBox .cardFooter {
background-color: #222326;
}
@ -283,6 +246,10 @@ button.cardImageContainer {
text-align: center;
}
.cardText-secondary {
opacity: .6;
}
.cardCenteredText {
white-space: normal;
}

9
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js vendored
View file

@ -669,7 +669,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
return 'defaultCardColor' + getDefaultColorIndex(str);
}
function getCardTextLines(lines, cssClass, forceLines) {
function getCardTextLines(lines, cssClass, forceLines, addSecondaryClass) {
var html = '';
@ -680,6 +680,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
var text = lines[i];
if (i == 1 && addSecondaryClass) {
cssClass += ' cardText-secondary';
}
if (text) {
html += "<div class='" + cssClass + "'>";
html += text;
@ -865,7 +869,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
}
}
html += getCardTextLines(lines, cssClass, !options.overlayText);
html += getCardTextLines(lines, cssClass, !options.overlayText, isOuterFooter);
if (progressHtml) {
html += progressHtml;
@ -1076,6 +1080,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
} else {
if (overlayButtons && !separateCardBox) {
cardImageContainerClass += ' cardImageContainerClass-button';
cardImageContainerOpen = imgUrl ? ('<button type="button" data-action="' + action + '" class="itemAction ' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<button type="button" data-action="' + action + '" class="itemAction ' + cardImageContainerClass + '">');
cardImageContainerClose = '</button>';

6
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js vendored
View file

@ -69,12 +69,12 @@ define(['imageLoader', 'itemShortcuts', 'connectionManager'], function (imageLoa
nameHtml += '<div class="cardText">' + person.Name + '</div>';
if (person.Role) {
nameHtml += '<div class="cardText">as ' + person.Role + '</div>';
nameHtml += '<div class="cardText cardText-secondary">as ' + person.Role + '</div>';
}
else if (person.Type) {
nameHtml += '<div class="cardText">' + Globalize.translate('core#' + person.Type) + '</div>';
nameHtml += '<div class="cardText cardText-secondary">' + Globalize.translate('core#' + person.Type) + '</div>';
} else {
nameHtml += '<div class="cardText">&nbsp;</div>';
nameHtml += '<div class="cardText cardText-secondary">&nbsp;</div>';
}
var html = '\

29
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/roundcard.css vendored Normal file
View file

@ -0,0 +1,29 @@
.cardBox-round {
border: .7em solid transparent;
}
.cardImageContainer-round {
border: .15em solid transparent;
}
.cardImageContainer, .card-round:focus .cardImageContainer {
border-color: #fff;
}
.cardBox-round {
transition: transform 180ms ease-out !important;
-webkit-transform-origin: center center;
transform-origin: center center;
}
.layout-tv .card-round:focus .cardBox {
transform: scale(1.34, 1.34);
}
.cardContent-round {
overflow: visible;
}
.cardImageContainer-round, .card-round .cardImage {
border-radius: 1000px;
}