Some restyling

This commit is contained in:
Ruud committed 2012-01-21 23:09:16 +01:00
1 parent 470629d398
commit ef036688d6
5 files changed
+97 -111

No files matched your search

+16 -1
View File
@@ -100,6 +100,7 @@ var MovieList = new Class({
} }
}), }),
self.search_input = new Element('input.inlay', { self.search_input = new Element('input.inlay', {
'placeholder': 'Search',
'events': { 'events': {
'keyup': self.search.bind(self), 'keyup': self.search.bind(self),
'change': self.search.bind(self) 'change': self.search.bind(self)
@@ -114,7 +115,7 @@ var MovieList = new Class({
// All // All
self.letters['all'] = new Element('li.letter_all.active', { self.letters['all'] = new Element('li.letter_all.active', {
'text': 'all', 'text': 'ALL',
}).inject(self.alpha); }).inject(self.alpha);
// Chars // Chars
@@ -126,6 +127,20 @@ var MovieList = new Class({
}).inject(self.alpha); }).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(){ reset: function(){
+73 -63
View File
@@ -9,13 +9,14 @@
} }
.movies .movie { .movies .movie {
overflow: hidden;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
margin: 10px 0; margin: 10px 0;
overflow: hidden;
} }
.movies .movie:hover { .movies .movie:hover {
border-color: #ddd #fff #fff #ddd; border-color: #ddd #fff #fff #ddd;
@@ -24,42 +25,27 @@
} }
.movies .data { .movies .data {
padding: 2%; padding: 2%;
position: absolute; width: 83%;
width: 96.1%; position: relative;
top: 0; float: right;
left: 0;
border-radius: 4px; border-radius: 0;
-moz-border-radius: 4px; -moz-border-radius: 0;
-webkit-border-radius: 4px; -webkit-border-radius: 0;
}
.movies .data:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.movies .data .poster, .options .poster {
overflow: hidden; 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 { .movies .poster {
width: 100%; float: left;
width: 13%;
line-height: 0;
overflow: hidden;
}
.movies .poster img, .options .poster img {
width: 101%;
height: 176px;
} }
.movies .info { .movies .info {
float: right;
width: 88%;
} }
.movies .info .title { .movies .info .title {
@@ -90,22 +76,30 @@
.movies .info .description { .movies .info .description {
clear: both; clear: both;
width: 95%; height: 80px;
overflow: hidden;
} }
.movies .data:hover .description {
overflow: auto;
}
.movies .data .quality {
}
.movies .data .quality span { .movies .data .quality span {
padding: 5px; padding: 0 5px;
font-weight: bold; font-weight: bold;
} }
.movies .data .quality span:first-child {padding-left: 0;}
.movies .data .quality .available { color: orange; } .movies .data .quality .available { color: orange; }
.movies .data .quality .snatched { color: lightgreen; } .movies .data .quality .snatched { color: lightgreen; }
.movies .data .actions { .movies .data .actions {
position: absolute;
right: 15px;
bottom: 15px;
line-height: 0; line-height: 0;
clear: both;
float: right;
margin-top: -25px;
} }
.movies .data:hover .action { opacity: 0.6; } .movies .data:hover .action { opacity: 0.6; }
.movies .data:hover .action:hover { opacity: 1; } .movies .data:hover .action:hover { opacity: 1; }
@@ -124,7 +118,9 @@
clear: both; clear: both;
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
position: relative; position: absolute;
padding: 70px 0 0;
width: 100%;
} }
.movies .delete_container .cancel { .movies .delete_container .cancel {
} }
@@ -139,26 +135,27 @@
color: #fff; color: #fff;
background-color: #d32917; background-color: #d32917;
} }
.movies .options {
position: absolute;
width: 83%;
margin-left: 15%;
}
.movies .options .form { .movies .options .form {
margin-top: -2%; margin-top: 70px;
float: left; float: left;
font-size: 20px; font-size: 20px;
} }
.movies .options .form select {
margin-right: 20px;
}
.movies .options { .movies .options .form select {
padding: 2%; margin-right: 20px;
} }
.movies .options .table { .movies .options .table {
height: 157px; height: 176px;
overflow: auto; overflow: auto;
margin: -20px -20px -20px 110px; margin: 0 -2%;
padding: 15px 0 5px;
} }
.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);
@@ -195,6 +192,7 @@
text-align: left; text-align: left;
padding: 0 10px; padding: 0 10px;
} }
.movies .options .table.files .name { width: 570px; }
.movies .options .table .type { width: 120px; } .movies .options .table .type { width: 120px; }
.movies .options .table .is_available { width: 80px; } .movies .options .table .is_available { width: 80px; }
@@ -224,13 +222,16 @@
.movies .load_more.loading { .movies .load_more.loading {
opacity: .5; opacity: .5;
} }
.movies .alph_nav {
overflow: hidden;
}
.movies .alph_nav ul { .movies .alph_nav ul {
list-style: none; list-style: none;
padding: 0; padding: 0 0 1px;
margin: 0; margin: 0;
float: left;
display: inline-block;
} }
.movies .alph_nav li { .movies .alph_nav li {
@@ -241,13 +242,22 @@
line-height: 26px; line-height: 26px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
margin: 0 -1px 0 0;
color: #666; 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; color: #fff;
} }
.movies .alph_nav li.available {
.movies .alph_nav li:hover, .movies .alph_nav li.onlay { color: #fff;
font-weight: bold; }
}
.movies .alph_nav input {
padding: 6px 5px;
margin: 0;
float: right;
}
+4 -33
View File
@@ -11,13 +11,13 @@ var Movie = new Class({
self.profile = Quality.getProfile(data.profile_id) || {}; self.profile = Quality.getProfile(data.profile_id) || {};
self.parent(self, options); self.parent(self, options);
self.addEvent('injected', self.afterInject.bind(self))
}, },
create: function(){ create: function(){
var self = this; var self = this;
self.el = new Element('div.movie.inlay').adopt( 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', { self.data_container = new Element('div.data.inlay.light', {
'tween': { 'tween': {
duration: 400, duration: 400,
@@ -25,7 +25,6 @@ var Movie = new Class({
onComplete: self.fireEvent.bind(self, 'slideEnd') onComplete: self.fireEvent.bind(self, 'slideEnd')
} }
}).adopt( }).adopt(
self.thumbnail = File.Select.single('poster', self.data.library.files),
self.info_container = new Element('div.info').adopt( self.info_container = new Element('div.info').adopt(
self.title = new Element('div.title', { self.title = new Element('div.title', {
'text': self.getTitle() '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(){ getTitle: function(){
var self = this; var self = this;
@@ -120,37 +110,19 @@ var Movie = new Class({
if(direction == 'in'){ if(direction == 'in'){
self.el.addEvent('outerClick', self.slide.bind(self, 'out')) self.el.addEvent('outerClick', self.slide.bind(self, 'out'))
el.show(); el.show();
self.data_container.tween('left', 0, self.getWidth()); self.data_container.tween('right', 0, -840);
} }
else { else {
self.el.removeEvents('outerClick') self.el.removeEvents('outerClick')
self.addEvent('slideEnd:once', function(){ 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){ get: function(attr){
return this.data[attr] || this.data.library[attr] return this.data[attr] || this.data.library[attr]
} }
@@ -240,7 +212,6 @@ var ReleaseAction = new Class({
if(!self.options_container){ if(!self.options_container){
self.options_container = new Element('div.options').adopt( self.options_container = new Element('div.options').adopt(
$(self.movie.thumbnail).clone(),
self.release_container = new Element('div.releases.table') self.release_container = new Element('div.releases.table')
).inject(self.movie, 'top'); ).inject(self.movie, 'top');
+3 -13
View File
@@ -52,12 +52,7 @@ window.addEvent('domready', function(){
if(!self.options_container){ if(!self.options_container){
self.options_container = new Element('div.options').adopt( self.options_container = new Element('div.options').adopt(
$(self.movie.thumbnail).clone(), new Element('div.form').adopt(
new Element('div.form', {
'styles': {
'line-height': self.movie.getHeight()
}
}).adopt(
self.title_select = new Element('select', { self.title_select = new Element('select', {
'name': 'title' 'name': 'title'
}), }),
@@ -167,11 +162,7 @@ window.addEvent('domready', function(){
(e).stop(); (e).stop();
if(!self.delete_container){ if(!self.delete_container){
self.delete_container = new Element('div.delete_container', { self.delete_container = new Element('div.delete_container').adopt(
'styles': {
'line-height': self.movie.getHeight()
}
}).adopt(
new Element('a.cancel', { new Element('a.cancel', {
'text': 'Cancel', 'text': 'Cancel',
'events': { 'events': {
@@ -265,7 +256,6 @@ window.addEvent('domready', function(){
if(!self.options_container){ if(!self.options_container){
self.options_container = new Element('div.options').adopt( self.options_container = new Element('div.options').adopt(
$(self.movie.thumbnail).clone(),
self.files_container = new Element('div.files.table') self.files_container = new Element('div.files.table')
).inject(self.movie, 'top'); ).inject(self.movie, 'top');
@@ -281,7 +271,7 @@ window.addEvent('domready', function(){
var rel = new Element('div.release').inject(self.files_container); var rel = new Element('div.release').inject(self.files_container);
Array.each(release.files, function(file){ 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.name', {'text': file.path}),
new Element('span.type', {'text': File.Type.get(file.type_id).name}), new Element('span.type', {'text': File.Type.get(file.type_id).name}),
new Element('span.available', {'text': file.available}) new Element('span.available', {'text': file.available})
+1 -1
View File
@@ -365,7 +365,7 @@ body > .spinner, .mask{
outline: none; outline: none;
} }
.onlay, .inlay .selected, .inlay > li:hover { .onlay, .inlay .selected, .inlay > li:hover, .inlay > li.active {
border-radius:3px; border-radius:3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;