fixing up the phone placement

2014-01-11 17:00:34 -08:00 · 2014-01-11 17:00:34 -08:00 · 79815e0107
--- a/components.html
+++ b/components.html
@ -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>
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@ -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;
--- a/docs-assets/js/docs.js
+++ b/docs-assets/js/docs.js
@ -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
--- a/lib/sass/docs.scss
+++ b/lib/sass/docs.scss
@ -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;
--- a/lib/sass/mixins.scss
+++ b/lib/sass/mixins.scss
@ -37,7 +37,6 @@

 }

-
 // Transforms
 // --------------------------------------------------
@mixin transform($transform) {