dockeruser
/
CouchPotatoServer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Movie details page

pull/5180/head
Ruud 11 years ago
parent
a08df704be
commit
ae6affdb52
8 changed files with 244 additions and 160 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 41
      couchpotato/core/media/movie/_base/static/details.js
  2. 4
      couchpotato/core/media/movie/_base/static/list.js
  3. 66
      couchpotato/core/media/movie/_base/static/movie.js
  4. 241
      couchpotato/core/media/movie/_base/static/movie.scss
  5. 12
      couchpotato/static/scripts/couchpotato.js
  6. 21
      couchpotato/static/scripts/page.js
  7. 18
      couchpotato/static/style/main.scss
  8. 1
      couchpotato/static/style/mixins.scss

41
couchpotato/core/media/movie/_base/static/details.js
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)
);
}
});

4
couchpotato/core/media/movie/_base/static/list.js
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 ' : ''),

66
couchpotato/core/media/movie/_base/static/movie.js
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;

241
couchpotato/core/media/movie/_base/static/movie.scss
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;
}
.poster {
display: none;
}
.movie {
border-bottom: 1px solid #e6e6e6;
position: relative;
cursor: pointer;
.movie {
border-bottom: 1px solid #e6e6e6;
position: relative;
cursor: pointer;
&:last-child {
border-bottom: none;
}
&:last-child {
border-bottom: none;
}
&:hover {
background: rgba(0,0,0,.1);
}
&:hover {
background: rgba(0,0,0,.1);
}
.data {
padding: $padding/2 $padding;
.data {
padding: $padding/2 $padding;
.info {
.info {
@include flexbox();
flex-flow: row nowrap;
@include flexbox();
flex-flow: row nowrap;
.title {
@include flex(1 auto);
.title {
@include flex(1 auto);
.year {
display: inline-block;
margin-left: 10px;
opacity: .5;
}
.year {
display: inline-block;
margin-left: 10px;
opacity: .5;
}
}
.quality {
.quality {
span {
color: #FFF;
font-size: .8em;
padding: 2px 4px;
background: rgba(0,0,0,.2);
border-radius: 1px;
}
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;
.thumb_list {
&:nth-child(4n+4){
@include span(last);
}
font-size: 12px;
padding: $padding/2 $padding;
&:nth-child(4n+5){
clear: both;
}
.movie {
@include span(6);
float: left;
margin-bottom: $padding;
.poster {
border-radius: 2px;
overflow: hidden;
width: 100%;
float: left;
}
&: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;
opacity: .05;
}
.title {
@include flexbox();
padding: 3px 0;
.data {
clear: both;
span {
@include flex(1 auto);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.info {
.year {
display: inline-block;
margin-left: 5px;
opacity: .5;
}
}
.title {
@include flexbox();
padding: 3px 0;
.quality {
span {
@include flex(1 auto);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.year {
display: inline-block;
margin-left: 5px;
opacity: .5;
}
}
span {
color: #FFF;
font-size: .8em;
padding: 2px 4px;
background: rgba(0,0,0,.2);
border-radius: 1px;
margin-right: 2px;
}
.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;
}
.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;
left: $padding;
display: none;
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%;
}
}
.eta {
display: none;
}
.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);
}
}
}

12
couchpotato/static/scripts/couchpotato.js
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;

21
couchpotato/static/scripts/page.js
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);
},

18
couchpotato/static/style/main.scss
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};
}
}

1
couchpotato/static/style/mixins.scss
View File

@ -4,6 +4,7 @@ $menu_color: #111;
$theme_off: #f2f2f2;
$header-height: 80px;
$header-width: 130px;
$padding: 20px;
@import "susy";

Write Preview
Loading…
Cancel
Save