From ba5483cb6c7457138852c65071c5a3f42fd16bd0 Mon Sep 17 00:00:00 2001 From: Ruud Date: Fri, 7 Aug 2015 17:01:23 +0200 Subject: [PATCH] Simplify the wizard --- couchpotato/core/plugins/wizard/static/wizard.js | 448 ++++++++++----------- couchpotato/core/plugins/wizard/static/wizard.scss | 116 +++--- couchpotato/static/scripts/combined.base.min.js | 2 +- couchpotato/static/scripts/combined.plugins.min.js | 46 +-- couchpotato/static/style/combined.min.css | 26 +- 5 files changed, 266 insertions(+), 372 deletions(-) diff --git a/couchpotato/core/plugins/wizard/static/wizard.js b/couchpotato/core/plugins/wizard/static/wizard.js index 2f2ff4f..ed2d59f 100644 --- a/couchpotato/core/plugins/wizard/static/wizard.js +++ b/couchpotato/core/plugins/wizard/static/wizard.js @@ -1,246 +1,202 @@ -Page.Wizard = new Class({ - - Extends: Page.Settings, - - order: 70, - name: 'wizard', - has_tab: false, - wizard_only: true, - - headers: { - 'welcome': { - 'title': 'Welcome to the new CouchPotato', - 'description': 'To get started, fill in each of the following settings as much as you can.', - 'content': new Element('div', { - 'styles': { - 'margin': '0 0 0 30px' - } - }) - }, - 'general': { - 'title': 'General', - 'description': 'If you want to access CP from outside your local network, you better secure it a bit with a username & password.' - }, - 'downloaders': { - 'title': 'What download apps are you using?', - 'description': 'CP needs an external download app to work with. Choose one below. For more downloaders check settings after you have filled in the wizard. If your download app isn\'t in the list, use the default Blackhole.' - }, - 'searcher': { - 'label': 'Providers', - 'title': 'Are you registered at any of these sites?', - 'description': 'CP uses these sites to search for movies. A few free are enabled by default, but it\'s always better to have more.' - }, - 'renamer': { - 'title': 'Move & rename the movies after downloading?', - 'description': 'The coolest part of CP is that it can move and organize your downloaded movies automagically. Check settings and you can even download trailers, subtitles and other data when it has finished downloading. It\'s awesome!' - }, - 'automation': { - 'title': 'Easily add movies to your wanted list!', - 'description': 'You can easily add movies from your favorite movie site, like IMDB, Rotten Tomatoes, Apple Trailers and more. Just install the extension or drag the bookmarklet to your bookmarks.' + - '
Once installed, just click the bookmarklet on a movie page and watch the magic happen ;)', - 'content': function(){ - return App.createUserscriptButtons().setStyles({ - 'background-image': "url('https://couchpota.to/media/images/userscript.gif')" - }); - } - }, - 'finish': { - 'title': 'Finishing Up', - 'description': 'Are you done? Did you fill in everything as much as possible?' + - '
Be sure to check the settings to see what more CP can do!

' + - '
After you\'ve used CP for a while, and you like it (which of course you will), consider supporting CP. Maybe even by writing some code.
Or by getting a subscription at Usenet Server or Newshosting.
', - 'content': new Element('div').adopt( - new Element('a.button.green', { - 'styles': { - 'margin-top': 20 - }, - 'text': 'I\'m ready to start the awesomeness, wow this button is big and green!', - 'events': { - 'click': function(e){ - (e).preventDefault(); - Api.request('settings.save', { - 'data': { - 'section': 'core', - 'name': 'show_wizard', - 'value': 0 - }, - 'useSpinner': true, - 'spinnerOptions': { - 'target': self.el - }, - 'onComplete': function(){ - window.location = App.createUrl('wanted'); - } - }); - } - } - }) - ) - } - }, - groups: ['welcome', 'general', 'downloaders', 'searcher', 'renamer', 'automation', 'finish'], - - open: function(action, params){ - var self = this; - - if(!self.initialized){ - App.fireEvent('unload'); - App.getBlock('header').hide(); - - self.parent(action, params); - - self.addEvent('create', function(){ - self.orderGroups(); - }); - - self.initialized = true; - - self.scroll = new Fx.Scroll(document.body, { - 'transition': 'quint:in:out' - }); - } - else - (function(){ - var sc = self.el.getElement('.wgroup_'+action); - self.scroll.start(0, sc.getCoordinates().top-80); - }).delay(1); - }, - - orderGroups: function(){ - var self = this; - - var form = self.el.getElement('.uniForm'); - var tabs = self.el.getElement('.tabs'); - - self.groups.each(function(group){ - - var group_container; - if(self.headers[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){ - group_container.addClass('wgroup_'+inc); - }); - } - - var content = self.headers[group].content; - group_container.adopt( - new Element('h1', { - 'text': self.headers[group].title - }), - self.headers[group].description ? new Element('span.description', { - 'html': self.headers[group].description - }) : null, - content ? (typeOf(content) == 'function' ? content() : content) : null - ).inject(form); - } - - var tab_navigation = tabs.getElement('.t_'+group); - - if(!tab_navigation && self.headers[group] && self.headers[group].include){ - tab_navigation = []; - self.headers[group].include.each(function(inc){ - tab_navigation.include(tabs.getElement('.t_'+inc)); - }); - } - - if(tab_navigation && group_container){ - tabs.adopt(tab_navigation); // Tab navigation - - if(self.headers[group] && self.headers[group].include){ - - self.headers[group].include.each(function(inc){ - self.el.getElement('.tab_'+inc).inject(group_container); - }); - - new Element('li.t_'+group).adopt( - new Element('a', { - 'href': App.createUrl('wizard/'+group), - 'text': (self.headers[group].label || group).capitalize() - }) - ).inject(tabs); - - } - else - self.el.getElement('.tab_'+group).inject(group_container); // Tab content - - if(tab_navigation.getElement && self.headers[group]){ - var a = tab_navigation.getElement('a'); - a.set('text', (self.headers[group].label || group).capitalize()); - var url_split = a.get('href').split('wizard')[1].split('/'); - if(url_split.length > 3) - a.set('href', a.get('href').replace(url_split[url_split.length-3]+'/', '')); - - } - } - else { - new Element('li.t_'+group).adopt( - new Element('a', { - 'href': App.createUrl('wizard/'+group), - 'text': (self.headers[group].label || group).capitalize() - }) - ).inject(tabs); - } - - if(self.headers[group] && self.headers[group].event) - self.headers[group].event.call(); - }); - - // Remove toggle - self.el.getElement('.advanced_toggle').destroy(); - - // 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); - } - }); - }); - - } - -}); +Page.Wizard = new Class({ + + Extends: Page.Settings, + + order: 70, + name: 'wizard', + current: 'welcome', + has_tab: false, + wizard_only: true, + + headers: { + 'welcome': { + 'title': 'Welcome to the new CouchPotato', + 'description': 'To get started, fill in each of the following settings as much as you can.', + 'content': new Element('div', { + 'styles': { + 'margin': '0 0 0 30px' + } + }) + }, + 'general': { + 'title': 'General', + 'description': 'If you want to access CP from outside your local network, you better secure it a bit with a username & password.' + }, + 'downloaders': { + 'title': 'What download apps are you using?', + 'description': 'CP needs an external download app to work with. Choose one below. For more downloaders check settings after you have filled in the wizard. If your download app isn\'t in the list, use the default Blackhole.' + }, + 'searcher': { + 'label': 'Providers', + 'title': 'Are you registered at any of these sites?', + 'description': 'CP uses these sites to search for movies. A few free are enabled by default, but it\'s always better to have more.' + }, + 'renamer': { + 'title': 'Move & rename the movies after downloading?', + 'description': 'The coolest part of CP is that it can move and organize your downloaded movies automagically. Check settings and you can even download trailers, subtitles and other data when it has finished downloading. It\'s awesome!' + }, + 'automation': { + 'title': 'Easily add movies to your wanted list!', + 'description': 'You can easily add movies from your favorite movie site, like IMDB, Rotten Tomatoes, Apple Trailers and more. Just install the extension or drag the bookmarklet to your bookmarks.' + + '
Once installed, just click the bookmarklet on a movie page and watch the magic happen ;)', + 'content': function(){ + return App.createUserscriptButtons().setStyles({ + 'background-image': "url('https://couchpota.to/media/images/userscript.gif')" + }); + } + }, + 'finish': { + 'title': 'Finishing Up', + 'description': 'Are you done? Did you fill in everything as much as possible?' + + '
Be sure to check the settings to see what more CP can do!

' + + '
After you\'ve used CP for a while, and you like it (which of course you will), consider supporting CP. Maybe even by writing some code.
Or by getting a subscription at Usenet Server or Newshosting.
', + 'content': new Element('div').adopt( + new Element('a.button.green', { + 'styles': { + 'margin-top': 20 + }, + 'text': 'I\'m ready to start the awesomeness!', + 'events': { + 'click': function(e){ + (e).preventDefault(); + Api.request('settings.save', { + 'data': { + 'section': 'core', + 'name': 'show_wizard', + 'value': 0 + }, + 'useSpinner': true, + 'spinnerOptions': { + 'target': self.el + }, + 'onComplete': function(){ + window.location = App.createUrl('wanted'); + } + }); + } + } + }) + ) + } + }, + + groups: ['welcome', 'general', 'downloaders', 'searcher', 'renamer', 'automation', 'finish'], + + open: function(action, params){ + var self = this; + + if(!self.initialized){ + App.fireEvent('unload'); + App.getBlock('header').hide(); + + self.parent(action, params); + + self.el.addClass('settings'); + + self.addEvent('create', function(){ + self.orderGroups(); + }); + + self.initialized = true; + + self.scroll = new Fx.Scroll(document.body, { + 'transition': 'quint:in:out' + }); + } + else + (function(){ + var sc = self.el.getElement('.wgroup_'+action); + self.scroll.start(0, sc.getCoordinates().top-80); + }).delay(1); + }, + + orderGroups: function(){ + var self = this; + + var form = self.el.getElement('.uniForm'); + 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); + + if(self.headers[group].include){ + self.headers[group].include.each(function(inc){ + group_container.addClass('wgroup_'+inc); + }); + } + + var content = self.headers[group].content; + group_container.adopt( + new Element('h1', { + 'text': self.headers[group].title + }), + self.headers[group].description ? new Element('span.description', { + 'html': self.headers[group].description + }) : null, + content ? (typeOf(content) == 'function' ? content() : content) : null + ).inject(form); + } + + var tab_navigation = tabs.getElement('.t_'+group); + + if(!tab_navigation && self.headers[group] && self.headers[group].include){ + tab_navigation = []; + self.headers[group].include.each(function(inc){ + tab_navigation.include(tabs.getElement('.t_'+inc)); + }); + } + + if(tab_navigation && group_container){ + tabs.adopt(tab_navigation); // Tab navigation + + if(self.headers[group] && self.headers[group].include){ + + self.headers[group].include.each(function(inc){ + self.el.getElement('.tab_'+inc).inject(group_container); + }); + + new Element('li.t_'+group).adopt( + new Element('a', { + 'href': App.createUrl('wizard/'+group), + 'text': (self.headers[group].label || group).capitalize() + }) + ).inject(tabs); + + } + else + self.el.getElement('.tab_'+group).inject(group_container); // Tab content + + if(tab_navigation.getElement && self.headers[group]){ + var a = tab_navigation.getElement('a'); + a.set('text', (self.headers[group].label || group).capitalize()); + var url_split = a.get('href').split('wizard')[1].split('/'); + if(url_split.length > 3) + a.set('href', a.get('href').replace(url_split[url_split.length-3]+'/', '')); + + } + } + else { + new Element('li.t_'+group).adopt( + new Element('a', { + 'href': App.createUrl('wizard/'+group), + 'text': (self.headers[group].label || group).capitalize() + }) + ).inject(tabs); + } + + if(self.headers[group] && self.headers[group].event) + self.headers[group].event.call(); + }); + + // Remove toggle + self.el.getElement('.advanced_toggle').destroy(); + + // Hide retention + self.el.getElement('.section_nzb').hide(); + + } + +}); diff --git a/couchpotato/core/plugins/wizard/static/wizard.scss b/couchpotato/core/plugins/wizard/static/wizard.scss index 9af32ed..779c515 100644 --- a/couchpotato/core/plugins/wizard/static/wizard.scss +++ b/couchpotato/core/plugins/wizard/static/wizard.scss @@ -1,84 +1,62 @@ -.page.wizard .uniForm { - margin: 0 0 30px; - width: 83%; -} - -.page.wizard h1 { - padding: 10px 0; - display: block; - font-size: 30px; - margin: 80px 5px 0; -} +@import "_mixins"; -.page.wizard .description { - padding: 10px 5px; - font-size: 1.45em; - line-height: 1.4em; - display: block; -} +.page.wizard { -.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,0.1); -} + .navigation.navigation { + display: none; + } - .page.wizard .tab_wrapper .tabs { - padding: 0; - margin: 0 auto; + .tab_content.tab_content { 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; + fieldset { + + .ctrlHolder, h2 { + padding: $padding/4; + } + } + } - .page.wizard .tabs li:hover a { border-color: #047792; } - .page.wizard .tabs li.done a { border-color: #04bce6; } + h1 { + padding: 10px 0; + display: block; + font-size: 30px; + margin: 80px 5px 0; + font-weight: 300; + } - .page.wizard .tab_wrapper .pointer { - border-right: 10px solid transparent; - border-left: 10px solid transparent; - border-top: 10px solid #5c697b; + .description { + padding: $padding/2 $padding/4; + font-size: 1.45em; + line-height: 1.4em; display: block; - position: absolute; - top: 44px; } -.page.wizard .tab_content { - margin: 20px 0 160px; -} + form.uniForm.containers { + margin: 0; + } -.page.wizard form > div { - min-height: 300px; -} + form > div { + min-height: 300px; + max-width: $mq-desktop; + padding: $padding; + margin: 0 auto; -.page.wizard .button.green { - padding: 20px; - font-size: 25px; - margin: 10px 0 80px; - display: block; -} + @include media-phablet { + padding: $padding/2; + } + } + + .button.green { + padding: 20px; + font-size: 25px; + margin: 10px 0 80px; + display: inline-block; + } + + .tab_nzb_providers { + margin: 20px 0 0 0; + } -.page.wizard .tab_nzb_providers { - margin: 20px 0 0 0; } diff --git a/couchpotato/static/scripts/combined.base.min.js b/couchpotato/static/scripts/combined.base.min.js index 9ad6abd..efa2ba1 100644 --- a/couchpotato/static/scripts/combined.base.min.js +++ b/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); diff --git a/couchpotato/static/scripts/combined.plugins.min.js b/couchpotato/static/scripts/combined.plugins.min.js index 3282432..a3f35b9 100644 --- a/couchpotato/static/scripts/combined.plugins.min.js +++ b/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, { - styles: { - opacity: .2 - }, - tween: { - duration: 350 - } - }); + group_container = new Element(".wgroup_" + group); 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); - } - }); - }); } }); \ No newline at end of file diff --git a/couchpotato/static/style/combined.min.css b/couchpotato/static/style/combined.min.css index 6ced42c..98baef1 100644 --- a/couchpotato/static/style/combined.min.css +++ b/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 h1{padding:10px 0;display:block;font-size:30px;margin:80px 5px 0} +.page.wizard .tab_content.tab_content{display:block} +.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)} -.messages .message,.more_menu .wrapper{box-shadow:0 0 15px 2px rgba(0,0,0,.15)} -.page.wizard .tab_wrapper .tabs{padding:0;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:400;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{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 form.uniForm.containers{margin:0} +.page.wizard form>div{min-height:300px;max-width:1024px;padding:20px;margin:0 auto} +@media (max-width:480px){.page.wizard form>div{padding:10px} +} +.page.wizard .button.green{padding:20px;font-size:25px;margin:10px 0 80px;display:inline-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}