From 936568285fda22b582e4bfb1b2d920b8ea8592c2 Mon Sep 17 00:00:00 2001
From: Seth Woodworth <seth@sethish.com>
Date: Tue, 2 Jul 2013 11:24:48 -0400
Subject: [PATCH] port course_detail and note_detail pages to foundation 4,
 override some foundation behavior for breadcrumbs

---
 karmaworld/assets/css/global.css              |  6 ++++++
 .../templates/courses/course_detail.html      |  8 ++++++--
 karmaworld/templates/notes/note_detail.html   | 20 +++++++++++--------
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index 0a3167c..a70a5b8 100644
--- 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 fa572ff..947d50b 100644
--- 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 3ce6d1d..3455995 100644
--- 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>
-- 
2.25.1