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

rework library buttons

Browse source
This commit is contained in:
Luke Pulverenti 2015-05-07 00:14:35 -04:00
parent 173773d5bc
commit eac4ec9324
6 changed files with 109 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

10
dashboard-ui/css/card.css
View file

@ -39,10 +39,8 @@
text-overflow: ellipsis;
}
.smallBackdropPosterItem .cardOverlayInner > div {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
.buttonCard:hover .cardBox {
opacity: .6;
}
.cardBox {
@ -233,10 +231,10 @@
height: 100%;
}
.cardImage canvas {
.cardImage canvas {
width: 100%;
height: 100%;
}
}
.coveredCardImage {
background-size: cover;

6
dashboard-ui/css/nowplaying.css
View file

@ -42,6 +42,12 @@
white-space: nowrap;
}
.smallBackdropPosterItem .cardOverlayInner > div {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.chapterPosterItem {
width: 240px!important;
cursor: pointer;

141
dashboard-ui/css/tileitem.css
View file

@ -406,144 +406,3 @@
text-shadow: none;
font-weight: 400;
}
.posterItemImage {
background-size: contain;
background-repeat: no-repeat;
background-position: center bottom;
background-color: #000;
position: relative;
}
.myLibraryPosterItem {
width: 42%;
min-width: 50px;
}
.myLibraryPosterItem .posterItemImage {
height: 34px;
background-position: 9px center;
background-size: 14px 14px;
background-color: rgba(51, 136, 204, 0.7);
background-color: rgba(82, 181, 75, 0.7);
}
.myLibraryPosterItem .posterItemText {
top: 0;
left: 0;
line-height: 34px;
text-align: left;
padding: 0 0 0 12px;
position: absolute;
}
.myLibraryPosterItem i {
margin-right: 10px;
}
.moviesPosterItem .posterItemImage, .trailersPosterItem .posterItemImage {
background-color: rgba(176, 94, 81, 0.7);
}
.musicPosterItem .posterItemImage {
background-color: rgba(217, 145, 67, 0.7);
}
.tvshowsPosterItem .posterItemImage {
background-color: rgba(77, 88, 164, 0.7);
}
.gamesPosterItem .posterItemImage {
background-color: rgba(183, 202, 72, 0.7);
}
.channelsPosterItem .posterItemImage {
background-color: rgba(51, 136, 204, 0.7);
}
.livetvPosterItem .posterItemImage {
background-color: rgba(255, 233, 127, 0.7);
}
.homevideosPosterItem .posterItemImage {
background-color: rgba(110, 52, 32, 0.7);
}
.photosPosterItem .posterItemImage {
background-color: rgba(127, 0, 0, 0.7);
}
.musicvideosPosterItem .posterItemImage {
background-color: rgba(143, 54, 168, 0.7);
}
@media all and (min-width: 600px) {
.myLibraryPosterItem {
width: 31%;
/* Specify a min width just in case the container doesn't have a width */
min-width: 160px;
}
}
@media all and (min-width: 800px) {
.myLibraryPosterItem {
width: 32%;
/* Specify a min width just in case the container doesn't have a width */
min-width: 160px;
}
}
@media all and (min-width: 1000px) {
.myLibraryPosterItem {
width: 23.5%;
/* Specify a min width just in case the container doesn't have a width */
min-width: 220px;
}
}
@media all and (min-width: 1200px) {
.myLibraryPosterItem {
width: 24.0%;
}
}
@media all and (min-width: 1440px) {
.myLibraryPosterItem {
width: 19.0%;
/* Specify a min width just in case the container doesn't have a width */
min-width: 220px;
}
}
@media all and (min-width: 1600px) {
.myLibraryPosterItem {
width: 15.5%;
}
}
@media all and (min-width: 1700px) {
.myLibraryPosterItem {
width: 16%;
}
}
@media all and (min-width: 2000px) {
.myLibraryPosterItem {
width: 13.5%;
}
}
@media all and (min-width: 2300px) {
.myLibraryPosterItem {
width: 13.8%;
}
}

31
dashboard-ui/scripts/indexpage.js
View file

@ -26,38 +26,51 @@
var item = items[i];
var icon;
var backgroundColor = 'rgba(82, 181, 75, 0.7)';
switch (item.CollectionType) {
case "movies":
icon = "fa-film";
backgroundColor = 'rgba(176, 94, 81, 0.7)';
break;
case "music":
icon = "fa-music";
backgroundColor = 'rgba(217, 145, 67, 0.7)';
break;
case "photos":
icon = "fa-photo";
backgroundColor = 'rgba(127, 0, 0, 0.7)';
break;
case "livetv":
icon = "fa-video-camera";
backgroundColor = 'rgba(255, 233, 127, 0.7)';
break;
case "tvshows":
icon = "fa-video-camera";
backgroundColor = 'rgba(77, 88, 164, 0.7)';
break;
case "games":
icon = "fa-gamepad";
backgroundColor = 'rgba(183, 202, 72, 0.7)';
break;
case "trailers":
icon = "fa-film";
backgroundColor = 'rgba(176, 94, 81, 0.7)';
break;
case "homevideos":
icon = "fa-video-camera";
backgroundColor = 'rgba(110, 52, 32, 0.7)';
break;
case "musicvideos":
icon = "fa-video-camera";
backgroundColor = 'rgba(143, 54, 168, 0.7)';
break;
case "books":
icon = "fa-book";
break;
case "channels":
icon = "fa-globe";
backgroundColor = 'rgba(51, 136, 204, 0.7)';
break;
case "playlists":
icon = "fa-list";
@ -67,25 +80,22 @@
break;
}
var cssClass = "posterItem";
cssClass += ' ' + options.shape + 'PosterItem';
var cssClass = 'card smallBackdropCard buttonCard';
if (item.CollectionType) {
cssClass += ' ' + item.CollectionType + 'PosterItem';
cssClass += ' ' + item.CollectionType + 'buttonCard';
}
var href = item.url || LibraryBrowser.getHref(item, options.context);
html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
html += '<div class="cardBox" style="background-color:' + backgroundColor + ';margin:4px;border-radius:4px;">';
var imageCssClass = '';
html += '<div class="posterItemImage ' + imageCssClass + '">';
html += '</div>';
html += "<div class='posterItemDefaultText posterItemText'>";
html += "<div class='cardText' style='padding:5px 10px;color:#fff;'>";
html += '<i class="fa ' + icon + '"></i>';
html += '<span>' + item.Name + '</span>';
html += '<span style="margin-left:.7em;">' + item.Name + '</span>';
html += "</div>";
html += "</div>";
html += "</a>";
@ -106,7 +116,6 @@
html += '<div>';
html += createMediaLinks({
items: items,
shape: 'myLibrary',
showTitle: true,
centerText: true

71
dashboard-ui/scripts/librarybrowser.js
View file

@ -949,42 +949,61 @@
var screenWidth = $(window).width();
if (!AppInfo.isTouchPreferred) {
screenWidth = window.screen.availWidth;
}
return screenWidth;
},
getPostersPerRow: function () {
var screenWidth = LibraryBrowser.screenWidth();
getPostersPerRow: function (screenWidth) {
var div = $('<div class="card squareCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
var square = screenWidth / $('.cardImage', div).innerWidth();
div.remove();
div = $('<div class="card backdropCard">><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
div = $('<div class="card backdropCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
var thumb = screenWidth / $('.cardImage', div).innerWidth();
div.remove();
div = $('<div class="card portraitCard">><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
div = $('<div class="card portraitCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
var poster = screenWidth / $('.cardImage', div).innerWidth();
div.remove();
div = $('<div class="card bannerCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
var banner = screenWidth / $('.cardImage', div).innerWidth();
div.remove();
return {
thumb: thumb,
poster: poster,
square: square
square: square,
banner: banner
};
},
getPosterViewSizes: function () {
posterSizes: [],
var imagesPerRow = LibraryBrowser.getPostersPerRow();
getPosterViewInfo: function () {
var screenWidth = LibraryBrowser.screenWidth();
var cachedResults = LibraryBrowser.posterSizes;
for (var i = 0, length = cachedResults.length; i < length; i++) {
if (cachedResults[i].screenWidth == screenWidth) {
return cachedResults[i];
}
}
var result = LibraryBrowser.getPosterViewInfoInternal(screenWidth);
cachedResults.push(result);
return result;
},
getPosterViewInfoInternal: function (screenWidth) {
var imagesPerRow = LibraryBrowser.getPostersPerRow(screenWidth);
if (AppInfo.hasLowImageBandwidth) {
screenWidth *= .95;
} else {
@ -994,11 +1013,28 @@
var thumbWidth = screenWidth / imagesPerRow.thumb;
var posterWidth = screenWidth / imagesPerRow.poster;
var squareSize = screenWidth / imagesPerRow.square;
var bannerWidth = screenWidth / imagesPerRow.banner;
if (!AppInfo.isTouchPreferred) {
var roundTo = 100;
thumbWidth = Math.round(thumbWidth / roundTo) * roundTo;
posterWidth = Math.round(posterWidth / roundTo) * roundTo;
squareSize = Math.round(squareSize / roundTo) * roundTo;
bannerWidth = Math.round(bannerWidth / roundTo) * roundTo;
}
var defaultPortait = 'portrait';
var defaultThumb = 'backdrop';
var defaultSquare = 'square';
return {
thumbWidth: parseInt(thumbWidth),
posterWidth: parseInt(posterWidth),
squareSize: parseInt(squareSize)
thumbWidth: Math.round(thumbWidth),
posterWidth: Math.round(posterWidth),
squareSize: Math.round(squareSize),
bannerWidth: Math.round(bannerWidth),
screenWidth: screenWidth
};
},
@ -1035,11 +1071,12 @@
}
}
var sizes = LibraryBrowser.getPosterViewSizes();
var sizes = LibraryBrowser.getPosterViewInfo();
var thumbWidth = sizes.thumbWidth;
var posterWidth = sizes.posterWidth;
var squareSize = sizes.squareSize;
var bannerWidth = sizes.bannerWidth;
for (var i = 0, length = items.length; i < length; i++) {
@ -1153,7 +1190,7 @@
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
type: "Banner",
maxWidth: 700,
maxWidth: bannerWidth,
tag: item.ImageTags.Banner,
enableImageEnhancers: enableImageEnhancers
});

28
dashboard-ui/scripts/site.js
View file

@ -1404,13 +1404,32 @@ var Dashboard = {
}
var appVersion = window.dashboardVersion;
var appName = Dashboard.isConnectMode() ?
"Emby Mobile" :
"Emby Web Client";
var appName = "Emby Web Client";
var deviceName;
var deviceId;
if (Dashboard.isRunningInCordova()) {
if ($.browser.safari) {
appName = "iOS";
if ($.browser.iphone) {
deviceName = 'iPhone';
} else if ($.browser.ipad) {
deviceName = 'iPad';
}
} else {
appName = "Android";
}
}
deviceName = deviceName || generateDeviceName();
// Cordova
//if (window.device) {
@ -1420,9 +1439,6 @@ var Dashboard = {
//}
//else
{
deviceName = generateDeviceName();
var seed = [];
var keyName = 'randomId';