From 96c607f203871a2c91518be31de967f8be01cbc4 Mon Sep 17 00:00:00 2001 From: Tim Hobbs Date: Mon, 3 Mar 2014 01:10:10 -0800 Subject: [PATCH] Format "ribbons" added Shows format and format-specific color ribbon on the movie art --- dashboard-ui/css/posteritem.css | 55 ++++++++++++++++++++++++++ dashboard-ui/scripts/librarybrowser.js | 24 +++++++++++ 2 files changed, 79 insertions(+) diff --git a/dashboard-ui/css/posteritem.css b/dashboard-ui/css/posteritem.css index deb0ac01bb..d9315126b6 100644 --- a/dashboard-ui/css/posteritem.css +++ b/dashboard-ui/css/posteritem.css @@ -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); +} \ No newline at end of file diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 78be7dc074..de9a9d2f52 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -877,6 +877,30 @@ html += ''; + // 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 += '
'; + html += '
'; + html += format; + html += '
'; + html += '
'; + } + var style = ""; if (imgUrl) {