Charts cleanup

This commit is contained in:
Ruud
2014-04-05 09:54:24 +02:00
parent c89c99b272
commit 98a85f6950
4 changed files with 83 additions and 57 deletions

View File

@@ -1,5 +1,6 @@
.charts {
clear: both;
margin-bottom: 30px;
}
.charts > h2 {
@@ -12,18 +13,37 @@
vertical-align: top;
}
.charts div.refresh {
margin-top: 10px;
.charts .refresh {
clear:both;
text-align:center;
position: relative;
}
.charts .refresh .refreshing {
display: block;
padding: 20px;
font-size: 20px;
text-align:center;
}
.charts .refresh a {
text-align: center;
padding: 0;
display: none;
width: 30px;
height: 30px;
position: absolute;
right: 10px;
top: -40px;
opacity: .7;
}
.charts .refresh a:hover {
opacity: 1;
}
.charts p.no_charts_enabled {
padding: 0.7em 1em;
}
.charts div.refresh a {
display:block;
display: none;
}
.charts .chart h3 a {
@@ -164,7 +184,7 @@
left: 50px;
}
.charts .chart .media_result div.chart_number {
.charts .chart .media_result .chart_number {
color: white;
position: absolute;
top: 0;
@@ -172,16 +192,17 @@
font: bold 2em/1em Helvetica, Sans-Serif;
width: 50px;
height: 100%;
text-align: center;
border-left: 8px solid transparent;
}
.charts .chart .media_result div.chart_number.chart_in_wanted {
background: rgb(0, 255, 40); /* fallback color */
background: rgba(0, 255, 40, 0.3);
}
.charts .chart .media_result div.chart_number.chart_in_library {
background: rgb(0, 202, 32); /* fallback color */
background: rgba(0, 202, 32, 0.3);
}
.charts .chart .media_result.chart_in_wanted .chart_number {
border-color: rgba(0, 255, 40, 0.3);
}
.charts .chart .media_result.chart_in_library .chart_number {
border-color: rgba(0, 202, 32, 0.3);
}
.charts .chart .media_result .actions {

View File

@@ -12,38 +12,31 @@ var Charts = new Class({
create: function(){
var self = this;
self.el_refreshing_text = new Element('span.refreshing', {
'text': 'Refreshing charts...'
});
self.el_refresh_link = new Element('a.refresh', {
'href': '#',
'text': 'Refresh charts',
'events': {
'click': function(e) {
e.preventDefault();
self.el.getChildren('div.chart').destroy();
self.el_refreshing_text.show();
self.el_refresh_link.hide();
self.api_request = Api.request('charts.view', {
'data': { 'force_update': 1 },
'onComplete': self.fill.bind(self)
});
}
}
}).hide();
self.el_refresh_container = new Element('div.refresh').grab(
self.el_refreshing_text
).grab(self.el_refresh_link);
self.el_no_charts_enabled = new Element('p.no_charts_enabled', {
'html': 'Hey, it looks like you have no charts enabled at the moment. If you\'d like some great movie suggestions you can go to <a href="' + App.createUrl('settings/display') + '">settings</a> and turn on some charts of your choice.'
}).hide();
self.el = new Element('div.charts').grab(
self.el_no_charts_enabled
).grab(self.el_refresh_container);
self.el = new Element('div.charts').adopt(
self.el_no_charts_enabled = new Element('p.no_charts_enabled', {
'html': 'Hey, it looks like you have no charts enabled at the moment. If you\'d like some great movie suggestions you can go to <a href="' + App.createUrl('settings/display') + '">settings</a> and turn on some charts of your choice.'
}),
self.el_refresh_container = new Element('div.refresh').adopt(
self.el_refresh_link = new Element('a.refresh.icon2', {
'href': '#',
'events': {
'click': function(e) {
e.preventDefault();
self.el.getChildren('div.chart').destroy();
self.el_refreshing_text.show();
self.el_refresh_link.hide();
self.api_request = Api.request('charts.view', {
'data': { 'force_update': 1 },
'onComplete': self.fill.bind(self)
});
}
}
}),
self.el_refreshing_text = new Element('span.refreshing', {
'text': 'Refreshing charts...'
})
)
);
if( Cookie.read('suggestions_charts_menu_selected') === 'charts')
self.el.show();
@@ -54,6 +47,8 @@ var Charts = new Class({
'onComplete': self.fill.bind(self)
});
self.fireEvent.delay(0, self, 'created');
},
fill: function(json){
@@ -93,9 +88,19 @@ var Charts = new Class({
self.afterAdded(m, movie)
}
});
var in_database_class = movie.in_wanted ? '.chart_in_wanted' : (movie.in_library ? '.chart_in_library' : '');
var in_database_title = movie.in_wanted ? 'Movie in wanted list' : (movie.in_library ? 'Movie in library' : '');
m.el.grab( new Element('div.chart_number' + in_database_class, { 'text': it++, 'title': in_database_title }));
var in_database_class = movie.in_wanted ? 'chart_in_wanted' : (movie.in_library ? 'chart_in_library' : ''),
in_database_title = movie.in_wanted ? 'Movie in wanted list' : (movie.in_library ? 'Movie in library' : '');
m.el
.addClass(in_database_class)
.grab(
new Element('div.chart_number', {
'text': it++,
'title': in_database_title
})
);
m.data_container.grab(
new Element('div.actions').adopt(
new Element('a.add.icon2', {
@@ -134,13 +139,13 @@ var Charts = new Class({
}
}
}) : null
)
);
$(m).inject(c);
});
$(c).inject(self.el_refresh_container, 'before');
c.inject(self.el);
});
@@ -150,8 +155,7 @@ var Charts = new Class({
},
afterAdded: function(m, movie){
var self = this;
afterAdded: function(m){
$(m).getElement('div.chart_number')
.addClass('chart_in_wanted')
@@ -163,4 +167,4 @@ var Charts = new Class({
return this.el;
}
})
});

View File

@@ -1,6 +1,7 @@
.suggestions {
clear: both;
padding-top: 10px;
margin-bottom: 30px;
}
.suggestions > h2 {

View File

@@ -160,7 +160,7 @@ Page.Home = new Class({
// Charts
self.charts = new Charts({
'onLoaded': function(){
'onCreated': function(){
self.chain.callChain();
}
});