cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-18 03:18:19 -07:00
Code Issues Packages Projects Releases Wiki Activity

Format "ribbons" added

Browse Source 
Shows format and format-specific color ribbon on the movie art
This commit is contained in:
Tim Hobbs 2014-03-03 01:10:10 -08:00
parent c05058a3ad
commit 96c607f203
2 changed files with 79 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
dashboard-ui/css/posteritem.css
View File

@ -336,3 +336,58 @@
height: 184px;
}
}
/* CSS for format ribbons
***************************/
.ribbon-wrapper {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
z-index: 999;
}
.ribbon {
font: bold 11px Sans-Serif;
color: #333;
text-align: center;
color: #eee;
text-shadow: rgba(51, 51, 51, 0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 2px 0;
left: 7px;
top: 5px;
width: 60px;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
.ribbon-3d {
background-color: #3344ff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#ff0033));
background-image: -webkit-linear-gradient(top, #3344ff, #ff0033);
background-image: -moz-linear-gradient(top, #3344ff, #ff0033);
background-image: -ms-linear-gradient(top, #3344ff, #ff0033);
background-image: -o-linear-gradient(top, #3344ff, #ff0033);
}
.ribbon-blue {
background-color: #1199ff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1199ff), to(#3333ff));
background-image: -webkit-linear-gradient(top, #1199ff, #3333ff);
background-image: -moz-linear-gradient(top, #1199ff, #3333ff);
background-image: -ms-linear-gradient(top, #1199ff, #3333ff);
background-image: -o-linear-gradient(top, #1199ff, #3333ff);
}
.ribbon-red {
background-color: #ff3333;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ff3333), to(#992233));
background-image: -webkit-linear-gradient(top, #ff3333, #992233);
background-image: -moz-linear-gradient(top, #ff3333, #992233);
background-image: -ms-linear-gradient(top, #ff3333, #992233);
background-image: -o-linear-gradient(top, #ff3333, #992233);
}

24
dashboard-ui/scripts/librarybrowser.js
View File

@ -877,6 +877,30 @@
html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" href="' + LibraryBrowser.getHref(item, options.context) + '">';
// Ribbon
if (options.context == "movies") {
// This would be much better if specified in the json payload
// Another nice thing to have in the payload would be 720 vs 1080
// Then, rather than "HD" it could display the specific HD format
// "HD" doesn't do much good if you have the 720p and 1080p version
var format = "SD";
var ribbonColor = "ribbon-red";
if (item.IsHD) {
format = "HD";
ribbonColor = "ribbon-blue";
}
if (item.Video3DFormat) {
format = "3D";
ribbonColor = "ribbon-3d";
}
html += '<div class="ribbon-wrapper">';
html += '<div class="ribbon ' + ribbonColor + '">';
html += format;
html += '</div>';
html += '</div>';
}
var style = "";
if (imgUrl) {