diff --git a/apps/reader/forms.py b/apps/reader/forms.py index 325f0e2c9..771780a3e 100644 --- a/apps/reader/forms.py +++ b/apps/reader/forms.py @@ -11,10 +11,10 @@ from utils import log as logging class LoginForm(forms.Form): username = forms.CharField(label=_("Username or Email"), max_length=30, - widget=forms.TextInput(attrs={'tabindex': 1}), + widget=forms.TextInput(attrs={'tabindex': 1, 'class': 'NB-input'}), error_messages={'required': 'Please enter a username.'}) password = forms.CharField(label=_("Password"), - widget=forms.PasswordInput(attrs={'tabindex': 2}), + widget=forms.PasswordInput(attrs={'tabindex': 2, 'class': 'NB-input'}), required=False) # error_messages={'required': 'Please enter a password.'}) @@ -69,17 +69,17 @@ class LoginForm(forms.Form): class SignupForm(forms.Form): username = forms.RegexField(regex=r'^\w+$', max_length=30, - widget=forms.TextInput(), + widget=forms.TextInput(attrs={'class': 'NB-input'}), label=_(u'username'), error_messages={ 'required': 'Please enter a username.', 'invalid': "Your username may only contain letters and numbers." }) - email = forms.EmailField(widget=forms.TextInput(attrs=dict(maxlength=75)), + email = forms.EmailField(widget=forms.TextInput(attrs={'maxlength': 75, 'class': 'NB-input'}), label=_(u'email address'), required=False) # error_messages={'required': 'Please enter your email.'}) - password = forms.CharField(widget=forms.PasswordInput(), + password = forms.CharField(widget=forms.PasswordInput(attrs={'class': 'NB-input'}), label=_(u'password'), required=False) # error_messages={'required': 'Please enter a password.'}) diff --git a/apps/reader/views.py b/apps/reader/views.py index 9edb3dce4..2bc518bb5 100644 --- a/apps/reader/views.py +++ b/apps/reader/views.py @@ -106,7 +106,7 @@ def welcome(request, **kwargs): social_profile = MSocialProfile.get_user(user.pk) if request.method == "POST": - if request.POST.get('submit') == 'login': + if request.POST.get('submit').startswith('log'): login_form = LoginForm(request.POST, prefix='login') signup_form = SignupForm(prefix='signup') else: @@ -123,6 +123,7 @@ def welcome(request, **kwargs): 'signup_form' : signup_form, 'statistics' : statistics, 'social_profile' : social_profile, + 'post_request' : request.method == 'POST', }, "reader/welcome.xhtml" @never_cache diff --git a/media/css/modals.css b/media/css/modals.css index b95769531..21fb095a8 100644 --- a/media/css/modals.css +++ b/media/css/modals.css @@ -25,9 +25,9 @@ padding: 2px; margin: 2px 4px 2px; border: 1px solid #606060; - -moz-box-shadow:2px 2px 0 #D0D0D0; - -webkit-box-shadow:2px 2px 0 #D0D0D0; - box-shadow:2px 2px 0 #D0D0D0; + -moz-box-shadow:2px 2px 0 rgba(50, 50, 50, 0.15); + -webkit-box-shadow:2px 2px 0 rgba(50, 50, 50, 0.15); + box-shadow:2px 2px 0 rgba(50, 50, 50, 0.15); } /* ========== */ @@ -117,9 +117,9 @@ padding: 2px; margin: 0px 4px 6px; border: 1px solid #606060; - -moz-box-shadow:2px 2px 0 #D0D0D0; - -webkit-box-shadow:2px 2px 0 #D0D0D0; - box-shadow:2px 2px 0 #D0D0D0; + -moz-box-shadow:2px 2px 0 rgba(50, 50, 50, 0.15); + -webkit-box-shadow:2px 2px 0 rgba(50, 50, 50, 0.15); + box-shadow:2px 2px 0 rgba(50, 50, 50, 0.15); } .NB-modal .NB-modal-field input[type=checkbox] { @@ -205,9 +205,9 @@ text-transform: uppercase; margin: 2px 4px 2px; border: 1px solid #606060; - -moz-box-shadow:2px 2px 0 #D0D0D0; - -webkit-box-shadow:2px 2px 0 #D0D0D0; - box-shadow:2px 2px 0 #D0D0D0; + -moz-box-shadow:2px 2px 0 rgba(50, 50, 50, 0.15); + -webkit-box-shadow:2px 2px 0 rgba(50, 50, 50, 0.15); + box-shadow:2px 2px 0 rgba(50, 50, 50, 0.15); border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; diff --git a/media/css/reader.css b/media/css/reader.css index 202edb8b4..92d695144 100644 --- a/media/css/reader.css +++ b/media/css/reader.css @@ -4469,6 +4469,9 @@ form.opml_import_form input { .NB-account .NB-module.NB-module-account .NB-module-account-stats { min-height: 0; } +.NB-account .NB-module.NB-module-account .NB-module-stats-counts { + overflow: hidden; +} .NB-account .NB-module.NB-module-account .NB-module-stats-count { margin: 0; } diff --git a/media/css/welcome.css b/media/css/welcome.css index a9fa56935..df275d096 100644 --- a/media/css/welcome.css +++ b/media/css/welcome.css @@ -92,17 +92,20 @@ body.NB-welcome { width: 500px; height: 327px; position: absolute; - bottom: -20px; + bottom: -350px; right: 0; border-radius: 2px; border-top-left-radius: 4px; border-top-right-radius: 4px; } +.NB-welcome-header-image.NB-active img.NB-1 { + bottom: 0px; +} .NB-welcome-header-image img.NB-2 { opacity: 0; height: 325px; position: absolute; - bottom: -10px; + bottom: -300px; right: 0; border-radius: 2px; margin-right: 100px; @@ -113,7 +116,7 @@ body.NB-welcome { opacity: 0; height: 300px; position: absolute; - bottom: -10px; + bottom: -300px; right: 0; border-radius: 2px; margin-right: 140px; @@ -122,10 +125,10 @@ body.NB-welcome { } .NB-welcome-header-captions { text-align: center; - margin: 36px auto 0; + margin: 0 auto; position: absolute; top: 0; - left: 470px; + left: 420px; overflow: hidden; text-shadow: 0 1px 0 rgba(35,35,35,0.35); padding-left: 64px; @@ -136,9 +139,12 @@ body.NB-welcome { float: left; color: #FDC85B; cursor: pointer; - padding: 0 12px; + padding: 36px 12px 12px; text-transform: uppercase; } +.NB-welcome-header-caption.NB-welcome-header-caption-signin { + color: #A5E665; +} .NB-welcome-header-caption span { padding: 2px 8px; border-radius: 4px; @@ -148,6 +154,12 @@ body.NB-welcome { -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; } +.NB-welcome-header-caption:hover span { + -webkit-transition: all .25s ease-in-out; + -moz-transition: all .25s ease-in-out; + -o-transition: all .25s ease-in-out; + -ms-transition: all .25s ease-in-out; +} .NB-welcome-header-caption.NB-active span { color: #FAA518; background-color: rgba(235, 235, 235, 0.1); @@ -207,12 +219,217 @@ body.NB-welcome { color: white; } +/* ================== */ +/* = Login / Signup = */ +/* ================== */ + +.NB-welcome-header-account { + position: absolute; + bottom: -350px; + right: 12px; + width: 400px; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + background-color: rgba(245, 245, 245, 0.4); + padding: 36px 36px 12px; +} +.NB-welcome-header-account.NB-active { + bottom: 0; +} +.NB-welcome-header-account .NB-module-header-login { + width: 142px; + margin: 0 50px 0 0; + padding: 0 4px; + float: left; + text-shadow: 0 1px 0 rgba(35, 35, 35, 0.3); +} + +.NB-welcome-header-account .NB-module-header-signup { + width: 142px; + margin: 0; + padding: 0 4px; + float: left; + text-shadow: 0 1px 0 rgba(35, 35, 35, 0.3); +} + +.NB-welcome-header-account .NB-login { + padding: 0 4px; + margin: 12px 50px 0 12px; + width: 146px; + float: left; +} + +.NB-welcome-header-account .NB-signup { + float: left; + width: 146px; + padding: 0 4px; + margin: 12px 0 0; + height: 206px; + overflow: hidden; +} + +.NB-welcome-header-account .NB-import-signup { + float: left; + width: 146px; + padding: 0 0 64px 0; + margin: 0 24px 0 12px; + height: 206px; + overflow: hidden; +} + +.NB-welcome-header-account .NB-import-signup-text { + text-align: center; + width: 190px; +} +.NB-welcome-header-account .NB-import-signup-text h3 { + margin-top: 48px; + color: #20843D; +} +.NB-welcome-header-account .NB-import-signup-text p { + color: #636363; +} + +.NB-welcome-header-account .NB-signup-orline { + margin: 30px auto 24px; + text-align: center; + font-size: 14px; + line-height: 10px; + color: #F9F9F9; + font-weight: bold; +} + +.NB-welcome-header-account .NB-signup-orline-reduced { + margin: 0px auto 0px; +} +.NB-welcome-header-account .NB-signup-orline .NB-signup-orline-or { + padding: 0 4px; +} + +.NB-welcome-header-account .NB-signup-optional { + float: right; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.4); + font-weight: bold; + font-size: 9px; + line-height: 17px; +} +.NB-welcome-header-account .NB-signup-hidden { + display: none; +} + +.NB-welcome-header-account .NB-import-signup { + height: auto; +} + +.NB-welcome-header-account .NB-signup .NB-signup-google { + margin: 12px auto; + display: block; + font-size: 12px; + text-align: center; +} + +.NB-welcome-header-account input[type=text], +.NB-welcome-header-account input[type=password] { + border: 1px solid rgba(35, 35, 35, 0.5); + display:block; + font-size:13px; + margin:0 0 12px; + padding:5px; + width:134px; +} + +.NB-welcome-header-account input[type=text]:focus, +.NB-welcome-header-account input[type=password]:focus { + border-color: #739BBE; +} + +.NB-welcome-header-account input[type=submit] { + outline: none; + width: 146px; /* 174=input-width + 5*2=padding + 2=border */ + margin: 4px 5px 0 0; + padding: 4px 10px 5px; + text-shadow: 0 -1px 0 rgba(35, 35, 35, 0.4); + font-weight: bold; + font-size: 12px; + border: 1px solid rgba(35, 35, 35, 0.5); + color: white; + cursor: pointer; +} + +.NB-welcome-header-account input[type=hidden] { + display: none; +} + +.NB-welcome-header-account label, +.NB-welcome-header-account .NB-account-label { + margin: 0; + color: #FFFFB0; + text-shadow: 0 1px 0 rgba(35, 35, 35, 0.3); + font-size: 12px; + display: block; + text-transform: uppercase; +} + +.NB-welcome-header-account .NB-account-label { + font-weight: bold; +} + +.NB-welcome-header-account .NB-account-text { + font-size: 13px; + color: #90A0B0; + margin-bottom: 30px; +} + +.NB-welcome-header-account .NB-account-text a { + text-decoration: none; + color: #3E4773; +} + +.NB-welcome-header-account .NB-account-text a:hover { + color: #0E1763; +} + +.NB-welcome-header-account .errorlist { + list-style: none; + font-size: 12px; + color: #AF4D18; + font-weight: bold; + padding: 0; +} + + + /* ============ */ /* = Features = */ /* ============ */ .NB-welcome-features { - margin: 36px 0; + margin: 48px 0; + overflow: hidden; +} + +.NB-welcome-features .NB-feature { + float: left; + width: 204px; + margin: 0 36px 0 0; + text-align: center; +} + +.NB-welcome-features img { + width: 200px; + height: 175px; + box-shadow: 0 0 3px rgba(30, 30, 30, 0.3); +} +.NB-welcome-features .NB-feature-caption { + font-weight: bold; + font-size: 24px; + margin: 8px 0 0; +} +.NB-welcome-features .NB-feature-text { + color: #808080; + margin: 8px 0 0; + font-size: 15px; + line-height: 22px; } /* ============ */ @@ -221,4 +438,30 @@ body.NB-welcome { .NB-welcome-activity { overflow: hidden; -} \ No newline at end of file + clear: both; + margin: 48px 0; + padding: 36px 0; + background-color: #F5F5F5; +} +.NB-welcome-activity .NB-module { + width: 50%; + float: left; +} +.NB-welcome-activity .NB-module .NB-module-header { + display: none; +} +.NB-welcome-activity .NB-module .NB-module-stats-counts { + overflow: hidden; +} +.NB-welcome-activity .NB-module-stats .NB-module-content-header-hour { + margin-top: 36px; +} +.NB-welcome-activity .NB-module-stats-count-graph { + margin-left: 4px; +} +.NB-welcome-activity .NB-graph-bar { + width: 4px; +} +.NB-welcome-activity .NB-graph-value { + width: 4px; +} diff --git a/media/img/welcome/feature_1.png b/media/img/welcome/feature_1.png new file mode 100644 index 000000000..4c24b8d8b Binary files /dev/null and b/media/img/welcome/feature_1.png differ diff --git a/media/img/welcome/feature_1_original.png b/media/img/welcome/feature_1_original.png new file mode 100644 index 000000000..7f34e4977 Binary files /dev/null and b/media/img/welcome/feature_1_original.png differ diff --git a/media/img/welcome/feature_2.png b/media/img/welcome/feature_2.png new file mode 100644 index 000000000..20650f213 Binary files /dev/null and b/media/img/welcome/feature_2.png differ diff --git a/media/img/welcome/feature_3.png b/media/img/welcome/feature_3.png new file mode 100644 index 000000000..8370697ca Binary files /dev/null and b/media/img/welcome/feature_3.png differ diff --git a/media/img/welcome/feature_4.png b/media/img/welcome/feature_4.png new file mode 100644 index 000000000..d6f3cc4c4 Binary files /dev/null and b/media/img/welcome/feature_4.png differ diff --git a/media/img/welcome/fleuron.png b/media/img/welcome/fleuron.png new file mode 100644 index 000000000..6053ca2a3 Binary files /dev/null and b/media/img/welcome/fleuron.png differ diff --git a/media/img/welcome/header-ios-original.png b/media/img/welcome/header-ios-original.png index 051e15262..864ecf156 100644 Binary files a/media/img/welcome/header-ios-original.png and b/media/img/welcome/header-ios-original.png differ diff --git a/media/js/newsblur/reader/reader.js b/media/js/newsblur/reader/reader.js index 1bbe5bc3d..53b66c123 100644 --- a/media/js/newsblur/reader/reader.js +++ b/media/js/newsblur/reader/reader.js @@ -203,7 +203,7 @@ this.layout.outerLayout = this.$s.$body.layout({ closable: true, - zIndex: 1, + zIndex: 2, fxName: "slideOffscreen", fxSettings: { duration: 560, easing: "easeInOutQuint" }, center__paneSelector: ".right-pane", diff --git a/media/js/newsblur/welcome/welcome.js b/media/js/newsblur/welcome/welcome.js index c051dc1a1..c66489d01 100644 --- a/media/js/newsblur/welcome/welcome.js +++ b/media/js/newsblur/welcome/welcome.js @@ -1,42 +1,89 @@ NEWSBLUR.Welcome = Backbone.View.extend({ el: 'body', - + flags: {}, rotation: 0, + events: { + "click .NB-button-login" : "show_signin_form", + "mouseenter .NB-welcome-header-caption" : "enter_header_caption", + "mouseleave .NB-welcome-header-caption" : "leave_header_caption" + }, + initialize: function() { this.start_rotation(); }, + // ========== + // = Header = + // ========== + + enter_header_caption: function(e) { + this.flags.on_header_caption = true; + var $caption = $(e.currentTarget); + + if ($caption.hasClass('NB-welcome-header-caption-signin')) { + this.show_signin_form(); + } else { + var r = parseInt($caption.data('ss'), 10); + this.rotate_screenshots(r); + } + }, + + leave_header_caption: function(e) { + var $caption = $(e.currentTarget); + console.log(["leave_header_caption", $caption]); + if ($caption.hasClass('NB-welcome-header-caption-signin')) { + + } else { + this.flags.on_header_caption = false; + } + }, + start_rotation: function() { + if (this.$('.NB-welcome-header-account').hasClass('NB-active')) { + this.show_signin_form(); + } this.$('.NB-welcome-header-image img').eq(0).load(_.bind(function() { - _.delay(_.bind(this.rotate_screenshots, this), 2000); + setInterval(_.bind(this.rotate_screenshots, this), 3000); }, this)); }, - rotate_screenshots: function() { - var r = this.rotation; - var $images = $('.NB-welcome-header-image img'); - var $captions = $('.NB-welcome-header-caption'); - var $in_img = $images.eq((r+1) % $images.length); - var $out_img = $images.eq(r % $images.length); - var $in_caption = $captions.eq((r+1) % $images.length); - var $out_caption = $captions.eq(r % $images.length); + rotate_screenshots: function(force, callback) { + if (this.flags.on_header_caption && _.isUndefined(force)) { + return; + } - $out_img.css({zIndex: 0}).animate({ + var NUM_CAPTIONS = 3; + var r = force ? force - 1 : (this.rotation + 1) % NUM_CAPTIONS; + if (!force) { + this.rotation += 1; + } + + var $images = $('.NB-welcome-header-image img').add('.NB-welcome-header-account'); + var $captions = $('.NB-welcome-header-caption'); + var $in_img = $images.eq(r); + var $out_img = $images.not($in_img); + var $in_caption = $captions.eq(r); + var $out_caption = $captions.not($in_caption); + + $out_img.css({zIndex: 0}).stop(true).animate({ bottom: -300, opacity: 0 - }, {easing: 'easeInOutQuart', queue: false, duration: 1400}); - $in_img.css({zIndex: 1, bottom: -300}).animate({ + }, {easing: 'easeInOutQuart', queue: false, duration: force ? 650 : 1400, complete: callback}); + $in_img.css({zIndex: 1}).stop(true).animate({ bottom: 0, opacity: 1 - }, {easing: 'easeInOutQuart', queue: false, duration: 1400}); + }, {easing: 'easeInOutQuart', queue: false, duration: force ? 650 : 1400}); $out_caption.removeClass('NB-active'); $in_caption.addClass('NB-active'); - - this.rotation += 1; - - _.delay(_.bind(this.rotate_screenshots, this), 3000); + }, + + show_signin_form: function() { + this.flags.on_header_caption = true; + this.rotate_screenshots(4, _.bind(function() { + this.$('input[name=login-username]').focus(); + }, this)); } }); \ No newline at end of file diff --git a/templates/reader/welcome.xhtml b/templates/reader/welcome.xhtml index ec919425c..1ca90b584 100644 --- a/templates/reader/welcome.xhtml +++ b/templates/reader/welcome.xhtml @@ -22,15 +22,16 @@
Focus on the best stories from
your friends and favorite blogs
-
Web
-
iPad & iPhone
-
Android
+
Web
+
iPad & iPhone
+
Android
+
@@ -42,81 +43,79 @@
Then
-
+
-
+
-