migrate front page to foundation4, works on ipads

diff --git a/karmaworld/assets/css/course_list_table.css b/karmaworld/assets/css/course_list_table.css
index e08505433eca6d3e35e52d00358228fe8a711b23..aa650135ad979e79f5889673bfa927de2e7b6bbe 100644 (file)
--- a/karmaworld/assets/css/course_list_table.css
+++ b/karmaworld/assets/css/course_list_table.css
@@ -96,8 +96,8 @@ tr.course-row:hover {
 table#course_list td {
   font-family: "MuseoSlab-300";
   font-size: 18px;
-  float:left;
-  height:80px; /* required for :hover on Table Rows  (when floating td elements) */
+  /*float:left;*/
+  /*height:80px; [> required for :hover on Table Rows  (when floating td elements) <]*/
 }
 
 table#course_list tbody tr td.slim {
@@ -129,21 +129,16 @@ table.dataTable td.sort_by {
   display:none;
 }
 
-td.date {
-  font-size: 12px; 
-  width: 405px;
-}
-
 td.note-count {
   font-size: 12px;
-  width: 400px; /* 100% minus td.date width -- make sure the next line wraps */
+  /*width: 400px; [> 100% minus td.date width -- make sure the next line wraps <]*/
 }
 
 /***************
 Fat Row
 ***************/
 td.course-name {
-  width: 340px;
+  /*width: 340px;*/
 }
 
 table#course_list td div.upload {
@@ -156,16 +151,6 @@ table#course_list td div.upload {
   margin-top: -8px;
 }
 
-td.school-name {
-  width: 200px; /* make this the same as td.date -- line up the artificial columns */
-}
-
-td.instructor-name {
-  width:200px;
-}
-
-
-
 
 table#course_list td div.upload i { 
   display: block;
@@ -184,3 +169,10 @@ table#course_list tr:hover td div.upload {
   font-family: "MuseoSlab-300";
   font-size: 18px;
 }
+
+
+/* CSS HACKS */
+/* Makes lines look better */
+td.columns {
+  line-height: 1.5em;
+}

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index 6d13b4eaf605ca2deba2a5e5c6abc489641174a3..0a3167caab43c4dd40c87cabc65d0b0ea161256e 100644 (file)
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -68,6 +68,7 @@ input[type="text"]:focus, textarea:focus
 #logo_container img
 {
   margin-top: 10px;
+  height: 17px;
 }
 
 #browse_container
@@ -624,22 +625,20 @@ ul#course_menu li a
 }
 
 /* New course-list homepage css */
-div#subhead
+
+#subhead span
 {
-  padding: 15px;
-  padding-left: 17px;
+  /*margin-left: 2em;*/
   font-family: "MuseoSlab-300";
-  font-size: 22px;
+  font-size: 19px;
 }
 
-#subhead img
-{
-  vertical-align: middle;
+.subhead-spacer {
+  height: 42px;
 }
 
-#subhead span
-{
-  margin-left: 2em;
+#course_list_filter {
+  margin: 0;
 }
 
 .center

diff --git a/karmaworld/templates/courses/course_list.html b/karmaworld/templates/courses/course_list.html
index a158458949afa06b5613b9e1b16ab7c03466e807..3c9f4eed70d84896be1071c4cd1513613dabd87c 100644 (file)
--- a/karmaworld/templates/courses/course_list.html
+++ b/karmaworld/templates/courses/course_list.html
@@ -97,19 +97,22 @@ $(document).ready(function() {
 {% block content %}
 <section id="home_content">
   <div id="page_header" class="">
-    <div class="row">
-      <div id="subhead" class="ten columns offset-by-one">
+    <div id="subhead" class="row">
+      <div class="small-3 large-2 columns">
         <img src='{{ STATIC_URL }}img/noun_project_6858.svg' alt="Pieter J. Smits, from The Noun Project">
+      </div>
+      <div class="small-9 large-10 columns">
+        <div class="row subhead-spacer hide-for-small"> </div>
         <span>Access a growing database of {{ note_count }} college lecture notes</span>
       </div>
     </div>
   </div>
   <div class="row">
-    <div class="ten columns offset-by-one">
+    <div class="small-12 columns">
       <!-- Main course table -->
       <table id="course_list" class="">
         <!-- specify col widths -->
-        <colgroup> 
+        <colgroup>
           <col span="1" style="width: 100%">
           <col span="5" style="width: 0%">
         </colgroup> 
@@ -126,27 +129,29 @@ $(document).ready(function() {
         <tbody>
         {% for course in object_list %}
           <tr>
-            <td class="sort_by"></td>
-            <td class="date slim">        {{ course.updated_at|date:"F d, o" }} </td> <!-- https://docs.djangoproject.com/en/1.4/ref/templates/builtins/#date -->
-            <td class="note-count slim">  {{ course.file_count }} </td>
-            <td class="course-name">      <a href="{{ course.get_absolute_url }}">{{ course.name }}</a> </td>
-            <td class="upload">
-              <div class="upload">
-                <a href="{{ course.get_absolute_url }}#upload-note">
-                  <i
-                    data-ot="Upload directly to this course"
-                    data-ot-target="true"
-                    data-ot-tip-joint="top center"
-                    data-ot-target-joint="bottom center"
-                    data-ot-background="white"
-                    data-ot-border-color="black"
-                    class="icon-upload opentip"></i>
-                </a>
-              </div>
+              <td class="sort_by"></td>
+              <td class="slim large-4 columns">{{ course.updated_at|date:"F d, o" }} </td>
+              <td class="note-count slim large-2 large-offset-2 columns">  {{ course.file_count }} </td>
 
-            </td>
-            <td class="school-name">      {{ course.school.name }} </td>
-            <td class="instructor-name">  {{ course.instructor_name }} </td>
+              <td class="course-name large-5 columns">
+                <a href="{{ course.get_absolute_url }}">{{ course.name }}</a> 
+              </td>
+              <td class="upload large-1 column">
+                <div class="upload">
+                  <a href="{{ course.get_absolute_url }}#upload-note">
+                    <i
+                      data-ot="Upload directly to this course"
+                      data-ot-target="true"
+                      data-ot-tip-joint="top center"
+                      data-ot-target-joint="bottom center"
+                      data-ot-background="white"
+                      data-ot-border-color="black"
+                      class="icon-upload opentip"></i>
+                  </a>
+                </div>
+              </td>
+              <td class="school-name large-3 columns">      {{ course.school.name }} </td>
+              <td class="instructor-name large-3 columns">  {{ course.instructor_name }} </td>
           </tr>
         {% endfor %}
         </tbody>
@@ -155,11 +160,11 @@ $(document).ready(function() {
   </div> <!-- .row -->
 
   <div class="row">
-    <div class="ten columns offset-by-one"> <hr/> </div>
+    <div class="small-10 columns small-offset-1"> <hr/> </div>
   </div>
 
   <div class="row">
-    <div class="ten columns offset-by-one">
+    <div class="small-12 columns large-10 large-offset-1">
       <div id="add-course-btn">
         <i class=icon-upload></i> add a course
       </div>
@@ -168,7 +173,7 @@ $(document).ready(function() {
   </div> <!-- .row -->
 
   <div class="row">
-    <div class="ten columns offset-by-one"> <hr/> </div>
+    <div class="small-10 columns small-offset-1"> <hr/> </div>
   </div>