Some restyling
This commit is contained in:
@@ -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(){
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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');
|
||||
|
||||
|
||||
@@ -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})
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user