mirror of
https://github.com/samuelclay/NewsBlur.git
synced 2025-09-18 21:50:56 +00:00
Finishign up interaction of iphone app trailer page. Need auto switching.
This commit is contained in:
Samuel Clay
parent
eb114aef53
commit
369ad66c69
5 changed files with 62 additions and 41 deletions
|
|
@ -5960,7 +5960,7 @@ background: transparent;
|
|||
/* =============== */
|
||||
|
||||
.NB-static-iphone .NB-iphone-main {
|
||||
margin: 12px 36px 0;
|
||||
margin: 24px 36px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -5974,12 +5974,12 @@ background: transparent;
|
|||
left bottom,
|
||||
left top,
|
||||
color-stop(0.06, #1E3C54),
|
||||
color-stop(0.84, #648295)
|
||||
color-stop(0.94, #648295)
|
||||
);
|
||||
background-image: -moz-linear-gradient(
|
||||
center bottom,
|
||||
#1E3C54 6%,
|
||||
#648295 84%
|
||||
#648295 94%
|
||||
);
|
||||
color: white;
|
||||
text-shadow: 0 -1px 0px #101C3B;
|
||||
|
|
@ -5988,7 +5988,7 @@ background: transparent;
|
|||
border-radius: 6px;
|
||||
font-size: 1.14em;
|
||||
line-height: 1.73em;
|
||||
margin: 0 auto;
|
||||
margin: 0 auto 24px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
|
@ -6007,12 +6007,12 @@ background: transparent;
|
|||
left bottom,
|
||||
left top,
|
||||
color-stop(0.06, #182A42),
|
||||
color-stop(0.84, #516A83)
|
||||
color-stop(0.94, #516A83)
|
||||
);
|
||||
background-image: -moz-linear-gradient(
|
||||
center bottom,
|
||||
#182A42 6%,
|
||||
#516A83 84%
|
||||
#516A83 94%
|
||||
);
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-download img {
|
||||
|
|
@ -6042,12 +6042,13 @@ background: transparent;
|
|||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
margin: 24px auto 0;
|
||||
margin: 12px auto 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
clear: left;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-features li {
|
||||
list-style-image: none;
|
||||
|
|
@ -6056,13 +6057,9 @@ background: transparent;
|
|||
}
|
||||
|
||||
.NB-static-iphone .NB-iphone-features .NB-iphone-feature {
|
||||
margin: 0 24px 24px 0;
|
||||
padding: 12px 12px 12px 12px;
|
||||
float: left;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-features .NB-iphone-feature.NB-last {
|
||||
margin-right: 0;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-features .NB-iphone-feature.NB-first {
|
||||
width: 160px;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-features .NB-iphone-feature img {
|
||||
width: 128px;
|
||||
|
|
@ -6081,20 +6078,41 @@ background: transparent;
|
|||
|
||||
.NB-static-iphone .NB-iphone-mockup {
|
||||
float: right;
|
||||
margin: 12px 48px 0 0;
|
||||
width: 384px;
|
||||
height: 576px;
|
||||
border: 1px solid #7F2021;
|
||||
margin: 132px 48px 0 0;
|
||||
width: 320px;
|
||||
height: 460px;
|
||||
position: relative;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-mockup .NB-iphone-skeleton {
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: -32px;
|
||||
width: 381px;
|
||||
height: 729px;
|
||||
background: transparent url('../img/iphone/skeleton.png') no-repeat 0 0;
|
||||
z-index: 0;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-mockup .NB-iphone-features {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
width: 320px;
|
||||
height: 460px;
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.NB-static-iphone .NB-iphone-mockup .NB-iphone-feature {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-mockup .NB-iphone-feature img {
|
||||
width: 384px;
|
||||
height: 576px;
|
||||
width: 320px;
|
||||
height: 460px;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-right: 1px solid #505050;
|
||||
}
|
||||
BIN
media/img/iphone/skeleton.png
Normal file
BIN
media/img/iphone/skeleton.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
media/img/originals/Download.png
Normal file
BIN
media/img/originals/Download.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
media/img/reader/iphone_skeleton.png
Normal file
BIN
media/img/reader/iphone_skeleton.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
|
|
@ -11,9 +11,10 @@
|
|||
</div>
|
||||
|
||||
<div class="NB-iphone-mockup">
|
||||
<ul class="NB-iphone-features">
|
||||
<div class="NB-iphone-skeleton"></div>
|
||||
<ul class="NB-iphone-features">
|
||||
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="NB-iphone-main">
|
||||
|
|
@ -28,34 +29,34 @@
|
|||
<li class="NB-iphone-feature NB-first" data-screenshot="1">
|
||||
<img src="{{ MEDIA_URL }}img/iphone/v1.1 - Screenshot 1.png" />
|
||||
<div class="NB-iphone-feature-title">All your sites</div>
|
||||
<div class="NB-iphone-feature-subtitle">Read</div>
|
||||
{# <div class="NB-iphone-feature-subtitle">Read</div> #}
|
||||
</li>
|
||||
<li class="NB-iphone-feature" data-screenshot="2">
|
||||
<img src="{{ MEDIA_URL }}img/iphone/v1.2 - iPhone Screenshot 2.png" />
|
||||
<div class="NB-iphone-feature-title">All your sites</div>
|
||||
<div class="NB-iphone-feature-subtitle">Read</div>
|
||||
<div class="NB-iphone-feature-title">River of News</div>
|
||||
{# <div class="NB-iphone-feature-subtitle">Read</div> #}
|
||||
</li>
|
||||
<li class="NB-iphone-feature NB-last" data-screenshot="3">
|
||||
<img src="{{ MEDIA_URL }}img/iphone/v1.2 - iPhone Screenshot 3.png" />
|
||||
<div class="NB-iphone-feature-title">All your sites</div>
|
||||
<div class="NB-iphone-feature-subtitle">Read</div>
|
||||
<div class="NB-iphone-feature-title">Story Navigation</div>
|
||||
{# <div class="NB-iphone-feature-subtitle">Read</div> #}
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="NB-iphone-features">
|
||||
<li class="NB-iphone-feature NB-first" data-screenshot="4">
|
||||
<img src="{{ MEDIA_URL }}img/iphone/v1.2 - iPhone Screenshot 4.png" />
|
||||
<div class="NB-iphone-feature-title">All your sites</div>
|
||||
<div class="NB-iphone-feature-subtitle">Read</div>
|
||||
<div class="NB-iphone-feature-title">Original sites</div>
|
||||
{# <div class="NB-iphone-feature-subtitle">Read</div> #}
|
||||
</li>
|
||||
<li class="NB-iphone-feature" data-screenshot="5">
|
||||
<img src="{{ MEDIA_URL }}img/iphone/v1.2 - iPhone Screenshot 5.png" />
|
||||
<div class="NB-iphone-feature-title">All your sites</div>
|
||||
<div class="NB-iphone-feature-subtitle">Read</div>
|
||||
<div class="NB-iphone-feature-title">Add & manage sites</div>
|
||||
{# <div class="NB-iphone-feature-subtitle">Read</div> #}
|
||||
</li>
|
||||
<li class="NB-iphone-feature NB-last" data-screenshot="6">
|
||||
<img src="{{ MEDIA_URL }}img/iphone/Default.png" />
|
||||
<div class="NB-iphone-feature-title">All your sites</div>
|
||||
<div class="NB-iphone-feature-subtitle">Read</div>
|
||||
<div class="NB-iphone-feature-title">NewsBlur iPhone App</div>
|
||||
{# <div class="NB-iphone-feature-subtitle">Read</div> #}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -79,17 +80,19 @@ $(document).ready(function() {
|
|||
$mockup.each(function() {
|
||||
var $this = $(this);
|
||||
var screenshot_filtered = _.contains(screenshots, $this.data('screenshot'));
|
||||
if (screenshot_filtered) {
|
||||
$this.animate({'left': -384}, {'duration': 300, 'queue': false, 'easing': 'easeInOutQuad'});
|
||||
var left = -320;
|
||||
if (screenshot_filtered) {
|
||||
if (parseInt($this.css('left'), 10) > 0) left = 320;
|
||||
// $this.css('z-index', 1);
|
||||
$this.animate({'left': left}, {'duration': 320, 'queue': false, 'easing': 'easeInOutQuad'});
|
||||
} else if (!screenshot_filtered) {
|
||||
if (parseInt($this.css('left'), 10) == -384) {
|
||||
if (parseInt($this.css('left'), 10) <= -320) {
|
||||
$this.css({
|
||||
'opacity': 1,
|
||||
'z-index': 1,
|
||||
'left': 384
|
||||
'left': 320
|
||||
});
|
||||
}
|
||||
$this.animate({'left': 0}, {'duration': 300, 'queue': false, 'easing': 'easeInOutQuad'});
|
||||
// $this.css('z-index', 2);
|
||||
$this.animate({'left': 0}, {'duration': 320, 'queue': false, 'easing': 'easeInOutQuad'});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue