mirror of
https://github.com/jellyfin/jellyfin.git
synced 2024-09-06 03:26:07 +02:00
make metro styled tiles look and act the same
This commit is contained in:
parent
fab627c845
commit
047e97cb22
5 changed files with 62 additions and 49 deletions
|
@ -425,7 +425,6 @@ form, .readOnlyContent {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-bottom: 28px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.posterViewItem a {
|
.posterViewItem a {
|
||||||
|
@ -436,7 +435,7 @@ form, .readOnlyContent {
|
||||||
|
|
||||||
.posterViewItem img {
|
.posterViewItem img {
|
||||||
max-width: 155px;
|
max-width: 155px;
|
||||||
max-height: 148px;
|
max-height: 155px;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -454,19 +453,25 @@ form, .readOnlyContent {
|
||||||
.posterViewItemText {
|
.posterViewItemText {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-wrap: none;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 4px 2px 0;
|
padding: 4px 0px 0;
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 24px;
|
|
||||||
background: #181818;
|
background: #181818;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
|
max-width: 155px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.posterViewItemText div{
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin: 0px 4px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
.posterViewItem:hover, .userItem:hover {
|
.posterViewItem:hover, .userItem:hover {
|
||||||
-moz-box-shadow: 0 0 20px 3px #2572EB;
|
-moz-box-shadow: 0 0 20px 3px #2572EB;
|
||||||
-webkit-box-shadow: 0 0 20px 3px #2572EB;
|
-webkit-box-shadow: 0 0 20px 3px #2572EB;
|
||||||
|
@ -477,11 +482,11 @@ form, .readOnlyContent {
|
||||||
|
|
||||||
.posterViewItem {
|
.posterViewItem {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding-bottom: 29px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.posterViewItemText {
|
.posterViewItemText {
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
|
max-width: 190px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.posterViewItem img {
|
.posterViewItem img {
|
||||||
|
@ -496,29 +501,37 @@ form, .readOnlyContent {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.posterViewItem img {
|
.posterViewItem img {
|
||||||
max-width: 280px;
|
max-width: 280px;
|
||||||
max-height: 250px;
|
max-height: 280px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.posterViewItemText {
|
||||||
|
max-width: 280px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 1920px) {
|
@media all and (min-width: 1920px) {
|
||||||
|
|
||||||
.posterViewItem {
|
.posterViewItem {
|
||||||
font-size: 19px;
|
font-size: 19px;
|
||||||
padding-bottom: 33px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.posterViewItemText {
|
.posterViewItemText div{
|
||||||
height: 28px;
|
height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.posterViewItem img {
|
.posterViewItem img {
|
||||||
max-width: 352px;
|
max-width: 352px;
|
||||||
max-height: 300px;
|
max-height: 352px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.posterViewItemText {
|
||||||
|
max-width: 352px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*DEPRECATED userItem classes
|
||||||
.userItem {
|
.userItem {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
|
@ -620,7 +633,8 @@ form, .readOnlyContent {
|
||||||
.userItemHeader {
|
.userItemHeader {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
}
|
}
|
||||||
}
|
}*/
|
||||||
|
/*DEPRECATED userItem classes END
|
||||||
|
|
||||||
/* Startup wizard */
|
/* Startup wizard */
|
||||||
.wizardPage {
|
.wizardPage {
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
<div id="loginPage" data-role="page" class="page standalonePage">
|
<div id="loginPage" data-role="page" class="page standalonePage">
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
<div id="divUsers" style="margin: 50px 20px 20px; text-align: center;"></div>
|
<div id="divUsers" style="margin: 50px 0px 20px; text-align: center;"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-role="popup" id="popupLogin" class="ui-corner-all popup">
|
<div data-role="popup" id="popupLogin" class="ui-corner-all popup">
|
||||||
|
|
|
@ -23,8 +23,7 @@
|
||||||
|
|
||||||
return ApiClient.getUserImageUrl(user.Id, {
|
return ApiClient.getUserImageUrl(user.Id, {
|
||||||
width: 240,
|
width: 240,
|
||||||
tag: user.PrimaryImageTag,
|
tag: user.PrimaryImageTag
|
||||||
type: "Primary"
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -62,34 +61,43 @@
|
||||||
|
|
||||||
var background = Dashboard.getRandomMetroColor();
|
var background = Dashboard.getRandomMetroColor();
|
||||||
|
|
||||||
|
html += '<div class="posterViewItem">';
|
||||||
|
|
||||||
if (user.HasPassword) {
|
if (user.HasPassword) {
|
||||||
html += "<a id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#popupLogin' data-rel='popup' onclick='LoginPage.authenticatingLinkId=this.id;' class='userItem'>";
|
html += "<a id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#popupLogin' data-rel='popup' onclick='LoginPage.authenticatingLinkId=this.id;' \">";
|
||||||
} else {
|
} else {
|
||||||
html += "<a id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#' onclick='LoginPage.authenticateUserLink(this);' class='userItem'>";
|
html += "<a id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#' onclick='LoginPage.authenticateUserLink(this);' \">";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (user.PrimaryImageTag) {
|
if (user.PrimaryImageTag) {
|
||||||
|
|
||||||
var imgUrl = ApiClient.getUserImageUrl(user.Id, {
|
var imgUrl = ApiClient.getUserImageUrl(user.Id, {
|
||||||
width: 500,
|
width: 500,
|
||||||
tag: user.PrimaryImageTag,
|
tag: user.PrimaryImageTag
|
||||||
type: "Primary"
|
|
||||||
});
|
});
|
||||||
|
|
||||||
html += '<img class="userItemImage" src="' + imgUrl + '" />';
|
html += '<img src="' + imgUrl + '" />';
|
||||||
} else {
|
} else {
|
||||||
html += '<img class="userItemImage" src="css/images/logindefault.png" style="background:' + background + ';" />';
|
html += '<img style="background:' + background + ';" src="css/images/logindefault.png"/>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '<div class="userItemContent" style="background:' + background + ';">';
|
html += '<div class="posterViewItemText">';
|
||||||
|
|
||||||
html += '<div class="userItemContentInner">';
|
html += '<div>' + user.Name + '</div>';
|
||||||
html += '<p class="userItemHeader">' + user.Name + '</p>';
|
html += '<div>';
|
||||||
html += '<p>' + LoginPage.getLastSeenText(user.LastActivityDate) + '</p>';
|
var lastSeen = LoginPage.getLastSeenText(user.LastActivityDate);
|
||||||
|
if (lastSeen != "") {
|
||||||
|
html += lastSeen;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
html += " ";
|
||||||
|
}
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
html += '</a>';
|
html += '</a>';
|
||||||
|
|
||||||
|
html += '</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
$('#divUsers', '#loginPage').html(html);
|
$('#divUsers', '#loginPage').html(html);
|
||||||
|
|
|
@ -49,21 +49,23 @@
|
||||||
if (plugin.isPremium) {
|
if (plugin.isPremium) {
|
||||||
html += "<div class='premiumBanner'><img src='css/images/premiumflag.png' /></div>";
|
html += "<div class='premiumBanner'><img src='css/images/premiumflag.png' /></div>";
|
||||||
}
|
}
|
||||||
|
|
||||||
var color = plugin.tileColor || Dashboard.getRandomMetroColor();
|
var color = plugin.tileColor || Dashboard.getRandomMetroColor();
|
||||||
|
|
||||||
html += "<div class='posterViewItemText' style='background:" + color + "'>";
|
html += "<div class='posterViewItemText' style='background:" + color + "'>";
|
||||||
|
|
||||||
var installedPlugin = installedPlugins.filter(function (ip) {
|
var installedPlugin = installedPlugins.filter(function (ip) {
|
||||||
return ip.Name == plugin.name;
|
return ip.Name == plugin.name;
|
||||||
})[0];
|
})[0];
|
||||||
|
|
||||||
|
html += "<div>";
|
||||||
if (installedPlugin) {
|
if (installedPlugin) {
|
||||||
|
|
||||||
html += plugin.name + " (Installed)";
|
html += plugin.name + " (Installed)";
|
||||||
} else {
|
} else {
|
||||||
html += plugin.name;
|
html += plugin.name;
|
||||||
}
|
}
|
||||||
|
html += "</div>";
|
||||||
|
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
|
|
||||||
|
|
|
@ -444,7 +444,9 @@ var Dashboard = {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.showTitle || !hasPrimaryImage || (item.Type !== 'Movie' && item.Type !== 'Series' && item.Type !== 'Season')) {
|
if (options.showTitle || !hasPrimaryImage || (item.Type !== 'Movie' && item.Type !== 'Series' && item.Type !== 'Season')) {
|
||||||
html += "<div class='posterViewItemText'>" + item.Name + "</div>";
|
html += "<div class='posterViewItemText'>";
|
||||||
|
html += "<div>" + item.Name + "</div>";
|
||||||
|
html += "</div>"
|
||||||
}
|
}
|
||||||
|
|
||||||
html += "</a></div>";
|
html += "</a></div>";
|
||||||
|
@ -472,8 +474,7 @@ var Dashboard = {
|
||||||
var imageUrl = user.PrimaryImageTag ? ApiClient.getUserImageUrl(user.Id, {
|
var imageUrl = user.PrimaryImageTag ? ApiClient.getUserImageUrl(user.Id, {
|
||||||
|
|
||||||
height: 400,
|
height: 400,
|
||||||
tag: user.PrimaryImageTag,
|
tag: user.PrimaryImageTag
|
||||||
type: "Primary"
|
|
||||||
|
|
||||||
}) : "css/images/userFlyoutDefault.png";
|
}) : "css/images/userFlyoutDefault.png";
|
||||||
|
|
||||||
|
@ -565,18 +566,7 @@ var Dashboard = {
|
||||||
|
|
||||||
Dashboard.showLoadingMsg();
|
Dashboard.showLoadingMsg();
|
||||||
|
|
||||||
var promise;
|
ApiClient.getDirectoryContents(path, { includeDirectories: true }).done(function (folders) {
|
||||||
|
|
||||||
if (path === "Network") {
|
|
||||||
promise = ApiClient.getNetworkComputers();
|
|
||||||
}
|
|
||||||
else if (path) {
|
|
||||||
promise = ApiClient.getDirectoryContents(path, { includeDirectories: true });
|
|
||||||
} else {
|
|
||||||
promise = ApiClient.getDrives();
|
|
||||||
}
|
|
||||||
|
|
||||||
promise.done(function (folders) {
|
|
||||||
|
|
||||||
$('#txtDirectoryPickerPath', page).val(path || "");
|
$('#txtDirectoryPickerPath', page).val(path || "");
|
||||||
|
|
||||||
|
@ -693,8 +683,7 @@ var Dashboard = {
|
||||||
|
|
||||||
var url = ApiClient.getUserImageUrl(user.Id, {
|
var url = ApiClient.getUserImageUrl(user.Id, {
|
||||||
width: 225,
|
width: 225,
|
||||||
tag: user.PrimaryImageTag,
|
tag: user.PrimaryImageTag
|
||||||
type: "Primary"
|
|
||||||
});
|
});
|
||||||
|
|
||||||
headerHtml += '<img src="' + url + '" />';
|
headerHtml += '<img src="' + url + '" />';
|
||||||
|
@ -1108,7 +1097,7 @@ var Dashboard = {
|
||||||
setPageTitle: function (title) {
|
setPageTitle: function (title) {
|
||||||
|
|
||||||
$('.pageTitle', $.mobile.activePage).html(title);
|
$('.pageTitle', $.mobile.activePage).html(title);
|
||||||
|
|
||||||
if (title) {
|
if (title) {
|
||||||
document.title = title;
|
document.title = title;
|
||||||
}
|
}
|
||||||
|
@ -1142,7 +1131,7 @@ $(function () {
|
||||||
footerHtml += '</div>';
|
footerHtml += '</div>';
|
||||||
|
|
||||||
footerHtml += '<div id="footerNotifications"></div>';
|
footerHtml += '<div id="footerNotifications"></div>';
|
||||||
|
|
||||||
footerHtml += '</div>';
|
footerHtml += '</div>';
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue