Charts cleanup
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
.suggestions {
|
||||
clear: both;
|
||||
padding-top: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.suggestions > h2 {
|
||||
|
||||
@@ -160,7 +160,7 @@ Page.Home = new Class({
|
||||
|
||||
// Charts
|
||||
self.charts = new Charts({
|
||||
'onLoaded': function(){
|
||||
'onCreated': function(){
|
||||
self.chain.callChain();
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user