Edited progressbars

This commit is contained in:
Brinken
2012-03-15 09:43:50 +01:00
parent c9ec401798
commit 81dc309d49
12 changed files with 229 additions and 55 deletions

17
data/css/selectFix.css Normal file
View File

@@ -0,0 +1,17 @@
select, .select
{
background-color: #FFF;
color: #222; /*default styling of input*/
line-height: 40px;
height: 40px;
width: 46.72466734902764%;
}
select
{
width: 46.72466734902764%;
}
.arrow
{
background-color: #E4AACC;
border-left: 1px solid #000;
}

View File

@@ -178,10 +178,10 @@ text-shadow: 1px 1px rgb(100,100,100);
line-height: 100%;
}
h1 { font-size: 14px; padding: 10px 0px 10px 10px; color: #FFF; text-decoration: none; background-color: #212121;}
h1 { font-size: 14px; padding: 10px 0px 10px 10px; color: #FFF; text-decoration: none; background-color: #212121; }
h2 { font-size: 13px; color: #FFF; text-decoration: none;}
h3 { font-size: 12px; color: #FFF; text-decoration: none;}
h4 { font-size: 12px; color: #FFF; text-decoration: none;}
h4 { font-size: 10px; color: #FFF; text-decoration: none;}
p.indented { margin-top: 20px; margin-bottom: 20px; font-size: 12px; }
p.center { text-align: center; font-size: 18px; }
@@ -294,20 +294,19 @@ overflow: hidden;
ul#subhead_menu
{
list-style-type: none;
list-style: none;
padding: 0px;
margin: 0px;
}
ul#subhead_menu li
{
height: 40px;
padding: 0px 9px 0px 9px;
float: left;
line-height: 40px;
display: inline-block;
border-left: 1px solid rgb(50,50,50);
border-right: 1px solid rgb(25,25,25);
margin: 0;
border-left: 1px solid rgb(45,45,45);
border-right: 1px solid rgb(15,15,15);
display: inline;
text-align: center;
}
ul#subhead_menu li:hover
@@ -317,18 +316,20 @@ background-image: -o-linear-gradient(bottom, rgb(70,0,10) 0%, rgb(60,0,20) 100%)
background-image: -moz-linear-gradient(bottom, rgb(70,0,10) 0%, rgb(60,0,20) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(70,0,10) 0%, rgb(60,0,20) 100%);
background-image: -ms-linear-gradient(bottom, rgb(70,0,10) 0%, rgb(60,0,20) 100%);
border-right: 1px solid rgb(30,30,30);
border-left: 1px solid rgb(10,10,10);
border-right: 1px solid rgb(45,45,45);
border-left: 1px solid rgb(15,15,15);
}
ul#subhead_menu li a
{
display: inline-block;
line-height: 40px;
color: white;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
display: block;
line-height: 40px;
color: white;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
ul#subhead_menu li a:hover
@@ -346,26 +347,35 @@ div#searchbar
z-index: 1000;
border-radius: 20px;
color: #fff;
background-color: rgb(120,0,10);
background-color: rgb(70,0,10);
border-top: 1px solid rgb(90,0,20);
border-left: 1px solid rgb(90,0,20);
box-shadow: 1px 1px 2px rgb(240,0,20);
}
div#searchbar input[type=text] {
background-color: rgb(120,0,10);
background-color: rgb(70,0,10);
border-radius: 20px 0px 0px 20px;
color: #fff;
padding: 2px 10px 2px 10px;
border: 0;
border-right: 1px solid #909090
border-right: 1px solid rgb(45,0,10);
}
div#searchbar select
{
color: #fff;
background-color: rgb(80,0,10);
border: 0px;
border-right: 1px solid rgb(15,0,10);
border-right: 1px solid rgb(45,0,10);
border: 0;
}
div#searchbar input[type=submit]
{
background-color: rgb(120,0,10);
background-color: rgb(70,0,10);
border-radius: 0px 20px 20px 0px;
padding: 2px 10px 2px 10px;
border: 0;
border-left: 1px solid #909090;
border-left: 1px solid rgb(45,0,10);
color: #fff;
}
@@ -373,13 +383,7 @@ div#searchbar input[type=submit]:hover {
background-color: #ac0000;
text-shadow: 1px 1px 3px #000; }
div#searchbar select
{
color: #fff;
background-color: rgb(120,0,10);
border: 0px;
border-color: rgb(70,0,10);
}
div#main
{
@@ -430,6 +434,49 @@ line-height: 40px;
font-weight: normal;
}
.btnStatus
{
background: rgb(30,170,140);
border: 1px solid #000;
box-shadow: 0px 0px 1px #000;
border-radius: 3px;
text-shadow: 0;
color: #fff;
font-size: 12px;
height: 18px;
line-height: 18px;
display: block;
width: 60%;
min-width: 90px;
text-align: center;
}
.btnStatus:hover {
text-decoration: none;
}
/*Status buttons*/
.btnDownloaded {
background: #a1a100;
}
.btnAbort {
background: rgb(170,0,10);
}
.btnGet {
background: rgb(10,30,160);
}
.btnNew
{
background: rgb(0,10,170);
}
.btnBack
{
margin-top: 10px;
background: #212121;
padding: 10px;
}
.table_wrapper { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; width: 100%; background-color: #313131; position: relative; min-height: 50px; clear: both; _height: 302px; zoom: 1; }
/*All inputs in the main content */
.table_wrapper input[type="text"],
@@ -595,16 +642,30 @@ table#searchresults_table td#artistname { vertical-align: middle; text-align: le
table#searchresults_table td#score { vertical-align: middle; text-align: left; min-width: 75px; }
/*progress container*/
div.progress-container { border: 1px solid #000; width: 100%; height: 15px; margin: 2px 5px 2px 5px; background: #414141; }
/*Progress bar*/
div.progress-container > div
div.progress-container span
{
height: 100%;
background-image: linear-gradient(bottom, rgb(44,97,0) 0%, rgb(69,122,0) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,97,0) 0%, rgb(69,122,0) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,97,0) 0%, rgb(69,122,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,97,0) 0%, rgb(69,122,0) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,97,0) 0%, rgb(69,122,0) 100%);
float: left;
margin: auto;
}
div.progress-container
{
border: 1px solid rgb(20,20,20);
width: 100%;
height: 15px;
margin: 2px 5px 2px 0px;
background: rgb(30,30,30);
color: rgb(30,30,30);
text-shadow: 1px 1px rgb(50,50,50);
text-align: center;
border-radius: 20px;
overflow: hidden;
}
/*Progress bar*/
div.progress-container div
{
height: 100%;
background-image: url(../images/progress.png);
}
/*text format for match/procent*/
.searchscrore,

Binary file not shown.

Before

Width:  |  Height:  |  Size: 326 B

BIN
data/images/progress.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@@ -23,7 +23,7 @@
<%def name="body()">
<div class="table_wrapper">
<h2><a href="artistPage?ArtistID=${album['ArtistID']}"><- Back to ${album['ArtistName']}</a></h2>
<h2><a class="btnBack" href="artistPage?ArtistID=${album['ArtistID']}">< Back to ${album['ArtistName']}</a></h2>
<div id="albumheader">
<div class="album-art-big">
<img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.LZZZZZZZ.jpg" alt="albumart" class="albumArt" title="${album['ArtistName']} - ${album['AlbumTitle']}">
@@ -41,11 +41,14 @@
albumduration = 'n/a'
%>
Duration: ${albumduration}
<br />
%if description:
<h3>Description:</h3>
${description['Summary']}
%endif
<br />
<br />
Playtime: ${albumduration}
</div>
</div>
<div id="track_wrapper">

View File

@@ -90,28 +90,27 @@
<td id="albumart">
<div class="album-art-small">
<a href="albumPage?AlbumID=${album['AlbumID']}">
<img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.MZZZZZZZ.jpg" title="${album['AlbumTitle']}">
<img src="http://ec1.images-amazon.com/images/P/${album['AlbumASIN']}.01.MZZZZZZZ.jpg" title="${artist['ArtistName']} - ${album['AlbumTitle']}">
</a>
</div>
</td>
<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
<td id="reldate">${album['ReleaseDate']}</td>
<td id="type">${album['Type']}</td>
<td id="status"><img src="../images/${album['Status']}.png" title="${album['Status']}" />
<td id="status"><span class="btn${album['Status']} btnStatus" title="${album['Status']}">${album['Status']}</span>
%if album['Status'] == 'Skipped':
<a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}"><img src="../images/get.png" title="Download this album" style="margin-left: 5px;"/></a>
<a class="btnGet btnStatus" href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}" title="Get this album">Get</a>
%elif album['Status'] == 'Wanted':
<a href="unqueueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}"><img src="../images/cancel.png" title="Cancel" style="margin-left: 5px;"/></a>
<a class="btnAbort btnStatus" href="unqueueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}" title="Abort current status, and set to skipped">Abort</a>
%else:
<a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}" title="Retry the same download again"><img src="../images/retry.png" style="margin-left: 5px;" /></a><a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=True" title="Try a new download, skipping all previously tried nzbs"><img src="../images/new.png" alt="New" style="margin-left: 5px;" /></a>
<a class="btnRetry btnStatus" href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}" title="Retry the same nbz">Retry</a>
<a class="btnNew btnStatus" href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=True" title="Try a new download, skipping all previously tried nzbs">New</a>
%endif
</td>
<td id="have"><span title="${percent}"><span>
<div class="progress-container" title="You have ${havetracks} of a total ${totaltracks}">
<div style="width:${percent}%">
<div class="havetracks">
${havetracks}/${totaltracks}
</div>
</div>
</div>
</td>

View File

@@ -41,12 +41,10 @@
<script type="text/javascript" src="js/jquery.mousewheel.min.js" ></script>
<!-- Add to Scrollbars #main -->
<script>
$(function()
{
$(function(){
$('.main').jScrollPane();
});
</script>
${next.headIncludes()}

View File

@@ -52,7 +52,13 @@
<td id="name"><span title="${artist['ArtistSortName']}"></span><a href="artistPage?ArtistID=${artist['ArtistID']}">${artist['ArtistName']}</a></td>
<td id="status">${artist['Status']}</td>
<td id="album"><span title="${releasedate}"></span><a href="albumPage?AlbumID=${artist['AlbumID']}">${albumdisplay}</a></td>
<td id="have"><span title="${percent}"></span><div class="progress-container"><div style="width:${percent}%"><div class="havetracks">${havetracks}/${totaltracks}</div></div></div></td>
<td id="have"><span title="${percent}"></span>
<div class="progress-container">
<div style="width:${percent}%">
<div class="havetracks">${havetracks}/${totaltracks}</div>
</div>
</div>
</td>
</tr>
%endfor
</tbody>

View File

@@ -32,11 +32,10 @@
<td id="artistname"><a href="${result['url']}">${result['uniquename']}</a></td>
<td id="score">
<div class="searchscore" title="The match result is: ${result['score']}%">
${result['score']}%
<div class="progress-container">
<div style="width: ${result['score']}%">
</div>
</div>
</div>

View File

@@ -2,7 +2,8 @@
$(document).ready(function () {
$("#nav li a").each(function () {
var hreflink = $(this).attr("href");
if (hreflink == location.href.split("/").pop()) {
var locationHref = location.href.split("/").pop();
if (hreflink == locationHref) {
$(this).parent().addClass("selected");
}
});

84
data/js/selectFix.js Normal file
View File

@@ -0,0 +1,84 @@
/*/////////////////////////////////////////////////////////////////////////////////
VERSION 1.3 - Updated January 4, 2011
CREATED BY KEVIN MACK
DETAILS: http://nicetransition.com/_plugins/jQuery-Cross-Browser-Select-Fix
//////////////////////////////////////////////////////////////////////////////////*/
(function ($) {
$.fn.selectFix = function (options) {
$(this).each(function () {
var settings = $.extend({ 'extraStyles': true, 'responsive': false, 'arrow': true, 'arrowWidth': 20, 'arrowContent': '', 'className': 'select', 'classText': 'text', 'classArrow': 'arrow', 'classFocus': 'focused', 'classEnd': 'selected', 'display': 'inline-block' }, options);
var className = "." + settings.className;
var selectField = $(this);
selectField.css({ '-webkit-appearance': 'none', 'box-sizing': 'border-box', '-moz-box-sizing': 'border-box', '-webkit-box-sizing': 'border-box', 'cursor': 'pointer' }); //mac OS bug fix on webkit render
var initVal;
if (selectField.children("option:selected").size() > 0) {
initVal = selectField.children("option:selected").eq(0).text();
} else {
initVal = selectField.children("option").eq(0).text();
}
var height = selectField.css("height");
var width = selectField.css("width").replace("px", "");
var widthPercent;
if (settings.responsive) {
widthPercent = (100 * parseInt(width.replace("px", "")) / parseInt(selectField.parent().css('width').replace("px", ""))) + '%';
} else {
widthPercent = width + "px";
}
var arrow;
var arrowWidth = String(settings.arrowWidth);
if (arrowWidth.indexOf('px') < 0 && arrowWidth.indexOf('%') < 0) {
arrowWidth = arrowWidth + "px";
}
if (settings.arrow == true) {
arrow = "<span style=\"display: block; height: 100%; position: absolute; right: 0; width: " + arrowWidth + ";\" class=\"" + settings.classArrow + "\">" + settings.arrowContent + "</span>";
} else {
arrow = "";
}
selectField.css({ "display": "block", "left": 0, "opacity": 0, "position": "absolute", "top": 0, "z-index": 1 }).wrap("<div class=\"" + settings.className + "\"style=\"overflow: hidden; display: " + settings.display + "; position: relative; width: " + widthPercent + ";\"></div>").closest(className).append("<span style=\"display: block; left: 0; height: " + height + "; line-height: inherit; position: absolute; top: 0; width: 100%;\" class=\"" + settings.classText + "\">" + initVal + "</span>" + arrow);
selectField.bind({
change: function (event) {
selectField.siblings("." + settings.classText).html(selectField.children("option[value=" + selectField.val() + "]").text());
if (settings.extraStyles == true) {
selectField.parent(className).addClass(settings.classEnd).removeClass(settings.classFocus); //optional styling to be used once a selection has been made
}
if (selectField.val() == '' || selectField.val() == undefined || selectField.val() == null) {
selectField.parent(className).removeClass(settings.classEnd);
}
},
focus: function (event) {
if (settings.extraStyles == true) {
selectField.parent(className).addClass(settings.classFocus);
}
selectField.keyup(function () {
selectField.siblings("." + settings.classText).html($(this).children("option:selected").text());
});
},
click: function () {
if (settings.extraStyles == true) {
selectField.parent(className).addClass(settings.classFocus);
}
},
blur: function () {
if (settings.extraStyles == true) {
selectField.parent(className).removeClass(settings.classFocus);
}
}
});
if ($(".stlyesFor" + settings.className).size() < 1) {
selectField.after("<style type=\"text/css\" class=\"stlyesFor" + settings.className + "\">." + settings.className + " select {width: 100%;}</style>");
}
});
}
})(jQuery)

6
data/js/selectFix.min.js vendored Normal file
View File

@@ -0,0 +1,6 @@
(function (a) { a.fn.selectFix = function (b) { a(this).each(function () { var d = a.extend({ extraStyles: true, responsive: false, arrow: true, arrowWidth: 20, arrowContent: "", className: "select", classText: "text", classArrow: "arrow", classFocus: "focused", classEnd: "selected", display: "inline-block" }, b); var g = "." + d.className; var k = a(this); k.css({ "-webkit-appearance": "none", "box-sizing": "border-box", "-moz-box-sizing": "border-box", "-webkit-box-sizing": "border-box", cursor: "pointer" }); var f; if (k.children("option:selected").size() > 0) { f = k.children("option:selected").eq(0).text(); } else { f = k.children("option").eq(0).text(); } var j = k.css("height"); var c = k.css("width").replace("px", ""); var h; if (d.responsive) { h = (100 * parseInt(c.replace("px", "")) / parseInt(k.parent().css("width").replace("px", ""))) + "%"; } else { h = c + "px"; } var i; var e = String(d.arrowWidth); if (e.indexOf("px") < 0 && e.indexOf("%") < 0) { e = e + "px"; } if (d.arrow == true) { i = '<span style="display: block; height: 100%; position: absolute; right: 0; width: ' + e + ';" class="' + d.classArrow + '">' + d.arrowContent + "</span>"; } else { i = ""; } k.css({ display: "block", left: 0, opacity: 0, position: "absolute", top: 0, "z-index": 1 }).wrap('<div class="' + d.className + '"style="overflow: hidden; display: ' + d.display + "; position: relative; width: " + h + ';"></div>').closest(g).append('<span style="display: block; left: 0; height: ' + j + '; line-height: inherit; position: absolute; top: 0; width: 100%;" class="' + d.classText + '">' + f + "</span>" + i); k.bind({ change: function (l) { k.siblings("." + d.classText).html(k.children("option[value=" + k.val() + "]").text()); if (d.extraStyles == true) { k.parent(g).addClass(d.classEnd).removeClass(d.classFocus); } if (k.val() == "" || k.val() == undefined || k.val() == null) { k.parent(g).removeClass(d.classEnd); } }, focus: function (l) { if (d.extraStyles == true) { k.parent(g).addClass(d.classFocus); } k.keyup(function () { k.siblings("." + d.classText).html(a(this).children("option:selected").text()); }); }, click: function () { if (d.extraStyles == true) { k.parent(g).addClass(d.classFocus); } }, blur: function () { if (d.extraStyles == true) { k.parent(g).removeClass(d.classFocus); } } }); if (a(".stlyesFor" + d.className).size() < 1) { k.after('<style type="text/css" class="stlyesFor' + d.className + '">.' + d.className + " select {width: 100%;}</style>"); } }); }; })(jQuery);
/*/////////////////////////////////////////////////////////////////////////////////
VERSION 1.3 - Updated January 4, 2011
CREATED BY KEVIN MACK
DETAILS: http://nicetransition.com/_plugins/jQuery-Cross-Browser-Select-Fix
//////////////////////////////////////////////////////////////////////////////////*/