split course_list_entry into new template, and refactor for foundation4 mobile

diff --git a/karmaworld/assets/css/course_list_table.css b/karmaworld/assets/css/course_list_table.css
index aa650135ad979e79f5889673bfa927de2e7b6bbe..96673d4d795370716b34947fd88798ec336e641b 100644 (file)
--- a/karmaworld/assets/css/course_list_table.css
+++ b/karmaworld/assets/css/course_list_table.css
@@ -90,17 +90,18 @@ tr.course-row {
 
 tr.course-row:hover {
   border-color: gray;
-  border-style: dotted none; 
+  border-style: dotted none;
 }
 
-table#course_list td {
+.table-font {
   font-family: "MuseoSlab-300";
-  font-size: 18px;
-  /*float:left;*/
-  /*height:80px; [> required for :hover on Table Rows  (when floating td elements) <]*/
+  font-size: 12px;
+  font-style: italic;
 }
 
-table#course_list tbody tr td.slim {
+td.slim * {
+  /* all children of a td with a slim class
+   * used to not set font-size on foundation size tags */
   font-family: "MuseoSlab-300";
   font-size: 12px;
   height: 20px; /* required for :hover on Table Rows  (when floating td elements) */
@@ -129,7 +130,7 @@ table.dataTable td.sort_by {
   display:none;
 }
 
-td.note-count {
+td.note-count * {
   font-size: 12px;
   /*width: 400px; [> 100% minus td.date width -- make sure the next line wraps <]*/
 }
@@ -137,8 +138,9 @@ td.note-count {
 /***************
 Fat Row
 ***************/
-td.course-name {
-  /*width: 340px;*/
+td.course-name * {
+  font-family: "MuseoSlab-300";
+  font-size: 18px;
 }
 
 table#course_list td div.upload {
@@ -176,3 +178,7 @@ table#course_list tr:hover td div.upload {
 td.columns {
   line-height: 1.5em;
 }
+
+table#course_list tr td:last-child {
+  margin-bottom: 20px;
+}

diff --git a/karmaworld/assets/css/media.css b/karmaworld/assets/css/media.css
index cabfa5f8f2ee09b4f2839da41ab5a13c6aff6cf6..62abfb09c207208549bb66e6e17ff007cb43ec66 100644 (file)
--- a/karmaworld/assets/css/media.css
+++ b/karmaworld/assets/css/media.css
@@ -5,6 +5,18 @@
     font-size: 22px;
   }
 
+  /* make some fields of the frontpage table a larger font, but only when large */
+  table#course_list .table-font {
+    font-family: "MuseoSlab-300";
+    font-size: 18px;
+    font-style: normal;
+  }
+
+  table#course_list tr td:last-child {
+    /* override some vertical margin spacing for the front page table */
+    margin-bottom: 0;
+  }
+
 
 
 

diff --git a/karmaworld/templates/courses/course_list.html b/karmaworld/templates/courses/course_list.html
index 3c9f4eed70d84896be1071c4cd1513613dabd87c..a8114782907549d6f4cc667799b186b92e64bcd4 100644 (file)
--- a/karmaworld/templates/courses/course_list.html
+++ b/karmaworld/templates/courses/course_list.html
@@ -59,7 +59,7 @@ $(document).ready(function() {
         if (type === 'set') {
           source.count = val;
           // Store the computed dislay and filter values for efficiency
-          source.count_display = val=="" ? "" : val+" Notes";
+          source.count_display = val=="" ? "" : "<span>"+val+" Notes</span>";
           return;
         }
         else if (type === 'display') {
@@ -75,7 +75,7 @@ $(document).ready(function() {
         //console.log(source);
         if (type === 'set') {
           source.date = val;
-          source.date_display = val=="" ? "" : "Updated on "+val;
+          source.date_display = val=="" ? "" : "<span>Updated on "+val+"</span>";
           return;
         }
         else if (type === 'display') {
@@ -128,31 +128,7 @@ $(document).ready(function() {
         </thead>
         <tbody>
         {% for course in object_list %}
-          <tr>
-              <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 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>
+          {% include 'courses/course_list_entry.html' %}
         {% endfor %}
         </tbody>
       </table>

diff --git a/karmaworld/templates/courses/course_list_entry.html b/karmaworld/templates/courses/course_list_entry.html
new file mode 100644 (file)
index 0000000..d1e7697
--- /dev/null
+++ b/karmaworld/templates/courses/course_list_entry.html
@@ -0,0 +1,25 @@
+<tr>
+  <td class="sort_by"></td>
+  <td class="small-8 columns large-4 slim"><span>{{ course.updated_at|date:"F d, o" }}</span></td>
+  <td class="note-count small-4 columns large-2 large-offset-2 slim">{{ course.file_count }}</td>
+
+  <td class="course-name small-12 large-5 columns">
+    <a class="" href="{{ course.get_absolute_url }}">{{ course.name }}</a> 
+  </td>
+  <td class="upload hide-for-small 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 small-6 large-3 columns"><span class="table-font">{{ course.school.name }}</span></td>
+  <td class="instructor-name small-6 large-3 columns"><span class="table-font">{{ course.instructor_name }}</span></td>
+</tr>