mirror of
https://github.com/viq/NewsBlur.git
synced 2025-09-18 21:43:31 +00:00
Refactoring welcome screen to fix input alignment issue.
This commit is contained in:
Samuel Clay
parent
f7d3c5d3e6
commit
d66537bd0f
3 changed files with 90 additions and 55 deletions
|
|
@ -52,6 +52,18 @@
|
|||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
.NB-welcome .NB-inner-account {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
margin-right: -50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
.NB-button {
|
||||
border: 1px solid #07360F;
|
||||
font-size: 12px;
|
||||
|
|
@ -81,6 +93,7 @@
|
|||
/* ========== */
|
||||
|
||||
.NB-welcome-header {
|
||||
position: relative;
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3F5354), to(#1B2424));
|
||||
background: -moz-linear-gradient(center top , #3F5354 0%, #1B2424 100%) repeat scroll 0 0 transparent;
|
||||
height: 420px;
|
||||
|
|
@ -100,7 +113,7 @@
|
|||
}
|
||||
.NB-welcome-header .NB-welcome-header-logo img {
|
||||
opacity: .9;
|
||||
-webkit-transition: all .15s ease-in-out;
|
||||
-webkit-transition: all .15s ease-in-out;
|
||||
-moz-transition: all .15s ease-in-out;
|
||||
-o-transition: all .15s ease-in-out;
|
||||
-ms-transition: all .15s ease-in-out;
|
||||
|
|
@ -274,17 +287,19 @@
|
|||
/* ================== */
|
||||
|
||||
.NB-welcome-header-account {
|
||||
pointer-events: all;
|
||||
position: absolute;
|
||||
transition: bottom 1s ease-in-out;
|
||||
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;
|
||||
padding: 36px 36px 12px;
|
||||
}
|
||||
.NB-welcome-header-account.NB-active {
|
||||
bottom: 0;
|
||||
bottom: 0px;
|
||||
}
|
||||
.NB-welcome-header-account .NB-module-header-login {
|
||||
width: 142px;
|
||||
|
|
|
|||
|
|
@ -15,14 +15,28 @@ NEWSBLUR.Welcome = Backbone.View.extend({
|
|||
|
||||
initialize: function() {
|
||||
this.start_rotation();
|
||||
// this.debug_password_autocomplete();
|
||||
_.delay(_.bind(function() {
|
||||
// this.debug_password_autocomplete();
|
||||
}, this), 500);
|
||||
NEWSBLUR.reader.$s.$layout.hide();
|
||||
},
|
||||
|
||||
debug_password_autocomplete: function() {
|
||||
console.log(['Triggering focus']);
|
||||
this.$("input[name=login-username]").trigger('focus');
|
||||
},
|
||||
|
||||
// ==========
|
||||
// = Header =
|
||||
// ==========
|
||||
|
||||
fix_misalignment: function(e) {
|
||||
console.log(['Fixing misalignment', e]);
|
||||
|
||||
this.flags.on_signin = true;
|
||||
this.show_signin_form();
|
||||
},
|
||||
|
||||
click_header_caption: function(e) {
|
||||
this.flags.on_signin = false;
|
||||
this.enter_header_caption(e);
|
||||
|
|
@ -55,7 +69,7 @@ NEWSBLUR.Welcome = Backbone.View.extend({
|
|||
|
||||
start_rotation: function() {
|
||||
if (this.$('.NB-welcome-header-account').hasClass('NB-active')) {
|
||||
this.show_signin_form();
|
||||
this.stop_rotation();
|
||||
}
|
||||
var $first_img = this.$('.NB-welcome-header-image img').eq(0);
|
||||
if ($first_img[0].complete) {
|
||||
|
|
@ -87,7 +101,7 @@ NEWSBLUR.Welcome = Backbone.View.extend({
|
|||
var $out_img = $images.not($in_img);
|
||||
var $in_caption = $captions.eq(r);
|
||||
var $out_caption = $captions.not($in_caption);
|
||||
|
||||
console.log(['Rotate screenshots', force]);
|
||||
$out_img.removeClass('NB-active');
|
||||
$in_img.addClass('NB-active');
|
||||
|
||||
|
|
@ -108,6 +122,7 @@ NEWSBLUR.Welcome = Backbone.View.extend({
|
|||
},
|
||||
|
||||
stop_rotation: function() {
|
||||
console.log(['stop_rotation']);
|
||||
this.flags.on_signin = true;
|
||||
},
|
||||
|
||||
|
|
@ -127,7 +142,13 @@ NEWSBLUR.Welcome = Backbone.View.extend({
|
|||
|
||||
_.delay(_.bind(function() {
|
||||
this.rotate_screenshots(4, _.bind(function() {
|
||||
this.$('input[name=login-username]').focus();
|
||||
_.delay(_.bind(function() {
|
||||
if (this.$("input:focus").length) {
|
||||
console.log(['Already focused']);
|
||||
return;
|
||||
}
|
||||
this.$('input[name=login-username]').focus();
|
||||
}), 50);
|
||||
}, this));
|
||||
}, this), open ? 560 : 0);
|
||||
|
||||
|
|
@ -143,7 +164,7 @@ NEWSBLUR.Welcome = Backbone.View.extend({
|
|||
}
|
||||
var open = NEWSBLUR.reader.toggle_sidebar();
|
||||
|
||||
this.$('.NB-inner').animate({
|
||||
this.$('.NB-inner,.NB-inner-account').animate({
|
||||
paddingLeft: open ? 240 : 0
|
||||
}, {
|
||||
queue: false,
|
||||
|
|
@ -159,7 +180,7 @@ NEWSBLUR.Welcome = Backbone.View.extend({
|
|||
|
||||
NEWSBLUR.reader.close_sidebar();
|
||||
|
||||
this.$('.NB-inner').animate({
|
||||
this.$('.NB-inner,.NB-inner-account').animate({
|
||||
paddingLeft: 0
|
||||
}, {
|
||||
queue: false,
|
||||
|
|
@ -168,10 +189,6 @@ NEWSBLUR.Welcome = Backbone.View.extend({
|
|||
});
|
||||
|
||||
this.$('.NB-welcome-container').removeClass('NB-welcome-tryout');
|
||||
},
|
||||
|
||||
debug_password_autocomplete: function() {
|
||||
this.$("input[name=login-username]").focus();
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
|
@ -28,45 +28,49 @@
|
|||
|
||||
<div class="NB-welcome-header">
|
||||
<div class="NB-background">
|
||||
<div class="NB-inner">
|
||||
<div class="NB-welcome-header-logo">
|
||||
<a href="/"><img src="{{ MEDIA_URL }}img/logo_512.png" class="NB-module-logo-image" style="height: 128px;" /></a>
|
||||
</div>
|
||||
<div class="NB-welcome-header-tagline">
|
||||
<span style="font-size:24px;">NewsBlur is a personal news reader</span><br /><span style="font-size: 17px;color: #FBDB9B">bringing people together to talk about the world</span>
|
||||
</div>
|
||||
<div class="NB-welcome-header-captions">
|
||||
<div class="NB-welcome-header-caption NB-1 {% if not post_request %}NB-active{% endif %}" data-ss="1"><span>Web</span></div>
|
||||
<div class="NB-welcome-header-caption NB-2" data-ss="2"><span>iPad & iPhone</span></div>
|
||||
<div class="NB-welcome-header-caption NB-3" data-ss="3"><span>Android</span></div>
|
||||
<div class="NB-welcome-header-caption NB-welcome-header-caption-signin {% if post_request %}NB-active{% endif %}"><span>Sign in</span></div>
|
||||
</div>
|
||||
<div class="NB-welcome-header-actions">
|
||||
<div class="NB-welcome-header-action">
|
||||
<div class="NB-welcome-header-action-subtext">First</div>
|
||||
<div class="NB-button NB-button-tryout">
|
||||
<img src="{{ MEDIA_URL }}img/welcome/04-eye@2x.png" style="width: 20px; height: 13px; margin-top: 2px">
|
||||
Try out NewsBlur
|
||||
</div>
|
||||
</div>
|
||||
<div class="NB-welcome-header-action">
|
||||
<div class="NB-welcome-header-action-subtext">Then</div>
|
||||
<div class="NB-button NB-button-login">
|
||||
<img src="{{ MEDIA_URL }}img/welcome/09-lightning@2x.png" class="NB-welcome-header-action-bolt" style="width: 12px; height: 18px; margin-bottom: -2px">
|
||||
<img src="{{ MEDIA_URL }}img/reader/32-Arrow-Right.png" class="NB-welcome-header-action-arrow">
|
||||
Sign up or Log in
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="NB-welcome-header-image NB-1 {% if not post_request %}NB-active{% endif %}">
|
||||
<img src="{{ MEDIA_URL }}img/welcome/header-web.png">
|
||||
</div>
|
||||
<div class="NB-welcome-header-image NB-2">
|
||||
<img src="{{ MEDIA_URL }}img/welcome/header-ios.png">
|
||||
</div>
|
||||
<div class="NB-welcome-header-image NB-3">
|
||||
<img src="{{ MEDIA_URL }}img/welcome/header-android.png">
|
||||
</div>
|
||||
<div class="NB-inner">
|
||||
<div class="NB-welcome-header-logo">
|
||||
<a href="/"><img src="{{ MEDIA_URL }}img/logo_512.png" class="NB-module-logo-image" style="height: 128px;" /></a>
|
||||
</div>
|
||||
<div class="NB-welcome-header-tagline">
|
||||
<span style="font-size:24px;">NewsBlur is a personal news reader</span><br /><span style="font-size: 17px;color: #FBDB9B">bringing people together to talk about the world</span>
|
||||
</div>
|
||||
<div class="NB-welcome-header-captions">
|
||||
<div class="NB-welcome-header-caption NB-1 {% if not post_request %}NB-active{% endif %}" data-ss="1"><span>Web</span></div>
|
||||
<div class="NB-welcome-header-caption NB-2" data-ss="2"><span>iPad & iPhone</span></div>
|
||||
<div class="NB-welcome-header-caption NB-3" data-ss="3"><span>Android</span></div>
|
||||
<div class="NB-welcome-header-caption NB-welcome-header-caption-signin {% if post_request %}NB-active{% endif %}"><span>Sign in</span></div>
|
||||
</div>
|
||||
<div class="NB-welcome-header-actions">
|
||||
<div class="NB-welcome-header-action">
|
||||
<div class="NB-welcome-header-action-subtext">First</div>
|
||||
<div class="NB-button NB-button-tryout">
|
||||
<img src="{{ MEDIA_URL }}img/welcome/04-eye@2x.png" style="width: 20px; height: 13px; margin-top: 2px">
|
||||
Try out NewsBlur
|
||||
</div>
|
||||
</div>
|
||||
<div class="NB-welcome-header-action">
|
||||
<div class="NB-welcome-header-action-subtext">Then</div>
|
||||
<div class="NB-button NB-button-login">
|
||||
<img src="{{ MEDIA_URL }}img/welcome/09-lightning@2x.png" class="NB-welcome-header-action-bolt" style="width: 12px; height: 18px; margin-bottom: -2px">
|
||||
<img src="{{ MEDIA_URL }}img/reader/32-Arrow-Right.png" class="NB-welcome-header-action-arrow">
|
||||
Sign up or Log in
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="NB-welcome-header-image NB-1 {% if not post_request %}NB-active{% endif %}">
|
||||
<img src="{{ MEDIA_URL }}img/welcome/header-web.png">
|
||||
</div>
|
||||
<div class="NB-welcome-header-image NB-2">
|
||||
<img src="{{ MEDIA_URL }}img/welcome/header-ios.png">
|
||||
</div>
|
||||
<div class="NB-welcome-header-image NB-3">
|
||||
<img src="{{ MEDIA_URL }}img/welcome/header-android.png">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="NB-inner-account">
|
||||
|
||||
<div class="NB-welcome-header-account {% if post_request %}NB-active{% endif %}">
|
||||
<div class="NB-account-header">
|
||||
|
|
@ -134,8 +138,7 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue