Skip to content

E
edx-platform
Commit f03fbd22 by Calen Pennington
Options

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

Feature/cale/cms tom wireframe
parents f4b8bfe4 8478f7af
Showing with 216 additions and 66 deletions
cms/static/img/large-toggles.png
cms/static/img/large-toggles.png

3.33 KB | W: | H:

cms/static/img/large-toggles.png

3.54 KB | W: | H:

cms/static/img/large-toggles.png
cms/static/img/large-toggles.png
cms/static/img/large-toggles.png
cms/static/img/large-toggles.png
  • 2-up
  • Swipe
  • Onion skin
cms/static/sass/_base.scss
...@@ -64,7 +64,9 @@ footer { ...@@ -64,7 +64,9 @@ footer {
height: 100px; height: 100px;
} }
input[type="text"] { input[type="text"],
input[type="email"],
input[type="password"] {
padding: 6px 8px 8px; padding: 6px 8px 8px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #b0b6c2; border: 1px solid #b0b6c2;
......
cms/static/sass/_dashboard.scss 0 → 100644
.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
cms/static/sass/_graphics.scss
...@@ -41,6 +41,13 @@ ...@@ -41,6 +41,13 @@
background: url(../img/list-icon.png) no-repeat; 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 { .calendar-icon {
display: inline-block; display: inline-block;
width: 12px; width: 12px;
......
cms/static/sass/_header.scss
...@@ -17,13 +17,22 @@ ...@@ -17,13 +17,22 @@
line-height: 18px; line-height: 18px;
} }
a { a,
.username {
float: left; float: left;
display: inline-block; display: inline-block;
height: 29px; height: 29px;
padding: 7px 15px 0; padding: 7px 15px 0;
color: #e4e6ee; 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 { &:hover {
background: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .1);
...@@ -33,13 +42,5 @@ ...@@ -33,13 +42,5 @@
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)); 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; 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);
}
} }
} }
\ No newline at end of file
cms/static/sass/_login.scss 0 → 100644
.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;
}
}
\ No newline at end of file
cms/static/sass/_unit.scss
...@@ -263,6 +263,10 @@ ...@@ -263,6 +263,10 @@
} }
} }
.status {
display: none;
}
.visibility-options .option { .visibility-options .option {
margin-right: 10px; margin-right: 10px;
padding: 3px 13px 6px; padding: 3px 13px 6px;
...@@ -279,7 +283,7 @@ ...@@ -279,7 +283,7 @@
} }
.save-button { .save-button {
@include blue-button; @include white-button;
margin-top: 10px; margin-top: 10px;
} }
...@@ -292,6 +296,10 @@ ...@@ -292,6 +296,10 @@
@include orange-button; @include orange-button;
margin-top: 10px; margin-top: 10px;
} }
.release-button {
@include blue-button;
}
} }
.unit-history { .unit-history {
......
cms/static/sass/_variables.scss
...@@ -14,4 +14,7 @@ $pink: rgb(182,37,104); ...@@ -14,4 +14,7 @@ $pink: rgb(182,37,104);
$error-red: rgb(253, 87, 87); $error-red: rgb(253, 87, 87);
$blue: #5597dd; $blue: #5597dd;
$lightGrey: #edf1f5;
$mediumGrey: #ced2db;
$darkGrey: #8891a1; $darkGrey: #8891a1;
$paleYellow: #fffcf1;
\ No newline at end of file
cms/static/sass/base-style.scss
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
@import "cms_mixins"; @import "cms_mixins";
@import "base"; @import "base";
@import "header"; @import "header";
@import "dashboard";
@import "courseware"; @import "courseware";
@import "subsection"; @import "subsection";
@import "unit"; @import "unit";
...@@ -16,6 +17,7 @@ ...@@ -16,6 +17,7 @@
@import "graphics"; @import "graphics";
@import "modal"; @import "modal";
@import "alerts"; @import "alerts";
@import "login";
@import 'content-types'; @import 'content-types';
......
cms/templates/index.html
...@@ -3,18 +3,28 @@ ...@@ -3,18 +3,28 @@
<%block name="title">Courses</%block> <%block name="title">Courses</%block>
<%block name="content"> <%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> </section>
</%block> </%block>
cms/templates/login.html
...@@ -4,39 +4,28 @@ ...@@ -4,39 +4,28 @@
<%block name="content"> <%block name="content">
<section class="main-container"> <article class="log-in-box">
<section class="main-content">
<header> <header>
<h3>Log in</h3> <h1>Log in to edX</h1>
<hr>
</header> </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>
<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> </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"> <script type="text/javascript">
(function() { (function() {
......
cms/templates/overview.html
...@@ -40,8 +40,7 @@ ...@@ -40,8 +40,7 @@
</a> </a>
</div> </div>
<div class="item-actions"> <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> <a href="#" class="drag-handle wip"></a>
</div> </div>
</div> </div>
......
cms/templates/unit.html
<%inherit file="base.html" /> <%inherit file="base.html" />
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<%block name="bodyclass">unit</%block>
<%block name="title">CMS Unit</%block> <%block name="title">CMS Unit</%block>
<%block name="content"> <%block name="content">
<div class="main-wrapper"> <div class="main-wrapper">
...@@ -62,11 +63,19 @@ ...@@ -62,11 +63,19 @@
</div> </div>
<div class="visibility row"> <div class="visibility row">
<label>Visibility:<!-- <span class="description">Shows or hides this subsection and the units within it.</span>--></label> <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>
<div class="row unit-actions"> <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="preview.html" target="_blank" class="preview-button">Preview</a>
<a href="#" class="release-button">Release</a>
</div> </div>
</div> </div>
</div> </div>
......
cms/templates/widgets/header.html
<%! from django.core.urlresolvers import reverse %> <%! 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(): % if user.is_authenticated():
<li><a href="${reverse('logout')}">Log out</a></li> <a href="${reverse('logout')}">Log out</a>
% else: % else:
<li><a href="${reverse('login')}">Log in</a></li> <a href="${reverse('login')}">Log in</a>
% endif % endif
</ul> </ul>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment