From 9a4bc3ea3518da01abf926f5e302c48eff146dde Mon Sep 17 00:00:00 2001
From: Charles Holbrow <charlesholbrow@gmail.com>
Date: Thu, 14 Mar 2013 13:45:22 -0400
Subject: [PATCH] working on Nick\'s style on the main page

---
 karmaworld/assets/css/course_list_table.css   | 71 +++++++++++++++++++
 .../css/datatables-css/jquery.dataTables.css  |  4 +-
 karmaworld/assets/css/global.css              | 34 ---------
 karmaworld/templates/courses/course_list.html | 45 ++++++------
 4 files changed, 97 insertions(+), 57 deletions(-)
 create mode 100644 karmaworld/assets/css/course_list_table.css

diff --git a/karmaworld/assets/css/course_list_table.css b/karmaworld/assets/css/course_list_table.css
new file mode 100644
index 0000000..ffec890
--- /dev/null
+++ b/karmaworld/assets/css/course_list_table.css
@@ -0,0 +1,71 @@
+table#course_list
+{
+  margin:14px auto;
+}
+
+/***************
+Table Headers
+***************/
+table#course_list thead
+{
+  border-bottom: solid 1px black;
+}
+
+table#course_list th
+{
+  float:right;
+  font-family: "MuseoSlab-500";
+  font-size: 12px;
+  margin-right: 25px;
+}
+
+th.date {
+}
+
+th.note-count {
+}
+
+th.school-name {
+}
+
+th.course-name {
+}
+
+th.instructor-name {
+}
+
+
+/***************
+Table Data 
+***************/
+table#course_list td
+{
+  font-family: "MuseoSlab-700";
+  font-size: 12px;
+  float:left;
+}
+
+table#course_list tr:nth-child(even)
+{
+  /*background: url(../img/dashboard_activity_alt_on_bg.gif);*/
+}
+
+td.date {
+  width: 40%;
+}
+
+td.note-count {
+  width: 60%;
+}
+
+td.school-name {
+  width:40%;
+}
+
+td.course-name {
+  width:30%;
+}
+
+td.instructor-name {
+  width:30%;
+}
diff --git a/karmaworld/assets/css/datatables-css/jquery.dataTables.css b/karmaworld/assets/css/datatables-css/jquery.dataTables.css
index 8a08706..1c3dd61 100644
--- a/karmaworld/assets/css/datatables-css/jquery.dataTables.css
+++ b/karmaworld/assets/css/datatables-css/jquery.dataTables.css
@@ -31,7 +31,7 @@ table.dataTable td.dataTables_empty {
 	text-align: center;
 }
 
-table.dataTable tr.odd { background-color: #E2E4FF; }
+/*table.dataTable tr.odd { background-color: #E2E4FF; }
 table.dataTable tr.even { background-color: white; }
 
 table.dataTable tr.odd td.sorting_1 { background-color: #D3D6FF; }
@@ -39,7 +39,7 @@ table.dataTable tr.odd td.sorting_2 { background-color: #DADCFF; }
 table.dataTable tr.odd td.sorting_3 { background-color: #E0E2FF; }
 table.dataTable tr.even td.sorting_1 { background-color: #EAEBFF; }
 table.dataTable tr.even td.sorting_2 { background-color: #F2F3FF; }
-table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }
+table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }*/
 
 
 /*
diff --git a/karmaworld/assets/css/global.css b/karmaworld/assets/css/global.css
index e1542d4..edddeca 100644
--- a/karmaworld/assets/css/global.css
+++ b/karmaworld/assets/css/global.css
@@ -571,40 +571,6 @@ ul#course_menu li a
   font-family: "MuseoSlab-700";
   font-size: 12px;
 }
-
-table#course_list
-{
-  margin:14px auto;
-}
-
-table#course_list tr:nth-child(even)
-{
-  background: url(../img/dashboard_activity_alt_on_bg.gif);
-}
-
-table#course_list thead
-{
-  border-bottom: solid 1px black;
-}
-
-table#course_list th
-{
-  font-family: "MuseoSlab-500";
-  font-size: 12px;
-}
-
-/* hack - table sorter moves the th into a div */
-table#course_list th div
-{
-  font-family: "MuseoSlab-500";
-  font-size: 12px;
-}
-
-table#course_list td
-{
-  font-family: "MuseoSlab-700";
-  font-size: 12px;
-}
 /* end new course-list homepage css */
 
 a.white
diff --git a/karmaworld/templates/courses/course_list.html b/karmaworld/templates/courses/course_list.html
index 30155a8..8fc55d4 100644
--- a/karmaworld/templates/courses/course_list.html
+++ b/karmaworld/templates/courses/course_list.html
@@ -7,7 +7,8 @@
 
 {% block pagestyle %}
 <link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/home.css">
-<link rel="stylesheet" href="{{ STATIC_URL }}css/responsive-tables.css">
+<!-- <link rel="stylesheet" href="{{ STATIC_URL }}css/responsive-tables.css"> -->
+<link rel="stylesheet" href="{{ STATIC_URL }}css/course_list_table.css">
 <link rel="stylesheet" href="{{ STATIC_URL }}css/datatables-css/jquery.dataTables.css"> <!-- dataTables -->
 {% endblock %}
 
@@ -21,6 +22,8 @@ $(document).ready(function() {
     'oLanguage': {
       'sSearch': '',
     },
+    // we will set column widths explicitly
+    'bAutoWidth': false,
     // don't provide a option for the user to change the table page length
     'bLengthChange': false,
     // sepcify the number of rows in a page
@@ -29,14 +32,14 @@ $(document).ready(function() {
     'sDom': '<"top"f>rt<"bottom"p><"clear">', 
     // Specify options for each column
     'aoColumns': [
+      { "bSearchable": false },
+      { "bSearchable": false },
       null,
       null,
       null,
-      { "bSearchable": false },
-      { "bSearchable": false },
     ],
     // Initial sorting
-    'aaSorting': [[3,'desc']]
+    'aaSorting': [[1,'desc']]
     // Use out Ajax endpoing to populate the list
     //'sAjaxSource': "{% url 'api_course_list' %}" 
   });
@@ -68,32 +71,32 @@ $('.dataTables_filter input').attr("placeholder", "Search for a class");
   <div class="row">
     <div class="ten columns offset-by-one">
       <!-- Main course table -->
-      <table id="course_list" class="responsive">
+      <table id="course_list" class="">
         <!-- specify col widths -->
         <colgroup> 
-          <col span="1" style="width: 18%">
-          <col span="1" style="width: 40%">
-          <col span="1" style="width: 15%">
-          <col span="1" style="width: 5%">
-          <col span="1" style="width: 22%">
-        </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%">
+        </colgroup> 
         <thead>
           <tr>
-            <th> School </th>
-            <th> Course Name </th>
-            <th> Instructor </th>
-            <th> Notes </th>
-            <th> Last Updated </th>
+            <th class="date"> Last Updated </th>
+            <th class="note-count"> Notes </th>
+            <th class="school-name"> School </th>
+            <th class="course-name"> Course Name </th>
+            <th class="instructor-name"> Instructor </th>
           </tr>
         </thead>
         <tbody>
         {% for course in object_list %}
           <tr>
-            <td> {{ course.school.name }} </td>
-            <td> <a href="{{ course.get_absolute_url }}">{{ course.name }}</a> </td>
-            <td> {{ course.instructor_name }} </td>
-            <td> {{ course.file_count }} </td>
-            <td> {{ course.updated_at|date:"gA // D M d o" }} </td>
+            <td class="date">             Updated on {{ course.updated_at|date:"M d o" }} </td>
+            <td class="note-count">       {{ course.file_count }} </td>
+            <td class="school-name">      {{ course.school.name }} </td>
+            <td class="course-name">      <a href="{{ course.get_absolute_url }}">{{ course.name }}</a> </td>
+            <td class="instructor-name">  {{ course.instructor_name }} </td>
           </tr>
         {% endfor %}
         </tbody>
-- 
2.25.1