1
0
mirror of https://github.com/Sonarr/Sonarr.git synced 2024-12-14 11:23:42 +02:00
Sonarr/NzbDrone.Web/Views/Settings/Test.cshtml
2011-06-01 21:40:06 -07:00

93 lines
2.4 KiB
Plaintext

<script>
(function ($) {
$.fn.episodeProgress = function (episodes, totalEpisodes) {
return this.each(
function () {
var div = $(this);
var innerdiv = div.find(".progress");
var width = Math.round(episodes / totalEpisodes * 100);
innerdiv.css("width", width + "%");
if (width > 97) {
innerdiv.css("-khtml-border-top-right-radius", "7px");
innerdiv.css("border-top-right-radius", "7px");
innerdiv.css("-moz-border-top-right-radius", "7px");
innerdiv.css("-webkit-border-top-right-radius", "7px");
innerdiv.css("-khtml-border-bottom-right-radius", "7px");
innerdiv.css("border-bottom-right-radius", "7px");
innerdiv.css("-moz-border-bottom-right-radius", "7px");
innerdiv.css("-webkit-border-bottom-right-radius", "7px");
}
div.find(".progressText").html(episodes + " / " + totalEpisodes);
}
);
};
})(jQuery);
</script>
<style>
/* progress bar container */
.progressbar
{
border:1px solid grey;
-khtml-border-radius:8px;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
width:125px;
height:20px;
position:relative;
color:black;
}
/* apply curves to the progress bar */
.progress
{
-khtml-border-top-left-radius:7px;
border-top-left-radius:7px;
-moz-border-top-left-radius:7px;
-webkit-border-top-left-radius:7px;
-khtml-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;
-moz-border-bottom-left-radius:7px;
-webkit-border-bottom-left-radius:7px;
}
/* color bar */
.progressbar div.progress
{
position:absolute;
width:0;
height:100%;
overflow:hidden;
background-color:#065EFE;
}
/* text on bar */
.progressbar div.progress .progressText{
position:absolute;
text-align:center;
color:white;
}
/* text off bar */
.progressbar div.progressText{
position:absolute;
width:100%;
height:100%;
text-align:center;
}
</style>
<div id="progressbar" class="progressbar">
<div class="progressText"></div>
<div class="progress">
<span class="progressText" style="width: 125px;"></span>
</div>
</div>
<script>
$("#progressbar").episodeProgress(100, 100);
</script>