Some restyling

This commit is contained in:
Ruud
2012-01-21 23:09:16 +01:00
parent 470629d398
commit ef036688d6
5 changed files with 97 additions and 111 deletions
+16 -1
View File
@@ -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(){
+73 -63
View File
@@ -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;
}
.movies .alph_nav li.available {
color: #fff;
}
.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.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');
+3 -13
View File
@@ -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})
+1 -1
View File
@@ -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;