From 09a3bc01be920a0464e21f8a63af74b859959af0 Mon Sep 17 00:00:00 2001
From: Chris Dodge <cdodge@edx.org>
Date: Mon, 5 Aug 2013 12:51:42 -0400
Subject: [PATCH 1/4] show the organization, course number, course run in the
 course listing page in CMS

---
 cms/djangoapps/contentstore/views/user.py | 3 +++
 cms/static/sass/views/_dashboard.scss     | 7 ++++++-
 cms/templates/index.html                  | 5 ++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/cms/djangoapps/contentstore/views/user.py b/cms/djangoapps/contentstore/views/user.py
index e1c75bad0f..24df0c64c2 100644
--- a/cms/djangoapps/contentstore/views/user.py
+++ b/cms/djangoapps/contentstore/views/user.py
@@ -54,6 +54,9 @@ def index(request):
                 course.location,
                 course_id=course.location.course_id,
             ),
+            course.display_org_with_default,
+            course.display_number_with_default,
+            course.location.name
         )
 
     return render_to_response('index.html', {
diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss
index ab3ad6f810..6206891542 100644
--- a/cms/static/sass/views/_dashboard.scss
+++ b/cms/static/sass/views/_dashboard.scss
@@ -330,10 +330,15 @@ body.dashboard {
 
 		.class-name {
 			display: block;
-			font-size: 19px;
+			font-size: 22px;
 			font-weight: 300;
 		}
 
+        .class-listing-info {
+            color: #989898;
+            margin-right: 15px;
+        }
+
 		.detail {
 			font-size: 14px;
 			font-weight: 400;
diff --git a/cms/templates/index.html b/cms/templates/index.html
index 9c845ccb5a..150b0c070f 100644
--- a/cms/templates/index.html
+++ b/cms/templates/index.html
@@ -133,10 +133,13 @@
       %if len(courses) > 0:
       <div class="courses">
         <ul class="list-courses">
-          %for course, url, lms_link in sorted(courses, key=lambda s: s[0].lower() if s[0] is not None else ''):
+          %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;${org}</label></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>
             <a href="${lms_link}" rel="external" class="button view-button view-live-button">${_("View Live")}</a>
           </li>

From ef53e8df6c845bed881e1be9059123dd5ea197aa Mon Sep 17 00:00:00 2001
From: Chris Dodge <cdodge@edx.org>
Date: Mon, 5 Aug 2013 12:56:06 -0400
Subject: [PATCH 2/4] one field had wrong label nesting

---
 cms/templates/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cms/templates/index.html b/cms/templates/index.html
index 150b0c070f..207740a02f 100644
--- a/cms/templates/index.html
+++ b/cms/templates/index.html
@@ -137,7 +137,7 @@
           <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;${org}</label></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>

From d64894de025418d15e48c46cd820aa330e599c44 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 5 Aug 2013 16:20:03 -0400
Subject: [PATCH 3/4] Studio: revises markup and visual styling for course
 listings metadata

---
 cms/static/sass/views/_dashboard.scss | 144 +++++++++++++++++---------
 cms/templates/index.html              |  27 +++--
 2 files changed, 115 insertions(+), 56 deletions(-)

diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss
index 6206891542..817fc726c0 100644
--- a/cms/static/sass/views/_dashboard.scss
+++ b/cms/static/sass/views/_dashboard.scss
@@ -291,7 +291,7 @@ body.dashboard {
 
 	// ====================
 
-	// course listings
+  // ELEM: course listings
 	.courses {
 	  margin: $baseline 0;
 	}
@@ -304,66 +304,110 @@ 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;
-			}
+      // STATE: hover/focus
+      &:hover {
+        background: $paleYellow;
 
-			.class-link {
-				z-index: 100;
-				display: block;
-				padding: 20px 25px;
-				line-height: 1.3;
-
-				&:hover {
-					background: $paleYellow;
-
-					+ .view-live-button {
-						opacity: 1.0;
-						pointer-events: auto;
-					}
-				}
-			}
-		}
-
-		.class-name {
-			display: block;
-			font-size: 22px;
-			font-weight: 300;
-		}
-
-        .class-listing-info {
-            color: #989898;
-            margin-right: 15px;
+        .course-actions .view-live-button {
+          opacity: 1.0;
+          pointer-events: auto;
         }
 
-		.detail {
-			font-size: 14px;
-			font-weight: 400;
-			margin-right: 20px;
-			color: #3c3c3c;
-		}
+        .course-title {
+          color: $orange-d1;
+        }
 
-		// view live button
-		.view-live-button {
-			z-index: 10000;
-			position: absolute;
-			top: ($baseline*0.75);
-			right: $baseline;
-			padding: ($baseline/4) ($baseline/2);
-			opacity: 0.0;
-			pointer-events: none;
+        .course-metadata {
+          opacity: 1.0;
+        }
+      }
 
-			&:hover {
-				opacity: 1.0;
-				pointer-events: auto;
-			}
+      .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;
+      }
+
+      // 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;
+          }
+
+          &: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 {
+          @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;
+
+          &:hover {
+            opacity: 1.0;
+            pointer-events: auto;
+          }
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
 		}
 	}
 
-
   // ELEM: new user form
   .wrapper-create-course {
 
diff --git a/cms/templates/index.html b/cms/templates/index.html
index 207740a02f..9702eedada 100644
--- a/cms/templates/index.html
+++ b/cms/templates/index.html
@@ -135,13 +135,28 @@
         <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>
-            <a href="${lms_link}" rel="external" class="button view-button view-live-button">${_("View Live")}</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>

From 22d33db5429f9ce0ecd68dd6ab7cf972b4d20ad9 Mon Sep 17 00:00:00 2001
From: Chris Dodge <cdodge@edx.org>
Date: Tue, 6 Aug 2013 09:55:09 -0400
Subject: [PATCH 4/4] fix broken test due to HTML change

---
 cms/djangoapps/contentstore/tests/test_contentstore.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cms/djangoapps/contentstore/tests/test_contentstore.py b/cms/djangoapps/contentstore/tests/test_contentstore.py
index 4c9fcf7f81..d94b57ebd3 100644
--- a/cms/djangoapps/contentstore/tests/test_contentstore.py
+++ b/cms/djangoapps/contentstore/tests/test_contentstore.py
@@ -1141,7 +1141,7 @@ class ContentStoreTest(ModuleStoreTestCase):
         resp = self.client.get(reverse('index'))
         self.assertContains(
             resp,
-            '<span class="class-name">Robot Super Educational Course</span>',
+            '<h3 class="course-title">Robot Super Educational Course</h3>',
             status_code=200,
             html=True
         )