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

Make login card scalable on focus (#535)

Browse source 
* Make login card scalable on focus
* Remove focus related classes
This commit is contained in:
Dmitry Lyzo 2019-11-11 12:28:27 +03:00 • committed by Vasily
parent 9c47f8fc1c
commit ad8fe23ef8
17 changed files with 131 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/controllers/selectserver.js
View file

@ -1,6 +1,8 @@
define(["loading", "appRouter", "layoutManager", "appSettings", "apphost", "focusManager", "connectionManager", "globalize", "actionsheet", "dom", "material-icons", "flexStyles", "emby-scroller", "emby-itemscontainer", "cardStyle", "emby-button"], function (loading, appRouter, layoutManager, appSettings, appHost, focusManager, connectionManager, globalize, actionSheet, dom) {
define(["loading", "appRouter", "layoutManager", "appSettings", "apphost", "focusManager", "connectionManager", "globalize", "actionsheet", "dom", "browser", "material-icons", "flexStyles", "emby-scroller", "emby-itemscontainer", "cardStyle", "emby-button"], function (loading, appRouter, layoutManager, appSettings, appHost, focusManager, connectionManager, globalize, actionSheet, dom, browser) {
"use strict";
var enableFocusTransform = !browser.slow && !browser.edge;
function renderSelectServerItems(view, servers) {
var items = servers.map(function (server) {
return {
@ -21,17 +23,25 @@ define(["loading", "appRouter", "layoutManager", "appSettings", "apphost", "focu
cardImageContainer = '<div class="cardImage" style="' + item.cardImageStyle + '"></div>';
}
var cardBoxCssClass = "cardBox";
// TODO move card creation code to Card component
var cssClass = "card overflowSquareCard loginSquareCard scalableCard overflowSquareCard-scalable";
if (layoutManager.tv) {
cardBoxCssClass += " cardBox-focustransform";
cssClass += " show-focus";
if (enableFocusTransform) {
cssClass += " show-animation";
}
}
var cardBoxCssClass = "cardBox";
var innerOpening = '<div class="' + cardBoxCssClass + '">';
var cardContainer = '';
cardContainer += '<button raised class="card overflowSquareCard loginSquareCard scalableCard overflowSquareCard-scalable" style="display:inline-block;" data-id="' + item.id + '" data-url="' + (item.url || "") + '" data-cardtype="' + item.cardType + '">';
cardContainer += '<button raised class="' + cssClass + '" style="display:inline-block;" data-id="' + item.id + '" data-url="' + (item.url || "") + '" data-cardtype="' + item.cardType + '">';
cardContainer += innerOpening;
cardContainer += '<div class="cardScalable card-focuscontent">';
cardContainer += '<div class="cardScalable">';
cardContainer += '<div class="cardPadder cardPadder-square">';
cardContainer += '</div>';
cardContainer += '<div class="cardContent">';