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 #2472 from jellyfin/dkanada-patch-1

Browse source 
add border radius to several card elements
This commit is contained in:
Bill Thornton 2021-05-04 13:17:41 -04:00 • committed by GitHub
commit 7390314001
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 26 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/assets/css/dashboard.scss
View file

@ -214,6 +214,7 @@ div[data-role=controlgroup] a.ui-btn-active {
background-repeat: no-repeat;
background-position: center center;
position: absolute;
border-radius: 0.2em;
top: 0;
left: 0;
right: 0;
@ -345,11 +346,15 @@ div[data-role=controlgroup] a.ui-btn-active {
right: 0;
bottom: 0;
font-weight: 400;
background: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
}
.darkenContent {
background: rgba(0, 0, 0, 0.7);
color: #ddd;
}
.sessionAppName {
vertical-align: top;
max-width: 200px;

19
src/components/cardbuilder/card.scss
View file

@ -110,6 +110,7 @@ button::-moz-focus-inner {
.card.show-focus:not(.show-animation) .cardBox.visualCardBox,
.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
border: 0.5em solid transparent;
border-radius: 0.7em; /* card border + card border-radius */
}
.card.show-animation:focus > .cardBox {
@ -160,6 +161,7 @@ button::-moz-focus-inner {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 0.2em;
display: flex;
align-items: center;
justify-content: center;
@ -194,6 +196,7 @@ button::-moz-focus-inner {
left: 0;
right: 0;
bottom: 0;
border-radius: 0.2em;
/* Needed in case this is a button */
display: block;
@ -222,12 +225,12 @@ button::-moz-focus-inner {
}
.cardBox:not(.visualCardBox) .cardPadder {
border-radius: 0.2em;
background-color: #242424;
}
.visualCardBox .cardContent {
border-top-left-radius: 0.2em;
border-top-right-radius: 0.2em;
.blurhash-canvas {
border-radius: 0.2em;
}
.cardContent-shadow,
@ -263,7 +266,7 @@ button::-moz-focus-inner {
.visualCardBox {
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
border-radius: 0.145em;
border-radius: 0.2em;
}
.innerCardFooter {
@ -769,6 +772,14 @@ button::-moz-focus-inner {
bottom: 0;
right: 0;
user-select: none;
border-radius: 0.2em;
}
.visualCardBox .blurhash-canvas,
.visualCardBox .cardContent,
.visualCardBox .cardOverlayContainer {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card-hoverable:hover .cardOverlayContainer {

4
src/controllers/dashboard/dashboard.js
View file

@ -270,7 +270,7 @@ import confirm from '../../components/confirm/confirm';
html += '<div class="sessionNowPlayingContent"></div>';
}
html += '<div class="sessionNowPlayingInnerContent">';
html += `<div class="sessionNowPlayingInnerContent ${imgUrl ? 'darkenContent' : ''}">`;
html += '<div class="sessionAppInfo">';
const clientImage = DashboardPage.getClientImage(session);
@ -608,8 +608,10 @@ import confirm from '../../components/confirm/confirm';
if (imgUrl) {
imgElem.classList.add('sessionNowPlayingContent-withbackground');
row.querySelector('.sessionNowPlayingInnerContent').classList.add('darkenContent');
} else {
imgElem.classList.remove('sessionNowPlayingContent-withbackground');
row.querySelector('.sessionNowPlayingInnerContent').classList.remove('darkenContent');
}
}
},

2
src/controllers/session/login/index.js
View file

@ -154,7 +154,7 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder';
html += '<div class="' + cardBoxCssClass + '">';
html += '<div class="cardScalable">';
html += '<div class="cardPadder cardPadder-square"></div>';
html += `<div class="cardContent" style="border-radius:0.2em" data-haspw="${user.HasPassword}" data-username="${user.Name}" data-userid="${user.Id}">`;
html += `<div class="cardContent" data-haspw="${user.HasPassword}" data-username="${user.Name}" data-userid="${user.Id}">`;
let imgUrl;
if (user.PrimaryImageTag) {

2
src/controllers/session/selectServer/index.js
View file

@ -65,7 +65,7 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder';
cardContainer += '<div class="cardPadder cardPadder-square">';
cardContainer += '</div>';
cardContainer += '<div class="cardContent">';
cardContainer += `<div class="cardImageContainer coveredImage ${cardBuilder.getDefaultBackgroundClass()}" style="border-radius:0.2em">`;
cardContainer += `<div class="cardImageContainer coveredImage ${cardBuilder.getDefaultBackgroundClass()}">`;
cardContainer += cardImageContainer;
cardContainer += '</div>';
cardContainer += '</div>';

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

@ -229,11 +229,6 @@ a[data-role=button] {
border-radius: 0.8em;
}
.visualCardBox .cardOverlayContainer {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.defaultCardBackground1 {
background-color: #9c20ab;
}