playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

fixing up the phone placement

pull/249/head
connors 11 years ago
parent
b0479a3bb0
commit
79815e0107
5 changed files with 109 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      components.html
  2. 53
      docs-assets/css/docs.css
  3. 11
      docs-assets/js/docs.js
  4. 55
      lib/sass/docs.scss
  5. 1
      lib/sass/mixins.scss

35
components.html
Unescape View File

@ -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>

53
docs-assets/css/docs.css
Unescape View File

@ -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;

11
docs-assets/js/docs.js
Unescape View File

@ -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

55
lib/sass/docs.scss
Unescape View File

@ -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;

1
lib/sass/mixins.scss
Unescape View File

@ -37,7 +37,6 @@
}
// Transforms
// --------------------------------------------------
@mixin transform($transform) {

Write Preview
Loading…
Cancel
Save