Initial mobile styling

couchpotato/static/scripts/block/menu.js

@@ -15,7 +15,7 @@ Block.Menu = new Class({
 			self.wrapper = new Element('div.wrapper').adopt(
 				self.more_option_ul = new Element('ul')
 			),
-			new Element('a.button.onlay', {
+			new Element('a.button.onlay' + (self.options.button_class ? '.' + self.options.button_class : ''), {
 				'events': {
 					'click': function(){
 						self.el.toggleClass('show')

couchpotato/static/scripts/block/navigation.js

@@ -5,7 +5,17 @@ Block.Navigation = new Class({
 	create: function(){
 		var self = this;
 
+		var settings_added = false;
 		self.el = new Element('div.navigation').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', {
+				'text': 'CouchPotato',
+				'href': App.createUrl('')
+			}),
 			self.nav = new Element('ul'),
 			self.backtotop = new Element('a.backtotop', {
 				'text': 'back to top',
@@ -28,19 +38,50 @@ Block.Navigation = new Class({
 			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){
-		var self = this
+		var self = this;
 
-		return new Element('li.tab_'+(name || 'unknown')).adopt(
+		return new Element('li.tab_'+(name || 'unknown')).grab(
 			new Element('a', tab)
 		).inject(self.nav)
 
 	},
 
+	toggleMenu: function(e){
+		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').each(function(el, nr){
+				if([0, 1, 2, 5].indexOf(nr) > -1){
+					self.nav.grab(
+						new Element('li').grab(el.clone().cloneEvents(el))
+					);
+				}
+			});
+
+			self.added = true;
+		}
+
+		html.toggleClass('menu_shown');
+
+	},
+
 	activate: function(name){
 		var self = this;
 

couchpotato/static/scripts/couchpotato.js

@@ -61,7 +61,7 @@ var CouchPotato = new Class({
 				new Element('div').adopt(
 					self.block.navigation = new Block.Navigation(self, {}),
 					self.block.search = new Block.Search(self, {}),
-					self.block.more = new Block.Menu(self, {})
+					self.block.more = new Block.Menu(self, {'button_class': 'icon2.cog'})
 				)
 			),
 			self.content = new Element('div.content'),

couchpotato/static/scripts/library/question.js

@@ -7,36 +7,24 @@ var Question = new Class( {
 		self.hint = hint
 		self.answers = answers
 
-		self.createQuestion()
+		self.createQuestion();
 		self.answers.each(function(answer) {
 			self.createAnswer(answer)
 		})
-		self.createMask()
 
 	},
 
-	createMask : function() {
-		var self = this
-
-		self.mask = new Element('div.mask').fade('hide').inject(document.body).fade('in');
-	},
-
 	createQuestion : function() {
+		var self = this;
 
-		this.container = new Element('div', {
-			'class' : 'question'
-		}).adopt(
+		self.container = new Element('div.mask.question').adopt(
 			new Element('h3', {
 				'html': this.question
 			}),
 			new Element('div.hint', {
 				'html': this.hint
 			})
-		).inject(document.body)
-
-		this.container.position( {
-			'position' : 'center'
-		});
+		).fade('hide').inject(document.body).fade('in')
 
 	},
 
@@ -59,17 +47,15 @@ var Question = new Class( {
 						(options.onComplete || function(){})()
 						self.close();
 					}
-				})).send();	
+				})).send();
 			});
 		}
 	},
 
 	close : function() {
 		var self = this;
-		self.mask.fade('out');
-		(function(){self.mask.destroy()}).delay(1000);
-		
-		this.container.destroy();
+		self.container.fade('out');
+		(function(){self.container.destroy()}).delay(1000);
 	},
 
 	toElement : function() {