From ae6affdb52ba1fa7db19f405c9582f780dccc0d5 Mon Sep 17 00:00:00 2001
From: Ruud <ruud@crashdummy.nl>
Date: Wed, 17 Dec 2014 17:10:40 +0100
Subject: [PATCH] Movie details page

---
 .../core/media/movie/_base/static/details.js       |  41 ++++
 couchpotato/core/media/movie/_base/static/list.js  |   4 +-
 couchpotato/core/media/movie/_base/static/movie.js |  66 ++----
 .../core/media/movie/_base/static/movie.scss       | 241 +++++++++++++--------
 couchpotato/static/scripts/couchpotato.js          |  12 +-
 couchpotato/static/scripts/page.js                 |  21 +-
 couchpotato/static/style/main.scss                 |  18 +-
 couchpotato/static/style/mixins.scss               |   1 +
 8 files changed, 244 insertions(+), 160 deletions(-)
 create mode 100644 couchpotato/core/media/movie/_base/static/details.js

diff --git a/couchpotato/core/media/movie/_base/static/details.js b/couchpotato/core/media/movie/_base/static/details.js
new file mode 100644
index 0000000..88cd69f
--- /dev/null
+++ b/couchpotato/core/media/movie/_base/static/details.js
@@ -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)
+		);
+	}
+
+});
\ No newline at end of file
diff --git a/couchpotato/core/media/movie/_base/static/list.js b/couchpotato/core/media/movie/_base/static/list.js
index 6fa75b8..5004cf1 100644
--- a/couchpotato/core/media/movie/_base/static/list.js
+++ b/couchpotato/core/media/movie/_base/static/list.js
@@ -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 ' : ''),
diff --git a/couchpotato/core/media/movie/_base/static/movie.js b/couchpotato/core/media/movie/_base/static/movie.js
index e83a7d9..7ab43bf 100644
--- a/couchpotato/core/media/movie/_base/static/movie.js
+++ b/couchpotato/core/media/movie/_base/static/movie.js
@@ -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;
 
diff --git a/couchpotato/core/media/movie/_base/static/movie.scss b/couchpotato/core/media/movie/_base/static/movie.scss
index d9f3cc8..eedbe2e 100644
--- a/couchpotato/core/media/movie/_base/static/movie.scss
+++ b/couchpotato/core/media/movie/_base/static/movie.scss
@@ -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);
+		}
+	}
 }
diff --git a/couchpotato/static/scripts/couchpotato.js b/couchpotato/static/scripts/couchpotato.js
index 8e50032..f05920e 100644
--- a/couchpotato/static/scripts/couchpotato.js
+++ b/couchpotato/static/scripts/couchpotato.js
@@ -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;
 
diff --git a/couchpotato/static/scripts/page.js b/couchpotato/static/scripts/page.js
index 9922009..7cc50eb 100644
--- a/couchpotato/static/scripts/page.js
+++ b/couchpotato/static/scripts/page.js
@@ -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);
 	},
diff --git a/couchpotato/static/style/main.scss b/couchpotato/static/style/main.scss
index fca649b..3e8b4c8 100644
--- a/couchpotato/static/style/main.scss
+++ b/couchpotato/static/style/main.scss
@@ -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};
+    }
+}
\ No newline at end of file
diff --git a/couchpotato/static/style/mixins.scss b/couchpotato/static/style/mixins.scss
index 040c0af..54f0d20 100644
--- a/couchpotato/static/style/mixins.scss
+++ b/couchpotato/static/style/mixins.scss
@@ -4,6 +4,7 @@ $menu_color: #111;
 $theme_off: #f2f2f2;
 
 $header-height: 80px;
+$header-width: 130px;
 $padding: 20px;
 
 @import "susy";