Series episode count legend added

This commit is contained in:
Mark McDowall 2013-07-27 10:48:45 -07:00
parent 3f85104d18
commit 35d29df864
8 changed files with 76 additions and 35 deletions

View File

@ -5,13 +5,13 @@
</div> </div>
<div class=span9> <div class=span9>
<div id="x-calendar" class="calendar"/> <div id="x-calendar" class="calendar"/>
<div class="legend"> <div class="legend calendar">
<ul class='legend-labels'> <ul class='legend-labels'>
<li><span class="primary" title="Episode hasn't aired yet"></span>Unaired</li> <li><span class="primary" title="Episode hasn't aired yet"></span>Unaired</li>
<li><span class="warning" title="Episode is currently airing"></span>On Air</li> <li><span class="warning" title="Episode is currently airing"></span>On Air</li>
<li><span class="danger" title="Epsiode file has not been found"></span>Missing</li> <li><span class="danger" title="Episode file has not been found"></span>Missing</li>
<li><span class="success" title="Episode was downloaded and sorted"></span>Downloaded</li> <li><span class="success" title="Episode was downloaded and sorted"></span>Downloaded</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>

View File

@ -111,37 +111,7 @@
} }
} }
.legend { .calendar, {
margin: 5px;
ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
li {
font-size: 80%;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
span {
display: block;
float: left;
height: 16px;
width: 30px;
margin-right: 5px;
margin-left: 0;
border: none;
}
}
}
}
.calendar, .legend {
.primary { .primary {
border-color : @btnPrimaryBackground; border-color : @btnPrimaryBackground;
background-color : @btnPrimaryBackground; background-color : @btnPrimaryBackground;

View File

@ -10,6 +10,7 @@
@import "prefixer"; @import "prefixer";
@import "icons"; @import "icons";
@import "spinner"; @import "spinner";
@import "legend";
.progress { .progress {
width : 125px; width : 125px;

45
UI/Content/legend.less Normal file
View File

@ -0,0 +1,45 @@
@import "./Bootstrap/mixins";
.legend {
margin: 5px;
ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
li {
font-size: 80%;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
span {
display: block;
float: left;
height: 16px;
width: 30px;
margin-right: 5px;
margin-left: 0;
border: none;
border-radius: 3px;
}
}
}
.progress-primary {
#gradient > .vertical(#149bdf, #0480be);
.transition(width .6s ease);
}
.progress-success {
#gradient > .vertical(#62c462, #57a957);
}
.progress-danger {
#gradient > .vertical(#ee5f5b, #c43c35);
}
}

View File

@ -0,0 +1,9 @@
'use strict';
define(
[
'marionette'
], function (Marionette) {
return Marionette.CompositeView.extend({
template: 'Series/Index/LegendViewTemplate'
});
});

View File

@ -0,0 +1,7 @@
<div class="legend">
<ul class='legend-labels'>
<li><span class="progress-primary"></span>Continuing (All Episodes downloaded)</li>
<li><span class="progress-success"></span>Ended (All Episodes downloaded)</li>
<li><span class="progress-danger"></span>Missing Episodes</li>
</ul>
</div>

View File

@ -12,6 +12,7 @@ define(
'Cells/QualityProfileCell', 'Cells/QualityProfileCell',
'Series/Index/Table/SeriesStatusCell', 'Series/Index/Table/SeriesStatusCell',
'Series/Index/Table/Row', 'Series/Index/Table/Row',
'Series/Index/LegendView',
'Shared/Toolbar/ToolbarLayout', 'Shared/Toolbar/ToolbarLayout',
'Shared/LoadingView' 'Shared/LoadingView'
], function (Marionette, ], function (Marionette,
@ -25,6 +26,7 @@ define(
QualityProfileCell, QualityProfileCell,
SeriesStatusCell, SeriesStatusCell,
SeriesIndexRow, SeriesIndexRow,
LegendView,
ToolbarLayout, ToolbarLayout,
LoadingView) { LoadingView) {
return Marionette.Layout.extend({ return Marionette.Layout.extend({
@ -32,7 +34,8 @@ define(
regions: { regions: {
seriesRegion: '#x-series', seriesRegion: '#x-series',
toolbar : '#x-toolbar' toolbar : '#x-toolbar',
legend : '#x-legend'
}, },
columns: columns:
@ -152,6 +155,7 @@ define(
else { else {
this.currentView.collection = SeriesCollection; this.currentView.collection = SeriesCollection;
this.seriesRegion.show(this.currentView); this.seriesRegion.show(this.currentView);
this.legend.show(new LegendView());
this._showToolbar(); this._showToolbar();
} }

View File

@ -4,3 +4,8 @@
<div id="x-series"></div> <div id="x-series"></div>
</div> </div>
</div> </div>
<div class="row">
<div class="span12">
<div id="x-legend"></div>
</div>
</div>