Change header library
authorCharles Connell <charles@connells.org>
Tue, 1 Apr 2014 21:10:31 +0000 (17:10 -0400)
committerCharles Connell <charles@connells.org>
Tue, 1 Apr 2014 21:10:31 +0000 (17:10 -0400)
karmaworld/assets/css/global.css
karmaworld/assets/js/foundation.offcanvas.js [deleted file]
karmaworld/templates/base.html
karmaworld/templates/header.html

index 1e25aa645413717d14ea23f77f34e1cdb9418743..8f13de23334005517b5d058d92352627e7ca2a8d 100644 (file)
@@ -24,36 +24,14 @@ p {
   font-weight: inherit;
 }
 
-.nav-list ul {
-  list-style-type: none;
-  margin: 0;
-}
-
-.nav-list li {
-  display: inline;
-  padding: 0 5px 0 5px;
-}
-
-.mobile-nav-list ul {
-  list-style-type: none;
-  margin: 0;
-}
-
-.mobile-nav-list li {
-  font-size: 1.5em;
-  padding: 0 20px 0 10px;
-}
-
-.mobile-nav-item {
-  padding: 5px 0px 5px 0px;
-  border-bottom: 1px solid black;
-  width: 100%;
-  color: #999999;
+.top-bar-section ul li > a {
+  font-family: inherit;
+  font-size: 1em;
 }
 
-#header-nav {
-  text-align: right;
-  font-size: 1.3em;
+#main-header {
+  background: #333333;
+  color: #d4d4d4;
 }
 
 #header-login-nav {
@@ -65,16 +43,13 @@ p {
 #header-login-nav ul {
   color: #d4d4d4;
   font: 0.8em 'adelle-sans';
+  list-style-type: none;
+  margin: 0;
 }
 
-#logo-container {
-  padding: 5px 5px 5px 5px;
-}
-
-#main-header {
-  background: #333333;
-  color: #d4d4d4;
-  padding: 1em 0 0.4em 0;
+#header-login-nav li {
+  display: inline;
+  padding: 0 5px 0 5px;
 }
 
 .gradient-bar
diff --git a/karmaworld/assets/js/foundation.offcanvas.js b/karmaworld/assets/js/foundation.offcanvas.js
deleted file mode 100644 (file)
index c35e1ec..0000000
+++ /dev/null
@@ -1,57 +0,0 @@
-;(function ($, window, document, undefined) {
-  'use strict';
-
-  Foundation.libs.offcanvas = {
-    name : 'offcanvas',
-
-    version : '5.2.1',
-
-    settings : {},
-
-    init : function (scope, method, options) {
-      this.events();
-    },
-
-    events : function () {
-      var S = this.S;
-
-      S(this.scope).off('.offcanvas')
-        .on('click.fndtn.offcanvas', '.left-off-canvas-toggle', function (e) {
-          e.preventDefault();
-          S(this).closest('.off-canvas-wrap').toggleClass('move-right');
-        })
-        .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
-          e.preventDefault();
-          S(".off-canvas-wrap").removeClass("move-right");
-        })
-        .on('click.fndtn.offcanvas', '.left-off-canvas-menu a', function (e) {
-          e.preventDefault();
-          var href = $(this).attr('href');
-          S('.off-canvas-wrap').on('transitionend webkitTransitionEnd oTransitionEnd', function(e) {
-              window.location = href
-              S('.off-canvas-wrap').off('transitionend webkitTransitionEnd oTransitionEnd');
-          });
-          S(".off-canvas-wrap").removeClass("move-right");
-        })
-        .on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
-          e.preventDefault();
-          S(this).closest(".off-canvas-wrap").toggleClass("move-left");
-        })
-        .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
-          e.preventDefault();
-          S(".off-canvas-wrap").removeClass("move-left");
-        })
-        .on('click.fndtn.offcanvas', '.right-off-canvas-menu a', function (e) {
-          e.preventDefault();
-          var href = $(this).attr('href');
-          S('.off-canvas-wrap').on('transitionend webkitTransitionEnd oTransitionEnd', function(e) {
-              window.location = href
-              S('.off-canvas-wrap').off('transitionend webkitTransitionEnd oTransitionEnd');
-          });
-          S(".off-canvas-wrap").removeClass("move-left");
-        });
-    },
-
-    reflow : function () {}
-  };
-}(jQuery, this, this.document));
index 7a2e817fe3989818107c2aeab8b9e290aaed1013..fada1a7d140f85922803d466fd48c12fb3b4f04a 100644 (file)
 
        
 </head>
-<body class="off-canvas-wrap">
-  <div class="inner-wrap">
+<body>
 
-    <!-- include header -->
-    {% include 'header.html' %}
-    <!-- end include header -->
+  <!-- include header -->
+  {% include 'header.html' %}
+  <!-- end include header -->
 
-    <!-- block content -->
-    {% block raw_content %}
-    {% endblock %}
-    <!-- end block content -->
-
-    <!-- include footer-->
-    {% include 'footer.html' %}
-    <!-- end include footer-->
+  <!-- block content -->
+  {% block raw_content %}
+  {% endblock %}
+  <!-- end block content -->
 
-    <a class="exit-off-canvas"></a>
+  <!-- include footer-->
+  {% include 'footer.html' %}
+  <!-- end include footer-->
 
-    <!-- block bodyscripts -->
-    {% block bodyscripts %}
-    {% endblock %}
-    <!-- end block bodyscripts -->
-    <script src="{{ STATIC_URL }}js/opentip-jquery-excanvas.min.js"></script>
-    <script src="{{ STATIC_URL }}js/foundation.min.js"></script>
-    <script src="{{ STATIC_URL }}js/foundation.offcanvas.js"></script>
-    <script>
-      $(document).foundation();
-    </script>
-  </div>
+  <!-- block bodyscripts -->
+  {% block bodyscripts %}
+  {% endblock %}
+  <!-- end block bodyscripts -->
+  <script src="{{ STATIC_URL }}js/opentip-jquery-excanvas.min.js"></script>
+  <script src="{{ STATIC_URL }}js/foundation.min.js"></script>
+  <script>
+    $(document).foundation();
+  </script>
 
 </body>
 </html>
index ba4333eb006fcbee1e69b880e2515fa47b2b6b53..76317395b009c8243c141186757dbe4508ae9811 100644 (file)
   </div>
 
 
-  <div id="main-header" class="museo300">
-    <div class="row">
-      <div id="logo-container" class="small-12 large-4 columns">
-        <div style="display: inline;">
-          <a class="left-off-canvas-toggle show-for-medium-down"><i class="fa fa-bars fa-lg"></i>&nbsp;</a>
-          <a href="/">
-            <img src="{{ STATIC_URL }}img/global_header_logo.png" alt="global_header_logo" width="144" height="17" />
-          </a>
-        </div>
-      </div><!--/logo container-->
-
-      <div id="header-nav" class="large-8 columns nav-list show-for-large-up">
-        {% if request.user.is_authenticated %}
-          <ul>
-            <li><a href="/">Courses</a></li>
-            <li>My Notes</li>
-          </ul>
-        {% else %}
-          <ul>
-            <li>Courses</li>
+  <div class="contain-to-grid">
+    <nav id="main-header" class="top-bar" data-topbar>
+      <ul class="title-area">
+        <li class="name">
+          <h1 class="museo700"><a href="/"><img src="{{ STATIC_URL }}img/global_header_logo.png" alt="KarmaNotes" /></a></h1>
+        </li>
+        <li class="toggle-topbar menu-icon">
+          <a href="#">Menu</a>
+        </li>
+      </ul>
+      <section class="top-bar-section">
+        <ul class="right museo300">
+          <li><a href="/">Courses</a></li>
+          {% if request.user.is_authenticated %}
+            <li class="hide-for-large-up"><a href="{% url 'accounts_profile' %}">Dashboard</a></li>
+            <li class="hide-for-large-up"><a href="{% url 'accounts_profile' %}#control_panel">My Account</a></li>
+            <li class="hide-for-large-up"><a href="{% url 'account_logout' %}">Log Out</a></li>
+          {% else %}
             <li><a href="{% url 'account_login' %}">Log In</a></li>
             <li><a href="{% url 'account_signup' %}">Sign Up</a></li>
-          </ul>
-        {% endif %}
-      </div>
-
-    </div>
+          {% endif %}
+        </ul>
+      </section>
+    </nav>
   </div>
 
 </header><!--/global header-->
 
-<aside class="left-off-canvas-menu mobile-nav-list museo700">
-  <ul>
-    <li><div class="mobile-nav-item"><a href="/">Courses</a></div></li>
-    {% if request.user.is_authenticated %}
-      <li><div class="mobile-nav-item">My Notes</div></li>
-      <li><div class="mobile-nav-item"><a href="{% url 'accounts_profile' %}">Dashboard</a></div></li>
-      <li><div class="mobile-nav-item"><a href="{% url 'accounts_profile' %}#control_panel">My Account</a></div></li>
-      <li><div class="mobile-nav-item"><a href="{% url 'account_logout' %}">Log Out</a></div></li>
-    {% else %}
-      <li><div class="mobile-nav-item"><a href="{% url 'account_login' %}">Log In</a></div></li>
-      <li><div class="mobile-nav-item"><a href="{% url 'account_signup' %}">Sign Up</a></div></li>
-    {% endif %}
-  </ul>
-</aside>