Removed season menu in favour of minimizing seasons

This commit is contained in:
Mark McDowall 2013-09-04 22:01:22 -07:00
parent f00c0f0cca
commit 4bcd5ce5c6
10 changed files with 91 additions and 178 deletions

View File

@ -12,7 +12,7 @@
@import "../Shared/Styles/clickable"; @import "../Shared/Styles/clickable";
@import "../Shared/Styles/card"; @import "../Shared/Styles/card";
.progress { .progress.episode-progress {
width : 125px; width : 125px;
position : relative; position : relative;
margin-bottom : 2px; margin-bottom : 2px;
@ -21,6 +21,7 @@
font-size : 11.844px; font-size : 11.844px;
font-weight : bold; font-weight : bold;
text-align : center; text-align : center;
cursor : default;
} }
.progressbar-back-text { .progressbar-back-text {
@ -33,6 +34,7 @@
display : block; display : block;
width : 125px; width : 125px;
} }
.bar { .bar {
position : absolute; position : absolute;
overflow : hidden; overflow : hidden;

View File

@ -8,8 +8,9 @@ define(
'Cells/EpisodeTitleCell', 'Cells/EpisodeTitleCell',
'Cells/RelativeDateCell', 'Cells/RelativeDateCell',
'Cells/EpisodeStatusCell', 'Cells/EpisodeStatusCell',
'Shared/Actioneer' 'Shared/Actioneer',
], function (App, Marionette, Backgrid, ToggleCell, EpisodeTitleCell, RelativeDateCell, EpisodeStatusCell, Actioneer) { 'moment'
], function (App, Marionette, Backgrid, ToggleCell, EpisodeTitleCell, RelativeDateCell, EpisodeStatusCell, Actioneer, Moment) {
return Marionette.Layout.extend({ return Marionette.Layout.extend({
template: 'Series/Details/SeasonLayoutTemplate', template: 'Series/Details/SeasonLayoutTemplate',
@ -20,13 +21,15 @@ define(
}, },
events: { events: {
'click .x-season-search' : '_seasonSearch', 'click .x-season-search' : '_seasonSearch',
'click .x-season-monitored': '_seasonMonitored', 'click .x-season-monitored' : '_seasonMonitored',
'click .x-season-rename' : '_seasonRename' 'click .x-season-rename' : '_seasonRename',
'click .x-show-hide-episodes' : '_showHideEpisodes',
'dblclick .series-season h2' : '_showHideEpisodes'
}, },
regions: { regions: {
episodeGrid: '#x-episode-grid' episodeGrid: '.x-episode-grid'
}, },
columns: columns:
@ -67,6 +70,8 @@ define(
} }
], ],
templateHelpers: {},
initialize: function (options) { initialize: function (options) {
if (!options.episodeCollection) { if (!options.episodeCollection) {
@ -76,6 +81,9 @@ define(
this.episodeCollection = options.episodeCollection.bySeason(this.model.get('seasonNumber')); this.episodeCollection = options.episodeCollection.bySeason(this.model.get('seasonNumber'));
this.series = options.series; this.series = options.series;
this.showingEpisodes = this._shouldShowEpisodes();
this.templateHelpers.showingEpisodes = this.showingEpisodes;
this.listenTo(this.model, 'sync', function () { this.listenTo(this.model, 'sync', function () {
this._afterSeasonMonitored(); this._afterSeasonMonitored();
}, this); }, this);
@ -86,11 +94,9 @@ define(
}, },
onRender: function () { onRender: function () {
this.episodeGrid.show(new Backgrid.Grid({ if (this.showingEpisodes) {
columns : this.columns, this._showEpisodes();
collection: this.episodeCollection, }
className : 'table table-hover season-grid'
}));
this._setSeasonMonitoredState(); this._setSeasonMonitoredState();
}, },
@ -159,6 +165,54 @@ define(
_afterRename: function () { _afterRename: function () {
App.vent.trigger(App.Events.SeasonRenamed, { series: this.series, seasonNumber: this.model.get('seasonNumber') }); App.vent.trigger(App.Events.SeasonRenamed, { series: this.series, seasonNumber: this.model.get('seasonNumber') });
},
_showEpisodes: function () {
this.episodeGrid.show(new Backgrid.Grid({
columns : this.columns,
collection: this.episodeCollection,
className : 'table table-hover season-grid'
}));
},
_shouldShowEpisodes: function () {
var startDate = Moment().add('month', -1);
var endDate = Moment().add('year', 1);
var result = this.episodeCollection.some(function(episode) {
var airDate = episode.get('airDateUtc');
if (airDate)
{
var airDateMoment = Moment(airDate);
if (airDateMoment.isAfter(startDate) && airDateMoment.isBefore(endDate)) {
return true;
}
}
return false;
});
return result;
},
_showHideEpisodes: function () {
if (this.showingEpisodes) {
this.showingEpisodes = false;
this.episodeGrid.$el.slideUp();
this.episodeGrid.close();
}
else {
this.showingEpisodes = true;
this._showEpisodes();
this.episodeGrid.$el.slideDown();
}
this.templateHelpers.showingEpisodes = this.showingEpisodes;
this.render();
} }
}); });
}); });

View File

@ -1,15 +1,26 @@
<div class="series-season" id="season-{{seasonNumber}}"> <div class="series-season" id="season-{{seasonNumber}}">
<h2> <h2>
<i class="x-season-monitored clickable" title="Toggle season monitored status"/> <i class="x-season-monitored clickable" title="Toggle season monitored status"/>
{{#if seasonNumber}} {{#if seasonNumber}}
Season {{seasonNumber}} Season {{seasonNumber}}
{{else}} {{else}}
Specials Specials
{{/if}} {{/if}}
<span class="season-actions pull-right"> <span class="season-actions pull-right">
<i class="icon-nd-rename x-season-rename" title="Rename all episodes in season {{seasonNumber}}"/> <i class="icon-nd-rename x-season-rename" title="Rename all episodes in season {{seasonNumber}}"/>
<i class="icon-search x-season-search" title="Search for all episodes in season {{seasonNumber}}"/> <i class="icon-search x-season-search" title="Search for all episodes in season {{seasonNumber}}"/>
</span> </span>
</h2> </h2>
<div id="x-episode-grid"/> <div class="x-episode-grid"></div>
<div class="show-hide-episodes x-show-hide-episodes">
<h4>
{{#if showingEpisodes}}
<i class="icon-chevron-sign-up"/> Hide Episodes
{{else}}
<i class="icon-chevron-sign-down"/> Show Episodes
{{/if}}
</h4>
</div>
</div> </div>

View File

@ -1,31 +0,0 @@
'use strict';
define(
[
'marionette',
'Series/Details/SeasonMenu/ItemView'
], function (Marionette, ItemView) {
return Marionette.CollectionView.extend({
itemView: ItemView,
initialize: function (options) {
if (!options.episodeCollection) {
throw 'episodeCollection is needed';
}
this.episodeCollection = options.episodeCollection;
},
itemViewOptions: function () {
return {
episodeCollection: this.episodeCollection
};
},
appendHtml: function(collectionView, itemView){
var childrenContainer = $(collectionView.childrenContainer || collectionView.el);
childrenContainer.prepend(itemView.el);
}
});
});

View File

@ -1,88 +0,0 @@
'use strict';
define(
[
'marionette',
'Shared/Actioneer'
], function (Marionette, Actioneer) {
return Marionette.ItemView.extend({
template: 'Series/Details/SeasonMenu/ItemViewTemplate',
tagName : 'span',
ui: {
seasonMonitored: '.x-season-monitored'
},
events: {
'click .x-season-monitored': '_seasonMonitored',
'click .x-text': '_gotoSeason'
},
initialize: function (options) {
if (!options.episodeCollection) {
throw 'episodeCollection is needed';
}
this.episodeCollection = options.episodeCollection.bySeason(this.model.get('seasonNumber'));
var allDownloaded = _.all(this.episodeCollection.models, function (model) {
var hasFile = model.get('hasFile');
return hasFile;
});
this.model.set({
allFilesDownloaded: allDownloaded
});
this.listenTo(this.model, 'sync', function () {
this.render();
}, this);
},
onRender: function () {
this._setSeasonMonitoredState();
},
_seasonSearch: function () {
Actioneer.ExecuteCommand({
command : 'seasonSearch',
properties : {
seriesId : this.model.get('seriesId'),
seasonNumber: this.model.get('seasonNumber')
},
element : this.ui.seasonSearch,
errorMessage: 'Search for season {0} failed'.format(this.model.get('seasonNumber')),
startMessage: 'Search for season {0} started'.format(this.model.get('seasonNumber'))
});
},
_seasonMonitored: function (e) {
e.preventDefault();
var name = 'monitored';
this.model.set(name, !this.model.get(name));
Actioneer.SaveModel({
context : this,
element : this.ui.seasonMonitored
});
},
_setSeasonMonitoredState: function () {
this.ui.seasonMonitored.removeClass('icon-spinner icon-spin');
if (this.model.get('monitored')) {
this.ui.seasonMonitored.addClass('icon-bookmark');
this.ui.seasonMonitored.removeClass('icon-bookmark-empty');
}
else {
this.ui.seasonMonitored.addClass('icon-bookmark-empty');
this.ui.seasonMonitored.removeClass('icon-bookmark');
}
},
_gotoSeason: function () {
window.location.hash = '#season-' + this.model.get('seasonNumber');
}
});
});

View File

@ -1,14 +0,0 @@
{{#if allFilesDownloaded}}
<span class="label label-info season-menu-item">
{{else}}
<span class="label label-white season-menu-item">
{{/if}}
<i class="x-season-monitored clickable" title="Toggle season monitored status"/>
<span class="x-text text" title="Go to season">
{{#if_eq seasonNumber compare=0}}
Specials
{{else}}
S{{Pad2 seasonNumber}}
{{/if_eq}}
</span>
</span>

View File

@ -7,7 +7,6 @@ define(
'Series/EpisodeFileCollection', 'Series/EpisodeFileCollection',
'Series/SeasonCollection', 'Series/SeasonCollection',
'Series/Details/SeasonCollectionView', 'Series/Details/SeasonCollectionView',
'Series/Details/SeasonMenu/CollectionView',
'Series/Details/InfoView', 'Series/Details/InfoView',
'Shared/LoadingView', 'Shared/LoadingView',
'Shared/Actioneer', 'Shared/Actioneer',
@ -19,7 +18,6 @@ define(
EpisodeFileCollection, EpisodeFileCollection,
SeasonCollection, SeasonCollection,
SeasonCollectionView, SeasonCollectionView,
SeasonMenuCollectionView,
InfoView, InfoView,
LoadingView, LoadingView,
Actioneer) { Actioneer) {
@ -29,7 +27,6 @@ define(
template : 'Series/Details/SeriesDetailsTemplate', template : 'Series/Details/SeriesDetailsTemplate',
regions: { regions: {
seasonMenu: '#season-menu',
seasons : '#seasons', seasons : '#seasons',
info : '#info' info : '#info'
}, },
@ -200,11 +197,6 @@ define(
});*/ });*/
self.seasons.show(seasonCollectionView); self.seasons.show(seasonCollectionView);
self.seasonMenu.show(new SeasonMenuCollectionView({
collection : self.seasonCollection,
episodeCollection: self.episodeCollection
}));
}); });
}, },

View File

@ -18,9 +18,6 @@
<div id="info" class="row"> <div id="info" class="row">
</div> </div>
<div class="row">
<div id="season-menu" class="season-menu"></div>
</div>
</div> </div>
</div> </div>
<div id="seasons"></div> <div id="seasons"></div>

View File

@ -1,12 +1,12 @@
{{#if_eq episodeFileCount compare=episodeCount}} {{#if_eq episodeFileCount compare=episodeCount}}
{{#if_eq status compare="continuing"}} {{#if_eq status compare="continuing"}}
<div class="progress"> <div class="progress episode-progress">
{{else}} {{else}}
<div class="progress progress-success"> <div class="progress progress-success episode-progress">
{{/if_eq}} {{/if_eq}}
{{else}} {{else}}
<div class="progress progress-danger"> <div class="progress progress-danger episode-progress">
{{/if_eq}} {{/if_eq}}
<span class="progressbar-back-text">{{episodeFileCount}} / {{episodeCount}}</span> <span class="progressbar-back-text">{{episodeFileCount}} / {{episodeCount}}</span>

View File

@ -48,26 +48,16 @@
.series-season { .series-season {
.card; .card;
margin : 80px 10px; margin : 30px 10px;
padding : 20px 40px; padding : 10px 25px;
.opacity(0.9); .opacity(0.9);
}
.season-menu { .show-hide-episodes {
margin-top: 5px; .clickable();
text-align: center;
.season-menu-item { i {
.clickable();
.text {
.clickable;
}
a:hover {
text-decoration: none;
}
i:before {
width: 10px;
} }
} }
} }
@ -271,4 +261,4 @@
.season-grid { .season-grid {
margin-top: 10px; margin-top: 10px;
} }
} }