diff --git a/couchpotato/core/media/movie/charts/static/charts.css b/couchpotato/core/media/movie/charts/static/charts.css index da962a45..610ac153 100644 --- a/couchpotato/core/media/movie/charts/static/charts.css +++ b/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 { - 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 { diff --git a/couchpotato/core/media/movie/charts/static/charts.js b/couchpotato/core/media/movie/charts/static/charts.js index 5b453691..00033f4a 100644 --- a/couchpotato/core/media/movie/charts/static/charts.js +++ b/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', { - '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 settings 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 settings 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; } -}) +}); diff --git a/couchpotato/core/media/movie/suggestion/static/suggest.css b/couchpotato/core/media/movie/suggestion/static/suggest.css index a719eb2c..8e747849 100644 --- a/couchpotato/core/media/movie/suggestion/static/suggest.css +++ b/couchpotato/core/media/movie/suggestion/static/suggest.css @@ -1,6 +1,7 @@ .suggestions { clear: both; padding-top: 10px; + margin-bottom: 30px; } .suggestions > h2 { diff --git a/couchpotato/static/scripts/page/home.js b/couchpotato/static/scripts/page/home.js index 40758261..bf435c14 100644 --- a/couchpotato/static/scripts/page/home.js +++ b/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(); } });