Merge pull request #797 from MITx/feature/cale/cms-tom-wireframe

Feature/cale/cms tom wireframe

cms/static/sass/_base.scss

@@ -64,7 +64,9 @@ footer {
     height: 100px;
 }
 
-input[type="text"] {
+input[type="text"],
+input[type="email"],
+input[type="password"] {
     padding: 6px 8px 8px;
     box-sizing: border-box;
     border: 1px solid #b0b6c2;

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;
+}

cms/static/sass/_graphics.scss

@@ -41,6 +41,13 @@
 	background: url(../img/list-icon.png) no-repeat;
 }
 
+.home-icon {
+	display: inline-block;
+	width: 19px;
+	height: 16px;
+	background: url(../img/home-icon.png) no-repeat;
+}
+
 .calendar-icon {
 	display: inline-block;
 	width: 12px;

cms/static/sass/_header.scss

@@ -17,13 +17,22 @@
 		line-height: 18px;
 	}
 
-	a {
+	a,
+	.username {
 		float: left;
 		display: inline-block;
 		height: 29px;
 		padding: 7px 15px 0;
 		color: #e4e6ee;
-		box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, -1px 0 0 rgba(0, 0, 0, 0.3) inset;
+	}
+
+	.class-nav,
+	.class-nav li {
+		float: left;
+	}
+
+	a {
+		box-shadow: 1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44;
 
 		&:hover {
 			background: rgba(255, 255, 255, .1);
@@ -33,13 +42,5 @@
 			background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
 			box-shadow: 0 2px 8px rgba(0, 0, 0, .7) inset;
 		}
-
-		&:last-child {
-			box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, -1px 0 0 rgba(0, 0, 0, 0.3) inset, 1px 0 0 rgba(255, 255, 255, 0.2);
-		}
-
-		&:first-child {
-			box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, -1px 0 0 rgba(0, 0, 0, 0.3) inset, -1px 0 0 rgba(0, 0, 0, 0.3);
-		}
 	}
 }

cms/static/sass/_login.scss

@@ -0,0 +1,68 @@
+.log-in-box {
+	width: 500px;
+	margin: 200px auto;
+	border-radius: 3px;
+
+	header {
+		height: 36px;
+		border-radius: 3px 3px 0 0;
+		border: 1px solid #2c2e33;
+		background: -webkit-linear-gradient(top, #686b76, #54565e);
+		color: #fff;
+		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, .25) inset;
+
+		h1 {
+			margin: 5px 0;
+			font-size: 15px;
+			font-weight: 300;
+			text-align: center;
+		}
+	}
+
+	.log-in-form {
+		padding: 40px;
+		border: 1px solid $darkGrey;
+		border-top-width: 0;
+		border-radius: 0 0 3px 3px;
+		background: #fff;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+	}
+
+	label {
+		display: block;
+		font-size: 13px;
+		font-weight: 700;
+	}
+
+	.email-field,
+	.password-field {
+		width: 100%;
+		font-size: 20px;
+		font-weight: 300;
+	}
+
+	.row {
+		margin-bottom: 24px;
+	}
+
+	.form-actions {
+		margin-bottom: 0;
+	}
+
+	.log-in-button {
+		@include blue-button;
+		margin-right: 10px;
+		padding: 8px 20px 10px;
+	}
+
+	.forgot-button {
+		font-size: 13px;
+	}
+
+	.log-in-extra {
+		margin-top: 10px;
+		text-align: right;
+		font-size: 13px;
+		border-top: 1px solid $lightGrey;
+	}
+}

cms/static/sass/_unit.scss

@@ -263,6 +263,10 @@
         }
     }
 
+    .status {
+        display: none;
+    }
+
     .visibility-options .option {
         margin-right: 10px;
         padding: 3px 13px 6px;
@@ -279,7 +283,7 @@
     }
 
     .save-button {
-        @include blue-button;
+        @include white-button;
         margin-top: 10px;
     }
 
@@ -292,6 +296,10 @@
         @include orange-button;
         margin-top: 10px;
     }
+
+    .release-button {
+        @include blue-button;
+    }
 }
 
 .unit-history {

cms/static/sass/_variables.scss

@@ -14,4 +14,7 @@ $pink: rgb(182,37,104);
 $error-red: rgb(253, 87, 87);
 
 $blue: #5597dd;
+$lightGrey: #edf1f5;
+$mediumGrey: #ced2db;
 $darkGrey: #8891a1;
+$paleYellow: #fffcf1;

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";
@@ -16,6 +17,7 @@
 @import "graphics";
 @import "modal";
 @import "alerts";
+@import "login";
 
 @import 'content-types';
 

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">
+	<div class="main-wrapper">
-  <header>
+		<div class="inner-wrapper">
-    <h1>Courses</h1>
+			<h1>My Courses</h1>				
-    <a href="#" class="wip">+</a>
+			<article class="my-classes">
-  </header>
+				<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>

cms/templates/login.html

@@ -4,39 +4,28 @@
 
 <%block name="content">
 
-<section class="main-container">
+  <article class="log-in-box">
-
-  <section class="main-content">
     <header>
-      <h3>Log in</h3>
+      <h1>Log in to edX</h1>
-      <hr>
     </header>
-
+    <form class="log-in-form" id="login_form" action="login_post" method="post">
-    <form id="login_form" action="login_post" method="post">
+      <div class="row">
-      <label>E-mail</label>
+        <label>Email:</label>
-      <input name="email" type="email" placeholder="E-mail">
+        <input name="email" type="email" class="email-field">
-      <label>Password</label>
-      <input name="password" type="password" placeholder="Password">
-      <label class="remember-me">
-        <input name="remember" type="checkbox">
-        Remember me
-      </label>
-      <div class="submit">
-        <input name="submit" type="submit" value="Submit">
       </div>
+      <div class="row">
+        <label>Password:</label>
+        <input name="password" type="password" class="password-field">
+      </div>
+      <div class="row form-actions">
+        <input name="submit" type="submit" value="Log In" class="log-in-button">
+        <a href="#" class="forgot-button">Forgot password?</a>
+      </div>      
     </form>
-
+    <div class="log-in-extra">
-    <section class="login-extra">
+      <p>Not enrolled? <a href="${reverse('signup')}">Sign up.</a></p>
-      <p>
+    </div>
-        <span>Not enrolled? <a href="${reverse('signup')}">Sign up.</a></span>
+  </article>
-        <a href="#" class="pwd-reset">Forgot password?</a>
-      </p>
-    </section>
-
-
-  </section>
-
-</section>
 
 <script type="text/javascript">
 (function() {

cms/templates/overview.html

@@ -40,8 +40,7 @@
                     </a>
                   </div>
                   <div class="item-actions">
-                    <a href="#" class="delete-button wip"><span class="delete-icon"></span></a>
+                    <a href="#" class="delete-button wip"><span class="delete-icon"></span></a>                    
-                    <a href="#" class="visibility-toggle wip"><span class="toggle-icon"></span></a>
                     <a href="#" class="drag-handle wip"></a>
                   </div>
                 </div>

cms/templates/unit.html

@@ -1,5 +1,6 @@
 <%inherit file="base.html" />
 <%! from django.core.urlresolvers import reverse %>
+<%block name="bodyclass">unit</%block>
 <%block name="title">CMS Unit</%block>
 <%block name="content">
   <div class="main-wrapper">
@@ -62,11 +63,19 @@
             </div>
             <div class="visibility row">
               <label>Visibility:<!-- <span class="description">Shows or hides this subsection and the units within it.</span>--></label>
-              <a href="#" class="toggle-off">hide</a><a href="#" class="large-toggle"></a><a href="#" class="toggle-on">show</a>
+              <a href="#" class="toggle-off">hidden</a><a href="#" class="large-toggle"></a><a href="#" class="toggle-on">shown</a>
+            </div>
+            <div class="status row">
+              <label class="inline-label">Status:</label>
+              <select>
+                <option>Draft</option>
+                <option>Released</option>
+              </select>
             </div>
             <div class="row unit-actions">
-              <a href="#" class="save-button">Save</a>
+              <a href="#" class="save-button">Save Draft</a>
               <a href="preview.html" target="_blank" class="preview-button">Preview</a>
+              <a href="#" class="release-button">Release</a>
             </div>
           </div>
         </div>

cms/templates/widgets/header.html

@@ -1,16 +1,22 @@
 <%! from django.core.urlresolvers import reverse %>
-<header>
-  <nav>
-    <a href="/">Home</a>
-    <h2><a href="#">edX CMS: TODO:-course-name-here</a></h2>
 
-    <ul class="user-nav">
+<header class="primary-header">
-      <li><a href="#" class="wip">Tasks</a></li>
+  <nav class="inner-wrapper">
-      <li><a href="#" class="wip">Settings</a></li>
+    <div class="left">
+      <a href="/"><span class="home-icon"></span></a>
+      <a href="#" class="class-name wip-box">6.002x Circuits and Electronics <span class="drop-icon">▾</span></a>
+      <ul class="class-nav">
+        <li><a href="overview-full.html" class="active">Courseware</a></li>
+        <li><a href="updates.html" class="wip-box">Course Info</a></li>
+        <li><a href="textbook.html" class="wip-box">Textbook</a></li>
+      </ul>
+    </div>
+    <div class="right">
+      <span class="username">${ user.username }</span>
       % if user.is_authenticated():
-         <li><a href="${reverse('logout')}">Log out</a></li>
+         <a href="${reverse('logout')}">Log out</a>
       % else:
-         <li><a href="${reverse('login')}">Log in</a></li>
+         <a href="${reverse('login')}">Log in</a>
       % endif
 
     </ul>