Responsive

cortezcristian · Sep 4, 2015 · 488cb2b · 488cb2b
1 parent 6250b17
commit 488cb2b
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 6 deletions.
diff --git a/config/config-local.json b/config/config-local.json
@@ -1,6 +1,6 @@
 {
     "app": {
-        "domain" : "127.0.0.1",
+        "domain" : "0.0.0.0",
         "port": 3000,
         "logs": {
             "enabled": false,

diff --git a/public/scripts/site/app.js b/public/scripts/site/app.js
@@ -1,6 +1,23 @@
 'use strict';
 $(document).ready(function(){
 
+    var findBootstrapEnvironment = function() {
+        var envs = ['xs', 'sm', 'md', 'lg'];
+
+        var el = $('<div>');
+        el.appendTo($('body'));
+
+        for (var i = envs.length - 1; i >= 0; i--) {
+            var env = envs[i];
+
+            el.addClass('hidden-'+env);
+            if (el.is(':hidden')) {
+                el.remove();
+                return env
+            }
+        };
+    }
+
     var panels = function(){
       var ho = 45;
       var h = $(window).height() - ho;
@@ -15,6 +32,8 @@ $(document).ready(function(){
 
     }
 
+
+
     panels();
     $(window).resize(function(){
         panels();
@@ -25,17 +44,32 @@ $(document).ready(function(){
       $('.github-btn-con').css("margin-top","8px");
     }, 1200);
 
+    var env = findBootstrapEnvironment();
+
+    // Start as collapsed for small devices
+    if(env === 'xs' || env === 'sm'){
+        $("#side").toggleClass('do-collapse');
+    }
+
     $('a.collapser').click(function(e){
         e.preventDefault();
         e.stopPropagation();
         $("#side").toggleClass('do-collapse');
         if($("#side").hasClass('do-collapse')){
-            $("#side").width('40px');
+            //$("#side").width('40px');
             $("#content").innerWidth(($(window).width()-41)+'px');
+            if(env === 'xs' || env === 'sm'){
+                $("#side").css('z-index', '1');
+                //$("#content").css('left', '');
+            }
             //console.info($("#content").width(), $(window).width()-41);
         } else {
             $("#side").width('');
             $("#content").width('');
+            if(env === 'xs' || env === 'sm'){
+                $("#side").css('z-index', '3');
+                //$("#content").css('left', '260px');
+            }
         }
     });
 

diff --git a/views/index.jade b/views/index.jade
@@ -3,7 +3,7 @@ extends layout
 block content
   .row.our-main-content
     .col-xs-1.col-sm-1.col-md-3#side
-      a.collapser(href="javascript:")
+      a.collapser(href="javascript:",style="display:block;background-color: #333;")
         i.fa.fa-chevron-left
         i.fa.fa-chevron-right.hide
       h2.text-center(style="background-color: #333;color:#858585;padding:10px;margin:0;font-size:20px;") 

diff --git a/views/stylus/style.styl b/views/stylus/style.styl
@@ -28,7 +28,6 @@ body
     .mean-logo
       height:30px;
     #side.do-collapse
-      width: 3%;
       .fa-chevron-left
         display: none !important
       .fa-chevron-right
@@ -44,9 +43,11 @@ body
       height: 100%;
       left: 0;
       bottom: 0;
-      padding: 10px 0 0 0;
+      min-width: 260px !important;
+      padding: 0;
       background-color: #4a4a4a;
       overflow: hidden;
+      box-shadow: 2px -2px 10px #000;
       #topics
         .ui-fancytree
           background-color: #4A4A4A;
@@ -57,11 +58,14 @@ body
           &:hover
             background-color: #6B6B6B;
       //overflow: auto;
+      &.do-collapse
+        a.collapser
+          float: left;
       a.collapser
         padding: 16px;
         text-decoration: none;
         color: #777;
-        float: right;
+        float: left;
         .fa-chevron-left
           display: block
         .fa-chevron-right
@@ -113,6 +117,7 @@ body
             background: #3D3D3D;
             border-bottom: 1px solid #5B5B5B;
     #content
+      background: #fff
       box-shadow: 2px 0 10px #000;
       position: absolute;
       top: 0;
@@ -122,6 +127,7 @@ body
       padding: 10px 35px;
       height: 100%;
       overflow: auto;
+      z-index: 2;
       h1, h2, h3
         padding-top: 30px;
 
@@ -310,6 +316,9 @@ body
   box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.05) inset;
   text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
 }
+.sidebar-nav ul li ul li ul li a {
+  background: rgba(93, 93, 93, 0.54);
+}
 .sidebar-nav ul a:hover, .sidebar-nav ul a:focus, .sidebar-nav ul a:active {
   color: #fff;
   text-decoration: none;