Controls slide down for series poster

This commit is contained in:
Mark McDowall 2013-04-25 11:58:38 -07:00
commit bafb742141
5 changed files with 460 additions and 13 deletions

View file

@ -30,15 +30,15 @@
<div class="row">
<div class="span8">
{{#if isContinuing}}
{{#if bestDateString}}
<span class="label">{{bestDateString}}</span>
{{#if bestDateString}}
<span class="label">{{bestDateString}}</span>
{{else}}
<span class="label label-inverse">{{statusText}}</span>
{{/if}}
<span class="label label-info">Season {{seasonCount}}</span>
{{else}}
<span class="label label-inverse">{{statusText}}</span>
{{/if}}
<span class="label label-info">Season {{seasonCount}}</span>
{{else}}
<span class="label label-important">{{statusText}}</span>
<span class="label label-info">{{seasonCount}} Seasons</span>
<span class="label label-important">{{statusText}}</span>
<span class="label label-info">{{seasonCount}} Seasons</span>
{{/if}}
</div>
<div class="span2">

View file

@ -2,7 +2,13 @@
<div class="row">
<div class="span2">
<div class="center">
<div class="series-poster-container">
<div class="series-poster-container x-series-poster">
<div class="series-controls">
<!--<div class="pull-right">-->
<i class="icon-cog x-edit" title="Edit Series"></i>
<i class="icon-remove x-remove" title="Delete Series"></i>
<!--</div>-->
</div>
{{#unless isContinuing}}
<div class="ended-banner">Ended</div>
{{/unless}}

View file

@ -16,12 +16,15 @@ define([
ui: {
'progressbar': '.progress .bar',
'airDate': '.air-date'
'airDate': '.air-date',
'controls': '.series-controls'
},
events: {
'click .x-edit' : 'editSeries',
'click .x-remove': 'removeSeries'
'click .x-remove': 'removeSeries',
'mouseenter .x-series-poster': 'posterHoverAction',
'mouseleave .x-series-poster': 'posterHoverAction'
},
initialize: function (options) {
@ -45,6 +48,10 @@ define([
NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
view: view
});
},
posterHoverAction: function () {
this.ui.controls.slideToggle();
}
});
});

View file

@ -78,8 +78,8 @@
display: inline-block;
.ended-banner {
color: #eeeeee;
background-color: #b94a48;
color: #EEEEEE;
background-color: #B94A48;
-moz-box-shadow: 2px 2px 20px #888888;
-moz-transform: rotate(45deg);
-moz-transform-origin: 50% 50%;
@ -90,6 +90,19 @@
top: 175px;
left: -122px;
text-align: center;
opacity: 0.9;
}
.series-controls {
position: absolute;;
top: 0px;
overflow: hidden;
background-color: #EEEEEE;
width: 100%;
text-align: right;
padding-right: 20px;
opacity: 0.8;
display: none;
}
}
}