Made the whole course container a link

lms/static/sass/shared/_course_object.scss

@@ -24,6 +24,9 @@
       width: 100%;
       @include transition(all, 0.15s, linear);
 
+      a:hover {
+        text-decoration: none;
+      }
 
       .meta-info {
         background: rgba(0,0,0, 0.6);
@@ -59,13 +62,27 @@
         width: 100%;
         z-index: 3;
 
-        > a {
+        // > a {
           @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.85)));
           @include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.2));
           border-bottom: 1px solid rgba(150,150,150, 0.7);
           display: block;
           height: 50px;
 
+          &:hover {
+            @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8)));
+            text-decoration: none;
+
+            .info-link {
+              color: $blue;
+              opacity: 1;
+            }
+
+            h2 {
+              color: $blue;
+            }
+          }
+
           hgroup {
             left: 0px;
             padding: 0px 10px;
@@ -95,7 +112,6 @@
             }
           }
 
-
           .info-link {
             border-left: 1px solid rgba(150,150,150, 0.5);
             @include box-sizing(border-box);
@@ -114,21 +130,8 @@
             vertical-align: middle;
           }
 
-          &:hover {
-            @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8)));
-            text-decoration: none;
-
-            .info-link {
-              color: $blue;
-              opacity: 1;
-            }
-
-            h2 {
-              color: $blue;
-            }
-          }
         }
-      }
+      // }
 
       .info {
         background: rgb(255,255,255);

lms/templates/course.html

@@ -5,30 +5,30 @@
 %>
 <%page args="course" />
 
-<article id="${course.id}"class="course">
+<article id="${course.id}" class="course">
+  <a href="${reverse('about_course', args=[course.id])}">
   <div class="inner-wrapper">
-    <header class="course-preview">
-      <a href="${reverse('about_course', args=[course.id])}">
+      <header class="course-preview">
         <hgroup>
           <h2><span class="course-number">${course.number}</span> ${get_course_about_section(course, 'title')}</h2>
         </hgroup>
         <div class="info-link">&#x2794;</div>
-      </a>
-    </header>
-    <section class="info">
-      <div class="cover-image">
-        <img src="${course_image_url(course)}">
-      </div>
-      <div class="desc">
-        <p>${get_course_about_section(course, 'short_description')}</p>
-      </div>
-      <div class="bottom">
-        <a href="${reverse('university_profile', args=[course.org])}" class="university">${get_course_about_section(course, 'university')}</a>
-        <span class="start-date">${course.start_date_text}</span>
-      </div>
-    </section>
-  </div>
-  <div class="meta-info">
-    <p class="university">${get_course_about_section(course, 'university')}</p>
-  </div>
+      </header>
+      <section class="info">
+        <div class="cover-image">
+          <img src="${course_image_url(course)}">
+        </div>
+        <div class="desc">
+          <p>${get_course_about_section(course, 'short_description')}</p>
+        </div>
+        <div class="bottom">
+          <a href="${reverse('university_profile', args=[course.org])}" class="university">${get_course_about_section(course, 'university')}</a>
+          <span class="start-date">${course.start_date_text}</span>
+        </div>
+      </section>
+    </div>
+    <div class="meta-info">
+      <p class="university">${get_course_about_section(course, 'university')}</p>
+    </div>
+  </a>
 </article>