[gimp-web/gimp-web-static] Testing out a slide down nav for mobile

[Pat David <patdavid src gnome org>]

commit da1e57db4915bb0df4f1834301262841437674d4
Author: Pat David <patdavid gmail com>
Date:   Mon Sep 21 16:44:58 2015 -0500

    Testing out a slide down nav for mobile

 content/js/push-menu.js            |   30 +++++++++++++++
 themes/newgimp/static/css/gimp.css |   71 ++++++++++++++++++++++++++++++++++++
 themes/newgimp/templates/base.html |   47 ++++++------------------
 3 files changed, 113 insertions(+), 35 deletions(-)
---
diff --git a/content/js/push-menu.js b/content/js/push-menu.js
new file mode 100644
index 0000000..0003d47
--- /dev/null
+++ b/content/js/push-menu.js
@@ -0,0 +1,30 @@
+/*
+ * If you thought my Python was bad
+ * wait until you get a load of my js
+ */
+
+var navel = document.getElementById('navel');
+var page = document.getElementById('pushPage');
+var menu = document.getElementById('menu');
+
+menu.style.visibility = 'visible';
+
+var toggle = function(e){
+    e.preventDefault();
+
+    var page = document.getElementById('pushPage');
+    var menu = document.getElementById('menu');
+
+    if( menu.className.indexOf('show') !== -1 ){
+        menu.className = "hide";
+        page.removeEventListener('click', toggle, false);
+        page.removeEventListener('touchstart', toggle, false);
+    }else{
+        menu.className = "show";
+        page.addEventListener('click', toggle, false);
+        page.addEventListener('touchstart', toggle, false);
+    }
+}
+
+navel.addEventListener("touchstart", toggle, false);
+navel.addEventListener("click", toggle, false);
diff --git a/themes/newgimp/static/css/gimp.css b/themes/newgimp/static/css/gimp.css
index a7d3c85..d05962d 100644
--- a/themes/newgimp/static/css/gimp.css
+++ b/themes/newgimp/static/css/gimp.css
@@ -309,3 +309,74 @@ footer .nav-bottom a {
         margin-left: 0;
     }
 }
+
+
+
+/* Working on responsive/mobile styling here
+ */
+ media ( max-width: 40rem ){
+
+    nav#menu {
+        visibility: hidden;
+        position: fixed;
+        top: 0;
+        padding: 0;
+        width: 100%;
+        z-index: 5;
+        -webkit-transition: -webkit-transform 0.25s ease-in-out;
+        -moz-transition: -moz-transform 0.25s ease-in-out;
+        -o-transition: -o-transform 0.25s ease-in-out;
+        transition: transform 0.25s ease-in-out;
+        -webkit-transform: translateY(-100%);
+        -moz-transform: translateY(-100%);
+        -o-transform: translateY(-100%);
+        -ms-transform: translateY(-100%);
+        transform: translateY(-100%);
+    }
+
+    nav#menu.show {
+        -webkit-transform: translateY(0);
+        -moz-transform: translateY(0);
+        -o-transform: translateY(0);
+        -ms-transform: translateY(0);
+        transform: translateY(0);
+    }
+
+    nav#menu.hide {
+        -webkit-transform: translateY(-100%);
+        -moz-transform: translateY(-100%);
+        -o-transform: translateY(-100%);
+        -ms-transform: translateY(-100%);
+        transform: translateY(-100%);
+    }
+
+    #menu ul {
+        text-align: center;
+        background-color: #0e2426;
+    }
+
+    nav#menu ul li {
+        display: block;
+        font-size: 1rem;
+        letter-spacing: 0.1rem;
+        padding-bottom: 0.75rem;
+        padding-top: 0.75rem;
+    }
+
+    #menu ul a#navel {
+        font-size: 2rem;
+        color: gray;
+        display: block;
+        padding-left: 1rem;
+        padding-top: 0.5rem;
+        background-color: transparent;
+        position: absolute;
+    }
+}
+
+
+ media ( min-width: 40rem ){
+    #menu ul a#navel {
+        display: none;
+    }
+}
diff --git a/themes/newgimp/templates/base.html b/themes/newgimp/templates/base.html
index ad070e7..eca1121 100644
--- a/themes/newgimp/templates/base.html
+++ b/themes/newgimp/templates/base.html
@@ -17,6 +17,7 @@
         <link rel="stylesheet" type="text/css" href="/theme/css/gimp.css" />
         <link rel="stylesheet" type="text/css" href="/theme/css/font-awesome-4.4.0/css/font-awesome.min.css" 
/>
 
+
         {% if FEED_ALL_ATOM %}
         <link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" 
title="{{ SITENAME }} Full Atom Feed" />
         {% endif %}
@@ -46,7 +47,7 @@
 
 <body id="index" class="home">
 
-        <nav id="menu">
+        <nav id="menu" >
             <ul>
                 <li id='gimp-home'><a href="/"><img src='/images/wilber-tiny.png'> GIMP</a></li>
                 <li><a href="/downloads/"><i class="fa fa-download"></i> Download</a></li>
@@ -72,45 +73,17 @@
                 {% endfor %}
               {% endif %}
             {% endif %}
+
+            <a id="navel" href="#bottom-nav" ><i class="fa fa-bars"></i></a>
             </ul>
         </nav><!-- /#menu -->
 
+    <div id="pushPage">
 
         {% block header %}
         {% endblock header %}
 
-        {#
-        <nav id="menu">
-            <ul>
-                <li id='gimp-home'><a href="/"><img src='/images/wilber-tiny.png'> GIMP</a></li>
-                <li><a href="/downloads/"><i class="fa fa-download"></i> Download</a></li>
-                <li><a href="/news/"><i class="fa fa-newspaper-o"></i> News</a></li>
-            {% for title, link in MENUITEMS %}
-                <li><a href="{{ link }}">{{ title }}</a></li>
-            {% endfor %}
-            {% if DISPLAY_PAGES_ON_MENU %}
-              {% for p in PAGES %}
-                {% if p.parents|length == 1 %}
-                  <li{% if p == page %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ p.url }}">{{ 
p.title }}</a></li>
-                {% endif %}
-                {# The old way...
-                  {% if not p.parent %}
-                    <li{% if p == page %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ p.url }}">{{ 
p.title }}</a></li>
-                  {% endif %}
-                #}
-                {#
-              {% endfor %}
-            {% else %}
-              {% if DISPLAY_CATEGORIES_ON_MENU %}
-                {% for cat, null in categories %}
-                  <li{% if cat == category %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url 
}}">{{ cat }}</a></li>
-                {% endfor %}
-              {% endif %}
-            {% endif %}
-            </ul>
-        </nav><!-- /#menu -->
-        #}
-
+        
         {% block content %}
         {% endblock %}
 
@@ -118,7 +91,7 @@
             <div class="container">
                 <div class="row clearfix">
                     <div class="column third">
-                        <ul class="nav-bottom">
+                        <ul class="nav-bottom" id='bottom-nav'>
                             <li id='nav-btm-gimp-home'><a href="/"><img src='/images/wilber-tiny.png'> 
GIMP</a></li>
                             <li id="nav-btm-downloads"><a href="/downloads/"><i class="fa fa-download 
fa-fw"></i> Download</a></li>
                             <li id="nav-btm-news"><a href="/news/"><i class="fa fa-newspaper-o fa-fw"></i> 
News</a></li>
@@ -151,11 +124,15 @@
                         <a href="/news.rdf">GIMP News Feed</a> | <a href="/webmasters.html">Contacting Us</a>
                     </div>
                     <div class="column half">
-                        &copy; 2001-2014 <a href="/team.html">The GIMP Team</a>
+                        &copy; 2001-2015 <a href="/team.html">The GIMP Team</a>
                     </div>
                 </div>
             </div>
         </footer><!-- /#contentinfo -->
 
+    </div>
+
+    <script src="/js/push-menu.js"></script>
+
 </body>
 </html>