Styling fixes

This commit is contained in:
Ruud committed 2013-05-09 23:36:54 +02:00
1 parent f467d1c4f7
commit 9e3f978677
14 files changed
+382 -330

No files matched your search

@@ -28,10 +28,8 @@ var NotificationBase = new Class({
$(App.block.notification).inject(App.getBlock('search'), 'after'); $(App.block.notification).inject(App.getBlock('search'), 'after');
self.badge = new Element('div.badge').inject(App.block.notification, 'top').hide(); 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)
}); });
}, },
@@ -6,19 +6,6 @@ Page.Log = new Class({
title: 'Show recent logs.', title: 'Show recent logs.',
has_tab: false, 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(){ indexAction: function(){
var self = this; var self = this;
+86 -71
View File
@@ -151,66 +151,65 @@ var MovieList = new Class({
self.el.addClass('with_navigation') self.el.addClass('with_navigation')
self.navigation = new Element('div.alph_nav').grab( self.navigation = new Element('div.alph_nav').adopt(
new Element('div').adopt( self.mass_edit_form = new Element('div.mass_edit_form').adopt(
self.navigation_alpha = new Element('ul.numbers', { 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': { 'events': {
'click:relay(li)': function(e, el){ 'click:relay(li)': function(e, el){
self.movie_list.empty() var a = 'active';
self.activateLetter(el.get('data-letter')) self.navigation_actions.getElements('.'+a).removeClass(a);
self.getMovies() self.changeView(el.get('data-view'));
this.addClass(a);
el.inject(el.getParent(), 'top')
} }
} }
}), }),
self.navigation_counter = new Element('span.counter[title=Total]'), self.filter_menu = new Block.Menu(self, {
self.navigation_actions = new Element('ul.inlay.actions.reversed'), 'class': 'filter'
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.navigation_menu = new Block.Menu(self), self.navigation_menu = new Block.Menu(self, {
self.mass_edit_form = new Element('div.mass_edit_form').adopt( 'class': 'extra'
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)
}
})
)
)
) )
).inject(self.el, 'top'); ).inject(self.el, 'top');
@@ -223,20 +222,35 @@ var MovieList = new Class({
}).inject(self.mass_edit_quality) }).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 // Actions
['mass_edit', 'details', 'list'].each(function(view){ ['mass_edit', 'details', 'list'].each(function(view){
self.navigation_actions.adopt( var current = self.current_view == view;
new Element('li.'+view+(self.current_view == view ? '.active' : '')+'[data-view='+view+']', { new Element('li', {
'events': { 'class': 'icon2 ' + view + (current ? ' active ' : ''),
'click': function(e){ 'data-view': view
var a = 'active'; }).inject(self.navigation_actions, current ? 'top' : 'bottom');
self.navigation_actions.getElements('.'+a).removeClass(a);
self.changeView(this.get('data-view'));
this.addClass(a);
}
}
}).adopt(new Element('span'))
)
}); });
// All // All
@@ -448,8 +462,7 @@ var MovieList = new Class({
self.activateLetter(); self.activateLetter();
self.filter.search = search_value; self.filter.search = search_value;
self.movie_list.empty(); self.getMovies(true);
self.getMovies();
self.last_search_value = search_value; self.last_search_value = search_value;
@@ -461,11 +474,10 @@ var MovieList = new Class({
var self = this; var self = this;
self.reset(); self.reset();
self.movie_list.empty(); self.getMovies(true);
self.getMovies();
}, },
getMovies: function(){ getMovies: function(reset){
var self = this; var self = this;
if(self.scrollspy){ if(self.scrollspy){
@@ -496,6 +508,9 @@ var MovieList = new Class({
}, self.filter), }, self.filter),
'onSuccess': function(json){ 'onSuccess': function(json){
if(reset)
self.movie_list.empty();
if(self.loader_first){ if(self.loader_first){
var lf = self.loader_first; var lf = self.loader_first;
self.loader_first.addClass('hide') self.loader_first.addClass('hide')
@@ -100,10 +100,8 @@ MA.Release = new Class({
var self = this; var self = this;
if(!self.options_container){ if(!self.options_container){
self.options_container = new Element('div.options').adopt( self.options_container = new Element('div.options').grab(
self.release_container = new Element('div.releases.table').adopt( self.release_container = new Element('div.releases.table')
self.trynext_container = new Element('div.buttons.try_container')
)
); );
// Header // Header
@@ -190,7 +188,9 @@ MA.Release = new Class({
self.release_container.getElement('#release_'+self.next_release.id).addClass('next_release'); 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( self.trynext_container.adopt(
new Element('span.or', { new Element('span.or', {
@@ -237,9 +237,10 @@ MA.Release = new Class({
(e).preventDefault(); (e).preventDefault();
self.createReleases(); 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.trynext_container.adopt(
self.next_release ? [new Element('a.icon.readd', { self.next_release ? [new Element('a.icon.readd', {
+179 -130
View File
@@ -78,24 +78,36 @@
.movies .movie { .movies .movie {
position: relative; position: relative;
border-radius: 4px;
margin: 10px 0; margin: 10px 0;
padding-left: 20px; padding-left: 20px;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 180px; height: 180px;
transition: all 0.6s cubic-bezier(0.9,0,0.1,1); 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 { .movies.details_list .movie {
padding-left: 120px; padding-left: 120px;
} }
.movies.list_list .movie:not(.details_view), .movies.list_list .movie:not(.details_view),
.movies.mass_edit_list .movie { .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 { .movies.thumbs_list .movie {
width: 16.66667%; width: 16.66667%;
height: auto; height: auto;
@@ -103,9 +115,6 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
vertical-align: top; vertical-align: top;
border-radius: 0;
box-shadow: none;
border: 0;
} }
@media all and (max-width: 800px) { @media all and (max-width: 800px) {
@@ -124,16 +133,7 @@
.movies.list_list .movie:not(.details_view), .movies.list_list .movie:not(.details_view),
.movies.mass_edit_list .movie { .movies.mass_edit_list .movie {
margin: 1px 0; margin: 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);
} }
.movies .data { .movies .data {
@@ -141,18 +141,18 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
position: relative; position: relative;
right: 0;
border-radius: 0;
transition: all .6s cubic-bezier(0.9,0,0.1,1); transition: all .6s cubic-bezier(0.9,0,0.1,1);
right: 0;
} }
.movies.list_list .movie:not(.details_view) .data, .movies.list_list .movie:not(.details_view) .data,
.movies.mass_edit_list .movie .data { .movies.mass_edit_list .movie .data {
height: 30px; padding: 0 0 0 10px;
padding: 3px 0 3px 10px;
box-shadow: none;
border: 0; border: 0;
background: #4e5969; background: #4e5969;
} }
.movies.mass_edit_list .movie .data {
padding-left: 8px;
}
.movies.thumbs_list .data { .movies.thumbs_list .data {
position: absolute; position: absolute;
@@ -192,18 +192,16 @@
line-height: 0; line-height: 0;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
border-radius: 4px 0 0 4px;
transition: all .6s cubic-bezier(0.9,0,0.1,1); transition: all .6s cubic-bezier(0.9,0,0.1,1);
background: rgba(0,0,0,.1);
} }
.movies.thumbs_list .poster { .movies.thumbs_list .poster {
position: relative; position: relative;
border-radius: 0;
} }
.movies.list_list .movie:not(.details_view) .poster, .movies.list_list .movie:not(.details_view) .poster,
.movies.mass_edit_list .poster { .movies.mass_edit_list .poster {
width: 20px; width: 20px;
height: 30px; height: 30px;
border-radius: 1px 0 0 1px;
} }
.movies.mass_edit_list .poster { .movies.mass_edit_list .poster {
display: none; display: none;
@@ -231,7 +229,6 @@
width: 100%; width: 100%;
top: 0; top: 0;
bottom: 0; bottom: 0;
border-radius: 0;
opacity: 0; opacity: 0;
} }
@@ -246,22 +243,27 @@
font-weight: bold; font-weight: bold;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 2px; margin-top: 2px;
left: 0;
top: 0;
width: 100%; width: 100%;
padding-right: 80px; padding-right: 80px;
transition: all 0.2s linear; 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 { .movies .info .title span {
display: block; display: inline-block;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
height: 30px; height: 100%;
line-height: 30px; line-height: 30px;
top: -5px;
position: relative;
} }
.movies.thumbs_list .info .title span { .movies.thumbs_list .info .title span {
@@ -298,13 +300,14 @@
font-size: 21px; font-size: 21px;
word-wrap: break-word; word-wrap: break-word;
padding: 0; padding: 0;
height: 100%;
} }
.movies .info .year { .movies .info .year {
position: absolute; position: absolute;
color: #bbb; color: #bbb;
right: 0; right: 0;
top: 1px; top: 6px;
text-align: right; text-align: right;
transition: all 0.2s linear; transition: all 0.2s linear;
font-weight: normal; font-weight: normal;
@@ -348,6 +351,10 @@
min-height: 20px; min-height: 20px;
} }
.movies.list_list .movie:hover .data .quality {
display: none;
}
@media all and (max-width: 480px) { @media all and (max-width: 480px) {
.movies .data .quality { .movies .data .quality {
display: none; display: none;
@@ -380,12 +387,12 @@
right: 0; right: 0;
margin-right: 60px; margin-right: 60px;
z-index: 1; z-index: 1;
top: 5px;
} }
.movies .data .quality .available, .movies .data .quality .available,
.movies .data .quality .snatched { .movies .data .quality .snatched {
opacity: 1; opacity: 1;
box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
cursor: pointer; cursor: pointer;
} }
@@ -471,7 +478,7 @@
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
position: absolute; position: absolute;
padding: 70px 0 0; padding: 80px 0 0;
left: 120px; left: 120px;
right: 0; right: 0;
} }
@@ -496,9 +503,9 @@
} }
.movies .options .form { .movies .options .form {
margin: 70px 20px 0; margin: 80px 0 0;
float: left;
font-size: 20px; font-size: 20px;
text-align: center;
} }
.movies .options .form select { .movies .options .form select {
@@ -508,6 +515,7 @@
.movies .options .table { .movies .options .table {
height: 180px; height: 180px;
overflow: auto; overflow: auto;
line-height: 2em;
} }
.movies .options .table .item { .movies .options .table .item {
border-bottom: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1);
@@ -599,7 +607,6 @@
text-align: center; text-align: center;
padding: 3px 10px; padding: 3px 10px;
background: #4e5969; background: #4e5969;
border-radius: 0 0 2px 2px;
transition: all .2s cubic-bezier(0.9,0,0.1,1) .2s; transition: all .2s cubic-bezier(0.9,0,0.1,1) .2s;
z-index: 11; z-index: 11;
} }
@@ -635,14 +642,13 @@
.movies .movie .trynext { .movies .movie .trynext {
display: inline; display: inline;
position: absolute; position: absolute;
right: 135px; right: 145px;
z-index: 2; z-index: 2;
opacity: 0; opacity: 0;
background: #4e5969; background: #4e5969;
min-width: 300px; min-width: 300px;
text-align: right; text-align: right;
height: 100%; height: 100%;
padding: 3px 0;
top: 0; top: 0;
} }
@@ -661,10 +667,9 @@
.movies.details_list .movie .trynext { .movies.details_list .movie .trynext {
background: #47515f; background: #47515f;
padding: 0; padding: 2px 0;
right: 0; right: 0;
bottom: 35px; height: 25px;
height: auto;
} }
.movies .movie .trynext a { .movies .movie .trynext a {
@@ -672,10 +677,14 @@
padding: 0 5px 0 25px; padding: 0 5px 0 25px;
margin-right: 10px; margin-right: 10px;
color: #FFF; 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 { .movies .movie .trynext a:last-child {
margin: 0; margin: 0;
} }
.movies .movie .trynext a:hover { .movies .movie .trynext a:hover {
background-color: #369545; background-color: #369545;
@@ -692,14 +701,7 @@
} }
.movies .alph_nav { .movies .alph_nav {
transition: box-shadow .4s linear; height: 44px;
position: relative;
z-index: 4;
top: 0px;
right: 0;
margin: 0 auto;
width: 100%;
padding: 10px 0;
} }
@media all and (max-width: 480px) { @media all and (max-width: 480px) {
@@ -708,12 +710,9 @@
} }
} }
.movies .alph_nav > div { .movies .alph_nav .menus {
position: relative; display: inline-block;
max-width: 980px; float: right;
margin: 0 auto;
padding: 0;
min-height: 24px;
} }
.movies .alph_nav .numbers, .movies .alph_nav .numbers,
@@ -722,118 +721,150 @@
list-style: none; list-style: none;
padding: 0 0 1px; padding: 0 0 1px;
margin: 0; margin: 0;
float: left;
user-select: none; user-select: none;
} }
.movies .alph_nav .counter { .movies .alph_nav .counter {
display: inline-block;
text-align: right; text-align: right;
position: absolute; padding: 0 10px;
right: 270px; height: 100%;
background: #4e5969; line-height: 43px;
padding: 4px 10px; border-right: 1px solid rgba(255,255,255,.07);
} }
.movies .alph_nav .numbers li, .movies .alph_nav .numbers li,
.movies .alph_nav .actions li { .movies .alph_nav .actions li {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
height: 24px; height: 100%;
line-height: 23px; line-height: 30px;
text-align: center; text-align: center;
cursor: pointer;
color: rgba(255,255,255,0.2);
border: 1px solid transparent; border: 1px solid transparent;
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
} }
@media all and (max-width: 900px) {
.movies .alph_nav .numbers {
display: none;
}
}
.movies .alph_nav .numbers li { .movies .alph_nav .numbers li {
width: auto; width: 30px;
padding: 0 4px; height: 30px;
opacity: 0.3;
} }
.movies .alph_nav .numbers li.letter_all {
width: 60px;
}
.movies .alph_nav li.available { .movies .alph_nav li.available {
color: #FFF; font-weight: bold;
font-weight: bolder; cursor: pointer;
opacity: 1;
} }
.movies .alph_nav li.active.available, .movies .alph_nav li.active.available,
.movies .alph_nav li.available:hover { .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; padding: 6px 5px;
margin: 0 0 0 20px; width: 100%;
position: absolute; height: 44px;
right: 30px; display: inline-block;
width: 154px; border: 0;
height: 25px; background: none;
transition: all 0.6s cubic-bezier(0.9,0,0.1,1); 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 { .movies .alph_nav .actions {
margin: 0 6px 0 0;
-moz-user-select: none; -moz-user-select: none;
position: absolute; width: 44px;
right: 183px; height: 44px;
display: inline-block;
vertical-align: top;
z-index: 200;
position: relative;
} }
.movies .alph_nav .actions:hover {
box-shadow: 0 100px 20px -10px rgba(0,0,0,0.55);
}
.movies .alph_nav .actions li { .movies .alph_nav .actions li {
border-radius: 1px; width: 100%;
width: auto; height: 45px;
line-height: 40px;
position: relative;
z-index: 20;
display: none;
cursor: pointer;
} }
.movies .alph_nav .actions li.active { .movies .alph_nav .actions:hover li:not(.active) {
background: none; display: block;
border: 1px solid transparent; background: #FFF;
box-shadow: none; color: #444;
} }
.movies .alph_nav .actions li span { .movies .alph_nav .actions li:hover:not(.active) {
display: block; background: #ccc;
background: url('../images/sprite.png') no-repeat; }
width: 25px; .movies .alph_nav .actions li.active {
height: 100%; display: block;
}
.movies .alph_nav .actions li.mass_edit span {
background-position: 3px 3px;
} }
.movies .alph_nav .actions li.list span { .movies .alph_nav .actions li.mass_edit:before {
background-position: 3px -95px; content: "\e070";
} }
.movies .alph_nav .actions li.details span { .movies .alph_nav .actions li.list:before {
background-position: 3px -74px; content: "\e0d8";
} }
.movies .alph_nav .actions li:first-child { .movies .alph_nav .actions li.details:before {
border-radius: 3px 0 0 3px; content: "\e022";
} }
.movies .alph_nav .actions li:last-child {
border-radius: 0 3px 3px 0;
}
.movies .alph_nav .mass_edit_form { .movies .alph_nav .mass_edit_form {
clear: both; clear: both;
text-align: center; text-align: center;
display: none; display: none;
overflow: hidden;
float: left;
height: 44px;
line-height: 44px;
} }
.movies.mass_edit_list .mass_edit_form { .movies.mass_edit_list .mass_edit_form {
display: block; display: inline-block;
} }
.movies.mass_edit_list .mass_edit_form .select { .movies.mass_edit_list .mass_edit_form .select {
float: left;
margin: 5px 0 0 5px;
font-size: 14px; 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; vertical-align: middle;
margin: -4px 0 0 5px;
}
.movies.mass_edit_list .mass_edit_form .select span {
opacity: 0.7; opacity: 0.7;
} }
.movies.mass_edit_list .mass_edit_form .select .count { .movies.mass_edit_list .mass_edit_form .select .count {
@@ -842,8 +873,7 @@
} }
.movies .alph_nav .mass_edit_form .quality { .movies .alph_nav .mass_edit_form .quality {
float: left; display: inline-block;
padding: 8px 0 0;
margin: 0 0 0 16px; margin: 0 0 0 16px;
} }
.movies .alph_nav .mass_edit_form .quality select { .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 .refresh,
.movies .alph_nav .mass_edit_form .delete { .movies .alph_nav .mass_edit_form .delete {
float: left; display: inline-block;
padding: 8px 0 0 8px; margin-left: 8px;
} }
.movies .alph_nav .mass_edit_form .refresh span, .movies .alph_nav .mass_edit_form .refresh span,
@@ -865,16 +895,36 @@
margin: 0 10px 0 0; margin: 0 10px 0 0;
} }
.movies .alph_nav .more_menu {
right: 0;
position: absolute;
}
.movies .alph_nav .more_menu > a { .movies .alph_nav .more_menu > a {
background-color: #4e5969; background: none;
background-position: center -158px;
} }
.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 { .movies .empty_wanted {
background-image: url('../images/emptylist.png'); background-image: url('../images/emptylist.png');
height: 750px; height: 750px;
@@ -887,6 +937,7 @@
text-align: center; text-align: center;
font-size: 25px; font-size: 25px;
line-height: 150%; line-height: 150%;
padding: 40px 0;
} }
.movies .empty_manage .after_manage { .movies .empty_manage .after_manage {
@@ -895,7 +946,6 @@
} }
.movies .progress { .movies .progress {
border-radius: 2px;
padding: 10px; padding: 10px;
margin: 5px 0; margin: 5px 0;
text-align: left; text-align: left;
@@ -910,7 +960,6 @@
width: 49%; width: 49%;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
margin: 2px 0.5%; margin: 2px 0.5%;
border-radius: 3px;
} }
.movies .progress > div .folder { .movies .progress > div .folder {
@@ -11,7 +11,7 @@ var Movie = new Class({
self.view = options.view || 'details'; self.view = options.view || 'details';
self.list = list; self.list = list;
self.el = new Element('div.movie.inlay'); self.el = new Element('div.movie');
self.profile = Quality.getProfile(data.profile_id) || {}; self.profile = Quality.getProfile(data.profile_id) || {};
self.parent(self, options); self.parent(self, options);
@@ -149,8 +149,8 @@ var Movie = new Class({
'events': { 'events': {
'click': function(e){ 'click': function(e){
var releases = self.el.getElement('.actions .releases'); var releases = self.el.getElement('.actions .releases');
if(releases) if(releases.isVisible())
releases.fireEvent('click', [e]) releases.fireEvent('click', [e])
} }
} }
}) })
@@ -44,7 +44,6 @@
.search_form .input input { .search_form .input input {
border-radius: 0; border-radius: 0;
display: block; display: block;
width: 100%;
border: 0; border: 0;
background: rgba(255,255,255,.08); background: rgba(255,255,255,.08);
color: #FFF; color: #FFF;
+17 -6
View File
@@ -15,19 +15,21 @@ Block.Menu = new Class({
self.wrapper = new Element('div.wrapper').adopt( self.wrapper = new Element('div.wrapper').adopt(
self.more_option_ul = new Element('ul') 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': { 'events': {
'click': function(){ 'click': function(){
self.el.toggleClass('show') self.el.toggleClass('show')
self.fireEvent(self.el.hasClass('show') ? 'open' : 'close') self.fireEvent(self.el.hasClass('show') ? 'open' : 'close')
if(self.el.hasClass('show')) if(self.el.hasClass('show')){
this.addEvent('outerClick', function(){ self.el.addEvent('outerClick', self.removeOuterClick.bind(self))
self.el.removeClass('show') this.addEvent('outerClick', function(e){
this.removeEvents('outerClick'); if(e.target.get('tag') != 'input')
self.removeOuterClick()
}) })
}
else 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){ addLink: function(tab, position){
var self = this; var self = this;
var el = new Element('li').adopt(tab).inject(self.more_option_ul, position || 'bottom'); var el = new Element('li').adopt(tab).inject(self.more_option_ul, position || 'bottom');
@@ -67,12 +67,12 @@ Block.Navigation = new Class({
if(!self.added){ if(!self.added){
new Element('li.separator').inject(self.nav); new Element('li.separator').inject(self.nav);
body.getElements('.header .more_menu.menu li a').each(function(el, nr){ body.getElements('.header .more_menu.menu li a, .header .more_menu.menu li span.separator').each(function(el, nr){
if([0, 1, 2, 5].indexOf(nr) > -1){ if(nr <= 2) return;
self.nav.grab( if(el.get('tag') == 'a')
new Element('li').grab(el.clone().cloneEvents(el)) self.nav.grab(new Element('li').grab(el.clone().cloneEvents(el)));
); else
} self.nav.grab(new Element('li.separator'));
}); });
self.added = true; self.added = true;
+36 -22
View File
@@ -68,28 +68,42 @@ var CouchPotato = new Class({
self.block.footer = new Block.Footer(self, {}) self.block.footer = new Block.Footer(self, {})
); );
[new Element('a.orange', { var setting_links = [
'text': 'Restart', new Element('a', {
'events': { 'text': 'About CouchPotato',
'click': self.restartQA.bind(self) 'href': App.createUrl('settings/about')
} }),
}), new Element('a', {
new Element('a.red', { 'text': 'Check for Updates',
'text': 'Shutdown', 'events': {
'events': { 'click': self.checkForUpdate.bind(self, null)
'click': self.shutdownQA.bind(self) }
} }),
}), new Element('span.separator'),
new Element('a', { new Element('a', {
'text': 'Update to latest', 'text': 'Settings',
'events': { 'href': App.createUrl('settings/general')
'click': self.checkForUpdate.bind(self, null) }),
} new Element('a', {
}), 'text': 'Logs',
new Element('a', { 'href': App.createUrl('log')
'text': 'Run install wizard', }),
'href': App.createUrl('wizard') new Element('span.separator'),
})].each(function(a){ 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) self.block.more.addLink(a)
}) })
+1 -1
View File
@@ -78,7 +78,7 @@ Page.Home = new Class({
if(timer) clearTimeout(timer); if(timer) clearTimeout(timer);
timer = (function(){ timer = (function(){
images.setStyle('height', highest); images.setStyle('height', highest);
}).delay(300); }).delay(50);
} }
}); });
}); });
@@ -11,20 +11,6 @@ Page.Settings = new Class({
current: 'about', current: 'about',
has_tab: false, 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){ open: function(action, params){
var self = this; var self = this;
self.action = action == 'index' ? self.default_action : action; self.action = action == 'index' ? self.default_action : action;
+43 -52
View File
@@ -178,13 +178,10 @@ body > .spinner, .mask{
margin: 0; margin: 0;
width: 100%; width: 100%;
z-index: 5; z-index: 5;
background: #4e5969; background: #5c697b;
box-shadow: 0 0 10px rgba(0,0,0,.1); box-shadow: 0 0 10px rgba(0,0,0,.1);
transition: all .4s ease-in-out; transition: all .4s ease-in-out;
} }
.header.with_shadow {
background-color: #46505e;
}
@media all and (max-width: 480px) { @media all and (max-width: 480px) {
.header { .header {
@@ -315,7 +312,7 @@ body > .spinner, .mask{
} }
.menu_shown body { .menu_shown body {
left: 160px; left: 240px;
} }
.header .navigation { .header .navigation {
@@ -327,13 +324,13 @@ body > .spinner, .mask{
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 160px; left: 240px;
} }
.header .navigation ul { .header .navigation ul {
width: 160px; width: 240px;
position: fixed; position: fixed;
left: -160px; left: -240px;
background: rgba(0,0,0,.5); background: rgba(0,0,0,.5);
transition: all .5s cubic-bezier(0.9,0,0.1,1); transition: all .5s cubic-bezier(0.9,0,0.1,1);
} }
@@ -374,26 +371,15 @@ body > .spinner, .mask{
.header .more_menu .button { .header .more_menu .button {
height: 100%; height: 100%;
width: 44px;
border: 0;
box-shadow: none;
border-radius: 0;
background: none;
line-height: 66px; line-height: 66px;
text-align: center; text-align: center;
padding: 0; 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 { .header .more_menu .wrapper {
width: 150px; width: 200px;
margin-left: -106px; margin-left: -106px;
margin-top: 66px; margin-top: 22px;
} }
@media all and (max-width: 480px) { @media all and (max-width: 480px) {
@@ -402,7 +388,7 @@ body > .spinner, .mask{
} }
.header .more_menu .wrapper { .header .more_menu .wrapper {
margin-top: 44px; margin-top: 0;
} }
} }
@@ -439,12 +425,10 @@ body > .spinner, .mask{
} }
.header .notification_menu ul { .header .notification_menu ul {
min-height: 80px;
max-height: 300px; max-height: 300px;
overflow: auto; overflow: auto;
} text-align: center;
.header .notification_menu > a {
background-position: center -209px;
} }
.header .notification_menu li > span { .header .notification_menu li > span {
@@ -491,6 +475,7 @@ body > .spinner, .mask{
width: 16px; width: 16px;
cursor: pointer; cursor: pointer;
background: url('../images/sprite.png') no-repeat -200px; background: url('../images/sprite.png') no-repeat -200px;
border-radius: 3px;
} }
.check.highlighted { background-color: #424c59; } .check.highlighted { background-color: #424c59; }
.check.checked { background-position: -2px 0; } .check.checked { background-position: -2px 0; }
@@ -566,15 +551,14 @@ body > .spinner, .mask{
.inlay { .inlay {
color: #fff; color: #fff;
border: 0; border: 0;
border-radius:3px;
background-color: #282d34; 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 { .inlay.light {
background-color: #47515f; background-color: #47515f;
outline: none; 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 { .inlay:focus {
@@ -585,7 +569,7 @@ body > .spinner, .mask{
.onlay, .inlay .selected, .inlay:not(.reversed) > li:hover, .inlay > li.active, .inlay.reversed > li { .onlay, .inlay .selected, .inlay:not(.reversed) > li:hover, .inlay > li.active, .inlay.reversed > li {
border-radius:3px; border-radius:3px;
border: 1px solid #252930; 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: rgb(55,62,74);
background-image: linear-gradient( background-image: linear-gradient(
0, 0,
@@ -597,7 +581,7 @@ body > .spinner, .mask{
color: #fff; color: #fff;
border: 1px solid transparent; border: 1px solid transparent;
background-color: #282d34; 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 { .question {
@@ -648,38 +632,37 @@ body > .spinner, .mask{
.more_menu > a { .more_menu > a {
display: block; display: block;
background: url('../images/sprite.png') no-repeat center -137px; height: 44px;
height: 25px; width: 44px;
width: 25px;
border: 1px solid rgba(0,0,0,0.3);
transition: all 0.3s ease-in-out; 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 { .more_menu .wrapper {
display: none; display: none;
background: rgba(255,255,255,0.98);
top: 0; top: 0;
right: 0; right: 0;
padding: 4px; margin: 11px 0 0 0;
margin: 26px 0 0 0;
position: absolute; position: absolute;
z-index: 90; z-index: 90;
width: 185px; width: 185px;
box-shadow: 0 20px 20px -5px rgba(0,0,0,0.1); box-shadow: 0 20px 20px -10px rgba(0,0,0,0.55);
text-align: center; color: #444;
color: #000; background: #fff;
background-image: linear-gradient(
-45deg,
rgb(200,200,200) 0%,
rgb(255,255,255) 100%
);
} }
.more_menu.show .wrapper { .more_menu.show .wrapper {
display: block; display: block;
top: 44px;
} }
.more_menu ul { .more_menu ul {
@@ -698,11 +681,19 @@ body > .spinner, .mask{
border-bottom: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2);
box-shadow: none; box-shadow: none;
font-weight: normal; font-weight: normal;
font-size: 11px; font-size: 1.2em;
text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
padding: 3px 0; padding: 2px 10px;
color: #000; 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 { .more_menu .wrapper li:last-child a {
+2 -1
View File
@@ -576,7 +576,8 @@
.page .tab_about .usenet { .page .tab_about .usenet {
padding: 20px 30px 0; padding: 20px 30px 0;
font-size: 17px; font-size: 1.5em;
line-height: 1.3em;
} }
.page .tab_about .usenet a { .page .tab_about .usenet a {