dinislage/CouchPotatoServer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Movie details page

Browse Source
This commit is contained in:
Ruud
2014-12-17 17:10:40 +01:00
parent a08df704be
commit ae6affdb52
8 changed files with 268 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
couchpotato/core/media/movie/_base/static/details.js
+41
View File
@@ -0,0 +1,41 @@
var MovieDetails = new Class({
Extends: BlockBase,
sections: null,
initialize: function(parent, options){
var self = this;
self.sections = {};
self.el = new Element('div',{
'class': 'page active movie_details level_' + (options.level || 0)
}).adopt(
self.overlay = new Element('div.overlay').grab(
new Element('a.close.icon-left-arrow')
),
self.content = new Element('div.content').grab(
new Element('h1', {
'text': 'Title'
})
)
);
self.addSection('description', new Element('div', {
'text': 'Description'
}));
},
addSection: function(name, section_el){
var self = this;
self.content.grab(
self.sections[name] = new Element('div', {
'class': 'section section_' + name
}).grab(section_el)
);
}
});
couchpotato/core/media/movie/_base/static/list.js
+2 -2
View File
@@ -48,7 +48,7 @@ var MovieList = new Class({
if($(window).getSize().x <= 480 && !self.options.force_view)
self.changeView('list');
else
self.changeView(self.getSavedView() || self.options.view || 'details');
self.changeView(self.getSavedView() || self.options.view || 'thumb');
self.getMovies();
@@ -308,7 +308,7 @@ var MovieList = new Class({
);
// Actions
['mass_edit', 'details', 'list'].each(function(view){
['thumb', 'list'].each(function(view){
var current = self.current_view == view;
new Element('li', {
'class': 'icon2 ' + view + (current ? ' active ' : ''),
couchpotato/core/media/movie/_base/static/movie.js
+20 -46
View File
@@ -3,15 +3,33 @@ var Movie = new Class({
Extends: BlockBase,
action: {},
details: null,
initialize: function(list, options, data){
var self = this;
self.data = data;
self.view = options.view || 'details';
self.list = list;
self.el = new Element('div.movie');
self.el = new Element('a.movie', {
'events': {
'click': function(e){
(e).stop();
if(!self.details)
self.details = new MovieDetails(self, {
'level': 3
});
App.getPageContainer().grab(self.details);
self.details.addSection('test', new Element('div.test', {
'text': '.'
}));
}
}
});
self.profile = Quality.getProfile(data.profile_id) || {};
self.category = CategoryList.getCategory(data.category_id) || {};
@@ -202,7 +220,6 @@ var Movie = new Class({
if(!self.thumbnail)
self.el.addClass('no_thumbnail');
//self.changeView(self.view);
self.select_checkbox_class = new Form.Check(self.select_checkbox);
// Add profile
@@ -281,49 +298,6 @@ var Movie = new Class({
return t;
},
slide: function(direction, el){
var self = this;
if(direction == 'in'){
self.temp_view = self.view;
self.changeView('details');
self.el.addEvent('outerClick', function(){
self.removeView();
self.slide('out');
});
el.show();
self.data_container.addClass('hide_right');
}
else {
self.el.removeEvents('outerClick');
setTimeout(function(){
if(self.el)
self.el.getElements('> :not(.data):not(.poster):not(.movie_container)').hide();
}, 600);
self.data_container.removeClass('hide_right');
}
},
changeView: function(new_view){
var self = this;
if(self.el)
self.el
.removeClass(self.view+'_view')
.addClass(new_view+'_view');
self.view = new_view;
},
removeView: function(){
var self = this;
self.el.removeClass(self.view+'_view');
},
getIdentifier: function(){
var self = this;
couchpotato/core/media/movie/_base/static/movie.scss
+171 -118
View File
@@ -1,138 +1,191 @@
@import "couchpotato/static/style/mixins";
.movies {
.page.movies {
z-index: 21; // Sets navigation above
}
.list_list {
font-size: 15px;
font-weight: 300;
background: #f2f2f2;
.list_list {
font-size: 15px;
font-weight: 300;
background: #f2f2f2;
.poster {
display: none;
}
.movie {
border-bottom: 1px solid #e6e6e6;
position: relative;
cursor: pointer;
&:last-child {
border-bottom: none;
}
&:hover {
background: rgba(0,0,0,.1);
}
.data {
padding: $padding/2 $padding;
.info {
@include flexbox();
flex-flow: row nowrap;
.title {
@include flex(1 auto);
.year {
display: inline-block;
margin-left: 10px;
opacity: .5;
}
}
.quality {
span {
color: #FFF;
font-size: .8em;
padding: 2px 4px;
background: rgba(0,0,0,.2);
border-radius: 1px;
margin-left: 2px;
}
}
}
}
}
}
.thumb_list {
font-size: 12px;
padding: $padding/2 $padding;
.movie {
@include span(6);
float: left;
margin-bottom: $padding;
&:nth-child(4n+4){
@include span(last);
}
&:nth-child(4n+5){
clear: both;
}
.poster {
display: none;
}
.movie {
border-bottom: 1px solid #e6e6e6;
position: relative;
cursor: pointer;
&:last-child {
border-bottom: none;
}
&:hover {
background: rgba(0,0,0,.1);
}
.data {
padding: $padding/2 $padding;
.info {
@include flexbox();
flex-flow: row nowrap;
.title {
@include flex(1 auto);
.year {
display: inline-block;
margin-left: 10px;
opacity: .5;
}
}
.quality {
span {
color: #FFF;
font-size: .8em;
padding: 2px 4px;
background: rgba(0,0,0,.2);
border-radius: 1px;
}
}
}
}
}
}
.thumb_list {
font-size: 12px;
padding: $padding/2 $padding;
.movie {
@include span(6);
border-radius: 2px;
overflow: hidden;
width: 100%;
float: left;
margin-bottom: $padding;
opacity: .05;
}
&:nth-child(4n+4){
@include span(last);
}
.data {
clear: both;
&:nth-child(4n+5){
clear: both;
}
.info {
.poster {
border-radius: 2px;
overflow: hidden;
width: 100%;
float: left;
}
.title {
@include flexbox();
padding: 3px 0;
.data {
clear: both;
.info {
.title {
@include flexbox();
padding: 3px 0;
span {
@include flex(1 auto);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.year {
display: inline-block;
margin-left: 5px;
opacity: .5;
}
}
.quality {
span {
@include flex(1 auto);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
span {
color: #FFF;
font-size: .8em;
padding: 2px 4px;
background: rgba(0,0,0,.2);
border-radius: 1px;
margin-right: 2px;
}
.year {
display: inline-block;
margin-left: 5px;
opacity: .5;
}
}
.quality {
white-space: nowrap;
overflow: hidden;
span {
color: #FFF;
font-size: .8em;
padding: 2px 4px;
background: rgba(0,0,0,.2);
border-radius: 1px;
margin-right: 2px;
}
}
}
}
}
.check {
position: absolute;
top: 0;
left: $padding;
display: none;
}
.eta {
display: none;
}
}
.check {
position: absolute;
top: 0;
left: $padding;
display: none;
}
.eta {
display: none;
}
.page.movie_details {
$gab-width: $header-width/3;
.overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: $header-width;
background: rgba(0,0,0,.6);
border-radius: 3px 0 0 3px;
.close {
display: inline-block;
text-align: center;
font-size: 60px;
line-height: $header-height;
color: #FFF;
width: $gab-width;
cursor: pointer;
height: 100%;
}
}
.content {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: $header-width + $gab-width;
background: $background_color;
z-index: 200;
border-radius: 3px 0 0 3px;
h1 {
margin: 0;
padding: 0 $padding;
font-size: 24px;
line-height: $header-height;
color: rgba(0,0,0,.5);
font-weight: 300;
}
.section {
padding: $padding/2 $padding;
border-bottom: 1px solid rgba(0,0,0,.1);
}
}
}
couchpotato/static/scripts/couchpotato.js
+9 -3
View File
@@ -82,7 +82,7 @@
self.block.more = new BlockMenu(self, {'button_class': 'icon2.cog'})
),
self.content = new Element('div.content').adopt(
self.pages = new Element('div.pages'),
self.pages_container = new Element('div.pages'),
self.block.footer = new BlockFooter(self, {})
)
);
@@ -143,7 +143,9 @@
var pages = [];
Object.each(Page, function(page_class, class_name){
var pg = new Page[class_name](self, {});
var pg = new Page[class_name](self, {
'level': 1
});
self.pages[class_name] = pg;
pages.include({
@@ -156,7 +158,7 @@
pages.stableSort(self.sortPageByOrder).each(function(page){
page['class'].load();
self.fireEvent('load'+page.name);
$(page['class']).inject(self.pages);
$(page['class']).inject(self.getPageContainer());
});
self.fireEvent('load');
@@ -207,6 +209,10 @@
return this.pages[name];
},
getPageContainer: function(){
return this.pages_container;
},
shutdown: function(){
var self = this;
couchpotato/static/scripts/page.js
+14 -7
View File
@@ -20,7 +20,9 @@ var PageBase = new Class({
self.setOptions(options);
// Create main page container
self.el = new Element('div.page.'+self.name);
self.el = new Element('div', {
'class': 'page ' + self.getPageClass() + (' level_' + (options.level || 0))
});
},
load: function(){
@@ -55,11 +57,11 @@ var PageBase = new Class({
var sub_pages = self.sub_pages;
self.pages = new Element('div.pages').inject(self.el);
self.sub_pages = [];
sub_pages.each(function(class_name){
var pg = new window[self.name.capitalize()+class_name](self, {});
var pg = new window[self.name.capitalize()+class_name](self, {
'level': 2
});
self.sub_pages[class_name] = pg;
self.sub_pages.include({
@@ -73,7 +75,7 @@ var PageBase = new Class({
page['class'].load();
self.fireEvent('load'+page.name);
$(page['class']).inject(self.pages);
$(page['class']).inject(App.getPageContainer());
});
},
@@ -83,9 +85,9 @@ var PageBase = new Class({
//p('Opening: ' +self.getName() + ', ' + action + ', ' + Object.toQueryString(params));
try {
var elements
var elements;
if(!self[action+'Action']){
elements = self['defaultAction'](action, params);
elements = self.defaultAction(action, params);
}
else {
elements = self[action+'Action'](params);
@@ -114,6 +116,11 @@ var PageBase = new Class({
return (self.parent_page && self.parent_page.getPageUrl ? self.parent_page.getPageUrl() + '/' : '') + self.name;
},
getPageClass: function(){
var self = this;
return (self.parent_page && self.parent_page.getPageClass ? self.parent_page.getPageClass() + '_' : '') + self.name;
},
errorAction: function(e){
p('Error, action not found', e);
},
couchpotato/static/style/main.scss
+10 -8
View File
@@ -24,7 +24,7 @@ a {
}
.header {
width: 130px;
width: $header-width;
font-weight: 200;
@@ -37,6 +37,7 @@ a {
.logo {
background: $couch_color;
opacity: .05;
display: block;
text-align: center;
@@ -100,12 +101,6 @@ a {
display: none;
padding: $padding 0;
.page {
margin-top: $header-height - $padding;
z-index: 10;
padding: 0;
}
&.active {
display: block;
}
@@ -115,9 +110,10 @@ a {
position: fixed;
top: 0;
height: $header-height;
left: 130px;
left: $header-width;
right: 0;
background: $background_color;
border-radius: 3px 0 0 3px;
z-index: 100;
ul {
@@ -148,3 +144,9 @@ a {
}
}
@for $i from 1 through 4 {
.level_#{$i} {
z-index: #{$i * 10};
}
}
couchpotato/static/style/mixins.scss
+1
View File
@@ -4,6 +4,7 @@ $menu_color: #111;
$theme_off: #f2f2f2;
$header-height: 80px;
$header-width: 130px;
$padding: 20px;
@import "susy";