Simplify the wizard

couchpotato/core/plugins/wizard/static/wizard.js

@@ -4,6 +4,7 @@ Page.Wizard = new Class({
 
 	order: 70,
 	name: 'wizard',
+	current: 'welcome',
 	has_tab: false,
 	wizard_only: true,
 
@@ -54,7 +55,7 @@ Page.Wizard = new Class({
 					'styles': {
 						'margin-top': 20
 					},
-					'text': 'I\'m ready to start the awesomeness, wow this button is big and green!',
+					'text': 'I\'m ready to start the awesomeness!',
 					'events': {
 						'click': function(e){
 							(e).preventDefault();
@@ -78,6 +79,7 @@ Page.Wizard = new Class({
 			)
 		}
 	},
+
 	groups: ['welcome', 'general', 'downloaders', 'searcher', 'renamer', 'automation', 'finish'],
 
 	open: function(action, params){
@@ -89,6 +91,8 @@ Page.Wizard = new Class({
 
 			self.parent(action, params);
 
+			self.el.addClass('settings');
+
 			self.addEvent('create', function(){
 				self.orderGroups();
 			});
@@ -110,20 +114,13 @@ Page.Wizard = new Class({
 		var self = this;
 
 		var form = self.el.getElement('.uniForm');
-		var tabs = self.el.getElement('.tabs');
+		var tabs = self.el.getElement('.tabs').hide();
 
 		self.groups.each(function(group){
 
 			var group_container;
 			if(self.headers[group]){
-				group_container = new Element('.wgroup_'+group, {
+				group_container = new Element('.wgroup_'+group);
-					'styles': {
-						'opacity': 0.2
-					},
-					'tween': {
-						'duration': 350
-					}
-				});
 
 				if(self.headers[group].include){
 					self.headers[group].include.each(function(inc){
@@ -200,47 +197,6 @@ Page.Wizard = new Class({
 		// Hide retention
 		self.el.getElement('.section_nzb').hide();
 
-		// Add pointer
-		new Element('.tab_wrapper').wraps(tabs);
-
-		// Add nav
-		var minimum = self.el.getSize().y-window.getSize().y;
-		self.groups.each(function(group, nr){
-
-			var g = self.el.getElement('.wgroup_'+group);
-			if(!g || !g.isVisible()) return;
-			var t = self.el.getElement('.t_'+group);
-			if(!t) return;
-
-			var func = function(){
-				// Activate all previous ones
-				self.groups.each(function(groups2, nr2){
-					var t2 = self.el.getElement('.t_'+groups2);
-						t2[nr2 > nr ? 'removeClass' : 'addClass' ]('done');
-				});
-				g.tween('opacity', 1);
-			};
-
-			if(nr === 0)
-				func();
-
-			new ScrollSpy( {
-				min: function(){
-					var c = g.getCoordinates();
-					var top = c.top-(window.getSize().y/2);
-					return top > minimum ? minimum : top;
-				},
-				max: function(){
-					var c = g.getCoordinates();
-					return c.top+(c.height/2);
-				},
-				onEnter: func,
-				onLeave: function(){
-					g.tween('opacity', 0.2);
-				}
-			});
-		});
-
 	}
 
 });

couchpotato/core/plugins/wizard/static/wizard.scss

@@ -1,84 +1,62 @@
-.page.wizard .uniForm {
+@import "_mixins";
-	margin: 0 0 30px;
+
-	width: 83%;
+.page.wizard {
+
+	.navigation.navigation {
+		display: none;
+	}
+
+	.tab_content.tab_content {
+		display: block;
+
+		fieldset {
+
+			.ctrlHolder, h2 {
+				padding: $padding/4;
 			}
 
-.page.wizard h1 {
+		}
+	}
+
+	h1 {
 		padding: 10px 0;
 		display: block;
 		font-size: 30px;
 		margin: 80px 5px 0;
+		font-weight: 300;
 	}
 
-.page.wizard .description {
+	.description {
-	padding: 10px 5px;
+		padding: $padding/2 $padding/4;
 		font-size: 1.45em;
 		line-height: 1.4em;
 		display: block;
 	}
 
-.page.wizard .tab_wrapper {
+	form.uniForm.containers {
-	background: #5c697b;
-	height: 65px;
-	font-size: 1.75em;
-	position: fixed;
-	top: 0;
 		margin: 0;
-	width: 100%;
-	left: 0;
-	z-index: 2;
-	box-shadow: 0 0 10px rgba(0,0,0,0.1);
 	}
 
-	.page.wizard .tab_wrapper .tabs {
+	form > div {
-		padding: 0;
+		min-height: 300px;
+		max-width: $mq-desktop;
+		padding: $padding;
 		margin: 0 auto;
-		display: block;
-		height: 100%;
-		width: 100%;
-		max-width: 960px;
-	}
-
-	.page.wizard .tabs li {
-		display: inline-block;
-		height: 100%;
-	}
-		.page.wizard .tabs li a {
-			padding: 20px 10px;
-			height: 100%;
-			display: block;
-			color: #FFF;
-			font-weight: normal;
-			border-bottom: 4px solid transparent;
-		}
-
-		.page.wizard .tabs li:hover a { border-color: #047792; }
-		.page.wizard .tabs li.done a { border-color: #04bce6; }
-
-	.page.wizard .tab_wrapper .pointer {
-		border-right: 10px solid transparent;
-		border-left: 10px solid transparent;
-		border-top: 10px solid #5c697b;
-		display: block;
-		position: absolute;
-		top: 44px;
-	}
 
-.page.wizard .tab_content {
+		@include media-phablet {
-	margin: 20px 0 160px;
+			padding: $padding/2;
 		}
-
-.page.wizard form > div {
-	min-height: 300px;
 	}
 
-.page.wizard .button.green {
+	.button.green {
 		padding: 20px;
 		font-size: 25px;
 		margin: 10px 0 80px;
-	display: block;
+		display: inline-block;
 	}
 
-.page.wizard .tab_nzb_providers {
+	.tab_nzb_providers {
 		margin: 20px 0 0 0;
 	}
+
+}

couchpotato/static/scripts/combined.base.min.js

@@ -667,7 +667,7 @@ var PageBase = new Class({
         }).grab(self.content = new Element("div.scroll_content"));
         App.addEvent("load", function() {
             setTimeout(function() {
-                if (!App.mobile_screen) {
+                if (!App.mobile_screen && !App.getOption("dev")) {
                     self.content.addEvent("scroll", self.preventHover.bind(self));
                 }
             }, 100);

couchpotato/static/scripts/combined.plugins.min.js

@@ -3707,6 +3707,7 @@ Page.Wizard = new Class({
     Extends: Page.Settings,
     order: 70,
     name: "wizard",
+    current: "welcome",
     has_tab: false,
     wizard_only: true,
     headers: {
@@ -3752,7 +3753,7 @@ Page.Wizard = new Class({
                 styles: {
                     "margin-top": 20
                 },
-                text: "I'm ready to start the awesomeness, wow this button is big and green!",
+                text: "I'm ready to start the awesomeness!",
                 events: {
                     click: function(e) {
                         e.preventDefault();
@@ -3782,6 +3783,7 @@ Page.Wizard = new Class({
             App.fireEvent("unload");
             App.getBlock("header").hide();
             self.parent(action, params);
+            self.el.addClass("settings");
             self.addEvent("create", function() {
                 self.orderGroups();
             });
@@ -3797,18 +3799,11 @@ Page.Wizard = new Class({
     orderGroups: function() {
         var self = this;
         var form = self.el.getElement(".uniForm");
-        var tabs = self.el.getElement(".tabs");
+        var tabs = self.el.getElement(".tabs").hide();
         self.groups.each(function(group) {
             var group_container;
             if (self.headers[group]) {
-                group_container = new Element(".wgroup_" + group, {
+                group_container = new Element(".wgroup_" + group);
-                    styles: {
-                        opacity: .2
-                    },
-                    tween: {
-                        duration: 350
-                    }
-                });
                 if (self.headers[group].include) {
                     self.headers[group].include.each(function(inc) {
                         group_container.addClass("wgroup_" + inc);
@@ -3855,36 +3850,5 @@ Page.Wizard = new Class({
         });
         self.el.getElement(".advanced_toggle").destroy();
         self.el.getElement(".section_nzb").hide();
-        new Element(".tab_wrapper").wraps(tabs);
-        var minimum = self.el.getSize().y - window.getSize().y;
-        self.groups.each(function(group, nr) {
-            var g = self.el.getElement(".wgroup_" + group);
-            if (!g || !g.isVisible()) return;
-            var t = self.el.getElement(".t_" + group);
-            if (!t) return;
-            var func = function() {
-                self.groups.each(function(groups2, nr2) {
-                    var t2 = self.el.getElement(".t_" + groups2);
-                    t2[nr2 > nr ? "removeClass" : "addClass"]("done");
-                });
-                g.tween("opacity", 1);
-            };
-            if (nr === 0) func();
-            new ScrollSpy({
-                min: function() {
-                    var c = g.getCoordinates();
-                    var top = c.top - window.getSize().y / 2;
-                    return top > minimum ? minimum : top;
-                },
-                max: function() {
-                    var c = g.getCoordinates();
-                    return c.top + c.height / 2;
-                },
-                onEnter: func,
-                onLeave: function() {
-                    g.tween("opacity", .2);
-                }
-            });
-        });
     }
 });

couchpotato/static/style/combined.min.css

@@ -1,8 +1,9 @@
 .movies>.description a:hover,.page.movie_details .releases .buttons a:hover{text-decoration:underline}
+.messages .message,.more_menu .wrapper,.search_form .wrapper{box-shadow:0 0 15px 2px rgba(0,0,0,.15)}
 .search_form{display:inline-block;z-index:11;width:44px;position:relative}
 .search_form *{-webkit-transform:translateZ(0);transform:translateZ(0)}
 .search_form .icon-search{position:absolute;z-index:2;top:50%;left:0;height:100%;text-align:center;color:#FFF;font-size:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
-.search_form .wrapper{position:absolute;left:44px;bottom:0;background:#ac0000;border-radius:3px 0 0 3px;display:none;box-shadow:0 0 15px 2px rgba(0,0,0,.15)}
+.search_form .wrapper{position:absolute;left:44px;bottom:0;background:#ac0000;border-radius:3px 0 0 3px;display:none}
 .search_form .wrapper:before{-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';display:block;position:absolute;height:10px;width:10px;background:#ac0000;left:-6px;bottom:16px;z-index:1}
 .search_form .input{background:#FFF;border-radius:3px 0 0 3px;position:relative;left:4px;height:44px;overflow:hidden;width:100%}
 .search_form .input input{position:absolute;top:0;left:0;height:100%;width:100%;z-index:1}
@@ -431,28 +432,23 @@
 #profile_ordering li .handle:hover{opacity:1}
 .group_sizes .item .label{min-width:150px}
 .group_sizes .item .max,.group_sizes .item .min{display:inline-block;width:70px!important;min-width:0!important;margin-right:10px;text-align:center}
+.page.userscript .media_result .year,.page.wizard .navigation.navigation{display:none}
 .page.userscript{position:absolute;width:100%;top:0;bottom:0;left:0;right:0;padding:0}
 .page.userscript .frame.loading{text-align:center;font-size:20px;padding:20px}
 .page.userscript .media_result{height:140px}
 .page.userscript .media_result .thumbnail{width:90px}
 .page.userscript .media_result .options{left:90px;padding:54px 15px}
-.page.userscript .media_result .year{display:none}
 .page.userscript .media_result .options select[name=title]{width:190px}
 .page.userscript .media_result .options select[name=profile]{width:70px}
-.page.wizard .uniForm{margin:0 0 30px;width:83%}
+.page.wizard .tab_content.tab_content{display:block}
-.page.wizard h1{padding:10px 0;display:block;font-size:30px;margin:80px 5px 0}
+.page.wizard .tab_content.tab_content fieldset .ctrlHolder,.page.wizard .tab_content.tab_content fieldset h2{padding:5px}
+.page.wizard h1{padding:10px 0;display:block;font-size:30px;margin:80px 5px 0;font-weight:300}
 .page.wizard .description{padding:10px 5px;font-size:1.45em;line-height:1.4em;display:block}
-.page.wizard .tab_wrapper{background:#5c697b;height:65px;font-size:1.75em;position:fixed;top:0;margin:0;width:100%;left:0;z-index:2;box-shadow:0 0 10px rgba(0,0,0,.1)}
+.page.wizard form.uniForm.containers{margin:0}
-.messages .message,.more_menu .wrapper{box-shadow:0 0 15px 2px rgba(0,0,0,.15)}
+.page.wizard form>div{min-height:300px;max-width:1024px;padding:20px;margin:0 auto}
-.page.wizard .tab_wrapper .tabs{padding:0;margin:0 auto;display:block;height:100%;width:100%;max-width:960px}
+@media (max-width:480px){.page.wizard form>div{padding:10px}
-.page.wizard .tabs li{display:inline-block;height:100%}
+}
-.page.wizard .tabs li a{padding:20px 10px;height:100%;display:block;color:#FFF;font-weight:400;border-bottom:4px solid transparent}
+.page.wizard .button.green{padding:20px;font-size:25px;margin:10px 0 80px;display:inline-block}
-.page.wizard .tabs li:hover a{border-color:#047792}
-.page.wizard .tabs li.done a{border-color:#04bce6}
-.page.wizard .tab_wrapper .pointer{border-right:10px solid transparent;border-left:10px solid transparent;border-top:10px solid #5c697b;display:block;position:absolute;top:44px}
-.page.wizard .tab_content{margin:20px 0 160px}
-.page.wizard form>div{min-height:300px}
-.page.wizard .button.green{padding:20px;font-size:25px;margin:10px 0 80px;display:block}
 .page.wizard .tab_nzb_providers{margin:20px 0 0}
 .api_docs h1{font-size:25px;padding:20px 40px}
 .api_docs pre{background:#eee;font-family:monospace;margin:0;padding:10px;width:100%;display:block;font-size:12px}