Merge pull request #561 from telerik/responsive-docs

Add styles for responsive docs

Author: gyoshev

_assets/javascripts/app.js

@@ -98,3 +98,21 @@ $(function(){
         ul.appendTo(this);
     });
 });
+
+$(function(){
+    $(".toggle-nav").click(function() {
+        $("#page-search").removeClass("search-visibility");                  
+        $("#page-inner-content").removeClass("move-inner-content");                  
+        $("#page-nav").toggleClass("nav-visibility");
+    });
+});
+
+$(function(){
+    $(".show-search").click(function() {
+        $("#page-nav").removeClass("nav-visibility");
+        $("#page-search").toggleClass("search-visibility");
+        $("#page-inner-content").toggleClass("move-inner-content");
+    });
+});
+
+$

_assets/stylesheets/styles.css

@@ -40,13 +40,6 @@ article, aside, footer {
    display:block;
 }
 
-#page-header,
-#page-top,
-#page-inner-content {
-    min-width: 800px;
-}
-
-
 /* Header */
 
 #page-header {
@@ -80,6 +73,7 @@ article, aside, footer {
     position: absolute;
     top: 0;
     left: 0;
+    min-width: 300px;
     width: 20%;
     height: 100%;
     overflow: auto;
@@ -447,14 +441,6 @@ footer
     padding: 0 1em 0 0;
 }
 
-/* Responsive styles */
-
-@media (max-width: 1024px) {
-    #page-nav { width: 30%; }
-    #markdown-toc,
-    #page-article { width: 70%; }
-}
-
 /* Search */
 
 #page-search {
@@ -533,3 +519,158 @@ footer
     padding: 8px 7px 7px;
 }
 
+
+.toggle-nav {
+    width: 24px; 
+    height: 24px;
+    background: transparent; 
+    display: none; 
+    position: relative;
+    margin-left: 1.833em;
+    cursor: pointer;
+}
+
+#page-nav.nav-visibility {
+    display: block;
+}
+
+#page-search.search-visibility {
+    display: block;
+    position: relative;
+    margin-top: 0;
+    top: 0;
+    left: 1.83em;
+    right: 1.83em;
+    background-color: #2a2d33;
+    width: 70%;
+    width: calc(100% - 3.666em);
+}
+
+.show-search {
+    display: inline-block;
+    min-width: 24px;
+    min-height: 24px;
+    background: url(../images/search-24.png) 0 0 no-repeat;
+    display: none;
+}
+
+@media (max-width: 1200px) {
+    #page-nav {
+       width: 30%; 
+    }
+    
+    #markdown-toc,
+    #page-article { 
+        width: 70%; 
+    }
+    
+    #page-search {
+        left: 30%;
+    }
+
+    .btn.pricing-btn {
+        display: none;
+    }
+
+    #page-search {
+        right: 390px;
+    }
+}
+
+/* Responsive styles */
+@media (max-width: 800px) {
+    body {
+        min-width: initial;
+    }
+
+    .faux-columns {
+        background-image: none;
+    }
+
+    #markdown-toc {
+        border-bottom: none;
+    }
+
+    .nav-buttons,
+    #page-nav,
+    #page-tabs,
+    #page-top #page-search {
+        display: none;
+    }
+
+    div#page-inner-content {
+        bottom: 0;
+    }
+
+    #page-article {
+        width: 100%;
+        margin-left: 0;
+        padding-left: 2em;
+        padding-right: 2em;
+    }
+
+    #page-article h1 {
+        margin-top: 1em;
+    }
+
+    .toggle-nav {
+        display: inline-block;
+    }
+
+    #logo-bar {
+        float: none;
+        display: inline-block;
+       margin-left: 1em;
+    }
+
+    #page-search {
+        width: 30%;
+        left: auto;
+        display: none;
+        background-color: #2a2d33;
+    }
+
+    #page-search > div {
+        padding: 0 3.83em 0 0;    
+    }
+
+    .toggle-nav span { 
+        position: absolute; 
+    }
+    
+    .toggle-nav span, 
+    .toggle-nav span:before,
+    .toggle-nav span:after {    
+      border-radius: 1px;
+      height: 3px;
+      width: 24px;
+      background: #fff;
+      position: absolute;
+      display: block;
+      content: '';
+    }
+
+    .toggle-nav span:before {
+      top: 16px;
+    }
+
+    .toggle-nav span:after {
+      bottom: -8px; 
+    }
+        
+    .show-search {
+        display: inline-block;
+        margin: 0;
+        position: absolute;
+        top: 27px;
+        padding: 0;
+        right: 1.833em;
+        text-align: right;
+        left: auto;
+        cursor: pointer;
+    }
+
+    footer {
+        display: none;
+    }
+}

_assets/stylesheets/theme.css

@@ -7,11 +7,15 @@
 
 #page-inner-content {
     position: absolute;
-    top: 80px;
+    top: 78px;
     bottom: 44px;
     width: 100%;
 }
 
+#page-inner-content.move-inner-content {
+    top: 126px;
+}
+
 #page-header,
 footer {
     background-color: #2a2d33;

_includes/header.html

@@ -8,9 +8,13 @@
     {% include search.html %}
 </div>
 
+<span class="show-search">
+	<span class="k-icon k-i-search"></span>
+</span>
+
 <div class="nav-buttons">
-    <a href="http://demos.telerik.com/kendo-ui/" class="btn">Demos</a>
-    <a href="http://www.telerik.com/kendo-ui/" class="btn">About</a>
-    <a href="http://www.telerik.com/purchase/kendo-ui" class="btn">Pricing</a>
+    <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
+    <a href="http://www.telerik.com/kendo-ui/" class="btn about-btn">About</a>
+    <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
     <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
 </div>

_layouts/index.html

@@ -36,6 +36,7 @@
         <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', '{{site.google_tag_manager}}');</script>
         <!-- End Google Tag Manager -->
         <header id="page-header">
+            <span class="toggle-nav"><span></span></span>
             {% include header.html %}
         </header>