Studio: revises markup and visual styling for course listings metadata

cms/static/sass/views/_dashboard.scss

@@ -291,7 +291,7 @@ body.dashboard {
 
 	// ====================
 
-	// course listings
+  // ELEM: course listings
 	.courses {
 	  margin: $baseline 0;
 	}
@@ -304,55 +304,94 @@ body.dashboard {
 		box-shadow: 0 1px 2px $shadow-l1;
 
 		.course-item {
+      @include box-sizing(border-box);
+      width: flex-grid(9, 9);
 			position: relative;
 			border-bottom: 1px solid $gray-l1;
+      padding: $baseline;
 
-			&:last-child {
-				border-bottom: none;
-			}
-
-			.class-link {
-				z-index: 100;
-				display: block;
-				padding: 20px 25px;
-				line-height: 1.3;
-
+      // STATE: hover/focus
       &:hover {
         background: $paleYellow;
 
-					+ .view-live-button {
+        .course-actions .view-live-button {
           opacity: 1.0;
           pointer-events: auto;
         }
+
+        .course-title {
+          color: $orange-d1;
         }
+
+        .course-metadata {
+          opacity: 1.0;
         }
       }
 
-		.class-name {
-			display: block;
-			font-size: 22px;
+      .course-link, .course-actions {
+        @include box-sizing(border-box);
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      // encompassing course link
+      .course-link {
+        @extend .ui-depth2;
+        width: flex-grid(7, 9);
+        margin-right: flex-gutter();
+      }
+
+      // course title
+      .course-title {
+        @extend .t-title4;
+        margin: 0 ($baseline*2) ($baseline/4) 0;
         font-weight: 300;
       }
 
-        .class-listing-info {
-            color: #989898;
-            margin-right: 15px;
+      // course metadata
+      .course-metadata {
+        @extend .t-copy-sub1;
+        @include transition(opacity $tmg-f1 ease-in-out 0);
+        color: $gray;
+        opacity: 0.75;
+
+        .metadata-item {
+          display: inline-block;
+
+          &:after {
+            content: "/";
+            margin-left: ($baseline/10);
+            margin-right: ($baseline/10);
+            color: $gray-l4;
           }
 
-		.detail {
-			font-size: 14px;
-			font-weight: 400;
-			margin-right: 20px;
-			color: #3c3c3c;
+          &:last-child {
+
+            &:after {
+              content: "";
+              margin-left: 0;
+              margin-right: 0;
+            }
+          }
+
+          .label {
+            @extend .cont-text-sr;
+          }
+        }
       }
 
+      .course-actions {
+        @extend .ui-depth3;
+        position: static;
+        width: flex-grid(2, 9);
+        text-align: right;
+
         // view live button
         .view-live-button {
-			z-index: 10000;
-			position: absolute;
-			top: ($baseline*0.75);
-			right: $baseline;
-			padding: ($baseline/4) ($baseline/2);
+          @extend .ui-depth3;
+          @include transition(opacity $tmg-f2 ease-in-out 0);
+          @include box-sizing(border-box);
+          padding: ($baseline/2);
           opacity: 0.0;
           pointer-events: none;
 
@@ -361,8 +400,13 @@ body.dashboard {
             pointer-events: auto;
           }
         }
-	}
 
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+		}
+	}
 
   // ELEM: new user form
   .wrapper-create-course {

cms/templates/index.html

@@ -135,14 +135,29 @@
         <ul class="list-courses">
           %for course, url, lms_link, org, num, run in sorted(courses, key=lambda s: s[0].lower() if s[0] is not None else ''):
           <li class="course-item">
-            <a class="class-link" href="${url}" class="class-name">
-              <span class="class-name">${course}</span>
-              <span class="class-listing-info class-org"><label>${_("Organization")}:&nbsp;</label>${org}</span>
-              <span class="class-listing-info class-num"><label>${_("Course Number")}:&nbsp;</label>${num}</span>
-              <span class="class-listing-info class-run"><label>${_("Course Run")}:&nbsp;</label>${run}</span>
+            <a class="course-link" href="${url}">
+              <h3 class="course-title">${course}</h3>
+
+              <div class="course-metadata">
+                <span class="course-org metadata-item">
+                  <span class="label">${_("Organization:")}</span> <span class="value">${org}</span>
+                </span>
+                <span class="course-num metadata-item">
+                  <span class="label">${_("Course Number:")}</span>
+                  <span class="value">${num}</span>
+                </span>
+                <span class="course-run metadata-item">
+                  <span class="label">${_("Course Run:")}</span> <span class="value">${run}</span>
+                </span>
+              </div>
             </a>
+
+            <ul  class="item-actions course-actions">
+              <li class="action">
                 <a href="${lms_link}" rel="external" class="button view-button view-live-button">${_("View Live")}</a>
               </li>
+            </ul>
+          </li>
           %endfor
         </ul>
       </div>