port course_detail and note_detail pages to foundation 4, override some foundation...

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index 0a3167caab43c4dd40c87cabc65d0b0ea161256e..a70a5b8ed929692185860a715656d9e803d412b6 100644 (file)
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -733,6 +733,12 @@ p.text a
   color: black;
 }
 
+#breadcrumbs > .breadcrumbs {
+  /* override foundation 4 panel and outline for breadcrumbs */
+  border-style: none;
+  background-color: white;
+}
+
 #note_name, #course_name, #school_name
 {
   margin-top: 1em;

diff --git a/karmaworld/templates/courses/course_detail.html b/karmaworld/templates/courses/course_detail.html
index fa572ffeb46731df3f7854bf11688085ed40c9a1..947d50b37662dba05d039fa7173e8670267c416a 100644 (file)
--- a/karmaworld/templates/courses/course_detail.html
+++ b/karmaworld/templates/courses/course_detail.html
@@ -35,8 +35,12 @@
     <div id="course_header">
 
       <div class="row">
-        <div id="breadcrumbs" class="small-12 columns">
-          <a href="/">Home</a> &gt; <a href="{{ course.get_absolute_url }}">{{ course.name }}</a>
+        <div id="breadcrumbs" class="small-12 hide-for-small columns">
+          <ul class="breadcrumbs">
+            <li><a href="/">Home</a></li>
+            <li class="unavailable"><a href="#">{{ course.school.name }}</a></li>
+            <li class="current"><a href="{{ course.get_absolute_url }}">{{ course.name }}</a></li>
+          </ul>
         </div><!-- /course_subhead -->
       </div>
 

diff --git a/karmaworld/templates/notes/note_detail.html b/karmaworld/templates/notes/note_detail.html
index 3ce6d1dc15446e33a3451b056424de4da9e00d85..3455995b2a4d4974c3cea2480ac2b95070a76127 100644 (file)
--- a/karmaworld/templates/notes/note_detail.html
+++ b/karmaworld/templates/notes/note_detail.html
@@ -14,21 +14,25 @@
 
     <div id="course_header"> 
       <div class="row">
-        <div id="breadcrumbs" class="ten columns offset-by-one">
-          <a href="/">Home</a> &gt; 
-          <a href="{{ note.course.get_absolute_url }}">{{ note.course.name }}</a> &gt;
-          <a href="{{ note.get_absolute_url }}"> {{ note.name }} </a>
+        <div id="breadcrumbs" class="small-12 hide-for-small columns ">
+          <ul class="breadcrumbs">
+            <li><a href="/">Home</a></li>
+            <li class="unavailable"><a href="#">{{ note.course.school.name }}</a></li>
+            <li><a href="{{ course.get_absolute_url }}">{{ note.course.name }}</a></li>
+            <li class="current"><a href="{{ note.get_absolute_url }}">{{ note.name }}</a></li>
+          </ul>
+
         </div><!-- /course_subhead -->
       </div>
 
       <div class="row">
-        <div id="course_name" class="twelve columns">
+        <div id="course_name" class="small-12 columns">
           {{ note.name }}
         </div><!-- /note_name -->
       </div>
 
       <div class="row">
-        <div class="ten columns offset-by-one">
+        <div class="small-10 columns small-offset-1">
           <hr/>
         </div>
       </div>
@@ -38,7 +42,7 @@
       {% if pdf or ppt %}
         <!-- Add pdf.js -->
         <div class="row">
-          <div class="twelve columns">
+          <div class="small-12 columns">
             <iframe
                 style="border:none; width:100%; min-height: 700px; margins:auto" 
                 id="noteframe"
@@ -55,7 +59,7 @@
       {% else %} {# if pdf #}
 
       <div class="row">
-        <div class="eight columns centered body_copy">
+        <div class="small-12 small-centered columns medium-12 large-10 body_copy">
           {% if note.html %}
             <div class="note-text">
               <iframe style="border:none; width:100%;" id="noteframe" src="/raw/{{ note.id }}" onload="autoResize('noteframe')"> </iframe>