Movie lists

couchpotato/core/_base/clientscript.py

@@ -40,6 +40,7 @@ class ClientScript(Plugin):
             'scripts/page.js',
             'scripts/block.js',
             'scripts/block/navigation.js',
+            'scripts/block/header.js',
             'scripts/block/footer.js',
             'scripts/block/menu.js',
             'scripts/page/home.js',

couchpotato/core/media/movie/_base/static/movie.js

@@ -181,9 +181,6 @@ var Movie = new Class({
 							'text': self.data.info.year || 'n/a'
 						})
 					),
-					self.description = new Element('div.description.tiny_scroll', {
-						'text': self.data.info.plot
-					}),
 					self.eta = eta_date && (now+8035200 > eta) ? new Element('div.eta', {
 						'text': eta_date,
 						'title': 'ETA'

couchpotato/core/media/movie/_base/static/page.js

@@ -4,9 +4,38 @@ Page.Movies = new Class({
 
 	name: 'movies',
 	sub_pages: ['Wanted', 'Manage'],
+	default_page: 'Wanted',
+	current_page: null,
+
+	initialize: function(parent, options){
+		var self = this;
+		self.parent(parent, options);
+
+		self.navigation = new BlockNavigation();
+		$(self.navigation).inject(self.el, 'top');
+
+	},
+
+	defaultAction: function(action, params){
+		var self = this;
+
+		if(self.current_page)
+			self.current_page.hide();
+
+		var route = new Route();
+			route.parse(action);
+
+		var page_name = route.getPage() != 'index' ? route.getPage().capitalize() : self.default_page;
+
+		var page = self.sub_pages.filter(function(page){
+			return page.name == page_name;
+		}).pick()['class'];
+
+		page.open(route.getAction() || 'index', params);
+		page.show();
+
+		self.current_page = page;
 
-	indexAction: function(){
-		p('test');
 	}
 
 });

couchpotato/static/scripts/block/header.js

@@ -0,0 +1,66 @@
+var BlockHeader = new Class({
+
+	Extends: BlockNavigation,
+
+	create: function(){
+		var self = this;
+
+		self.parent();
+
+		self.el.adopt(
+			self.foldout = new Element('a.foldout.icon2.menu', {
+				'events': {
+					'click': self.toggleMenu.bind(self)
+				}
+			}).grab(new Element('span.overlay')),
+			self.logo = new Element('a.logo', {
+				'html': '<span>Couch</span><span>Potato</span>',
+				'href': App.createUrl('')
+			}),
+			self.nav
+		);
+
+		new ScrollSpy({
+			min: 400,
+			onLeave: function(){
+				self.backtotop.fade('out');
+			},
+			onEnter: function(){
+				self.backtotop.fade('in');
+			}
+		});
+
+		self.nav.addEvents({
+			'click:relay(a)': function(){
+				if($(document.body).getParent().hasClass('menu_shown'))
+					self.toggleMenu();
+			}
+		});
+
+	},
+
+	toggleMenu: function(){
+		var self = this,
+			body = $(document.body),
+			html = body.getParent();
+
+		// Copy over settings menu
+		if(!self.added){
+
+			new Element('li.separator').inject(self.nav);
+			body.getElements('.header .more_menu.menu li a, .header .more_menu.menu li span.separator').each(function(el, nr){
+				if(nr <= 2) return;
+				if(el.get('tag') == 'a')
+					self.nav.grab(new Element('li').grab(el.clone().cloneEvents(el)));
+				else
+					self.nav.grab(new Element('li.separator'));
+			});
+
+			self.added = true;
+		}
+
+		html.toggleClass('menu_shown');
+
+	}
+
+});

couchpotato/static/scripts/block/navigation.js

@@ -5,47 +5,10 @@ var BlockNavigation = new Class({
 	create: function(){
 		var self = this;
 
-		self.el = new Element('div.navigation').adopt(
+		self.el = new Element('div.navigation').grab(
-			self.foldout = new Element('a.foldout.icon2.menu', {
+			self.nav = new Element('ul')
-				'events': {
-					'click': self.toggleMenu.bind(self)
-				}
-			}).grab(new Element('span.overlay')),
-			self.logo = new Element('a.logo', {
-				'html': '<span>Couch</span><span>Potato</span>',
-				'href': App.createUrl('')
-			}),
-			self.nav = new Element('ul'),
-			self.backtotop = new Element('a.backtotop', {
-				'text': 'back to top',
-				'events': {
-					'click': function(){
-						window.scroll(0,0);
-					}
-				},
-				'tween': {
-					'duration': 100
-				}
-			})
 		);
 
-		new ScrollSpy({
-			min: 400,
-			onLeave: function(){
-				self.backtotop.fade('out');
-			},
-			onEnter: function(){
-				self.backtotop.fade('in');
-			}
-		});
-
-		self.nav.addEvents({
-			'click:relay(a)': function(){
-				if($(document.body).getParent().hasClass('menu_shown'))
-					self.toggleMenu();
-			}
-		});
-
 	},
 
 	addTab: function(name, tab){
@@ -57,30 +20,6 @@ var BlockNavigation = new Class({
 
 	},
 
-	toggleMenu: function(){
-		var self = this,
-			body = $(document.body),
-			html = body.getParent();
-
-		// Copy over settings menu
-		if(!self.added){
-
-			new Element('li.separator').inject(self.nav);
-			body.getElements('.header .more_menu.menu li a, .header .more_menu.menu li span.separator').each(function(el, nr){
-				if(nr <= 2) return;
-				if(el.get('tag') == 'a')
-					self.nav.grab(new Element('li').grab(el.clone().cloneEvents(el)));
-				else
-					self.nav.grab(new Element('li.separator'));
-			});
-
-			self.added = true;
-		}
-
-		html.toggleClass('menu_shown');
-
-	},
-
 	activate: function(name){
 		var self = this;
 

couchpotato/static/scripts/couchpotato.js

@@ -23,8 +23,6 @@
 
 		self.c = $(document.body);
 
-		self.route = new Route(self.defaults);
-
 		self.createLayout();
 		self.createPages();
 
@@ -79,7 +77,7 @@
 
 		self.c.adopt(
 			$(self.block.header).addClass('header').adopt(
-				self.block.navigation = new BlockNavigation(self, {}),
+				self.block.navigation = new BlockHeader(self, {}),
 				self.block.search = new BlockSearch(self, {}),
 				self.block.more = new BlockMenu(self, {'button_class': 'icon2.cog'})
 			),
@@ -170,13 +168,15 @@
 	},
 
 	openPage: function(url) {
-		var self = this;
+		var self = this,
+			route = new Route(self.defaults);
 
-		self.route.parse();
+		route.parse(rep(History.getPath()));
-		var page_name = self.route.getPage().capitalize(),
+
-			action = self.route.getAction(),
+		var page_name = route.getPage().capitalize(),
-			params = self.route.getParams(),
+			action = route.getAction(),
-			current_url = self.route.getCurrentUrl(),
+			params = route.getParams(),
+			current_url = route.getCurrentUrl(),
 			page;
 
 		if(current_url == self.current_url)
@@ -439,24 +439,19 @@ window.App = new CouchPotato();
 
 var Route = new Class({
 
-	defaults: {},
+	defaults: null,
 	page: '',
 	action: 'index',
 	params: {},
 
 	initialize: function(defaults){
 		var self = this;
-		self.defaults = defaults;
+		self.defaults = defaults || {};
 	},
 
-	parse: function(){
+	parse: function(path){
 		var self = this;
 
-		var rep = function (pa) {
-			return pa.replace(Api.getOption('url'), '/').replace(App.getOption('base_url'), '/');
-		};
-
-		var path = rep(History.getPath());
 		if(path == '/' && location.hash){
 			path = rep(location.hash.replace('#', '/'));
 		}
@@ -464,7 +459,7 @@ var Route = new Class({
 		var url = self.current.split('/');
 
 		self.page = (url.length > 0) ? url.shift() : self.defaults.page;
-		self.action = (url.length > 0) ? url.shift() : self.defaults.action;
+		self.action = (url.length > 0) ? url.join('/') : self.defaults.action;
 
 		self.params = Object.merge({}, self.defaults.params);
 		if(url.length > 1){
@@ -624,3 +619,7 @@ var createSpinner = function(target, options){
 
 	return new Spinner(opts).spin(target);
 };
+
+var rep = function (pa) {
+	return pa.replace(Api.getOption('url'), '/').replace(App.getOption('base_url'), '/');
+};

couchpotato/static/scripts/page.js

@@ -10,11 +10,13 @@ var PageBase = new Class({
 	has_tab: true,
 	name: '',
 
+	parent_page: null,
 	sub_pages: null,
 
-	initialize: function(options) {
+	initialize: function(parent_page, options) {
 		var self = this;
 
+		self.parent_page = parent_page;
 		self.setOptions(options);
 
 		// Create main page container
@@ -26,9 +28,17 @@ var PageBase = new Class({
 
 		// Create tab for page
 		if(self.has_tab){
-			var nav = App.getBlock('navigation');
+			var nav;
+
+			if(self.parent_page && self.parent_page.navigation){
+				nav = self.parent_page.navigation;
+			}
+			else {
+				nav = App.getBlock('navigation');
+			}
+
 			self.tab = nav.addTab(self.name, {
-				'href': App.createUrl(self.name),
+				'href': App.createUrl(self.getPageUrl()),
 				'title': self.title,
 				'text': self.name.capitalize()
 			});
@@ -73,7 +83,13 @@ var PageBase = new Class({
 		//p('Opening: ' +self.getName() + ', ' + action + ', ' + Object.toQueryString(params));
 
 		try {
-			var elements = self[action+'Action'](params);
+			var elements
+			if(!self[action+'Action']){
+				elements = self['defaultAction'](action, params);
+			}
+			else {
+				elements = self[action+'Action'](params);
+			}
 			if(elements !== undefined){
 				self.el.empty();
 				self.el.adopt(elements);
@@ -93,6 +109,11 @@ var PageBase = new Class({
 			History.push(url);
 	},
 
+	getPageUrl: function(){
+		var self = this;
+		return (self.parent_page && self.parent_page.getPageUrl ? self.parent_page.getPageUrl() + '/' : '') + self.name;
+	},
+
 	errorAction: function(e){
 		p('Error, action not found', e);
 	},

couchpotato/static/style/main.scss

@@ -43,8 +43,8 @@ a {
             font-family: Lobster, serif;
             color: #FFF;
             font-size: 38px;
-            line-height: 80px;
+            line-height: $header-height;
-            height: 80px;
+            height: $header-height;
 
             span:nth-child(odd){
                 display: block;
@@ -60,7 +60,7 @@ a {
             margin: 0;
 
             li a {
-                padding: 10px 20px;
+                padding: $padding/2 $padding;
                 display: block;
             }
         }
@@ -83,23 +83,68 @@ a {
     .pages {
         height: 100%;
         width: 100%;
+        overflow: auto;
+        overflow-x: hidden;
     }
 
     .footer {
         position: fixed;
         bottom: 0;
-        height: 20px;
+        height: $padding;
         width: 100%;
     }
 }
 
 .page {
-
+    position: relative;
     display: none;
-    padding: 20px;
+    padding: $padding 0;
+
+    .page {
+        margin-top: $header-height - $padding;
+        z-index: 10;
+        padding: 0;
+    }
 
     &.active {
         display: block;
     }
 
+    .navigation {
+        @include flexbox();
+        position: fixed;
+        top: 0;
+        height: $header-height;
+        left: 130px;
+        right: 0;
+        background: $background_color;
+        z-index: 100;
+
+        ul {
+            @include flex(1 auto);
+            list-style: none;
+
+            li {
+                display: inline-block;
+
+                a {
+                    font-size: 24px;
+                    line-height: $header-height;
+                    padding: $padding;
+                    color: rgba(0,0,0,.5);
+                    font-weight: 300;
+
+                    &.active {
+                        color: rgba(0,0,0,1);
+                    }
+                }
+            }
+        }
+
+    }
+
+    .alph_nav {
+        display: none; // Hide for now
+    }
+
 }

couchpotato/static/style/mixins.scss

@@ -3,6 +3,54 @@ $background_color: #FFF;
 $menu_color: #111;
 $theme_off: #f2f2f2;
 
+$header-height: 80px;
+$padding: 20px;
+
+@import "susy";
+@import "compass/css3/transition";
+@import "compass/css3/transform";
+
+$susy: (
+	columns: 24,
+	gutters: 70px/70px
+);
+
+$mq-phone: 320px !default;
+$mq-phablet: 480px !default;
+$mq-tablet: 768px !default;
+$mq-desktop: 1024px !default;
+$mq-desktop-plus: 1382px !default;
+
+@mixin media-phone {
+	@media (max-width : $mq-phone) {
+		@content;
+	}
+}
+
+@mixin media-phablet {
+	@media (max-width : $mq-phablet) {
+		@content;
+	}
+}
+
+@mixin media-tablet {
+	@media (max-width : $mq-tablet) {
+		@content;
+	}
+}
+
+@mixin media-desktop {
+	@media (max-width : $mq-desktop) {
+		@content;
+	}
+}
+
+@mixin media-desktop-plus {
+	@media (max-width : $mq-desktop-plus) {
+		@content;
+	}
+}
+
 @mixin flexbox() {
   display: -webkit-box;
   display: -moz-box;