fixing up the phone placement
This commit is contained in:
Родитель
b0479a3bb0
Коммит
79815e0107
|
@ -13,9 +13,11 @@ base_url: "../"
|
|||
<header class="docs-masthead">
|
||||
<div class="container column-group">
|
||||
<div class="column units-2">
|
||||
<a class="icon icon-list" href="#"></a>
|
||||
<a class="icon icon-download" href="#"></a>
|
||||
<h1 class="logotype">R</h1>
|
||||
<h2 class="section-title">Components</h2>
|
||||
<p class="section-description">Design patterns that serve as basic building blocks.</p>
|
||||
<p class="section-description">Design patterns that serve as basic building blocks</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
@ -44,17 +46,6 @@ base_url: "../"
|
|||
<!-- Components -->
|
||||
<div class="column-group">
|
||||
<div class="column units-2 lg-units-7">
|
||||
<!-- In iPhone examples -->
|
||||
<div class="iphone">
|
||||
<div class="iphone-content">
|
||||
<div id="iwindow">
|
||||
<header class="bar-nav">
|
||||
<h1 class="title">Title</h1>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bars -->
|
||||
<article class="component active" id="bars">
|
||||
<h3 class="component-title">Title bar</h3>
|
||||
|
@ -1058,7 +1049,21 @@ document
|
|||
window.addEventListener('push', myFunction);
|
||||
{% endhighlight %}
|
||||
|
||||
</article>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="phone-column column units-2 lg-units-5">
|
||||
<!-- In iPhone examples -->
|
||||
<div class="iphone">
|
||||
<div class="iphone-content">
|
||||
<div id="iwindow">
|
||||
<header class="bar-nav">
|
||||
<h1 class="title">Title</h1>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -82,11 +82,10 @@ h1, h2, h3, h4, h5, h6 {
|
|||
}
|
||||
|
||||
.docs-masthead {
|
||||
padding-top: 70px;
|
||||
padding-bottom: 100px;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 130px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #fcfcfc;
|
||||
background-color: #1eb0e9;
|
||||
}
|
||||
.docs-masthead .logotype {
|
||||
display: inline-block;
|
||||
|
@ -95,12 +94,13 @@ h1, h2, h3, h4, h5, h6 {
|
|||
padding: 10px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
color: #ccc;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
line-height: 16px;
|
||||
border: 2px solid #ddd;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50px;
|
||||
opacity: .7;
|
||||
-webkit-transition: all 0.2s linear;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
@ -111,12 +111,30 @@ h1, h2, h3, h4, h5, h6 {
|
|||
font-weight: 300;
|
||||
}
|
||||
.docs-masthead .section-title {
|
||||
color: #333;
|
||||
color: #fff;
|
||||
font-size: 45px;
|
||||
}
|
||||
.docs-masthead .section-description {
|
||||
color: #777;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
opacity: .7;
|
||||
}
|
||||
.docs-masthead .icon {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
color: #fff;
|
||||
opacity: .7;
|
||||
-webkit-transition: all 0.2s linear;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
.docs-masthead .icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.docs-masthead .icon-download {
|
||||
left: 15px;
|
||||
}
|
||||
.docs-masthead .icon-list {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.docs-navigation {
|
||||
|
@ -131,8 +149,11 @@ h1, h2, h3, h4, h5, h6 {
|
|||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.platform-toggle .segmented-controller {
|
||||
margin: 10px auto;
|
||||
max-width: 300px;
|
||||
margin: 8px auto;
|
||||
}
|
||||
.platform-toggle .segmented-controller li {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.component {
|
||||
|
@ -247,14 +268,18 @@ hr {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.phone-column {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.iphone {
|
||||
position: fixed;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50%;
|
||||
float: right;
|
||||
width: 395px;
|
||||
height: 813px;
|
||||
margin-left: 140px;
|
||||
margin-left: -13px;
|
||||
font-family: "Helvetica Neue", sans-serif;
|
||||
background-image: url("../img/iphone.png");
|
||||
background-size: 100%;
|
||||
|
@ -264,6 +289,10 @@ hr {
|
|||
-webkit-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
.iphone.iphone-fixed {
|
||||
position: fixed;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.iphone .iphone-content {
|
||||
position: absolute;
|
||||
|
|
|
@ -35,9 +35,10 @@ $(function() {
|
|||
|
||||
iphone.initialLeft = iphone.offset().left;
|
||||
iphone.initialTop = iphone.initialTop || iphone.offset().top;
|
||||
//iphone.dockingOffset = ($(window).height() + 20 + $('.docs-masthead').height() - iphone.height())/2;
|
||||
iphone.dockingOffset = ($(window).height() + $('.platform-toggle').height() - iphone.height())/2;
|
||||
checkDesktopContent();
|
||||
calculateScroll();
|
||||
console.log(iphone.dockingOffset);
|
||||
|
||||
if (!eventListeners) addEventListeners();
|
||||
}
|
||||
|
@ -88,12 +89,12 @@ $(function() {
|
|||
if(pageHeight - currentTop < footerHeight + contentPadding + 1400) {
|
||||
iphone[0].className = "iphone iphone-bottom";
|
||||
iphone[0].setAttribute('style','')
|
||||
// } else if((iphone.initialTop - currentTop) <= iphone.dockingOffset) {
|
||||
// iphone[0].className = "iphone iphone-fixed";
|
||||
// iphone.css({top: iphone.dockingOffset})
|
||||
} else {
|
||||
} else if((iphone.initialTop - currentTop) <= iphone.dockingOffset + 40) {
|
||||
iphone[0].className = "iphone iphone-fixed";
|
||||
iphone.css({top: iphone.dockingOffset})
|
||||
} else {
|
||||
iphone[0].className = "iphone"
|
||||
iphone[0].setAttribute('style','')
|
||||
}
|
||||
|
||||
// Injection of components into phone
|
||||
|
|
|
@ -89,11 +89,10 @@ h1, h2, h3, h4, h5, h6 {
|
|||
// --------------------------------------------------
|
||||
|
||||
.docs-masthead {
|
||||
padding-top: 70px;
|
||||
padding-bottom: 100px;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 130px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #fcfcfc;
|
||||
background-color: #1eb0e9;
|
||||
|
||||
.logotype {
|
||||
display: inline-block;
|
||||
|
@ -102,12 +101,13 @@ h1, h2, h3, h4, h5, h6 {
|
|||
padding: 10px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
color: #ccc;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
line-height: 16px;
|
||||
border: 2px solid #ddd;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50px;
|
||||
opacity: .7;
|
||||
@include transition(all .2s linear);
|
||||
}
|
||||
.section-title,
|
||||
|
@ -117,12 +117,30 @@ h1, h2, h3, h4, h5, h6 {
|
|||
font-weight: 300;
|
||||
}
|
||||
.section-title {
|
||||
color: #333;
|
||||
color: #fff;
|
||||
font-size: 45px;
|
||||
}
|
||||
.section-description {
|
||||
color: #777;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
opacity: .7;
|
||||
}
|
||||
.icon {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
color: #fff;
|
||||
opacity: .7;
|
||||
@include transition(all .2s linear);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.icon-download {
|
||||
left: 15px;
|
||||
}
|
||||
.icon-list {
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
.docs-navigation {
|
||||
|
@ -141,8 +159,12 @@ h1, h2, h3, h4, h5, h6 {
|
|||
border-bottom: 1px solid #ddd;
|
||||
|
||||
.segmented-controller {
|
||||
margin: 10px auto;
|
||||
max-width: 300px;
|
||||
margin: 8px auto;
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -258,21 +280,28 @@ hr {
|
|||
// Tablet to desktop
|
||||
// --------------------------------------------------
|
||||
@media screen and (min-width: 768px) {
|
||||
.phone-column {
|
||||
position: relative;
|
||||
}
|
||||
.iphone {
|
||||
// display: block;
|
||||
position: fixed;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50%;
|
||||
float: right;
|
||||
width: 395px;
|
||||
height: 813px;
|
||||
margin-left: 140px;
|
||||
margin-left: -13px;
|
||||
font-family: "Helvetica Neue", sans-serif;
|
||||
background-image: url("../img/iphone.png");
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
@include animation-name(fadein);
|
||||
@include animation-duration(2s);
|
||||
|
||||
&.iphone-fixed {
|
||||
position: fixed;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
.iphone .iphone-content {
|
||||
position: absolute;
|
||||
|
|
|
@ -37,7 +37,6 @@
|
|||
|
||||
}
|
||||
|
||||
|
||||
// Transforms
|
||||
// --------------------------------------------------
|
||||
@mixin transform($transform) {
|
||||
|
|
Загрузка…
Ссылка в новой задаче