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

Merge pull request #1171 from MrTimscampi/placeholder

Browse source 
Enable a simple color placeholder for loading cards
This commit is contained in:
dkanada 2020-06-23 17:24:49 +09:00 • committed by GitHub
commit ab9241fe59
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 50 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/cardbuilder/card.css
View file

@ -192,9 +192,14 @@ button::-moz-focus-inner {
/* Needed in case this is a button */
display: block;
/* Needed in case this is a button */
margin: 0 !important;
border: 0 !important;
padding: 0 !important;
cursor: pointer;
color: inherit;
width: 100%;
font-family: inherit;
font-size: inherit;
/* Needed in safari */
height: 100%;
@ -203,19 +208,12 @@ button::-moz-focus-inner {
contain: strict;
}
.cardContent-button {
border: 0 !important;
padding: 0 !important;
cursor: pointer;
color: inherit;
width: 100%;
vertical-align: middle;
font-family: inherit;
font-size: inherit;
.cardContent:not(.defaultCardBackground) {
background-color: transparent;
}
.cardContent-button:not(.defaultCardBackground) {
background-color: transparent;
.cardBox:not(.visualCardBox) .cardPadder {
background-color: #242424;
}
.visualCardBox .cardContent {
@ -223,7 +221,8 @@ button::-moz-focus-inner {
border-bottom-right-radius: 0;
}
.cardContent-shadow {
.cardContent-shadow,
.cardBox:not(.visualCardBox) .cardPadder {
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
}

8
src/components/cardbuilder/cardBuilder.js
View file

@ -1367,9 +1367,6 @@ import 'programStyles';
let cardScalableClose = '';
let cardContentClass = 'cardContent';
if (!options.cardLayout) {
cardContentClass += ' cardContent-shadow';
}
let blurhashAttrib = '';
if (blurhash && blurhash.length > 0) {
@ -1377,21 +1374,20 @@ import 'programStyles';
}
if (layoutManager.tv) {
// Don't use the IMG tag with safari because it puts a white border around it
cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' ' + cardContentClass + ' lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + '>') : ('<div class="' + cardImageContainerClass + ' ' + cardContentClass + '">');
cardImageContainerClose = '</div>';
} else {
// Don't use the IMG tag with safari because it puts a white border around it
cardImageContainerOpen = imgUrl ? ('<button data-action="' + action + '" class="cardContent-button ' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + '>') : ('<button data-action="' + action + '" class="cardContent-button ' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction">');
cardImageContainerOpen = imgUrl ? ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + '>') : ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction">');
cardImageContainerClose = '</button>';
}
let cardScalableClass = 'cardScalable';
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
cardBoxClose = '</div>';
cardScalableClose = '</div>';

4
src/components/images/style.css
View file

@ -1,11 +1,11 @@
.lazy-image-fadein {
opacity: 1;
transition: opacity 0.7s;
transition: opacity 0.5s;
}
.lazy-image-fadein-fast {
opacity: 1;
transition: opacity 0.2s;
transition: opacity 0.1s;
}
.lazy-hidden {

2
src/components/remotecontrol/remotecontrol.js
View file

@ -196,7 +196,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
context.querySelector('.nowPlayingPageImage').classList.remove('nowPlayingPageImageAudio');
}
} else {
imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardContent-button cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><span class="cardImageIcon material-icons album"></span></button></div>';
imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><span class="cardImageIcon material-icons album"></span></button></div>';
}
}

5
src/themes/appletv/theme.css
View file

@ -122,8 +122,8 @@ html {
}
.paperList,
.visualCardBox {
background-color: #fff;
.visualCardBox,
.cardBox:not(.visualCardBox) .cardPadder {
background-color: rgba(0, 0, 0, 0.1);
}
@ -455,7 +455,6 @@ html {
border-color: #00a4dc !important;
}
.cardContent-button,
.itemDetailImage,
.cardOverlayContainer {
border-radius: 0.5rem;

4
src/themes/blueradiance/theme.css
View file

@ -450,6 +450,10 @@ html {
color: #4285f4;
}
.cardBox:not(.visualCardBox) .cardPadder {
background-color: rgba(0, 0, 0, 0.5);
}
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #00a4dc !important;

4
src/themes/light/theme.css
View file

@ -432,6 +432,10 @@ html {
color: #4285f4;
}
.cardBox:not(.visualCardBox) .cardPadder {
background-color: #fff;
}
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #00a4dc !important;

25
src/themes/purplehaze/theme.css
View file

@ -548,15 +548,25 @@ a[data-role=button] {
}
.personCard .cardScalable {
border-radius: 50%;
border-radius: 50% !important;
border: 1px solid rgb(255, 255, 255);
}
.cardBox:not(.visualCardBox) .cardPadder {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 1em;
}
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #ff77f1 !important;
}
.card.show-focus:not(.show-animation) .cardBox.visualCardBox,
.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
border-radius: 1.5em;
}
.layout-desktop,
.scrollY {
scrollbar-width: thin;
@ -602,12 +612,6 @@ a[data-role=button] {
width: 40vw;
}
.personCard .cardPadder-overflowPortrait,
.personCard .cardPadder-portrait {
padding-bottom: 100%;
contain: strict;
}
.personCard .coveredImage {
clip-path: circle(50% at 50% 50%);
}
@ -619,3 +623,10 @@ a[data-role=button] {
.personCard .cardOverlayButton-br {
right: 20%;
}
.personCard .cardPadder-overflowPortrait,
.personCard .cardPadder-portrait {
padding-bottom: 100%;
contain: strict;
border-radius: 50% !important;
}

4
src/themes/wmc/theme.css
View file

@ -430,6 +430,10 @@ html {
color: #4285f4;
}
.cardBox:not(.visualCardBox) .cardPadder {
background-color: #0f3562;
}
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #fff !important;