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 {
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 → 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 @@
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);
}
}
}
\ 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 @@
}
}
.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;
\ No newline at end of file
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">
<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>
cms/templates/login.html
......@@ -4,39 +4,28 @@
<%block name="content">
<section class="main-container">
<section class="main-content">
<article class="log-in-box">
<header>
<h3>Log in</h3>
<hr>
<h1>Log in to edX</h1>
</header>
<form id="login_form" action="login_post" method="post">
<label>E-mail</label>
<input name="email" type="email" placeholder="E-mail">
<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">
<form class="log-in-form" id="login_form" action="login_post" method="post">
<div class="row">
<label>Email:</label>
<input name="email" type="email" class="email-field">
</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>
<section class="login-extra">
<p>
<span>Not enrolled? <a href="${reverse('signup')}">Sign up.</a></span>
<a href="#" class="pwd-reset">Forgot password?</a>
</p>
</section>
</section>
</section>
<div class="log-in-extra">
<p>Not enrolled? <a href="${reverse('signup')}">Sign up.</a></p>
</div>
</article>
<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="visibility-toggle wip"><span class="toggle-icon"></span></a>
<a href="#" class="delete-button wip"><span class="delete-icon"></span></a>
<a href="#" class="drag-handle wip"></a>
</div>
</div>
......
cms/templates/unit.html
<%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
<%! 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">
<li><a href="#" class="wip">Tasks</a></li>
<li><a href="#" class="wip">Settings</a></li>
<header class="primary-header">
<nav class="inner-wrapper">
<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>
......
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