From ef036688d62163ca509513391f61450d7c142dde Mon Sep 17 00:00:00 2001 From: Ruud Date: Sat, 21 Jan 2012 23:09:16 +0100 Subject: [PATCH] Some restyling --- couchpotato/core/plugins/movie/static/list.js | 17 ++- .../core/plugins/movie/static/movie.css | 136 ++++++++++-------- .../core/plugins/movie/static/movie.js | 37 +---- couchpotato/static/scripts/page/wanted.js | 16 +-- couchpotato/static/style/main.css | 2 +- 5 files changed, 97 insertions(+), 111 deletions(-) diff --git a/couchpotato/core/plugins/movie/static/list.js b/couchpotato/core/plugins/movie/static/list.js index aaed1dea..68396def 100644 --- a/couchpotato/core/plugins/movie/static/list.js +++ b/couchpotato/core/plugins/movie/static/list.js @@ -100,6 +100,7 @@ var MovieList = new Class({ } }), self.search_input = new Element('input.inlay', { + 'placeholder': 'Search', 'events': { 'keyup': self.search.bind(self), 'change': self.search.bind(self) @@ -114,7 +115,7 @@ var MovieList = new Class({ // All self.letters['all'] = new Element('li.letter_all.active', { - 'text': 'all', + 'text': 'ALL', }).inject(self.alpha); // Chars @@ -126,6 +127,20 @@ var MovieList = new Class({ }).inject(self.alpha); }); + // Get available chars and highlight + Api.request('movie.available_chars', { + 'data': Object.merge({ + 'status': self.options.status + }, self.filter), + 'onComplete': function(json){ + + json.chars.split('').each(function(c){ + self.letters[c.capitalize()].addClass('available') + }) + + } + }); + }, reset: function(){ diff --git a/couchpotato/core/plugins/movie/static/movie.css b/couchpotato/core/plugins/movie/static/movie.css index 9c2b9d6e..6fde734c 100644 --- a/couchpotato/core/plugins/movie/static/movie.css +++ b/couchpotato/core/plugins/movie/static/movie.css @@ -9,13 +9,14 @@ } .movies .movie { - overflow: hidden; position: relative; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; margin: 10px 0; + + overflow: hidden; } .movies .movie:hover { border-color: #ddd #fff #fff #ddd; @@ -24,42 +25,27 @@ } .movies .data { padding: 2%; - position: absolute; - width: 96.1%; - top: 0; - left: 0; + width: 83%; + position: relative; + float: right; - border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - } - .movies .data:after { - content: ""; - display: block; - height: 0; - clear: both; - visibility: hidden; - } - .movies .data .poster, .options .poster { + border-radius: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; overflow: hidden; - float: left; - max-width: 10%; - margin: 0 2% 0 0; - border-radius:3px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - box-shadow: 0 0 10px rgba(0,0,0,0.35); - -moz-box-shadow: 0 0 10px rgba(0,0,0,0.35); - -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35); - line-height: 0; } - .movies .data .poster img, .options .poster img { - width: 100%; + .movies .poster { + float: left; + width: 13%; + line-height: 0; + overflow: hidden; + } + .movies .poster img, .options .poster img { + width: 101%; + height: 176px; } .movies .info { - float: right; - width: 88%; } .movies .info .title { @@ -90,22 +76,30 @@ .movies .info .description { clear: both; - width: 95%; + height: 80px; + overflow: hidden; } - + .movies .data:hover .description { + overflow: auto; + } + + .movies .data .quality { + } + .movies .data .quality span { - padding: 5px; + padding: 0 5px; font-weight: bold; } + .movies .data .quality span:first-child {padding-left: 0;} .movies .data .quality .available { color: orange; } .movies .data .quality .snatched { color: lightgreen; } .movies .data .actions { - position: absolute; - right: 15px; - bottom: 15px; line-height: 0; + clear: both; + float: right; + margin-top: -25px; } .movies .data:hover .action { opacity: 0.6; } .movies .data:hover .action:hover { opacity: 1; } @@ -124,7 +118,9 @@ clear: both; text-align: center; font-size: 20px; - position: relative; + position: absolute; + padding: 70px 0 0; + width: 100%; } .movies .delete_container .cancel { } @@ -139,26 +135,27 @@ color: #fff; background-color: #d32917; } + + .movies .options { + position: absolute; + width: 83%; + margin-left: 15%; + } - .movies .options .form { - margin-top: -2%; - float: left; - font-size: 20px; - } - - .movies .options .form select { - margin-right: 20px; - } + .movies .options .form { + margin-top: 70px; + float: left; + font-size: 20px; + } - .movies .options { - padding: 2%; - } + .movies .options .form select { + margin-right: 20px; + } .movies .options .table { - height: 157px; + height: 176px; overflow: auto; - margin: -20px -20px -20px 110px; - padding: 15px 0 5px; + margin: 0 -2%; } .movies .options .table .item { border-bottom: 1px solid rgba(255,255,255,0.1); @@ -195,6 +192,7 @@ text-align: left; padding: 0 10px; } + .movies .options .table.files .name { width: 570px; } .movies .options .table .type { width: 120px; } .movies .options .table .is_available { width: 80px; } @@ -224,13 +222,16 @@ .movies .load_more.loading { opacity: .5; } - + +.movies .alph_nav { + overflow: hidden; +} + .movies .alph_nav ul { list-style: none; - padding: 0; + padding: 0 0 1px; margin: 0; - - display: inline-block; + float: left; } .movies .alph_nav li { @@ -241,13 +242,22 @@ line-height: 26px; text-align: center; cursor: pointer; - margin: 0 -1px 0 0; color: #666; + border: 1px solid transparent; } - .movies .alph_nav li.active { + .movies .alph_nav li:first-child { + width: 34px; + } + .movies .alph_nav li.active, .movies .alph_nav li:hover { + font-weight: bolder; color: #fff; } - - .movies .alph_nav li:hover, .movies .alph_nav li.onlay { - font-weight: bold; - } \ No newline at end of file + .movies .alph_nav li.available { + color: #fff; + } + + .movies .alph_nav input { + padding: 6px 5px; + margin: 0; + float: right; + } \ No newline at end of file diff --git a/couchpotato/core/plugins/movie/static/movie.js b/couchpotato/core/plugins/movie/static/movie.js index 1be0bf09..4b7ac27c 100644 --- a/couchpotato/core/plugins/movie/static/movie.js +++ b/couchpotato/core/plugins/movie/static/movie.js @@ -11,13 +11,13 @@ var Movie = new Class({ self.profile = Quality.getProfile(data.profile_id) || {}; self.parent(self, options); - self.addEvent('injected', self.afterInject.bind(self)) }, create: function(){ var self = this; self.el = new Element('div.movie.inlay').adopt( + self.thumbnail = File.Select.single('poster', self.data.library.files), self.data_container = new Element('div.data.inlay.light', { 'tween': { duration: 400, @@ -25,7 +25,6 @@ var Movie = new Class({ onComplete: self.fireEvent.bind(self, 'slideEnd') } }).adopt( - self.thumbnail = File.Select.single('poster', self.data.library.files), self.info_container = new Element('div.info').adopt( self.title = new Element('div.title', { 'text': self.getTitle() @@ -88,15 +87,6 @@ var Movie = new Class({ }, - afterInject: function(){ - var self = this; - - (function(){ - var height = self.getHeight(); - self.el.setStyle('height', height); - }).delay(100) - }, - getTitle: function(){ var self = this; @@ -120,37 +110,19 @@ var Movie = new Class({ if(direction == 'in'){ self.el.addEvent('outerClick', self.slide.bind(self, 'out')) el.show(); - self.data_container.tween('left', 0, self.getWidth()); + self.data_container.tween('right', 0, -840); } else { self.el.removeEvents('outerClick') self.addEvent('slideEnd:once', function(){ - self.el.getElements('> :not(.data)').hide(); + self.el.getElements('> :not(.data):not(.poster)').hide(); }); - self.data_container.tween('left', self.getWidth(), 0); + self.data_container.tween('right', -840, 0); } }, - getHeight: function(){ - var self = this; - - if(!self.height) - self.height = self.data_container.getSize().y; - - return self.height; - }, - - getWidth: function(){ - var self = this; - - if(!self.width) - self.width = self.data_container.getCoordinates().width; - - return self.width; - }, - get: function(attr){ return this.data[attr] || this.data.library[attr] } @@ -240,7 +212,6 @@ var ReleaseAction = new Class({ if(!self.options_container){ self.options_container = new Element('div.options').adopt( - $(self.movie.thumbnail).clone(), self.release_container = new Element('div.releases.table') ).inject(self.movie, 'top'); diff --git a/couchpotato/static/scripts/page/wanted.js b/couchpotato/static/scripts/page/wanted.js index b7b8bd46..d656e422 100644 --- a/couchpotato/static/scripts/page/wanted.js +++ b/couchpotato/static/scripts/page/wanted.js @@ -52,12 +52,7 @@ window.addEvent('domready', function(){ if(!self.options_container){ self.options_container = new Element('div.options').adopt( - $(self.movie.thumbnail).clone(), - new Element('div.form', { - 'styles': { - 'line-height': self.movie.getHeight() - } - }).adopt( + new Element('div.form').adopt( self.title_select = new Element('select', { 'name': 'title' }), @@ -167,11 +162,7 @@ window.addEvent('domready', function(){ (e).stop(); if(!self.delete_container){ - self.delete_container = new Element('div.delete_container', { - 'styles': { - 'line-height': self.movie.getHeight() - } - }).adopt( + self.delete_container = new Element('div.delete_container').adopt( new Element('a.cancel', { 'text': 'Cancel', 'events': { @@ -265,7 +256,6 @@ window.addEvent('domready', function(){ if(!self.options_container){ self.options_container = new Element('div.options').adopt( - $(self.movie.thumbnail).clone(), self.files_container = new Element('div.files.table') ).inject(self.movie, 'top'); @@ -281,7 +271,7 @@ window.addEvent('domready', function(){ var rel = new Element('div.release').inject(self.files_container); Array.each(release.files, function(file){ - new Element('div.file').adopt( + new Element('div.file.item').adopt( new Element('span.name', {'text': file.path}), new Element('span.type', {'text': File.Type.get(file.type_id).name}), new Element('span.available', {'text': file.available}) diff --git a/couchpotato/static/style/main.css b/couchpotato/static/style/main.css index c59873d1..b4b1fc52 100644 --- a/couchpotato/static/style/main.css +++ b/couchpotato/static/style/main.css @@ -365,7 +365,7 @@ body > .spinner, .mask{ outline: none; } -.onlay, .inlay .selected, .inlay > li:hover { +.onlay, .inlay .selected, .inlay > li:hover, .inlay > li.active { border-radius:3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;