From 9d9b9ca96223b21d948c8ea71aedc5a80f55934a Mon Sep 17 00:00:00 2001
From: mmk2410 <marcelmichaelkapfer@yahoo.co.nz>
Date: Mon, 15 Jun 2015 17:58:15 +0200
Subject: [PATCH] Complete material design for the blog for all screen sizes
 (responsive). Mobile-first

---
 index.php             |  1 +
 res/css/rangitaki.css | 62 ++++++++++++++++++++++++++++++++++++-------
 res/js/app.js         | 62 ++++++++++++++++++++++++++++++++++---------
 3 files changed, 103 insertions(+), 22 deletions(-)
diff --git a/index.php b/index.php
index 313d6c6..05c65e8 100644
--- a/index.php
+++ b/index.php
@@ -51,6 +51,7 @@ THE SOFTWARE.
 
 <body>
     <?php if($nav_drawer == "yes"){ ?>
+    <div class="overlay"></div>
     <div class="nav">
         <div class="divider"></div>
         <?php
diff --git a/res/css/rangitaki.css b/res/css/rangitaki.css
index 6fddb50..8194f02 100644
--- a/res/css/rangitaki.css
+++ b/res/css/rangitaki.css
@@ -37,17 +37,28 @@ body{
 
 .main{
     height: 100%;
-    width: calc(100% - 300px);
-    margin-left: 300px;
+    width: 100% - 300px;
+    margin-left: 0px;
 }
 
+.overlay {
+    opacity: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: black;
+    width: 100%;
+    z-index: 30;
+    height: 100%;
+    display: none;
+}
 /*      HEADER      */
 .header{
     background-color: #ff4415;
     position: fixed;
     top: 0px;
     right: 0px;
-    left: 300px;
+    left: 0px;
     width: 100%;
     height: 64px;
     box-shadow: 2px 0px 2px 2px rgba(62, 62, 62, 0.45);
@@ -64,11 +75,9 @@ body{
 }
 
 .nav-img{
-    left: 19px;
-    top: 19px;
     height: 26px;
-    position: absolute;
-    display: none;
+    padding: 19px;
+    cursor: pointer;
 }
 
 /*      NAV DRAWER      */
@@ -78,11 +87,12 @@ body{
     position: fixed;
     height: 100%;
     top: 0px;
-    left: 0px;
+    left: -300px;
     background-color: #fff;
     padding-top: 64px;
     border-right: 1px solid #e0e0e0;
     transition: background-color 125ms ease-in-out 0ms;
+    z-index: 40;
 }
 
 .nav-item, .nav-item-static{
@@ -118,12 +128,13 @@ body{
 .card{
     margin-right: auto;
     margin-left: auto;
-    width: 65%;
+    width: 75%;
     background: #fff;
     border-radius: 2px;
     padding: 24px;
     box-shadow: 0px 1px 1.5px 1.5px rgba(62, 62, 62, 0.3);
     margin-bottom: 40px;
+    max-width: 1160px;
 }
 
 .card a{
@@ -222,4 +233,37 @@ body{
 
 .footer a:hover{
     border-bottom-color: #383838;
+}
+    
+@media screen and (min-width: 1440px) {
+ 
+    .nav{
+        left: 0px;
+    }
+    
+    .nav-img{
+        display: none;
+    }
+    
+    .header{
+        left: 300px;
+    }
+    
+    .main{
+        margin-left: 300px;
+        width: calc(100% - 300px);
+    }
+    
+    .card{
+        width: 1160px;
+    }
+    
+}
+
+@media screen and (max-width: 720px){
+    
+    .card{
+        width: 82%;
+    }
+    
 }
\ No newline at end of file
diff --git a/res/js/app.js b/res/js/app.js
index 4b77621..faec8c3 100644
--- a/res/js/app.js
+++ b/res/js/app.js
@@ -24,26 +24,62 @@
 
 var main = function(){
     
-    $('.fabmenu').mouseenter(function(){
-       $('.subfab').fadeIn(125);
-       $('.fab-img').fadeOut(60, function callback(){
-          $('.fab-img').attr("src", "http://c2/rangitaki/res/img/close.svg"); 
-       });
-       $('.fab-img').fadeIn(60);
+    var fabActive = false;
+    $('.fabmenu').click(function(){
+        if(!(fabActive)){
+            fabFadeIn();
+            fabActive = true;
+        } else {
+            fabFadeOut();
+            fabActive = false;
+        }
     });
     
-    $('.fabmenu').mouseleave(function(){
-       $('.subfab').fadeOut(125); 
-       $('.fab-img').fadeOut(60, function callback(){
-          $('.fab-img').attr("src", "http://c2/rangitaki/res/img/share.svg"); 
-       });
-       $('.fab-img').fadeIn(60);
+    var navOpen = false;
+    $('.nav-img, .overlay').click(function(){
+       if(!(navOpen)){
+           openNav();
+           navOpen = true;
+       } else {
+           closeNav();
+           navOpen = false;
+       }
     });
+  
     
-}
+};
 
 $(document).ready(main);
 
 function goBack(){
     history.go(-1);
+}
+
+function fabFadeIn(){
+    $('.subfab').fadeIn(125);
+    $('.fab-img').fadeOut(60, function callback(){
+        $('.fab-img').attr("src", "http://c2/rangitaki/res/img/close.svg"); 
+    });
+    $('.fab-img').fadeIn(60);
+}
+
+function fabFadeOut(){
+    $('.subfab').fadeOut(125); 
+    $('.fab-img').fadeOut(60, function callback(){
+       $('.fab-img').attr("src", "http://c2/rangitaki/res/img/share.svg"); 
+    });
+    $('.fab-img').fadeIn(60);
+}
+
+function openNav(){
+    $('.nav').animate({"left":"0px"}, 125);
+    $('.overlay').show();
+    $('.overlay').animate({"opacity":"0.4"}, 125);
+}
+
+function closeNav(){
+    $('.nav').animate({"left":"-300px"}, 125);
+    $('.overlay').animate({"opacity":"0.0"}, 125, function(){
+        $('.overlay').hide();
+    });
 }
\ No newline at end of file
