From 9e3f978677722686dd843561dbcae2dd0990881c Mon Sep 17 00:00:00 2001 From: Ruud Date: Thu, 9 May 2013 23:36:54 +0200 Subject: [PATCH] Styling fixes --- .../core/notifications/core/static/notification.js | 4 +- couchpotato/core/plugins/log/static/log.js | 13 - couchpotato/core/plugins/movie/static/list.js | 163 ++++++----- .../core/plugins/movie/static/movie.actions.js | 15 +- couchpotato/core/plugins/movie/static/movie.css | 313 ++++++++++++--------- couchpotato/core/plugins/movie/static/movie.js | 6 +- couchpotato/core/plugins/movie/static/search.css | 1 - couchpotato/static/scripts/block/menu.js | 23 +- couchpotato/static/scripts/block/navigation.js | 12 +- couchpotato/static/scripts/couchpotato.js | 58 ++-- couchpotato/static/scripts/page/home.js | 2 +- couchpotato/static/scripts/page/settings.js | 14 - couchpotato/static/style/main.css | 95 +++---- couchpotato/static/style/settings.css | 3 +- 14 files changed, 387 insertions(+), 335 deletions(-) diff --git a/couchpotato/core/notifications/core/static/notification.js b/couchpotato/core/notifications/core/static/notification.js index 2b74364..74d1445 100644 --- a/couchpotato/core/notifications/core/static/notification.js +++ b/couchpotato/core/notifications/core/static/notification.js @@ -28,10 +28,8 @@ var NotificationBase = new Class({ $(App.block.notification).inject(App.getBlock('search'), 'after'); self.badge = new Element('div.badge').inject(App.block.notification, 'top').hide(); - }); + self.startInterval.delay($(window).getSize().x <= 480 ? 2000 : 1000, self); - window.addEvent('load', function(){ - self.startInterval.delay($(window).getSize().x <= 480 ? 2000 : 300, self) }); }, diff --git a/couchpotato/core/plugins/log/static/log.js b/couchpotato/core/plugins/log/static/log.js index 0e276b5..e9e4af0 100644 --- a/couchpotato/core/plugins/log/static/log.js +++ b/couchpotato/core/plugins/log/static/log.js @@ -6,19 +6,6 @@ Page.Log = new Class({ title: 'Show recent logs.', has_tab: false, - initialize: function(options){ - var self = this; - self.parent(options) - - - App.getBlock('more').addLink(new Element('a', { - 'href': App.createUrl(self.name), - 'text': self.name.capitalize(), - 'title': self.title - })) - - }, - indexAction: function(){ var self = this; diff --git a/couchpotato/core/plugins/movie/static/list.js b/couchpotato/core/plugins/movie/static/list.js index 6f57701..aa29e92 100644 --- a/couchpotato/core/plugins/movie/static/list.js +++ b/couchpotato/core/plugins/movie/static/list.js @@ -48,7 +48,7 @@ var MovieList = new Class({ self.changeView('list'); else self.changeView(self.getSavedView() || self.options.view || 'details'); - + self.getMovies(); App.addEvent('movie.added', self.movieAdded.bind(self)) @@ -151,66 +151,65 @@ var MovieList = new Class({ self.el.addClass('with_navigation') - self.navigation = new Element('div.alph_nav').grab( - new Element('div').adopt( - self.navigation_alpha = new Element('ul.numbers', { + self.navigation = new Element('div.alph_nav').adopt( + self.mass_edit_form = new Element('div.mass_edit_form').adopt( + new Element('span.select').adopt( + self.mass_edit_select = new Element('input[type=checkbox].inlay', { + 'events': { + 'change': self.massEditToggleAll.bind(self) + } + }), + self.mass_edit_selected = new Element('span.count', {'text': 0}), + self.mass_edit_selected_label = new Element('span', {'text': 'selected'}) + ), + new Element('div.quality').adopt( + self.mass_edit_quality = new Element('select'), + new Element('a.button.orange', { + 'text': 'Change quality', + 'events': { + 'click': self.changeQualitySelected.bind(self) + } + }) + ), + new Element('div.delete').adopt( + new Element('span[text=or]'), + new Element('a.button.red', { + 'text': 'Delete', + 'events': { + 'click': self.deleteSelected.bind(self) + } + }) + ), + new Element('div.refresh').adopt( + new Element('span[text=or]'), + new Element('a.button.green', { + 'text': 'Refresh', + 'events': { + 'click': self.refreshSelected.bind(self) + } + }) + ) + ), + new Element('div.menus').adopt( + self.navigation_counter = new Element('span.counter[title=Total]'), + self.navigation_actions = new Element('ul.actions', { 'events': { 'click:relay(li)': function(e, el){ - self.movie_list.empty() - self.activateLetter(el.get('data-letter')) - self.getMovies() + var a = 'active'; + self.navigation_actions.getElements('.'+a).removeClass(a); + self.changeView(el.get('data-view')); + this.addClass(a); + + el.inject(el.getParent(), 'top') } } }), - self.navigation_counter = new Element('span.counter[title=Total]'), - self.navigation_actions = new Element('ul.inlay.actions.reversed'), - self.navigation_search_input = new Element('input.search.inlay', { - 'title': 'Search through ' + self.options.identifier, - 'placeholder': 'Search through ' + self.options.identifier, - 'events': { - 'keyup': self.search.bind(self), - 'change': self.search.bind(self) - } + self.filter_menu = new Block.Menu(self, { + 'class': 'filter' }), - self.navigation_menu = new Block.Menu(self), - self.mass_edit_form = new Element('div.mass_edit_form').adopt( - new Element('span.select').adopt( - self.mass_edit_select = new Element('input[type=checkbox].inlay', { - 'events': { - 'change': self.massEditToggleAll.bind(self) - } - }), - self.mass_edit_selected = new Element('span.count', {'text': 0}), - self.mass_edit_selected_label = new Element('span', {'text': 'selected'}) - ), - new Element('div.quality').adopt( - self.mass_edit_quality = new Element('select'), - new Element('a.button.orange', { - 'text': 'Change quality', - 'events': { - 'click': self.changeQualitySelected.bind(self) - } - }) - ), - new Element('div.delete').adopt( - new Element('span[text=or]'), - new Element('a.button.red', { - 'text': 'Delete', - 'events': { - 'click': self.deleteSelected.bind(self) - } - }) - ), - new Element('div.refresh').adopt( - new Element('span[text=or]'), - new Element('a.button.green', { - 'text': 'Refresh', - 'events': { - 'click': self.refreshSelected.bind(self) - } - }) - ) - ) + self.navigation_menu = new Block.Menu(self, { + 'class': 'extra' + }) ) ).inject(self.el, 'top'); @@ -223,20 +222,35 @@ var MovieList = new Class({ }).inject(self.mass_edit_quality) }); + self.filter_menu.addLink( + self.navigation_search_input = new Element('input', { + 'title': 'Search through ' + self.options.identifier, + 'placeholder': 'Search through ' + self.options.identifier, + 'events': { + 'keyup': self.search.bind(self), + 'change': self.search.bind(self) + } + }) + ).addClass('search'); + + self.filter_menu.addLink( + self.navigation_alpha = new Element('ul.numbers', { + 'events': { + 'click:relay(li.available)': function(e, el){ + self.activateLetter(el.get('data-letter')) + self.getMovies(true) + } + } + }) + ); + // Actions ['mass_edit', 'details', 'list'].each(function(view){ - self.navigation_actions.adopt( - new Element('li.'+view+(self.current_view == view ? '.active' : '')+'[data-view='+view+']', { - 'events': { - 'click': function(e){ - var a = 'active'; - self.navigation_actions.getElements('.'+a).removeClass(a); - self.changeView(this.get('data-view')); - this.addClass(a); - } - } - }).adopt(new Element('span')) - ) + var current = self.current_view == view; + new Element('li', { + 'class': 'icon2 ' + view + (current ? ' active ' : ''), + 'data-view': view + }).inject(self.navigation_actions, current ? 'top' : 'bottom'); }); // All @@ -260,11 +274,11 @@ var MovieList = new Class({ 'status': self.options.status }, self.filter), 'onSuccess': function(json){ - + json.chars.split('').each(function(c){ self.letters[c.capitalize()].addClass('available') }) - + } }); @@ -448,8 +462,7 @@ var MovieList = new Class({ self.activateLetter(); self.filter.search = search_value; - self.movie_list.empty(); - self.getMovies(); + self.getMovies(true); self.last_search_value = search_value; @@ -461,11 +474,10 @@ var MovieList = new Class({ var self = this; self.reset(); - self.movie_list.empty(); - self.getMovies(); + self.getMovies(true); }, - getMovies: function(){ + getMovies: function(reset){ var self = this; if(self.scrollspy){ @@ -495,6 +507,9 @@ var MovieList = new Class({ 'limit_offset': self.options.limit + ',' + self.offset }, self.filter), 'onSuccess': function(json){ + + if(reset) + self.movie_list.empty(); if(self.loader_first){ var lf = self.loader_first; diff --git a/couchpotato/core/plugins/movie/static/movie.actions.js b/couchpotato/core/plugins/movie/static/movie.actions.js index cf30e8a..546120f 100644 --- a/couchpotato/core/plugins/movie/static/movie.actions.js +++ b/couchpotato/core/plugins/movie/static/movie.actions.js @@ -100,10 +100,8 @@ MA.Release = new Class({ var self = this; if(!self.options_container){ - self.options_container = new Element('div.options').adopt( - self.release_container = new Element('div.releases.table').adopt( - self.trynext_container = new Element('div.buttons.try_container') - ) + self.options_container = new Element('div.options').grab( + self.release_container = new Element('div.releases.table') ); // Header @@ -190,7 +188,9 @@ MA.Release = new Class({ self.release_container.getElement('#release_'+self.next_release.id).addClass('next_release'); } - if(self.next_release || self.last_release){ + if(self.next_release || (self.last_release && ['ignored', 'failed'].indexOf(self.last_release.status.identifier) === false)){ + + self.trynext_container = new Element('div.buttons.try_container').inject(self.release_container, 'top'); self.trynext_container.adopt( new Element('span.or', { @@ -237,9 +237,10 @@ MA.Release = new Class({ (e).preventDefault(); self.createReleases(); - self.trynext_container = new Element('div.buttons.trynext').inject(self.movie.info_container); - if(self.next_release || self.last_release){ + if(self.next_release || (self.last_release && ['ignored', 'failed'].indexOf(self.last_release.status.identifier) === false)){ + + self.trynext_container = new Element('div.buttons.trynext').inject(self.movie.info_container); self.trynext_container.adopt( self.next_release ? [new Element('a.icon.readd', { diff --git a/couchpotato/core/plugins/movie/static/movie.css b/couchpotato/core/plugins/movie/static/movie.css index 68677bb..2e82638 100644 --- a/couchpotato/core/plugins/movie/static/movie.css +++ b/couchpotato/core/plugins/movie/static/movie.css @@ -78,24 +78,36 @@ .movies .movie { position: relative; - border-radius: 4px; margin: 10px 0; padding-left: 20px; overflow: hidden; width: 100%; height: 180px; transition: all 0.6s cubic-bezier(0.9,0,0.1,1); + transition-property: width, height; + background: rgba(0,0,0,.2); } + .movies.mass_edit_list .movie { + padding-left: 22px; + background: none; + } + .movies.details_list .movie { padding-left: 120px; } - + .movies.list_list .movie:not(.details_view), .movies.mass_edit_list .movie { - height: 32px; + height: 30px; + border-bottom: 1px solid rgba(255,255,255,.15); } + .movies.list_list .movie:last-child, + .movies.mass_edit_list .movie:last-child { + border: none; + } + .movies.thumbs_list .movie { width: 16.66667%; height: auto; @@ -103,9 +115,6 @@ margin: 0; padding: 0; vertical-align: top; - border-radius: 0; - box-shadow: none; - border: 0; } @media all and (max-width: 800px) { @@ -124,16 +133,7 @@ .movies.list_list .movie:not(.details_view), .movies.mass_edit_list .movie { - margin: 1px 0; - border-radius: 0; - background: no-repeat; - box-shadow: none; - border-bottom: 1px solid rgba(255,255,255,0.05); - } - - .movies.list_list .movie:hover:not(.details_view), - .movies.mass_edit_list .movie { - background: rgba(255,255,255,0.03); + margin: 0; } .movies .data { @@ -141,18 +141,18 @@ height: 100%; width: 100%; position: relative; - right: 0; - border-radius: 0; transition: all .6s cubic-bezier(0.9,0,0.1,1); + right: 0; } .movies.list_list .movie:not(.details_view) .data, .movies.mass_edit_list .movie .data { - height: 30px; - padding: 3px 0 3px 10px; - box-shadow: none; + padding: 0 0 0 10px; border: 0; background: #4e5969; } + .movies.mass_edit_list .movie .data { + padding-left: 8px; + } .movies.thumbs_list .data { position: absolute; @@ -192,18 +192,16 @@ line-height: 0; overflow: hidden; height: 100%; - border-radius: 4px 0 0 4px; transition: all .6s cubic-bezier(0.9,0,0.1,1); + background: rgba(0,0,0,.1); } .movies.thumbs_list .poster { position: relative; - border-radius: 0; } .movies.list_list .movie:not(.details_view) .poster, .movies.mass_edit_list .poster { width: 20px; height: 30px; - border-radius: 1px 0 0 1px; } .movies.mass_edit_list .poster { display: none; @@ -231,7 +229,6 @@ width: 100%; top: 0; bottom: 0; - border-radius: 0; opacity: 0; } @@ -246,22 +243,27 @@ font-weight: bold; margin-bottom: 10px; margin-top: 2px; - left: 0; - top: 0; width: 100%; padding-right: 80px; transition: all 0.2s linear; + height: 35px; + top: -5px; + position: relative; } + .movies.list_list .info .title, + .movies.mass_edit_list .info .title { + height: 100%; + top: 0; + margin: 0; + } .movies .info .title span { - display: block; + display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100%; - height: 30px; + height: 100%; line-height: 30px; - top: -5px; - position: relative; } .movies.thumbs_list .info .title span { @@ -298,13 +300,14 @@ font-size: 21px; word-wrap: break-word; padding: 0; + height: 100%; } .movies .info .year { position: absolute; color: #bbb; right: 0; - top: 1px; + top: 6px; text-align: right; transition: all 0.2s linear; font-weight: normal; @@ -348,6 +351,10 @@ min-height: 20px; } + .movies.list_list .movie:hover .data .quality { + display: none; + } + @media all and (max-width: 480px) { .movies .data .quality { display: none; @@ -380,12 +387,12 @@ right: 0; margin-right: 60px; z-index: 1; + top: 5px; } .movies .data .quality .available, .movies .data .quality .snatched { opacity: 1; - box-shadow: 1px 1px 0 rgba(0,0,0,0.2); cursor: pointer; } @@ -471,7 +478,7 @@ text-align: center; font-size: 20px; position: absolute; - padding: 70px 0 0; + padding: 80px 0 0; left: 120px; right: 0; } @@ -496,9 +503,9 @@ } .movies .options .form { - margin: 70px 20px 0; - float: left; + margin: 80px 0 0; font-size: 20px; + text-align: center; } .movies .options .form select { @@ -508,6 +515,7 @@ .movies .options .table { height: 180px; overflow: auto; + line-height: 2em; } .movies .options .table .item { border-bottom: 1px solid rgba(255,255,255,0.1); @@ -599,7 +607,6 @@ text-align: center; padding: 3px 10px; background: #4e5969; - border-radius: 0 0 2px 2px; transition: all .2s cubic-bezier(0.9,0,0.1,1) .2s; z-index: 11; } @@ -635,14 +642,13 @@ .movies .movie .trynext { display: inline; position: absolute; - right: 135px; + right: 145px; z-index: 2; opacity: 0; background: #4e5969; min-width: 300px; text-align: right; height: 100%; - padding: 3px 0; top: 0; } @@ -661,10 +667,9 @@ .movies.details_list .movie .trynext { background: #47515f; - padding: 0; + padding: 2px 0; right: 0; - bottom: 35px; - height: auto; + height: 25px; } .movies .movie .trynext a { @@ -672,10 +677,14 @@ padding: 0 5px 0 25px; margin-right: 10px; color: #FFF; - border-radius: 2px; + height: 100%; + line-height: 30px; } + .movies.details_list .movie .trynext a { + line-height: 23px; + } .movies .movie .trynext a:last-child { - margin: 0; + margin: 0; } .movies .movie .trynext a:hover { background-color: #369545; @@ -692,14 +701,7 @@ } .movies .alph_nav { - transition: box-shadow .4s linear; - position: relative; - z-index: 4; - top: 0px; - right: 0; - margin: 0 auto; - width: 100%; - padding: 10px 0; + height: 44px; } @media all and (max-width: 480px) { @@ -707,13 +709,10 @@ display: none; } } - - .movies .alph_nav > div { - position: relative; - max-width: 980px; - margin: 0 auto; - padding: 0; - min-height: 24px; + + .movies .alph_nav .menus { + display: inline-block; + float: right; } .movies .alph_nav .numbers, @@ -722,118 +721,150 @@ list-style: none; padding: 0 0 1px; margin: 0; - float: left; user-select: none; } .movies .alph_nav .counter { + display: inline-block; text-align: right; - position: absolute; - right: 270px; - background: #4e5969; - padding: 4px 10px; + padding: 0 10px; + height: 100%; + line-height: 43px; + border-right: 1px solid rgba(255,255,255,.07); } .movies .alph_nav .numbers li, .movies .alph_nav .actions li { display: inline-block; vertical-align: top; - height: 24px; - line-height: 23px; + height: 100%; + line-height: 30px; text-align: center; - cursor: pointer; - color: rgba(255,255,255,0.2); border: 1px solid transparent; transition: all 0.1s ease-in-out; } - - @media all and (max-width: 900px) { - .movies .alph_nav .numbers { - display: none; - } - } .movies .alph_nav .numbers li { - width: auto; - padding: 0 4px; + width: 30px; + height: 30px; + opacity: 0.3; } + .movies .alph_nav .numbers li.letter_all { + width: 60px; + } .movies .alph_nav li.available { - color: #FFF; - font-weight: bolder; + font-weight: bold; + cursor: pointer; + opacity: 1; } .movies .alph_nav li.active.available, .movies .alph_nav li.available:hover { - background: rgba(255,255,255,.1); + background: rgba(0,0,0,.1); } - .movies .alph_nav .search { + .movies .alph_nav .search input { padding: 6px 5px; - margin: 0 0 0 20px; - position: absolute; - right: 30px; - width: 154px; - height: 25px; - transition: all 0.6s cubic-bezier(0.9,0,0.1,1); + width: 100%; + height: 44px; + display: inline-block; + border: 0; + background: none; + color: #444; + font-size: 14px; + padding: 10px; + padding: 0 10px 0 30px; + border-bottom: 1px solid rgba(0,0,0,.08); } + .movies .alph_nav .search input:focus { + background: rgba(0,0,0,.08); + } + + .movies .alph_nav .search input::-webkit-input-placeholder { + color: #444; + opacity: .6; + } + + .movies .alph_nav .search:before { + font-family: 'Elusive-Icons'; + content: "\e03e"; + position: absolute; + height: 100%; + line-height: 45px; + font-size: 12px; + margin: 0 0 0 10px; + opacity: .6; + color: #444; + } .movies .alph_nav .actions { - margin: 0 6px 0 0; -moz-user-select: none; - position: absolute; - right: 183px; + width: 44px; + height: 44px; + display: inline-block; + vertical-align: top; + z-index: 200; + position: relative; } - .movies .alph_nav .actions li { - border-radius: 1px; - width: auto; - } - .movies .alph_nav .actions li.active { - background: none; - border: 1px solid transparent; - box-shadow: none; + .movies .alph_nav .actions:hover { + box-shadow: 0 100px 20px -10px rgba(0,0,0,0.55); } - .movies .alph_nav .actions li span { - display: block; - background: url('../images/sprite.png') no-repeat; - width: 25px; - height: 100%; + .movies .alph_nav .actions li { + width: 100%; + height: 45px; + line-height: 40px; + position: relative; + z-index: 20; + display: none; + cursor: pointer; } - - .movies .alph_nav .actions li.mass_edit span { - background-position: 3px 3px; + .movies .alph_nav .actions:hover li:not(.active) { + display: block; + background: #FFF; + color: #444; + } + .movies .alph_nav .actions li:hover:not(.active) { + background: #ccc; + } + .movies .alph_nav .actions li.active { + display: block; } - .movies .alph_nav .actions li.list span { - background-position: 3px -95px; + .movies .alph_nav .actions li.mass_edit:before { + content: "\e070"; } - .movies .alph_nav .actions li.details span { - background-position: 3px -74px; + .movies .alph_nav .actions li.list:before { + content: "\e0d8"; } - .movies .alph_nav .actions li:first-child { - border-radius: 3px 0 0 3px; - } - .movies .alph_nav .actions li:last-child { - border-radius: 0 3px 3px 0; - } + .movies .alph_nav .actions li.details:before { + content: "\e022"; + } .movies .alph_nav .mass_edit_form { clear: both; text-align: center; display: none; + overflow: hidden; + float: left; + height: 44px; + line-height: 44px; } .movies.mass_edit_list .mass_edit_form { - display: block; + display: inline-block; } .movies.mass_edit_list .mass_edit_form .select { - float: left; - margin: 5px 0 0 5px; font-size: 14px; + display: inline-block; } - .movies.mass_edit_list .mass_edit_form .select span { + .movies.mass_edit_list .mass_edit_form .select .check { + display: inline-block; vertical-align: middle; + margin: -4px 0 0 5px; + } + .movies.mass_edit_list .mass_edit_form .select span { opacity: 0.7; } .movies.mass_edit_list .mass_edit_form .select .count { @@ -842,8 +873,7 @@ } .movies .alph_nav .mass_edit_form .quality { - float: left; - padding: 8px 0 0; + display: inline-block; margin: 0 0 0 16px; } .movies .alph_nav .mass_edit_form .quality select { @@ -856,8 +886,8 @@ .movies .alph_nav .mass_edit_form .refresh, .movies .alph_nav .mass_edit_form .delete { - float: left; - padding: 8px 0 0 8px; + display: inline-block; + margin-left: 8px; } .movies .alph_nav .mass_edit_form .refresh span, @@ -865,16 +895,36 @@ margin: 0 10px 0 0; } - .movies .alph_nav .more_menu { - right: 0; - position: absolute; - } - .movies .alph_nav .more_menu > a { - background-color: #4e5969; - background-position: center -158px; + background: none; } + .movies .alph_nav .more_menu.extra > a:before { + content: '...'; + font-size: 1.7em; + line-height: 23px; + text-align: center; + display: block; + } + + .movies .alph_nav .more_menu.filter { + border: 1px solid rgba(255,255,255,.07); + border-width: 0 1px; + } + + .movies .alph_nav .more_menu.filter > a:before { + content: "\e0e8"; + font-family: 'Elusive-Icons'; + line-height: 33px; + display: block; + text-align: center; + } + + .movies .alph_nav .more_menu.filter .wrapper { + right: 45px; + width: 300px; + } + .movies .empty_wanted { background-image: url('../images/emptylist.png'); height: 750px; @@ -887,6 +937,7 @@ text-align: center; font-size: 25px; line-height: 150%; + padding: 40px 0; } .movies .empty_manage .after_manage { @@ -895,7 +946,6 @@ } .movies .progress { - border-radius: 2px; padding: 10px; margin: 5px 0; text-align: left; @@ -910,7 +960,6 @@ width: 49%; background: rgba(255, 255, 255, 0.05); margin: 2px 0.5%; - border-radius: 3px; } .movies .progress > div .folder { diff --git a/couchpotato/core/plugins/movie/static/movie.js b/couchpotato/core/plugins/movie/static/movie.js index 95fd1de..872f4bf 100644 --- a/couchpotato/core/plugins/movie/static/movie.js +++ b/couchpotato/core/plugins/movie/static/movie.js @@ -11,7 +11,7 @@ var Movie = new Class({ self.view = options.view || 'details'; self.list = list; - self.el = new Element('div.movie.inlay'); + self.el = new Element('div.movie'); self.profile = Quality.getProfile(data.profile_id) || {}; self.parent(self, options); @@ -149,8 +149,8 @@ var Movie = new Class({ 'events': { 'click': function(e){ var releases = self.el.getElement('.actions .releases'); - if(releases) - releases.fireEvent('click', [e]) + if(releases.isVisible()) + releases.fireEvent('click', [e]) } } }) diff --git a/couchpotato/core/plugins/movie/static/search.css b/couchpotato/core/plugins/movie/static/search.css index fb0cadd..5975008 100644 --- a/couchpotato/core/plugins/movie/static/search.css +++ b/couchpotato/core/plugins/movie/static/search.css @@ -44,7 +44,6 @@ .search_form .input input { border-radius: 0; display: block; - width: 100%; border: 0; background: rgba(255,255,255,.08); color: #FFF; diff --git a/couchpotato/static/scripts/block/menu.js b/couchpotato/static/scripts/block/menu.js index cdd7875..8d315f5 100644 --- a/couchpotato/static/scripts/block/menu.js +++ b/couchpotato/static/scripts/block/menu.js @@ -15,19 +15,21 @@ Block.Menu = new Class({ self.wrapper = new Element('div.wrapper').adopt( self.more_option_ul = new Element('ul') ), - new Element('a.button.onlay' + (self.options.button_class ? '.' + self.options.button_class : ''), { + self.button = new Element('a.button' + (self.options.button_class ? '.' + self.options.button_class : ''), { 'events': { 'click': function(){ self.el.toggleClass('show') self.fireEvent(self.el.hasClass('show') ? 'open' : 'close') - if(self.el.hasClass('show')) - this.addEvent('outerClick', function(){ - self.el.removeClass('show') - this.removeEvents('outerClick'); + if(self.el.hasClass('show')){ + self.el.addEvent('outerClick', self.removeOuterClick.bind(self)) + this.addEvent('outerClick', function(e){ + if(e.target.get('tag') != 'input') + self.removeOuterClick() }) + } else - this.removeEvents('outerClick'); + self.removeOuterClick() } } @@ -36,6 +38,15 @@ Block.Menu = new Class({ }, + removeOuterClick: function(){ + var self = this; + + self.el.removeClass('show') + self.el.removeEvents('outerClick'); + + self.button.removeEvents('outerClick'); + }, + addLink: function(tab, position){ var self = this; var el = new Element('li').adopt(tab).inject(self.more_option_ul, position || 'bottom'); diff --git a/couchpotato/static/scripts/block/navigation.js b/couchpotato/static/scripts/block/navigation.js index feda379..8389ff9 100644 --- a/couchpotato/static/scripts/block/navigation.js +++ b/couchpotato/static/scripts/block/navigation.js @@ -67,12 +67,12 @@ Block.Navigation = new Class({ if(!self.added){ new Element('li.separator').inject(self.nav); - body.getElements('.header .more_menu.menu li a').each(function(el, nr){ - if([0, 1, 2, 5].indexOf(nr) > -1){ - self.nav.grab( - new Element('li').grab(el.clone().cloneEvents(el)) - ); - } + body.getElements('.header .more_menu.menu li a, .header .more_menu.menu li span.separator').each(function(el, nr){ + if(nr <= 2) return; + if(el.get('tag') == 'a') + self.nav.grab(new Element('li').grab(el.clone().cloneEvents(el))); + else + self.nav.grab(new Element('li.separator')); }); self.added = true; diff --git a/couchpotato/static/scripts/couchpotato.js b/couchpotato/static/scripts/couchpotato.js index 673323b..25bddb4 100644 --- a/couchpotato/static/scripts/couchpotato.js +++ b/couchpotato/static/scripts/couchpotato.js @@ -68,28 +68,42 @@ var CouchPotato = new Class({ self.block.footer = new Block.Footer(self, {}) ); - [new Element('a.orange', { - 'text': 'Restart', - 'events': { - 'click': self.restartQA.bind(self) - } - }), - new Element('a.red', { - 'text': 'Shutdown', - 'events': { - 'click': self.shutdownQA.bind(self) - } - }), - new Element('a', { - 'text': 'Update to latest', - 'events': { - 'click': self.checkForUpdate.bind(self, null) - } - }), - new Element('a', { - 'text': 'Run install wizard', - 'href': App.createUrl('wizard') - })].each(function(a){ + var setting_links = [ + new Element('a', { + 'text': 'About CouchPotato', + 'href': App.createUrl('settings/about') + }), + new Element('a', { + 'text': 'Check for Updates', + 'events': { + 'click': self.checkForUpdate.bind(self, null) + } + }), + new Element('span.separator'), + new Element('a', { + 'text': 'Settings', + 'href': App.createUrl('settings/general') + }), + new Element('a', { + 'text': 'Logs', + 'href': App.createUrl('log') + }), + new Element('span.separator'), + new Element('a', { + 'text': 'Restart', + 'events': { + 'click': self.restartQA.bind(self) + } + }), + new Element('a', { + 'text': 'Shutdown', + 'events': { + 'click': self.shutdownQA.bind(self) + } + }) + ] + + setting_links.each(function(a){ self.block.more.addLink(a) }) diff --git a/couchpotato/static/scripts/page/home.js b/couchpotato/static/scripts/page/home.js index f425662..bb4e5e9 100644 --- a/couchpotato/static/scripts/page/home.js +++ b/couchpotato/static/scripts/page/home.js @@ -78,7 +78,7 @@ Page.Home = new Class({ if(timer) clearTimeout(timer); timer = (function(){ images.setStyle('height', highest); - }).delay(300); + }).delay(50); } }); }); diff --git a/couchpotato/static/scripts/page/settings.js b/couchpotato/static/scripts/page/settings.js index 6e563bf..5302f92 100644 --- a/couchpotato/static/scripts/page/settings.js +++ b/couchpotato/static/scripts/page/settings.js @@ -11,20 +11,6 @@ Page.Settings = new Class({ current: 'about', has_tab: false, - initialize: function(options){ - var self = this; - self.parent(options); - - // Add to more menu - if(self.name == 'settings') - App.getBlock('more').addLink(new Element('a', { - 'href': App.createUrl(self.name), - 'text': self.name.capitalize(), - 'title': self.title - }), 'top') - - }, - open: function(action, params){ var self = this; self.action = action == 'index' ? self.default_action : action; diff --git a/couchpotato/static/style/main.css b/couchpotato/static/style/main.css index 02dda3d..7d07651 100644 --- a/couchpotato/static/style/main.css +++ b/couchpotato/static/style/main.css @@ -178,13 +178,10 @@ body > .spinner, .mask{ margin: 0; width: 100%; z-index: 5; - background: #4e5969; + background: #5c697b; box-shadow: 0 0 10px rgba(0,0,0,.1); transition: all .4s ease-in-out; } - .header.with_shadow { - background-color: #46505e; - } @media all and (max-width: 480px) { .header { @@ -315,7 +312,7 @@ body > .spinner, .mask{ } .menu_shown body { - left: 160px; + left: 240px; } .header .navigation { @@ -327,13 +324,13 @@ body > .spinner, .mask{ right: 0; top: 0; bottom: 0; - left: 160px; + left: 240px; } .header .navigation ul { - width: 160px; + width: 240px; position: fixed; - left: -160px; + left: -240px; background: rgba(0,0,0,.5); transition: all .5s cubic-bezier(0.9,0,0.1,1); } @@ -374,26 +371,15 @@ body > .spinner, .mask{ .header .more_menu .button { height: 100%; - width: 44px; - border: 0; - box-shadow: none; - border-radius: 0; - background: none; line-height: 66px; text-align: center; padding: 0; - border: 1px solid transparent; - border-width: 0 0 4px; } - .header .more_menu .button:hover { - background: none; - border-color: #047792; - } .header .more_menu .wrapper { - width: 150px; + width: 200px; margin-left: -106px; - margin-top: 66px; + margin-top: 22px; } @media all and (max-width: 480px) { @@ -402,7 +388,7 @@ body > .spinner, .mask{ } .header .more_menu .wrapper { - margin-top: 44px; + margin-top: 0; } } @@ -439,12 +425,10 @@ body > .spinner, .mask{ } .header .notification_menu ul { + min-height: 80px; max-height: 300px; overflow: auto; - } - - .header .notification_menu > a { - background-position: center -209px; + text-align: center; } .header .notification_menu li > span { @@ -491,6 +475,7 @@ body > .spinner, .mask{ width: 16px; cursor: pointer; background: url('../images/sprite.png') no-repeat -200px; + border-radius: 3px; } .check.highlighted { background-color: #424c59; } .check.checked { background-position: -2px 0; } @@ -566,15 +551,14 @@ body > .spinner, .mask{ .inlay { color: #fff; border: 0; - border-radius:3px; background-color: #282d34; - box-shadow: inset 0 1px 8px rgba(0,0,0,0.25), 0 1px 0px rgba(255,255,255,0.25); + box-shadow: inset 0 1px 8px rgba(0,0,0,0.25); } .inlay.light { background-color: #47515f; outline: none; - box-shadow: inset 0 1px 8px rgba(0,0,0,0.05), 0 1px 0px rgba(255,255,255,0.15); + box-shadow: none; } .inlay:focus { @@ -585,7 +569,7 @@ body > .spinner, .mask{ .onlay, .inlay .selected, .inlay:not(.reversed) > li:hover, .inlay > li.active, .inlay.reversed > li { border-radius:3px; border: 1px solid #252930; - box-shadow: inset 0 1px 0px rgba(255,255,255,0.20), 0 0 3px rgba(0,0,0, 0.2); + box-shadow: inset 0 1px 0px rgba(255,255,255,0.20); background: rgb(55,62,74); background-image: linear-gradient( 0, @@ -597,7 +581,7 @@ body > .spinner, .mask{ color: #fff; border: 1px solid transparent; background-color: #282d34; - box-shadow: inset 0 1px 8px rgba(0,0,0,0.25), 0 1px 0px rgba(255,255,255,0.25); + box-shadow: inset 0 1px 8px rgba(0,0,0,0.25); } .question { @@ -648,38 +632,37 @@ body > .spinner, .mask{ .more_menu > a { display: block; - background: url('../images/sprite.png') no-repeat center -137px; - height: 25px; - width: 25px; - border: 1px solid rgba(0,0,0,0.3); + height: 44px; + width: 44px; transition: all 0.3s ease-in-out; + border-bottom: 4px solid transparent; + border-radius: 0; } - .more_menu.show > a:not(:active), .more_menu > a:hover:not(:active) { - background-color: #406db8; + + .more_menu .button:hover { + border-color: #047792; + } + + .more_menu.show .button { + border-color: #04bce6; } .more_menu .wrapper { display: none; - background: rgba(255,255,255,0.98); top: 0; right: 0; - padding: 4px; - margin: 26px 0 0 0; + margin: 11px 0 0 0; position: absolute; z-index: 90; width: 185px; - box-shadow: 0 20px 20px -5px rgba(0,0,0,0.1); - text-align: center; - color: #000; - background-image: linear-gradient( - -45deg, - rgb(200,200,200) 0%, - rgb(255,255,255) 100% - ); + box-shadow: 0 20px 20px -10px rgba(0,0,0,0.55); + color: #444; + background: #fff; } .more_menu.show .wrapper { display: block; + top: 44px; } .more_menu ul { @@ -698,11 +681,19 @@ body > .spinner, .mask{ border-bottom: 1px solid rgba(255,255,255,0.2); box-shadow: none; font-weight: normal; - font-size: 11px; - text-transform: uppercase; + font-size: 1.2em; letter-spacing: 1px; - padding: 3px 0; - color: #000; + padding: 2px 10px; + color: #444; + } + .more_menu .wrapper li:first-child a { padding-top: 5px; } + .more_menu .wrapper li:last-child a { padding-bottom: 5px; } + + .more_menu .wrapper li .separator { + border-bottom: 1px solid rgba(0,0,0,.1); + display: block; + height: 1; + margin: 5px 0; } .more_menu .wrapper li:last-child a { diff --git a/couchpotato/static/style/settings.css b/couchpotato/static/style/settings.css index 7bfeb3a..9507f33 100644 --- a/couchpotato/static/style/settings.css +++ b/couchpotato/static/style/settings.css @@ -576,7 +576,8 @@ .page .tab_about .usenet { padding: 20px 30px 0; - font-size: 17px; + font-size: 1.5em; + line-height: 1.3em; } .page .tab_about .usenet a {