Charts cleanup

couchpotato/core/media/movie/charts/static/charts.css

@@ -1,5 +1,6 @@
 .charts {
 	clear: both;
+	margin-bottom: 30px;
 }
 
 .charts > h2 {
@@ -12,18 +13,37 @@
 	vertical-align: top;
 }
 
-.charts div.refresh {
+.charts .refresh {
-	margin-top: 10px;
 	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;
-}
+	display: none;
-
-.charts div.refresh a {
-	display:block;
 }
 
 .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 {
+	.charts .chart .media_result.chart_in_wanted .chart_number {
-	background: rgb(0, 255, 40); /* fallback color */
+		border-color: rgba(0, 255, 40, 0.3);
-	background: rgba(0, 255, 40, 0.3);
+	}
-}
+
-.charts .chart .media_result div.chart_number.chart_in_library {
+	.charts .chart .media_result.chart_in_library .chart_number {
-	background: rgb(0, 202, 32); /* fallback color */
+		border-color: rgba(0, 202, 32, 0.3);
-	background: rgba(0, 202, 32, 0.3);
+	}
-}
 
 
 .charts .chart .media_result .actions {

couchpotato/core/media/movie/charts/static/charts.js

@@ -12,38 +12,31 @@ var Charts = new Class({
 	create: function(){
 		var self = this;
 
-		self.el_refreshing_text = new Element('span.refreshing', {
+		self.el = new Element('div.charts').adopt(
-			'text': 'Refreshing charts...'
+			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_link = new Element('a.refresh', {
+			self.el_refresh_container = new Element('div.refresh').adopt(
-			'href': '#',
+				self.el_refresh_link = new Element('a.refresh.icon2', {
-			'text': 'Refresh charts',
+					'href': '#',
-			'events': {
+					'events': {
-				'click': function(e) {
+						'click': function(e) {
-					e.preventDefault();
+							e.preventDefault();
-					self.el.getChildren('div.chart').destroy();
+							self.el.getChildren('div.chart').destroy();
-					self.el_refreshing_text.show();
+							self.el_refreshing_text.show();
-					self.el_refresh_link.hide();
+							self.el_refresh_link.hide();
-					self.api_request = Api.request('charts.view', {
+							self.api_request = Api.request('charts.view', {
-						'data': { 'force_update': 1 },
+								'data': { 'force_update': 1 },
-						'onComplete': self.fill.bind(self)
+								'onComplete': self.fill.bind(self)
-					});
+							});
-				}
+						}
-			}
+					}
-		}).hide();
+				}),
-
+				self.el_refreshing_text = new Element('span.refreshing', {
-		self.el_refresh_container = new Element('div.refresh').grab(
+					'text': 'Refreshing charts...'
-			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);
 
 		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' : '');
+					var in_database_class = movie.in_wanted ? 'chart_in_wanted' : (movie.in_library ? 'chart_in_library' : ''),
-					m.el.grab( new Element('div.chart_number' + in_database_class, { 'text': it++, 'title': in_database_title }));
+						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){
+	afterAdded: function(m){
-		var self = this;
 
 		$(m).getElement('div.chart_number')
 			.addClass('chart_in_wanted')
@@ -163,4 +167,4 @@ var Charts = new Class({
 		return this.el;
 	}
 
-})
+});

couchpotato/core/media/movie/suggestion/static/suggest.css

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

couchpotato/static/scripts/page/home.js

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