From 8478f7af646da02f279f5ac23202b851bfd2f610 Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Mon, 1 Oct 2012 16:37:24 -0400
Subject: [PATCH] styled course list page

---
 cms/static/sass/_dashboard.scss | 44 +++++++++++++++++++++++++++++++++
 cms/static/sass/base-style.scss |  1 +
 cms/templates/index.html        | 32 +++++++++++++++---------
 3 files changed, 66 insertions(+), 11 deletions(-)
 create mode 100644 cms/static/sass/_dashboard.scss

diff --git a/cms/static/sass/_dashboard.scss b/cms/static/sass/_dashboard.scss
new file mode 100644
index 0000000000..395c9f6a2c
--- /dev/null
+++ b/cms/static/sass/_dashboard.scss
@@ -0,0 +1,44 @@
+.class-list {
+	margin-top: 20px;
+	border-radius: 3px;
+	border: 1px solid $darkGrey;	
+	background: #fff;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+
+	li {
+		border-bottom: 1px solid $mediumGrey;
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+
+	a {
+		padding: 20px 25px;
+		line-height: 1.3;
+		
+		&:hover {
+			background: $paleYellow;
+		}
+	}
+
+	.class-name {
+		display: block;
+		font-size: 22px;
+		font-weight: 300;
+	}
+
+	.detail {
+		font-size: 14px;
+		font-weight: 400;
+		margin-right: 20px;
+		color: #3c3c3c;
+	}
+}
+
+.new-course-button {
+	@include grey-button;
+	display: block;
+	padding: 20px;
+	text-align: center;
+}
\ No newline at end of file
diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss
index b74d476239..ef734b7115 100644
--- a/cms/static/sass/base-style.scss
+++ b/cms/static/sass/base-style.scss
@@ -9,6 +9,7 @@
 @import "cms_mixins";
 @import "base";
 @import "header";
+@import "dashboard";
 @import "courseware";
 @import "subsection";
 @import "unit";
diff --git a/cms/templates/index.html b/cms/templates/index.html
index 6e3cb648ae..fd4891c771 100644
--- a/cms/templates/index.html
+++ b/cms/templates/index.html
@@ -3,18 +3,28 @@
 <%block name="title">Courses</%block>
 
 <%block name="content">
-<h1>edX Course Management</h1>
 
-<section class="main-container">
-  <header>
-    <h1>Courses</h1>
-    <a href="#" class="wip">+</a>
-  </header>
+	<div class="main-wrapper">
+		<div class="inner-wrapper">
+			<h1>My Courses</h1>				
+			<article class="my-classes">
+				<a href="#" class="new-course-button wip-box"><span class="plus-icon"></span> New Course</a>
+				<ul class="class-list">
+					%for course, url in courses:
+			    <li>
+						<a href="${url}" class="class-name">
+							<span class="class-name">${course}</span>
+							<!--
+							<span class="detail">Started: 9/21/2012</span>
+							<span class="detail">Ends: 10/21/2012</span>
+							-->
+						</a>
+					</li>
+			    %endfor
+				</ul>
+			</article>
+		</div>
+	</div>
 
-  <ol>
-    %for course, url in courses:
-    <li><a href="${url}">${course}</a></li>
-    %endfor
-  </ol>
 </section>
 </%block>