converging on Nicks styling for course list

diff --git a/karmaworld/assets/css/course_list_table.css b/karmaworld/assets/css/course_list_table.css
index 6f8fc21200346224c99230bf332a2d8eeb01816a..3808576ed743a8abcc718ab6abd4ab8f8f252824 100644 (file)
--- a/karmaworld/assets/css/course_list_table.css
+++ b/karmaworld/assets/css/course_list_table.css
@@ -3,20 +3,47 @@ table#course_list
   margin:14px auto;
 }
 
+/***************
+Search Bar
+***************/
+#course_list_filter input {
+  font-size: 22px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border-style: solid;
+  border-color: black;
+  border-width: 1px;
+}
+
+
 /***************
 Table Headers
 ***************/
-table#course_list thead
+table.dataTable thead th {
+  padding: 3px 18px 3px 10px;
+  cursor: pointer;
+  *cursor: hand;
+}
+
+table.dataTable thead th.sort_by {
+  padding-right: 0px;
+}
+
+table#course_list thead tr
 {
-  border-bottom: solid 1px black;
+  height: 50px;
 }
 
 table#course_list th
 {
-  float:right;
-  font-family: "MuseoSlab-500";
+  float:left;
+  font-family: "MuseoSlab-300";
   font-size: 12px;
-  margin-right: 25px;
+  font-weight: normal;
+}
+
+th.sorting_asc, th.sorting_desc {
+  text-decoration: underline;
 }
 
 th.date {
@@ -54,13 +81,13 @@ tr.course-row:hover {
 }
 
 table#course_list td {
-  font-family: "MuseoSlab-700";
+  font-family: "MuseoSlab-300";
   font-size: 18px;
   float:left;
 }
 
 table#course_list tbody tr td.slim {
-  font-family: "MuseoSlab-500";
+  font-family: "MuseoSlab-300";
   font-size: 12px;
 }
 
@@ -80,6 +107,11 @@ table#course_list tbody tr {
   width: 840px;
 }
 
+/* hack - Provide positioning for the "sort by text" */
+table.dataTable td.sort_by {
+  display:none;
+}
+
 td.date {
   font-size: 12px; 
   width: 200px;

diff --git a/karmaworld/assets/css/datatables-css/jquery.dataTables.css b/karmaworld/assets/css/datatables-css/jquery.dataTables.css
index e26f67ad85828fb9177efe79d1109e6ad745bda6..7e3e253d9d627be0c351d6908a7d97d261424236 100644 (file)
--- a/karmaworld/assets/css/datatables-css/jquery.dataTables.css
+++ b/karmaworld/assets/css/datatables-css/jquery.dataTables.css
@@ -8,13 +8,6 @@ table.dataTable {
        width: 100%;
 }
 
-table.dataTable thead th {
-       padding: 3px 18px 3px 10px;
-       border-bottom: 1px solid black;
-       cursor: pointer;
-       *cursor: hand;
-}
-
 table.dataTable tfoot th {
        padding: 3px 18px 3px 10px;
        border-top: 1px solid black;

diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index 967208c6d7384d70b6a10f9a58d032b5557faa18..c21e904d1c3b8a51dd4a067bf624048904d67739 100644 (file)
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -539,20 +539,13 @@ ul#course_menu li a
   color: white;
 }
 
-.subhead
-{
-  color: #F05A28;
-  font-family: "MuseoSlab-700";
-  font-size: 38px;
-}
-
 /* New course-list homepage css */
-#subhead
+div#subhead
 {
   padding: 15px;
   text-align: center;
-  font-family: "MuseoSlab-500";
-  font-size: 24px;
+  font-family: "MuseoSlab-300";
+  font-size: 22px;
 }
 
 .center
@@ -667,3 +660,5 @@ p.text a
 {
   
 }
+
+

diff --git a/karmaworld/templates/courses/course_list.html b/karmaworld/templates/courses/course_list.html
index 1e9fd6962bcefb879ea32253cc8c1dad3c39fd4c..3e5be4bcc2edf105d7d719d409c1c12cf49c6c78 100644 (file)
--- a/karmaworld/templates/courses/course_list.html
+++ b/karmaworld/templates/courses/course_list.html
@@ -32,18 +32,19 @@ $(document).ready(function() {
     'sDom': '<"top"f>rt<"bottom"p><"clear">', 
     // Specify options for each column
     'aoColumns': [
+      { "bSearchable": false, "bSortable":false, },
       { "bSearchable": false },
       { "bSearchable": false },
       null,
       null,
-      null,
+      null, 
     ],
     // Initial sorting
-    'aaSorting': [[1,'desc']]
+    'aaSorting': [[2,'desc']]
     // Use out Ajax endpoing to populate the list
     //'sAjaxSource': "{% url 'api_course_list' %}" 
   });
-$('.dataTables_filter input').attr("placeholder", "Search for a class");
+$('.dataTables_filter input').attr("placeholder", "search courses");
 });
 </script>
 {% endblock %}
@@ -54,20 +55,13 @@ $('.dataTables_filter input').attr("placeholder", "Search for a class");
 
 {% block content %}
 <section id="home_content">
-  <div id="page_header" class="hero_gradient_bar">
+  <div id="page_header" class="">
     <div class="row">
-      <div id="subhead" class="twelve columns">
-        <div class="row">
-          Share and access a growing database of college lecture notes
-        </div>
-        <div class="row">
-          <div id="page_instruction" class="twelve columns center">
-            Choose a course to browse or upload
-          </div> 
-        </div> <!-- .row -->
-      </div><!-- #subhead -->
-    </div> <!-- .row -->
-  </div> <!-- #page_header -->
+      <div id="subhead" class="">
+        Share and access a growing database of college lecture notes
+      </div>
+    </div>
+  </div>
   <div class="row">
     <div class="ten columns offset-by-one">
       <!-- Main course table -->
@@ -75,16 +69,14 @@ $('.dataTables_filter input').attr("placeholder", "Search for a class");
         <!-- specify col widths -->
         <colgroup> 
           <col span="1" style="width: 100%">
-          <col span="1" style="width: 0%">
-          <col span="1" style="width: 0%">
-          <col span="1" style="width: 0%">
-          <col span="1" style="width: 0%">
+          <col span="5" style="width: 0%">
         </colgroup> 
         <thead>
           <tr>
-            <th class="date"> Last Updated </th>
-            <th class="note-count"> Notes </th>
-            <th class="school-name"> School </th>
+            <th class="sort_by">Sort by:</th>
+            <th class="date"> Date </th>
+            <th class="note-count"> #Notes </th>
+            <th class="school-name"> Institution </th>
             <th class="course-name"> Course Name </th>
             <th class="instructor-name"> Instructor </th>
           </tr>
@@ -92,6 +84,7 @@ $('.dataTables_filter input').attr("placeholder", "Search for a class");
         <tbody>
         {% for course in object_list %}
           <tr>
+            <td class="sort_by"></td>
             <td class="date slim">        Updated on {{ course.updated_at|date:"M d o" }} </td>
             <td class="note-count slim">  {{ course.file_count }} </td>
             <td class="school-name">      {{ course.school.name }} </td>