Skip to content

E
edx-platform
Commit f2080fde by Calen Pennington
Options

Porting latest changes from ui_prototype

parent 8338031f
Showing with 868 additions and 636 deletions
cms/static/js/main.js
......@@ -6,96 +6,6 @@ $(document).ready(function(){
$('.editable-textarea').inlineEdit({control: 'textarea'});
});
// $("a[rel*=leanModal]").leanModal();
// $(".remove").click(function(){
// $(this).parents('li').hide();
// });
// $("#show-sidebar").click(function(){
// $("#video-selector").toggleClass('hidden');
// return false;
// });
// $('.use-video').click(function() {
// var used = $('#used');
// if (used.is(':visible')) {
// used.hide().show('slow');
// }
// used.show();
// $('.no-video').hide();
// });
// $('.remove-video').click(function() {
// $('#used').hide();
// $('.no-video').show();
// });
// $('#new-upload').click(function() {
// $('.selected-files').toggle();
// return false;
// });
// /* $('.block').append('<a href=\"#\" class=\"delete\">&#10005;<\/a>'); */
// $('a.delete').click(function() {
// $(this).parents('.block').hide();
// });
// $('.speed-list > li').hover(function(){
// $(this).children('.tooltip').toggle();
// });
// $('.delete-speed').click(function(){
// $(this).parents('li.speed').hide();
// return false;
// });
// $('.edit-captions').click(function(){
// var parentVid = $(this).parents('div');
// parentVid.siblings('div.caption-box').toggle();
// return false;
// });
// $('.close-box').click(function(){
// $(this).parents('.caption-box').hide();
// return false;
// });
// $('ul.dropdown').hide();
// $('li.questions').click(function() {
// $('ul.dropdown').toggle();
// return false;
// });
// $('#mchoice').click(function(){
// $('div.used').append($('<div class="block question">').load("/widgets/multi-choice.html"));
// return false;
// });
// $('#text').click(function(){
// $('div.used').append($('<div class="block text">').load("/widgets/text.html"));
// return false;
// });
// $('#numerical').click(function(){
// $('div.used').append($('<div class="block question">').load("/widgets/text-question.html"));
// return false;
// });
// $('#equation').click(function(){
// $('div.used').append($('<div class="block latex">').load("/widgets/latex-equation.html"));
// return false;
// });
// $('#script').click(function(){
// $('div.used').append($('<div class="block code">').load("/widgets/script-widget.html"));
// return false;
// });
// $("#mark").markItUp(myWikiSettings);
var heighest = 0;
$('.cal ol > li').each(function(){
heighest = ($(this).height() > heighest) ? $(this).height() : heighest;
......@@ -104,10 +14,7 @@ $(document).ready(function(){
$('.cal ol > li').css('height',heighest + 'px');
$('.new-week').hide();
$('.add-new-week').click(function() {
$(this).hide();
$('.new-week').show();
$('.add-new-section').click(function() {
return false;
});
......@@ -117,43 +24,63 @@ $(document).ready(function(){
return false;
});
var windowHeight = $(window).resize().height();
$('.save-update').click(function(){
$(this).parent().parent().hide();
return false;
});
$('.sidebar').css('height', windowHeight);
setHeight = function(){
var windowHeight = $(this).height();
var calHeight = windowHeight - 29;
var sidebarHeight = windowHeight - 73;
$('.edit-week').click( function() {
$('body').addClass('content');
$('body.content .cal').css('height', windowHeight);
$('section.week-new').show();
return false;
});
$('.sidebar').css('height', sidebarHeight);
$('body.content .cal').css('height', calHeight);
$('.cal ol li header h1 a').click( function() {
$('body').addClass('content');
$('body.content .cal').css('height', windowHeight);
$('section.week-edit').show();
return false;
});
$('.edit-week').click( function() {
$('body').addClass('content');
$('body.content .cal').css('height', calHeight);
$('section.week-new').show();
return false;
});
$('.cal ol li header h1 a').click( function() {
$('body').addClass('content');
$('body.content .cal').css('height', calHeight);
$('section.week-edit').show();
return false;
});
$('.video-new a').click(function(){
$('section.video-new').show();
$('a.sequence-edit').click(function(){
$('body').addClass('content');
$('body.content .cal').css('height', calHeight);
$('section.sequence-edit').show();
return false;
});
}
$(document).ready(setHeight);
$(window).bind('resize', setHeight);
$('.video-new a').click(function(){
$('section.video-new').show();
return false;
});
$('.video-edit a').click(function(){
$('section.video-edit').show();
return false;
$('a.video-edit').click(function(){
$('section.video-edit').show();
return false;
});
$('.problem-new a').click(function(){
$('section.problem-new').show();
return false;
$('section.problem-new').show();
return false;
});
$('.problem-edit a').click(function(){
$('section.problem-edit').show();
return false;
$('a.problem-edit').click(function(){
$('section.problem-edit').show();
return false;
});
});
cms/static/sass/_base.scss
......@@ -32,7 +32,22 @@ body {
h2 {
font-size: 14px;
text-transform: uppercase;
float: left;
}
a.new-module {
float: right;
}
}
}
&.content {
section.main-content {
border-left: 2px solid #000;
@include box-sizing(border-box);
width: flex-grid(9);
float: left;
@include box-shadow( -2px 0 3px #ddd );
}
}
}
......@@ -48,4 +63,3 @@ input[type="submit"], .button {
@include border-radius(3px);
padding: 6px;
}
cms/static/sass/_calendar.scss
......@@ -7,59 +7,40 @@ section.cal {
> header {
@include clearfix;
margin-bottom: 10px;
h1 {
float: left;
font-size: 18px;
background: #efefef;
border: 1px solid #ddd;
h2 {
@include inline-block();
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
padding: 6px;
margin-left: 6px;
font-size: 12px;
}
ul {
float: right;
@include inline-block;
li {
@include inline-block;
margin-left: 6px;
padding-left: 6px;
border-left: 1px solid #ddd;
padding: 6px;
a {
padding: 6px;
border: 1px solid #ddd;
display: block;
@include border-radius(3px);
background: #efefef;
@include inline-block();
}
&.dropdown {
position: relative;
ul {
display: none;
position: absolute;
background: #fff;
border: 1px solid #ddd;
li {
padding: 6px;
display: block;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
&:hover {
background-color: #efefef;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
}
}
&:hover {
ul {
@include inline-block();
ul {
display: block;
}
a {
@include border-radius(3px 3px 0 0);
border-bottom: 0;
}
li {
@include inline-block();
padding: 0;
border-left: 0;
}
}
}
......@@ -81,109 +62,172 @@ section.cal {
float: left;
width: flex-grid(3) + ((flex-gutter() * 3) / 4);
&:last-child {
text-align: center;
background: #eee;
@include box-sizing(border-box);
header {
border-bottom: 1px solid #000;
@include box-shadow(0 1px 2px #aaa);
display: block;
margin-bottom: 2px;
p {
width: 100%;
height: 100%;
@include box-sizing(border-box);
h1 {
font-size: 14px;
text-transform: uppercase;
border-bottom: 1px solid #ccc;
padding: 6px;
a {
color: #000;
display: block;
width: 100%;
height: 100%;
}
}
section.new-week {
header {
ul {
li {
background: #fff;
text-align: left;
color: #888;
border-bottom: 0;
font-size: 12px;
}
}
}
form {
background: #fff;
width: 50%;
padding: 6px;
border: 1px solid #000;
margin: 0 auto;
@include box-shadow(0 0 2px #333);
position: relative;
ul {
list-style: none;
margin-bottom: 1px;
&:before {
background: #fff;
border-left: 1px solid #000;
border-top: 1px solid #000;
content: " ";
display: block;
height: 10px;
left: 50%;
position: absolute;
top: -6px;
@include transform(rotate(45deg));
width: 10px;
z-index: 0;
}
li {
background: #efefef;
border-bottom: 1px solid #666;
padding: 6px;
select {
margin-bottom: 6px;
width: 100%;
&.create-module {
position: relative;
option {
padding: 10px 0 !important;
> div {
display: none;
@include position(absolute, 30px 0 0 0);
width: 90%;
background: rgba(#000, .8);
padding: 10px;
@include box-sizing(border-box);
@include border-radius(3px);
z-index: 99;
ul {
li {
border-bottom: 0;
background: none;
input {
width: 100%;
@include box-sizing(border-box);
border-color: #000;
padding: 6px;
}
select {
width: 100%;
@include box-sizing(border-box);
option {
font-size: 14px;
}
}
a {
float: right;
&:first-child {
float: left;
}
}
}
}
}
input[type="submit"] {
display: block;
margin-bottom: 6px;
width: 100%;
}
a {
&:first-child {
float: left;
}
&:last-child {
float: right;
&:hover {
div {
display: block;
}
}
}
}
}
}
}
section.new-section {
margin-top: 10px;
> a {
@extend .button;
@include inline-block();
}
section {
display: none;
header {
border-bottom: 1px solid #000;
@include box-shadow(0 1px 2px #ccc);
display: block;
margin-bottom: 2px;
background: #fff;
text-align: left;
}
form {
background: #fff;
width: 50%;
padding: 6px;
border: 1px solid #000;
margin: 0 auto;
@include box-shadow(0 0 2px #333);
position: relative;
&:before {
background: #fff;
border-left: 1px solid #000;
border-top: 1px solid #000;
content: " ";
display: block;
height: 10px;
left: 50%;
position: absolute;
top: -6px;
@include transform(rotate(45deg));
width: 10px;
z-index: 0;
}
h1 {
font-size: 14px;
select {
margin-bottom: 6px;
width: 100%;
option {
padding: 10px 0 !important;
}
}
}
ul {
list-style: none;
margin-bottom: 1px;
input[type="submit"] {
display: block;
margin-bottom: 6px;
width: 100%;
}
li {
background: #efefef;
border-bottom: 1px solid #666;
padding: 6px;
a {
&.goal {
background: #fff;
&:first-child {
float: left;
}
&:last-child {
float: right;
}
}
}
}
&:hover {
section {
display: block;
}
}
}
}
......
cms/static/sass/_module-header.scss 0 → 100644
section.video-new, section.video-edit, section.problem-new, section.problem-edit {
position: absolute;
top: 72px;
right: 0;
background: #fff;
width: flex-grid(6);
@include box-shadow(0 0 6px #666);
border: 1px solid #333;
border-right: 0;
z-index: 4;
> header {
background: #666;
@include clearfix;
color: #fff;
padding: 6px;
border-bottom: 1px solid #333;
-webkit-font-smoothing: antialiased;
h2 {
float: left;
font-size: 14px;
}
a {
color: #fff;
&.save-update {
float: right;
}
&.cancel {
float: left;
}
}
}
> section {
padding: 20px;
> header {
h1 {
font-size: 24px;
margin: 12px 0;
}
section {
&.status-settings {
ul {
list-style: none;
@include border-radius(2px);
border: 1px solid #999;
@include inline-block();
li {
@include inline-block();
border-right: 1px solid #999;
padding: 6px;
&:last-child {
border-right: 0;
}
&.current {
background: #eee;
}
}
}
a.settings {
@include inline-block();
margin: 0 20px;
border: 1px solid #999;
padding: 6px;
}
select {
float: right;
}
}
&.meta {
background: #eee;
padding: 10px;
margin: 20px 0;
@include clearfix();
div {
float: left;
margin-right: 20px;
h2 {
font-size: 14px;
@include inline-block();
}
p {
@include inline-block();
}
}
}
}
}
section.notes {
margin-top: 20px;
padding: 6px;
background: #eee;
border: 1px solid #ccc;
textarea {
@include box-sizing(border-box);
display: block;
width: 100%;
}
h2 {
font-size: 14px;
margin-bottom: 6px;
}
input[type="submit"]{
margin-top: 10px;
}
}
}
}
cms/static/sass/_problem.scss
section.problem-new, section.problem-edit {
position: absolute;
top: 80px;
right: 0;
background: #fff;
width: flex-grid(5);
@include box-shadow(0 0 6px #666);
border: 1px solid #333;
border-right: 0;
z-index: 4;
> header {
background: #666;
@include clearfix;
color: #fff;
padding: 6px;
border-bottom: 1px solid #333;
-webkit-font-smoothing: antialiased;
h2 {
float: left;
font-size: 14px;
> section {
textarea {
@include box-sizing(border-box);
display: block;
width: 100%;
}
a {
float: right;
div.preview {
background: #eee;
@include box-sizing(border-box);
height: 40px;
padding: 10px;
width: 100%;
}
}
section {
ul {
list-style: none;
li {
border-bottom: 1px solid #333;
padding: 10px 25px;
}
a.save {
@extend .button;
@include inline-block();
margin-top: 20px;
}
}
}
......
cms/static/sass/_video.scss
section.video-new, section.video-edit {
position: absolute;
top: 80px;
right: 0;
background: #fff;
width: flex-grid(5);
@include box-shadow(0 0 6px #666);
border: 1px solid #333;
border-right: 0;
z-index: 4;
> section {
> header {
background: #666;
@include clearfix;
color: #fff;
padding: 6px;
border-bottom: 1px solid #333;
-webkit-font-smoothing: antialiased;
section.upload {
padding: 6px;
margin-bottom: 10px;
border: 1px solid #ddd;
h2 {
float: left;
font-size: 14px;
}
a {
float: right;
a.upload-button {
@extend .button;
@include inline-block();
}
}
}
section {
ul {
list-style: none;
section.in-use {
h2 {
font-size: 14px;
}
li {
border-bottom: 1px solid #333;
padding: 10px 25px;
div {
background: #eee;
text-align: center;
padding: 6px;
}
}
a.save-update {
@extend .button;
@include inline-block();
margin-top: 20px;
}
}
}
cms/static/sass/_week.scss
section.week-edit, section.week-new {
section.week-edit,
section.week-new,
section.sequence-edit {
> header {
border-bottom: 1px solid #ccc;
......
cms/static/sass/base-style.scss
......@@ -3,16 +3,4 @@
@import 'base';
@import 'calendar';
@import 'week', 'video', 'problem';
body {
&.content {
section.main-content {
border-left: 2px solid #000;
@include box-sizing(border-box);
width: flex-grid(9);
float: left;
@include box-shadow( -2px 0 3px #ddd );
}
}
}
@import 'week', 'video', 'problem', 'module-header';
cms/templates/index.html
......@@ -9,6 +9,7 @@
<section class="main-content">
<%include file="widgets/week-edit.html"/>
<%include file="widgets/week-new.html"/>
<%include file="widgets/sequnce-edit.html"/>
<%include file="widgets/video-edit.html"/>
<%include file="widgets/video-new.html"/>
<%include file="widgets/problem-edit.html"/>
......
cms/templates/widgets/header.html
<header>
<nav>
<h2><a href="/ui_prototype">6.002x</a></h2>
<h2><a href="/ui_prototype">6.002x circuits and electronics</a></h2>
<a href="#" class="new-module">New module</a>
</nav>
</header>
cms/templates/widgets/module-dropdown.html 0 → 100644
<li class="create-module">
<a href="#" class="new-module">
+ Add new module
</a>
<div>
<form>
<ul>
<li>
<input type="text" name="" id="" placeholder="Moldule title" />
</li>
<li>
<select>
<option>Use template</option>
<option>Lecture Sequence</option>
<option>Use template</option>
</select>
</li>
<li>
<input type="submit" value="Create & Edit Module" />
<div>
<a href="#">Save without edit</a>
<a href="#">Cancel</a>
</div>
</li>
</ul>
</form>
</div>
</li>
cms/templates/widgets/navigation.html
<section class="cal">
<header>
<h1>Circuts &amp; Electronics</h1>
<h2>Filter content:</h2>
<ul>
<li class="dropdown">
<li>
<a href="#">Sequences</a>
<ul>
......@@ -17,9 +16,20 @@
<li>
<a href="#">Deadlines</a>
<ul>
<li>Today</li>
<li>Tomorrow</li>
<li>This week</li>
<li>In 2 weeks</li>
<li>This month</li>
</ul>
</li>
<li>
<a href="#">Goals</a>
<ul>
<li>Hide</li>
</ul>
</li>
</ul>
</header>
......@@ -28,93 +38,131 @@
<li>
<header>
<h1><a href="#">Week 1</a></h1>
<ul>
<li class="goal editable"><strong>Goal title:</strong> This is a goal that will be in the header of the week</li>
<li class="goal editable"><strong>Goal title two:</strong> This is another fgoal for this week so that students have two things to learn</li>
</ul>
</header>
<ul>
<li class="goal">Goal 1</li>
<li class="goal">Goal 2</li>
<li class="seq">Lecture Sequence</li>
<li class="seq">Lecture Sequence</li>
<li class="lab">Lab</li>
<li class="seq"><a href="#" class="sequence-edit">Lecture Sequence</a></li>
<li class="seq"><a href="#" class="sequence-edit">Lecture Sequence</a></li>
<li class="lab"><a href="#" class="lab-edit">Lab</a></li>
<li class="hw">Homework</li>
<li class="new">+ Add new sequence</li>
<%include file="module-dropdown.html"/>
</ul>
</li>
<li>
<header>
<h1><a href="#">Week 2</a></h1>
<ul>
<li class="goal editable"><strong>Another title</strong> This is the goal for the week</li>
</ul>
</header>
<ul>
<li class="goal">Goal 1</li>
<li class="seq">Lecture Sequence</li>
<li class="seq">Lecture Sequence</li>
<li class="lab">Lab</li>
<li class="hw">Homework</li>
<li class="new">+ Add new sequence</li>
<%include file="module-dropdown.html"/>
</ul>
</li>
<li>
<header>
<h1><a href="#">Week 3</a></h1>
<ul>
<li class="goal editable"><strong>Another title</strong> This is the goal for the week</li>
</ul>
</header>
<ul>
<li class="goal">Goal 1</li>
<li class="lab">Lab</li>
<li class="lab">Lab</li>
<li class="hw">Homework</li>
<li class="new">+ Add new sequence</li>
<%include file="module-dropdown.html"/>
</ul>
</li>
<li>
<header>
<h1><a href="#">Week 4</a></h1>
<ul>
<li class="goal editable"><strong>Another title</strong> This is the goal for the week</li>
<li class="goal editable"><strong>Goal title two:</strong> This is another fgoal for this week so that students have two things to learn</li>
</ul>
</header>
<ul>
<li class="goal">Goal 1</li>
<li class="seq">Lecture Sequence</li>
<li class="lab">Lab</li>
<li class="hw">Homework</li>
<li class="hw">Homework</li>
<li class="new">+ Add new sequence</li>
<%include file="module-dropdown.html"/>
</ul>
</li>
<li>
<header>
<h1><a>Week 5</a></h1>
<ul>
<li class="goal editable">Please create a learning goal for this week</li>
</ul>
</header>
<ul>
<%include file="module-dropdown.html"/>
</ul>
</li>
<li>
<header>
<h1><a>Week 6</a></h1>
<ul>
<li class="goal editable">Please create a learning goal for this week</li>
</ul>
</header>
<ul>
<li class="new">+ Add new sequence</li>
<%include file="module-dropdown.html"/>
</ul>
</li>
<li>
<p class="add-new-week">
<a href="#" >+ Add New</a>
</p>
<header>
<h1><a>Week 7</a></h1>
<ul>
<li class="goal editable">Please create a learning goal for this week</li>
</ul>
</header>
<ul>
<%include file="module-dropdown.html"/>
</ul>
</li>
</ol>
<section class="new-week">
<header>
<h1 class="editable">Week 6</h1>
</header>
<section class="new-section">
<a href="#" >+ Add New Section</a>
<form>
<select>
<option>Blank</option>
<option>6.002x</option>
<option>6.00x</option>
</select>
<div>
<section>
<form>
<ul>
<li>
<input type="text" name="" id="" placeholder="Moldule title" />
</li>
<li>
<select>
<option>Blank</option>
<option>6.002x</option>
<option>6.00x</option>
</select>
</li>
<li>
<input type="submit" value="Save and edit week" class="edit-week" />
<a href="#" class="close">Save without edit</a>
<a href="#" class="close">cancel</a>
</div>
</form>
</section>
</li>
</ol>
</li>
</ul>
</form>
</section>
</section>
</section>
cms/templates/widgets/new-module.html
<li class="new-module">
<ul class="new-dropdown">
<li class="default">+ add new</li>
<li class="import"><a href="#">Import from the edX library</a></li>
<li class="video-new"><a href="#">Create new video segment</a></li>
<li class="problem-new"><a href="#">Create new problem</a></li>
<li class="lab-lab"><a href="#">Create new lab</a></li>
</ul>
</li>
<ul class="new-dropdown">
<li class="default">+ add new</li>
<li class="import"><a href="#">Import from the edX library</a></li>
<li class="video-new"><a href="#">Create new video segment</a></li>
<li class="problem-new"><a href="#">Create new problem</a></li>
<li class="lab-lab"><a href="#">Create new lab</a></li>
</ul>
cms/templates/widgets/problem-edit.html
<section class="problem-new">
<section class="problem-edit">
<header>
<a href="#" class="cancel">cancel</a>
<a href="#">Save &amp; Update</a>
<a href="#" class="cancel">Cancel</a>
<a href="#" class="save-update">Save &amp; Update</a>
</header>
<section>
<header>
<h1 class="editable">Old Problem</h1>
<section>
<h1 class="editable">New Problem</h1>
<section class="author">
<div>
<h2>Last modified:</h2>
<p>mm/dd/yy</p>
</div>
<div>
<h2>By</h2>
<p>Anant Agarwal</p>
</div>
</section>
<section class="status-settings">
<ul>
<li><a href="#">Scrap</a></li>
<li><a href="#" class="current">Scrap</a></li>
<li><a href="#">Draft</a></li>
<li><a href="#">Proofed</a></li>
<li><a href="#">Published</a></li>
</ul>
<div>
<a href="#">Settings</a>
</div>
<a href="#" class="settings">Settings</a>
<select name="" id="">
<option>Global</option>
</select>
</section>
<section>
<section class="meta">
<div>
<h2>Tags:</h2>
<p class="editable">Click to edit</p>
</div>
<div>
<h2>Last modified:</h2>
<p>mm/dd/yy</p>
</div>
<div>
<h2>By</h2>
<p>Anant Agarwal</p>
<h2>Goal</h2>
<p class="editable">Click to edit</p>
</div>
</section>
</header>
......@@ -49,6 +53,10 @@
</section>
<section class="notes">
<h2>Add notes</h2>
<textarea name="" id= rows="8" cols="40"></textarea>
<input type="submit" name="" id="" value="post" />
<ul>
<li>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
......@@ -58,16 +66,8 @@
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p class="author">Anant Agarwal</p>
</li>
</ul>
<div>
<h2>Add notes</h2>
<textarea name="" id= rows="8" cols="40"></textarea>
<input type="submit" name="" id="" value="" />
</div>
</section>
</ul> </section>
<a href="">Save &amp; Update</a>
<a href="" class="save-update">Save &amp; Update</a>
</section>
</section>
cms/templates/widgets/problem-new.html
<section class="problem-new">
<header>
<a href="#" class="cancel">cancel</a>
<a href="#">Save &amp; Update</a>
<a href="#" class="cancel">Cancel</a>
<a href="#" class="save-update">Save &amp; Update</a>
</header>
<section>
<header>
<h1>New Problem</h1>
<section>
<h1 class="editable">New Problem</h1>
<section class="status-settings">
<ul>
<li><a href="#">Scrap</a></li>
<li><a href="#" class="current">Scrap</a></li>
<li><a href="#">Draft</a></li>
<li><a href="#">Proofed</a></li>
<li><a href="#">Published</a></li>
</ul>
<a href="#">Settings</a>
<a href="#" class="settings">Settings</a>
<select name="" id="">
<option>Global</option>
</select>
</section>
<section>
<section class="meta">
<div>
<h2>Tags:</h2>
<p class="editable">Click to edit</p>
</div>
<!-- <div> -->
<!-- <h2>Last modified:</h2> -->
<!-- <p>mm/dd/yy</p> -->
<!-- </div> -->
<!-- <div> -->
<!-- <h2>By</h2> -->
<!-- <p>Anant Agarwal</p> -->
<!-- </div> -->
<div>
<h2>Goal</h2>
<p class="editable">Click to edit</p>
</div>
</section>
</header>
......@@ -45,8 +42,10 @@
<section class="notes">
<h2>Add notes</h2>
<textarea name="" id= rows="8" cols="40"></textarea>
<input type="submit" name="" id="" value="post" />
</section>
<a href="">Save &amp; Update</a>
<a href="" class="save-update">Save &amp; Update</a>
</section>
</section>
cms/templates/widgets/sequnce-edit.html 0 → 100644
<%block name="content">
<section class="sequence-edit">
<header>
<a href="/ui_prototype">Done</a>
<h1 class="editable">Lecture Sequence name</h1>
<a href="">Settings</a>
</header>
<section class="sidebar">
<section class="goals">
<header>
<h2>Content</h2>
</header>
<ul>
<li><a href="#" class="video-edit">Video 1</a></li>
<li><a href="#" class="video-edit">Video 2</a></li>
<%include file="new-module.html"/>
</ul>
</section>
<section class="scratch-pad">
<header>
<h2>Scratchpad</h2>
</header>
<ul>
<li><a href="#" class="problem-edit">Problem title 11</a></li>
<li><a href="#" class="problem-edit">Problem title 13</a></li>
<li><a href="#" class="problem-edit">Problem title 14</a></li>
<li><a href="#" class="video-edit">Video 3</a></li>
<%include file="new-module.html"/>
</ul>
</section>
</section>
<section class="weeks-content">
<header>
<h2>Sequence Content</h2>
<form>
<input type="search" name="" id="" value="" />
</form>
</header>
<section class="filters">
<ul>
<li>
<label for="">Sort by</label>
<select>
<option value="">Recently Modified</option>
</select>
</li>
<li>
<label for="">Display</label>
<select>
<option value="">All content</option>
</select>
</li>
<li>
<select>
<option value="">Internal Only</option>
</select>
</li>
<li class="advanced">
<a href="#">Advanced filters</a>
</li>
</ul>
</section>
<section class="modules">
<ul>
<li><a href="#" class="problem-edit">Problem 2</a></li>
<li><a href="#" class="problem-edit">Problem 4</a></li>
<li><a href="#" class="problem-edit">Problem 6</a></li>
<li><a href="#" class="video-edit">Video 5</a></li>
<li><a href="#" class="video-edit">Video 4</a></li>
<li><a href="#" class="problem-edit">Problem 9</a></li>
</ul>
</section>
</section>
</section>
</%block>
cms/templates/widgets/video-edit.html
<section class="video-edit">
<div class="content">
<form class="editor">
<div class="step black">
<section class="half">
<strong>Created </strong><span>22/03/12</span>
<strong>by </strong><span>Piotr Mitros</span>
</section>
<section class="half">
<strong>Last edited </strong><span>22/03/12</span>
<strong>by </strong><span>David Ormsbee</span>
</section>
</div>
<div class="step">
<section>
<h2 class="editable">Video title</h2>
<div style="margin: 15px 0;">
<strong>Tag</strong> <span class="editable">mitx, s4v1, circuits, anant</span>
</div>
</section>
<section class="meta">
<span>Keyword
<strong class="editable">S4V1</strong>
</span>
<span>Due Date
<strong class="editable">21/03/12</strong>
</span>
Status
<select>
<option>Draft</option>
<option>Published</option>
<option>Checked</option>
</select>
<input type="button" value="Save" style="float: right; margin-top: -4px;" />
</section>
</div>
<div class="step">
<section>
<div>
<input type="button" id="new-upload" value="Upload a new video clip" /> or
<span >use an already <a id="show-sidebar" href="#">uploaded one</a></span>
</div>
</section>
<section class="meta selected-files">
<div>
<ul>
<li>video-name-@0-75x.extension</li>
<li>video-name-@1x.extension</li>
<li>video-name-@1-25x.extension</li>
<li>video-name-@1-5x.extension</li>
</ul>
</div>
<input type="file" />
<input type="button" value="Upload" id="new-upload" style="float: right; margin-top: -4px;" />
<a href="" id="new-upload" style="float: right; margin-right: 10px;">Cancel</a>
</section>
</div>
<div class="step">
<section class="used-videos" style="overflow: visible;">
<ul id="used">
<div class="title"><h4>Video clip in use</h4></div>
<%include file="video-box.html"/>
</ul>
<p class="no-video">No video clip used. Select one from the list below, <a>upload</a> a new one or <a>import</a> an already uploaded video.</p>
</section>
<section class="meta">
<input type="submit" value="Save and publish"/>
</section>
</div>
<div class="step no-title">
<section class="meta unused-videos"style="overflow: visible;" >
<ul id="unused">
<%include file="video-box-unused.html"/>
</ul>
</section>
</div>
<div id="testing"></div>
<div class="step">
<div class="title"><h4>Annotations</h4></div>
<textarea class="captions" style="margin-top: 10px">
<div id="std_p7" onclick="title_seek( 7);"></div>
<li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li>
</ol></div>
More information given in <a href="/book/243">the text</a>.
</textarea>
<section class="meta">
<input type="submit" value="Save"/>
<section class="video-new">
<header>
<a href="#" class="cancel">Cancel</a>
<a href="#" class="save-update">Save &amp; Update</a>
</header>
<section>
<header>
<h1 class="editable">Untitled Video</h1>
<section class="status-settings">
<ul class="status">
<li class="current"><a href="#">Scrap</a></li>
<li><a href="#">Draft</a></li>
<li><a href="#">Proofed</a></li>
<li><a href="#">Published</a></li
</ul>
<a href="#" class="settings">Settings</a>
<select name="" id="">
<option>Global</option>
</select>
</section>
<section class="meta">
<div>
<h2>Tags:</h2>
<p class="editable">Click to edit</p>
</div>
<div>
<h2>Goal</h2>
<p class="editable">mitx, s4v1, circuits, anant</p>
</div>
</section>
</header>
<section class="upload">
<a href="#" class="upload-button">Upload new video clip</a>
Or
<a href="#">use an already uploaded one</a>
</section>
</form>
</div>
<div class="step">
<div class="title"><h4>Notes</h4></div>
<textarea class="notes" style="margin: 10px 0;">
</textarea>
<section class="meta">
<input type="submit" value="Post"/>
</section>
<section>
<div class="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<p><strong>By Piotr Mitros</strong> 10 hours ago</p>
</div>
<div class="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <p><strong>By Piotr Mitros</strong> 10 hours ago</p>
</div>
<div class="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <p><strong>By Piotr Mitros</strong> 10 hours ago</p>
<section class="in-use">
<h2>Video in use</h2>
<div>
<p>No video clip used. <a href="">Select one</a> from the list below, <a href="">upload a new one</a> or <a href="">import already existing video</a></p>
</div>
</section>
</div>
<aside id="video-selector" class="hidden">
<input type="text" placeholder="Search video files..." />
<ul class="raw-videos">
<%include file="raw-videos.html"/>
</ul>
</aside>
</div>
<div id="raw-file">
Select the source video <select><option>Select source video</option><option>video-title.webm</option><option>another-video-title.webm</option><option>video-title-2.webm</option></select> or directly enter its ID <input type="text" style="width: 200px;"/><button>Use video</button>
</div>
<div id="view">
<img src="${ STATIC_URL }/img/video.jpg" />
</div>
<section class="notes">
<h2>Add notes</h2>
<textarea name="" id= rows="8" cols="40"></textarea>
<input type="submit" name="" id="" value="post" />
</section>
<div id="upload">
<input type="file" />
<input type="button" value="Upload" id="new-upload" style="float: right; margin-top: -4px;" />
<a href="" id="new-upload" style="float: right; margin-right: 10px;">Cancel</a>
</div>
<a href="" class="save-update">Save &amp; Update</a>
</section>
</section>
cms/templates/widgets/video-new.html
<section class="video-new">
<header>
<a href="#" class="cancel">cancel</a>
<a href="#">Save &amp; Update</a>
<a href="#" class="cancel">Cancel</a>
<a href="#" class="save-update">Save &amp; Update</a>
</header>
<section>
<header>
<h1 class="editable">Untitled Video</h1>
<section>
<ul>
<li><a href="#">Scrap</a></li>
<section class="author">
<div>
<h2>Last modified:</h2>
<p>mm/dd/yy</p>
</div>
<div>
<h2>By</h2>
<p>Anant Agarwal</p>
</div>
</section>
<section class="status-settings">
<ul class="status">
<li class="current"><a href="#">Scrap</a></li>
<li><a href="#">Draft</a></li>
<li><a href="#">Proofed</a></li>
<li><a href="#">Published</a></li>
</ul>
<a href="#">Settings</a>
<a href="#" class="settings">Settings</a>
<select name="" id="">
<option>Global</option>
</select>
</section>
<section>
<section class="meta">
<div>
<h2>Tags:</h2>
<p class="editable">mitx, s4v1, circuits, anant</p>
</div>
<div>
<h2>Goal</h2>
<p class="editable">Click to edit</p>
</div>
</section>
</header>
<!-- <div> -->
<!-- <h2>Last modified:</h2> -->
<!-- <p>mm/dd/yy</p> -->
<!-- </div> -->
<section class="upload">
<a href="#" class="upload-button">Upload new video clip</a>
Or
<a href="#">use an already uploaded one</a>
<!-- <div> -->
<!-- <h2>By</h2> -->
<!-- <p>Anant Agarwal</p> -->
<!-- </div> -->
<section class="upload-video">
<div>
<ul>
<li>video-name-@0-75x.extension</li>
<li>video-name-@1x.extension</li>
<li>video-name-@1-25x.extension</li>
<li>video-name-@1-5x.extension</li>
</ul>
</div>
<input type="file" />
<input type="button" value="Upload" id="new-upload" style="float: right; margin-top: -4px;" />
<a href="" id="new-upload" style="float: right; margin-right: 10px;">Cancel</a>
</section>
</header>
</section>
<section>
<textarea name="" id= rows="8" cols="40"></textarea>
<div class="preview">
<section class="in-use">
<h2>Video in use</h2>
<div>
<p>No video clip used. <a href="">Select one</a> from the list below, <a href="">upload a new one</a> or <a href="">import already existing video</a></p>
</div>
<a href="">Save &amp; Update</a>
</section>
<section class="notes">
<h2>Add notes</h2>
<textarea name="" id= rows="8" cols="40"></textarea>
<input type="submit" name="" id="" value="post" />
</section>
<a href="" class="save-update">Save &amp; Update</a>
</section>
</section>
cms/templates/widgets/week-edit.html
<%block name="content">
<section class="week-edit">
<header>
<h1 class="editable">Week 3</h1>
<a href="/ui_prototype">Done</a>
</header>
<p><a href="#">+ new goal</a></p>
<section class="sidebar">
<section class="goals">
<header>
<h2>Goals</h2>
</header>
<h2>Weeks goals:</h2>
<ul>
<li>Goal 1: This is the title of the first goal</li>
<li>Goal 2: This is the title</li>
<li>
<h3>Goal title</h2>
<p>This is the goal body</p>
</li>
</ul>
<p><a href="#">+ Add new goal</a></p>
</section>
</header>
<section class="scratch-pad">
<header>
<h2>Scratchpad</h2>
</header>
<ul>
<li>Problem title 11</li>
<li>Problem title 13</li>
<li>Problem title 14</li>
<li>Video 3</li>
<%include file="new-module.html"/>
</ul>
</section>
</section>
<section class="weeks-content">
<header>
......@@ -70,14 +53,55 @@
<section class="modules">
<ul>
<li><a href="#">Circuit Stuff</a></li>
<li><a href="#">Circuit Stuff</a></li>
<li><a href="#">Circuit Stuff</a></li>
<li><a href="#">Circuit Stuff</a></li>
<li><a href="#">Circuit Stuff</a></li>
<li><a href="#">Circuit Stuff</a></li>
<li>
<h2><a href="#">Lecture Sequence</a></h2>
<ul>
<li><a href="#" class="problem-edit">Problem title 11</a></li>
<li><a href="#" class="problem-edit">Problem title 13</a></li>
<li><a href="#" class="problem-edit">Problem title 14</a></li>
<li><a href="#" class="video-edit">Video 3</a></li>
</ul>
</li>
<li>
<h2><a href="#">Lecture Sequence</a></h2>
<ul>
<li><a href="#" class="problem-edit">Problem title 11</a></li>
<li><a href="#" class="problem-edit">Problem title 13</a></li>
<li><a href="#" class="problem-edit">Problem title 14</a></li>
<li><a href="#" class="video-edit">Video 3</a></li>
</ul>
</li>
<li>
<h2><a href="#">Homework 1a</a></h2>
<ul>
<li><a href="#" class="problem-edit">Problem title 11</a></li>
<li><a href="#" class="problem-edit">Problem title 13</a></li>
<li><a href="#" class="problem-edit">Problem title 14</a></li>
<li><a href="#" class="video-edit">Video 3</a></li>
</ul>
</li>
<li class="new-module">
<%include file="new-module.html"/>
</li>
</ul>
</section>
</section>
<section class="scratch-pad">
<header>
<h2>Scratchpad</h2>
</header>
<ul>
<li>Problem title 11</li>
<li>Problem title 13</li>
<li>Problem title 14</li>
<li>Video 3</li>
<%include file="new-module.html"/>
</ul>
</section>
</section>
</%block>
cms/templates/widgets/week-new.html
<%block name="content">
<section class="week-new">
<header>
<h1>Week 6</h1>
<a href="/ui_prototype">Done</a>
</header>
<p><a href="#">+ new goal</a></p>
<section class="sidebar">
<section class="goals">
<header>
<h2>Goals</h2>
</header>
<p><a href="#">+ Add new goal</a></p>
</section>
<section class="scratch-pad">
<header>
<h2>Scratchpad</h2>
</header>
<h2>Weeks goals:</h2>
<ul>
<%include file="new-module.html"/>
<li>
<h3>Create new goal</h2>
<p>Goals are overarching themes for the week</p>
</li>
</ul>
</section>
</section>
</header>
<section class="weeks-content">
<header>
<h2>Weeks Content</h2>
<section class="filters disabled">
<ul>
<li>
<label for="">Sort by</label>
<select>
<option value="">Recently Modified</option>
</select>
</li>
<li>
<label for="">Display</label>
<select>
<option value="">All content</option>
</select>
</li>
<li>
<select>
<option value="">Internal Only</option>
</select>
</li>
<li class="advanced">
<a href="#">Advanced filters</a>
</li>
<li>
<form>
<input type="search" name="" id="" value="" />
</form>
</li>
</ul>
</section>
<section>
<section class="scratch-pad">
<header>
<h2>Scratch pad</h2>
</header>
<section class="filters">
<ul>
<li>
<label for="">Sort by</label>
<select>
<option value="">Recently Modified</option>
</select>
</li>
<ul>
<li class="new-module">
<%include file="new-module.html"/>
</li>
</ul>
</section>
<li>
<label for="">Display</label>
<select>
<option value="">All content</option>
</select>
</li>
<li>
<select>
<option value="">Internal Only</option>
</select>
</li>
<section class="weeks-content">
<header>
<h2>Weeks Content</h2>
</header>
<li class="advanced">
<a href="#">Advanced filters</a>
</li>
</ul>
</section>
</section>
</section>
<section class="new-bar">
<ul>
<li>
<a href="#">Existing content</a>
</li>
<li>
<a href="#">New Video</a>
</li>
<li>
<a href="#">New Problem</a>
</li>
<li>
<a href="#">New Lab</a>
</li>
</ul>
</section>
</%block>
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