From ed79271533f7046a7f4604a949b678bc5774d36a Mon Sep 17 00:00:00 2001
From: Charles Connell <charles@connells.org>
Date: Sun, 22 Dec 2013 17:13:31 -0500
Subject: [PATCH] Changes to course and note page headers #223 #209

---
 karmaworld/assets/css/course.css              |  6 ++
 karmaworld/assets/css/global.css              | 12 +--
 karmaworld/assets/css/note_course_pages.css   |  9 +++
 .../templates/courses/course_detail.html      | 76 +++++++++---------
 karmaworld/templates/notes/note_detail.html   | 80 ++++++++++---------
 5 files changed, 97 insertions(+), 86 deletions(-)

diff --git a/karmaworld/assets/css/course.css b/karmaworld/assets/css/course.css
index 6f032d5..0f5e550 100644
--- a/karmaworld/assets/css/course.css
+++ b/karmaworld/assets/css/course.css
@@ -3,6 +3,12 @@
   padding-top: 46px;
 }
 
+#course_header
+{
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+}
+
 #course_subhead
 {
   font-family: "MuseoSans-900";
diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index 7fcd52a..77e6d4f 100644
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -450,8 +450,10 @@ a.activity_target:hover
 
 .activity_details_context, .activity_details_context a
 {
-  font-size: 12px;
-  line-height: 1em;
+  font-family: "MuseoSlab-900";
+  font-size: 11px;
+  text-transform: uppercase;
+  line-height: 200%;
 }
 
 .activity_details_callout
@@ -833,9 +835,3 @@ legend
 .inline-form {
   border-bottom: 1px dashed #666;
 }
-
-/* Social buttons */
-.social-button {
-  margin: 10px 5px 10px 5px;
-  float: right;
-}
\ No newline at end of file
diff --git a/karmaworld/assets/css/note_course_pages.css b/karmaworld/assets/css/note_course_pages.css
index 27d2668..f313813 100644
--- a/karmaworld/assets/css/note_course_pages.css
+++ b/karmaworld/assets/css/note_course_pages.css
@@ -1,5 +1,10 @@
 /* NOTE PAGE */
 
+#note_header
+{
+  margin-bottom: 20px;
+}
+
 #note_content, #course_content, #school_content
 {
   padding-top: 46px;
@@ -67,6 +72,10 @@
   padding-bottom: 45px;
 }
 
+#social-buttons {
+  padding-bottom: 10px;
+}
+
 /* COURSES */
 
 #course_meta, #school_meta
diff --git a/karmaworld/templates/courses/course_detail.html b/karmaworld/templates/courses/course_detail.html
index 6cc3b37..674d320 100644
--- a/karmaworld/templates/courses/course_detail.html
+++ b/karmaworld/templates/courses/course_detail.html
@@ -12,6 +12,7 @@
 
 {% block pagestyle %}
   <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/note_course_pages.css">
+  <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/course.css">
 {% endblock %}
 
 
@@ -23,20 +24,15 @@
 {% block content %}
   <section id="course_content">
 
-    <div id="course_header">
-
+    <div id="course_header" class="hero_gradient_bar">
       <div class="row">
-        <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 id="course_subhead" class="twelve columns">
+          course
         </div><!-- /course_subhead -->
       </div>
 
       <div class="row">
-        <div id="course_name" class="small-12 columns">
+        <div id="note_name" class="small-12 columns">
           {% if course.url %}
           <a rel="nofollow" href="{{ course.url }}">
             {{ course.name }}
@@ -48,50 +44,51 @@
       </div>
 
       <div class="row">
-        <div id="course_meta" class="small-12 columns">
-          <div class="course_details">
-            {{ course.instructor_name }} | {{ course.school.name }}
+        <div id="course_meta" class="twelve columns">
+          <div class="activity_details_context">
+            {{ course.instructor_name }} // {{ course.school.name }}
           </div><!-- /activity_details_context -->
         </div><!-- /course_meta -->
       </div>
+    </div><!-- /course_header -->
 
-      <div class="row">
-        <div class="small-10 columns small-offset-1"> <hr/> </div>
-      </div>
 
 
-      {% include 'partial/filepicker.html' %}
+    <div class="row">
+      <div class="small-10 columns small-offset-1"> <hr/> </div>
+    </div>
 
 
-      {% if request.GET.thankyou == '' %}
-      <div id=thankyou-wrapper class="row">
-        <div class="small-8 columns small-offset-2">
-          <div id="thankyou">
-            <p>
-              Thank you for uploading
-              <a href="{{ request.GET.url }}">{{ request.GET.name }}</a>.
-              Share another or take a
-              <a href="https://docs.google.com/a/finalsclub.org/spreadsheet/viewform?usp=sharing&formkey=dFg1WnI2cUVfckZyYnJpZ0ExQmUxSnc6MQ#gid=0" target="_blank">quick survey</a> to help us make KarmaNotes even better.
-            </p>
-            <script>
-            // when showing the thankyou button, flash it orangered first
-            $(function() {
-              $("#thankyou").effect("highlight", {'color': '#f05a28'}, 3000);
-            });
-            </script>
+    {% include 'partial/filepicker.html' %}
 
-          </div><!-- /thankyou -->
-        </div>
-      </div> <!-- .row -->
-      {% endif %}
 
+    {% if request.GET.thankyou == '' %}
+    <div id=thankyou-wrapper class="row">
+      <div class="small-8 columns small-offset-2">
+        <div id="thankyou">
+          <p>
+            Thank you for uploading
+            <a href="{{ request.GET.url }}">{{ request.GET.name }}</a>.
+            Share another or take a
+            <a href="https://docs.google.com/a/finalsclub.org/spreadsheet/viewform?usp=sharing&formkey=dFg1WnI2cUVfckZyYnJpZ0ExQmUxSnc6MQ#gid=0" target="_blank">quick survey</a> to help us make KarmaNotes even better.
+          </p>
+          <script>
+          // when showing the thankyou button, flash it orangered first
+          $(function() {
+            $("#thankyou").effect("highlight", {'color': '#f05a28'}, 3000);
+          });
+          </script>
 
-      <div class="row">
-        <div class="small-10 columns small-offset-1"> <hr/> </div>
+        </div><!-- /thankyou -->
       </div>
+    </div> <!-- .row -->
+    {% endif %}
 
 
-    </div><!-- /course_header -->
+    <div class="row">
+      <div class="small-10 columns small-offset-1"> <hr/> </div>
+    </div>
+
 
 
     <div id="course_container">
@@ -103,7 +100,6 @@
           {% endfor %}
         </div>
       </div>
-
     </div><!-- /course_container -->
 
     {% comment %}
diff --git a/karmaworld/templates/notes/note_detail.html b/karmaworld/templates/notes/note_detail.html
index 7584ab8..bf00a27 100644
--- a/karmaworld/templates/notes/note_detail.html
+++ b/karmaworld/templates/notes/note_detail.html
@@ -1,6 +1,10 @@
 {% extends "base.html" %}
 {% load url from future %}
 
+{% block title %}
+  {{ note.name }}
+{% endblock %}
+
 {% block pagestyle %}
   <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/note_course_pages.css">
 {% endblock %}
@@ -12,28 +16,51 @@
 {% block content %}
   <section id="note_content">
 
-    <div id="course_header"> 
+    <div id="note_header" class="hero_gradient_bar">
       <div class="row">
-        <div id="breadcrumbs" class="small-12 hide-for-small columns ">
-          <ul class="breadcrumbs">
-            <li><a href="/">Home</a></li>
-            <li class="unavailable"><a>{{ note.course.school.name }}</a></li>
-            <li><a href="{{ note.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 id="note_back_to_course" class="twelve columns">
+          <a href="{{note.course.get_absolute_url}}">
+            <i class="fa fa-arrow-left"></i>&nbsp;back to {{ note.course.name }}
+          </a>
+        </div>
       </div>
 
       <div class="row">
-        <div id="course_name" class="small-12 columns">
+        <div id="note_name" class="twelve columns">
           {{ note.name }}
+          <hr/>
         </div><!-- /note_name -->
       </div>
 
-      <div class="row">
-        <div class="small-10 small-centered columns small-offset-1 center" style="padding-bottom: 20px;">
-          <hr/>
+      <div id="social-buttons" class="row">
+        <div class="small-4 columns small-centered show-for-medium-up">
+          <div class="row">
+            <div class="small-4 columns center">
+              <script type="text/javascript" src="http://www.reddit.com/static/button/button2.js"></script>
+            </div>
+            <div class="small-4 columns center">
+              <div class="g-plusone"
+                   data-href="https://karmanotes.org{% url 'note_detail' note.course.school.slug note.course.slug note.slug %}"
+                   data-size="tall"
+                   data-annotation="bubble"
+                   data-width="25"></div>
+              </div>
+              <div class="small-4 columns center">
+                <div class="fb-like"
+                     data-href="https://karmanotes.org{% url 'note_detail' note.course.school.slug note.course.slug note.slug %}"
+                     data-width="12"
+                     data-layout="box_count"
+                     data-action="recommend"
+                     data-show-faces="false"
+                     data-share="true"></div>
+              </div>
+            </div>
+          </div>
+        </div><!-- /note_actions -->
+      </div>
+
+      <div class="row zoom-buttons">
+        <div class="small-2 small-centered columns center" style="padding-bottom: 20px;">
           <i id="minus-btn" class="fa fa-search-minus fa-2x" style="margin-right: 10px; cursor: pointer"></i>
           <i id="plus-btn" class="fa fa-search-plus fa-2x" style="cursor: pointer"></i>
         </div>
@@ -64,7 +91,7 @@
         <div class="small-12 small-centered columns medium-12 large-12 body_copy">
           {% if note.html %}
             <div class="note-text">
-              <iframe style="border:none; width:100%; min-height: 700px;" id="noteframe" src="/raw/{{ note.id }}" onload="autoResize('noteframe')"> </iframe>
+              <iframe style="border:none; width:100%; min-height: 1000px;" id="noteframe" src="/raw/{{ note.id }}" onload="autoResize('noteframe')"> </iframe>
             </div> <!-- .note-text -->
 
           {% else %} {# note.html #}
@@ -83,29 +110,6 @@
 
   </section><!--/note_content-->
 
-  <div id="social-buttons" class="show-for-medium-up" style="position: fixed; right: 0px; bottom: 0px;">
-    <div class="social-button">
-      <script type="text/javascript" src="http://www.reddit.com/static/button/button2.js"></script>
-    </div>
-    <div class="social-button">
-      <div class="g-plusone"
-           data-href="https://karmanotes.org{% url 'note_detail' note.course.school.slug note.course.slug note.slug %}"
-           data-size="tall"
-           data-annotation="bubble"
-           data-width="25"
-           data-align="left"
-           expandTo="left"></div>
-      </div>
-    <div class="social-button">
-      <div class="fb-like"
-           data-href="https://karmanotes.org{% url 'note_detail' note.course.school.slug note.course.slug note.slug %}"
-           data-width="12"
-           data-layout="box_count"
-           data-action="recommend"
-           data-show-faces="false"
-           data-share="true"></div>
-    </div>
-  </div>
 {% endblock %}
 
 
-- 
2.25.1