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(){ ...@@ -6,96 +6,6 @@ $(document).ready(function(){
$('.editable-textarea').inlineEdit({control: 'textarea'}); $('.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; var heighest = 0;
$('.cal ol > li').each(function(){ $('.cal ol > li').each(function(){
heighest = ($(this).height() > heighest) ? $(this).height() : heighest; heighest = ($(this).height() > heighest) ? $(this).height() : heighest;
...@@ -104,10 +14,7 @@ $(document).ready(function(){ ...@@ -104,10 +14,7 @@ $(document).ready(function(){
$('.cal ol > li').css('height',heighest + 'px'); $('.cal ol > li').css('height',heighest + 'px');
$('.new-week').hide(); $('.add-new-section').click(function() {
$('.add-new-week').click(function() {
$(this).hide();
$('.new-week').show();
return false; return false;
}); });
...@@ -117,43 +24,63 @@ $(document).ready(function(){ ...@@ -117,43 +24,63 @@ $(document).ready(function(){
return false; 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() { $('.sidebar').css('height', sidebarHeight);
$('body').addClass('content'); $('body.content .cal').css('height', calHeight);
$('body.content .cal').css('height', windowHeight);
$('section.week-new').show();
return false;
});
$('.cal ol li header h1 a').click( function() { $('.edit-week').click( function() {
$('body').addClass('content'); $('body').addClass('content');
$('body.content .cal').css('height', windowHeight); $('body.content .cal').css('height', calHeight);
$('section.week-edit').show(); $('section.week-new').show();
return false; 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(){ $('a.sequence-edit').click(function(){
$('section.video-new').show(); $('body').addClass('content');
$('body.content .cal').css('height', calHeight);
$('section.sequence-edit').show();
return false; 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(){ $('a.video-edit').click(function(){
$('section.video-edit').show(); $('section.video-edit').show();
return false; return false;
}); });
$('.problem-new a').click(function(){ $('.problem-new a').click(function(){
$('section.problem-new').show(); $('section.problem-new').show();
return false; return false;
}); });
$('.problem-edit a').click(function(){ $('a.problem-edit').click(function(){
$('section.problem-edit').show(); $('section.problem-edit').show();
return false; return false;
}); });
}); });
cms/static/sass/_base.scss
...@@ -32,7 +32,22 @@ body { ...@@ -32,7 +32,22 @@ body {
h2 { h2 {
font-size: 14px; font-size: 14px;
text-transform: uppercase; 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 { ...@@ -48,4 +63,3 @@ input[type="submit"], .button {
@include border-radius(3px); @include border-radius(3px);
padding: 6px; padding: 6px;
} }
cms/static/sass/_calendar.scss
...@@ -7,59 +7,40 @@ section.cal { ...@@ -7,59 +7,40 @@ section.cal {
> header { > header {
@include clearfix; @include clearfix;
margin-bottom: 10px; margin-bottom: 10px;
background: #efefef;
h1 { border: 1px solid #ddd;
float: left;
font-size: 18px; h2 {
@include inline-block();
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
padding: 6px;
margin-left: 6px;
font-size: 12px;
} }
ul { ul {
float: right; @include inline-block;
li { li {
@include inline-block; @include inline-block;
margin-left: 6px;
padding-left: 6px;
border-left: 1px solid #ddd;
padding: 6px;
a { a {
padding: 6px; @include inline-block();
border: 1px solid #ddd;
display: block;
@include border-radius(3px);
background: #efefef;
} }
&.dropdown { ul {
position: relative; @include inline-block();
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 { li {
display: block; @include inline-block();
} padding: 0;
border-left: 0;
a {
@include border-radius(3px 3px 0 0);
border-bottom: 0;
}
} }
} }
} }
...@@ -81,109 +62,172 @@ section.cal { ...@@ -81,109 +62,172 @@ section.cal {
float: left; float: left;
width: flex-grid(3) + ((flex-gutter() * 3) / 4); width: flex-grid(3) + ((flex-gutter() * 3) / 4);
&:last-child { header {
text-align: center; border-bottom: 1px solid #000;
background: #eee; @include box-shadow(0 1px 2px #aaa);
@include box-sizing(border-box); display: block;
margin-bottom: 2px;
p { h1 {
width: 100%; font-size: 14px;
height: 100%; text-transform: uppercase;
@include box-sizing(border-box); border-bottom: 1px solid #ccc;
padding: 6px;
a { a {
color: #000;
display: block; display: block;
width: 100%;
height: 100%;
} }
} }
section.new-week { ul {
header { li {
background: #fff; background: #fff;
text-align: left; color: #888;
border-bottom: 0;
font-size: 12px;
} }
}
}
form { ul {
background: #fff; list-style: none;
width: 50%; margin-bottom: 1px;
padding: 6px;
border: 1px solid #000;
margin: 0 auto;
@include box-shadow(0 0 2px #333);
position: relative;
&:before { li {
background: #fff; background: #efefef;
border-left: 1px solid #000; border-bottom: 1px solid #666;
border-top: 1px solid #000; padding: 6px;
content: " ";
display: block;
height: 10px;
left: 50%;
position: absolute;
top: -6px;
@include transform(rotate(45deg));
width: 10px;
z-index: 0;
}
select { &.create-module {
margin-bottom: 6px; position: relative;
width: 100%;
option { > div {
padding: 10px 0 !important; 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"] { &:hover {
display: block; div {
margin-bottom: 6px; display: block;
width: 100%;
}
a {
&:first-child {
float: left;
}
&:last-child {
float: right;
} }
} }
} }
} }
} }
}
}
section.new-section {
margin-top: 10px;
> a {
@extend .button;
@include inline-block();
}
section {
display: none;
header { header {
border-bottom: 1px solid #000; background: #fff;
@include box-shadow(0 1px 2px #ccc); text-align: left;
display: block; }
margin-bottom: 2px;
form {
background: #fff;
width: 50%;
padding: 6px; 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 { select {
font-size: 14px; margin-bottom: 6px;
width: 100%;
option {
padding: 10px 0 !important;
}
} }
}
ul { input[type="submit"] {
list-style: none; display: block;
margin-bottom: 1px; margin-bottom: 6px;
width: 100%;
}
li { a {
background: #efefef;
border-bottom: 1px solid #666;
padding: 6px;
&.goal { &:first-child {
background: #fff; 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 { section.problem-new, section.problem-edit {
position: absolute; > section {
top: 80px; textarea {
right: 0; @include box-sizing(border-box);
background: #fff; display: block;
width: flex-grid(5); width: 100%;
@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 { div.preview {
float: right; background: #eee;
@include box-sizing(border-box);
height: 40px;
padding: 10px;
width: 100%;
} }
}
section {
ul {
list-style: none;
li { a.save {
border-bottom: 1px solid #333; @extend .button;
padding: 10px 25px; @include inline-block();
} margin-top: 20px;
} }
} }
} }
......
cms/static/sass/_video.scss
section.video-new, section.video-edit { section.video-new, section.video-edit {
position: absolute; > section {
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 { section.upload {
background: #666; padding: 6px;
@include clearfix; margin-bottom: 10px;
color: #fff; border: 1px solid #ddd;
padding: 6px;
border-bottom: 1px solid #333;
-webkit-font-smoothing: antialiased;
h2 { a.upload-button {
float: left; @extend .button;
font-size: 14px; @include inline-block();
} }
a {
float: right;
} }
}
section { section.in-use {
ul { h2 {
list-style: none; font-size: 14px;
}
li { div {
border-bottom: 1px solid #333; background: #eee;
padding: 10px 25px; 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 { > header {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
......
cms/static/sass/base-style.scss
...@@ -3,16 +3,4 @@ ...@@ -3,16 +3,4 @@
@import 'base'; @import 'base';
@import 'calendar'; @import 'calendar';
@import 'week', 'video', 'problem'; @import 'week', 'video', 'problem', 'module-header';
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 );
}
}
}
cms/templates/index.html
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<section class="main-content"> <section class="main-content">
<%include file="widgets/week-edit.html"/> <%include file="widgets/week-edit.html"/>
<%include file="widgets/week-new.html"/> <%include file="widgets/week-new.html"/>
<%include file="widgets/sequnce-edit.html"/>
<%include file="widgets/video-edit.html"/> <%include file="widgets/video-edit.html"/>
<%include file="widgets/video-new.html"/> <%include file="widgets/video-new.html"/>
<%include file="widgets/problem-edit.html"/> <%include file="widgets/problem-edit.html"/>
......
cms/templates/widgets/header.html
<header> <header>
<nav> <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> </nav>
</header> </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"> <section class="cal">
<header> <header>
<h1>Circuts &amp; Electronics</h1> <h2>Filter content:</h2>
<ul> <ul>
<li class="dropdown"> <li>
<a href="#">Sequences</a> <a href="#">Sequences</a>
<ul> <ul>
...@@ -17,9 +16,20 @@ ...@@ -17,9 +16,20 @@
<li> <li>
<a href="#">Deadlines</a> <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>
<li> <li>
<a href="#">Goals</a> <a href="#">Goals</a>
<ul>
<li>Hide</li>
</ul>
</li> </li>
</ul> </ul>
</header> </header>
...@@ -28,93 +38,131 @@ ...@@ -28,93 +38,131 @@
<li> <li>
<header> <header>
<h1><a href="#">Week 1</a></h1> <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> </header>
<ul> <ul>
<li class="goal">Goal 1</li> <li class="seq"><a href="#" class="sequence-edit">Lecture Sequence</a></li>
<li class="goal">Goal 2</li> <li class="seq"><a href="#" class="sequence-edit">Lecture Sequence</a></li>
<li class="seq">Lecture Sequence</li> <li class="lab"><a href="#" class="lab-edit">Lab</a></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> </ul>
</li> </li>
<li> <li>
<header> <header>
<h1><a href="#">Week 2</a></h1> <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> </header>
<ul> <ul>
<li class="goal">Goal 1</li>
<li class="seq">Lecture Sequence</li> <li class="seq">Lecture Sequence</li>
<li class="seq">Lecture Sequence</li> <li class="seq">Lecture Sequence</li>
<li class="lab">Lab</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> </ul>
</li> </li>
<li> <li>
<header> <header>
<h1><a href="#">Week 3</a></h1> <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> </header>
<ul> <ul>
<li class="goal">Goal 1</li>
<li class="lab">Lab</li> <li class="lab">Lab</li>
<li class="lab">Lab</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> </ul>
</li> </li>
<li> <li>
<header> <header>
<h1><a href="#">Week 4</a></h1> <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> </header>
<ul> <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="lab">Lab</li>
<li class="hw">Homework</li> <li class="hw">Homework</li>
<li class="hw">Homework</li> <li class="hw">Homework</li>
<li class="new">+ Add new sequence</li> <%include file="module-dropdown.html"/>
</ul> </ul>
</li> </li>
<li> <li>
<header> <header>
<h1><a>Week 5</a></h1> <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> </header>
<ul> <ul>
<li class="new">+ Add new sequence</li> <%include file="module-dropdown.html"/>
</ul> </ul>
</li> </li>
<li> <li>
<p class="add-new-week"> <header>
<a href="#" >+ Add New</a> <h1><a>Week 7</a></h1>
</p> <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"> <section class="new-section">
<header> <a href="#" >+ Add New Section</a>
<h1 class="editable">Week 6</h1>
</header>
<form> <section>
<select> <form>
<option>Blank</option> <ul>
<option>6.002x</option> <li>
<option>6.00x</option> <input type="text" name="" id="" placeholder="Moldule title" />
</select> </li>
<div> <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" /> <input type="submit" value="Save and edit week" class="edit-week" />
<a href="#" class="close">Save without edit</a> <a href="#" class="close">Save without edit</a>
<a href="#" class="close">cancel</a> <a href="#" class="close">cancel</a>
</div> </li>
</form> </ul>
</section> </form>
</li> </section>
</ol> </section>
</section> </section>
cms/templates/widgets/new-module.html
<li class="new-module"> <ul class="new-dropdown">
<ul class="new-dropdown"> <li class="default">+ add new</li>
<li class="default">+ add new</li> <li class="import"><a href="#">Import from the edX library</a></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="video-new"><a href="#">Create new video segment</a></li> <li class="problem-new"><a href="#">Create new problem</a></li>
<li class="problem-new"><a href="#">Create new problem</a></li> <li class="lab-lab"><a href="#">Create new lab</a></li>
<li class="lab-lab"><a href="#">Create new lab</a></li> </ul>
</ul>
</li>
cms/templates/widgets/problem-edit.html
<section class="problem-new"> <section class="problem-edit">
<header> <header>
<a href="#" class="cancel">cancel</a> <a href="#" class="cancel">Cancel</a>
<a href="#">Save &amp; Update</a> <a href="#" class="save-update">Save &amp; Update</a>
</header> </header>
<section> <section>
<header> <header>
<h1 class="editable">Old Problem</h1> <h1 class="editable">New Problem</h1>
<section> <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> <ul>
<li><a href="#">Scrap</a></li> <li><a href="#" class="current">Scrap</a></li>
<li><a href="#">Draft</a></li> <li><a href="#">Draft</a></li>
<li><a href="#">Proofed</a></li> <li><a href="#">Proofed</a></li>
<li><a href="#">Published</a></li> <li><a href="#">Published</a></li>
</ul> </ul>
<a href="#" class="settings">Settings</a>
<div>
<a href="#">Settings</a>
</div>
<select name="" id=""> <select name="" id="">
<option>Global</option> <option>Global</option>
</select> </select>
</section> </section>
<section> <section class="meta">
<div> <div>
<h2>Tags:</h2> <h2>Tags:</h2>
<p class="editable">Click to edit</p> <p class="editable">Click to edit</p>
</div> </div>
<div> <div>
<h2>Last modified:</h2> <h2>Goal</h2>
<p>mm/dd/yy</p> <p class="editable">Click to edit</p>
</div>
<div>
<h2>By</h2>
<p>Anant Agarwal</p>
</div> </div>
</section> </section>
</header> </header>
...@@ -49,6 +53,10 @@ ...@@ -49,6 +53,10 @@
</section> </section>
<section class="notes"> <section class="notes">
<h2>Add notes</h2>
<textarea name="" id= rows="8" cols="40"></textarea>
<input type="submit" name="" id="" value="post" />
<ul> <ul>
<li> <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> <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 @@ ...@@ -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>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> <p class="author">Anant Agarwal</p>
</li> </li>
</ul> </ul> </section>
<div>
<h2>Add notes</h2>
<textarea name="" id= rows="8" cols="40"></textarea>
<input type="submit" name="" id="" value="" />
</div>
</section>
<a href="">Save &amp; Update</a> <a href="" class="save-update">Save &amp; Update</a>
</section> </section>
</section> </section>
cms/templates/widgets/problem-new.html
<section class="problem-new"> <section class="problem-new">
<header> <header>
<a href="#" class="cancel">cancel</a> <a href="#" class="cancel">Cancel</a>
<a href="#">Save &amp; Update</a> <a href="#" class="save-update">Save &amp; Update</a>
</header> </header>
<section> <section>
<header> <header>
<h1>New Problem</h1> <h1 class="editable">New Problem</h1>
<section>
<section class="status-settings">
<ul> <ul>
<li><a href="#">Scrap</a></li> <li><a href="#" class="current">Scrap</a></li>
<li><a href="#">Draft</a></li> <li><a href="#">Draft</a></li>
<li><a href="#">Proofed</a></li> <li><a href="#">Proofed</a></li>
<li><a href="#">Published</a></li> <li><a href="#">Published</a></li>
</ul> </ul>
<a href="#">Settings</a> <a href="#" class="settings">Settings</a>
<select name="" id=""> <select name="" id="">
<option>Global</option> <option>Global</option>
</select> </select>
</section> </section>
<section> <section class="meta">
<div> <div>
<h2>Tags:</h2> <h2>Tags:</h2>
<p class="editable">Click to edit</p> <p class="editable">Click to edit</p>
</div> </div>
<!-- <div> --> <div>
<!-- <h2>Last modified:</h2> --> <h2>Goal</h2>
<!-- <p>mm/dd/yy</p> --> <p class="editable">Click to edit</p>
<!-- </div> --> </div>
<!-- <div> -->
<!-- <h2>By</h2> -->
<!-- <p>Anant Agarwal</p> -->
<!-- </div> -->
</section> </section>
</header> </header>
...@@ -45,8 +42,10 @@ ...@@ -45,8 +42,10 @@
<section class="notes"> <section class="notes">
<h2>Add notes</h2> <h2>Add notes</h2>
<textarea name="" id= rows="8" cols="40"></textarea>
<input type="submit" name="" id="" value="post" />
</section> </section>
<a href="">Save &amp; Update</a> <a href="" class="save-update">Save &amp; Update</a>
</section> </section>
</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"> <section class="video-new">
<header>
<div class="content"> <a href="#" class="cancel">Cancel</a>
<form class="editor"> <a href="#" class="save-update">Save &amp; Update</a>
</header>
<div class="step black">
<section class="half"> <section>
<strong>Created </strong><span>22/03/12</span> <header>
<strong>by </strong><span>Piotr Mitros</span> <h1 class="editable">Untitled Video</h1>
</section>
<section class="status-settings">
<section class="half"> <ul class="status">
<strong>Last edited </strong><span>22/03/12</span> <li class="current"><a href="#">Scrap</a></li>
<strong>by </strong><span>David Ormsbee</span> <li><a href="#">Draft</a></li>
</section> <li><a href="#">Proofed</a></li>
</div> <li><a href="#">Published</a></li
<div class="step"> </ul>
<section>
<h2 class="editable">Video title</h2> <a href="#" class="settings">Settings</a>
<div style="margin: 15px 0;"> <select name="" id="">
<strong>Tag</strong> <span class="editable">mitx, s4v1, circuits, anant</span> <option>Global</option>
</div> </select>
</section>
</section>
<section class="meta"> <section class="meta">
<span>Keyword <div>
<strong class="editable">S4V1</strong> <h2>Tags:</h2>
</span> <p class="editable">Click to edit</p>
</div>
<span>Due Date <div>
<strong class="editable">21/03/12</strong> <h2>Goal</h2>
</span> <p class="editable">mitx, s4v1, circuits, anant</p>
Status </div>
<select> </section>
<option>Draft</option> </header>
<option>Published</option>
<option>Checked</option> <section class="upload">
</select> <a href="#" class="upload-button">Upload new video clip</a>
Or
<input type="button" value="Save" style="float: right; margin-top: -4px;" /> <a href="#">use an already uploaded one</a>
</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> </section>
</form>
</div>
<div class="step">
<div class="title"><h4>Notes</h4></div>
<textarea class="notes" style="margin: 10px 0;">
</textarea>
<section class="meta"> <section class="in-use">
<input type="submit" value="Post"/> <h2>Video in use</h2>
</section> <div>
<section> <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 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>
</div> </div>
</section> </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> <section class="notes">
<h2>Add notes</h2>
<div id="raw-file"> <textarea name="" id= rows="8" cols="40"></textarea>
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> <input type="submit" name="" id="" value="post" />
</div> </section>
<div id="view">
<img src="${ STATIC_URL }/img/video.jpg" />
</div>
<div id="upload"> <a href="" class="save-update">Save &amp; Update</a>
<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>
</section> </section>
</section>
cms/templates/widgets/video-new.html
<section class="video-new"> <section class="video-new">
<header> <header>
<a href="#" class="cancel">cancel</a> <a href="#" class="cancel">Cancel</a>
<a href="#">Save &amp; Update</a> <a href="#" class="save-update">Save &amp; Update</a>
</header> </header>
<section> <section>
<header> <header>
<h1 class="editable">Untitled Video</h1> <h1 class="editable">Untitled Video</h1>
<section>
<ul> <section class="author">
<li><a href="#">Scrap</a></li> <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="#">Draft</a></li>
<li><a href="#">Proofed</a></li> <li><a href="#">Proofed</a></li>
<li><a href="#">Published</a></li> <li><a href="#">Published</a></li>
</ul> </ul>
<a href="#">Settings</a>
<a href="#" class="settings">Settings</a>
<select name="" id=""> <select name="" id="">
<option>Global</option> <option>Global</option>
</select> </select>
</section> </section>
<section> <section class="meta">
<div> <div>
<h2>Tags:</h2> <h2>Tags:</h2>
<p class="editable">mitx, s4v1, circuits, anant</p>
</div>
<div>
<h2>Goal</h2>
<p class="editable">Click to edit</p> <p class="editable">Click to edit</p>
</div> </div>
</section>
</header>
<!-- <div> --> <section class="upload">
<!-- <h2>Last modified:</h2> --> <a href="#" class="upload-button">Upload new video clip</a>
<!-- <p>mm/dd/yy</p> --> Or
<!-- </div> --> <a href="#">use an already uploaded one</a>
<!-- <div> --> <section class="upload-video">
<!-- <h2>By</h2> --> <div>
<!-- <p>Anant Agarwal</p> --> <ul>
<!-- </div> --> <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> </section>
</header> </section>
<section> <section class="in-use">
<textarea name="" id= rows="8" cols="40"></textarea> <h2>Video in use</h2>
<div class="preview"> <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> </div>
<a href="">Save &amp; Update</a>
</section> </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>
</section> </section>
cms/templates/widgets/week-edit.html
<%block name="content">
<section class="week-edit"> <section class="week-edit">
<header> <header>
<h1 class="editable">Week 3</h1> <h1 class="editable">Week 3</h1>
<a href="/ui_prototype">Done</a> <p><a href="#">+ new goal</a></p>
</header>
<section class="sidebar">
<section class="goals"> <section class="goals">
<header> <h2>Weeks goals:</h2>
<h2>Goals</h2>
</header>
<ul> <ul>
<li>Goal 1: This is the title of the first goal</li> <li>
<li>Goal 2: This is the title</li> <h3>Goal title</h2>
<p>This is the goal body</p>
</li>
</ul> </ul>
<p><a href="#">+ Add new goal</a></p>
</section> </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"> <section class="weeks-content">
<header> <header>
...@@ -70,14 +53,55 @@ ...@@ -70,14 +53,55 @@
<section class="modules"> <section class="modules">
<ul> <ul>
<li><a href="#">Circuit Stuff</a></li> <li>
<li><a href="#">Circuit Stuff</a></li> <h2><a href="#">Lecture Sequence</a></h2>
<li><a href="#">Circuit Stuff</a></li>
<li><a href="#">Circuit Stuff</a></li> <ul>
<li><a href="#">Circuit Stuff</a></li> <li><a href="#" class="problem-edit">Problem title 11</a></li>
<li><a href="#">Circuit Stuff</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> </ul>
</section> </section>
</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> </section>
</%block>
cms/templates/widgets/week-new.html
<%block name="content">
<section class="week-new"> <section class="week-new">
<header> <header>
<h1>Week 6</h1> <h1>Week 6</h1>
<a href="/ui_prototype">Done</a> <p><a href="#">+ new goal</a></p>
</header>
<section class="sidebar">
<section class="goals"> <section class="goals">
<header> <h2>Weeks goals:</h2>
<h2>Goals</h2>
</header>
<p><a href="#">+ Add new goal</a></p>
</section>
<section class="scratch-pad">
<header>
<h2>Scratchpad</h2>
</header>
<ul> <ul>
<%include file="new-module.html"/> <li>
<h3>Create new goal</h2>
<p>Goals are overarching themes for the week</p>
</li>
</ul> </ul>
</section> </section>
</section> </header>
<section class="weeks-content"> <section class="filters disabled">
<header> <ul>
<h2>Weeks Content</h2> <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> <form>
<input type="search" name="" id="" value="" /> <input type="search" name="" id="" value="" />
</form> </form>
</li>
</ul>
</section>
<section>
<section class="scratch-pad">
<header>
<h2>Scratch pad</h2>
</header> </header>
<section class="filters"> <ul>
<ul> <li class="new-module">
<li> <%include file="new-module.html"/>
<label for="">Sort by</label> </li>
<select> </ul>
<option value="">Recently Modified</option> </section>
</select>
</li>
<li> <section class="weeks-content">
<label for="">Display</label> <header>
<select> <h2>Weeks Content</h2>
<option value="">All content</option> </header>
</select>
</li>
<li>
<select>
<option value="">Internal Only</option>
</select>
</li>
<li class="advanced">
<a href="#">Advanced filters</a>
</li>
</ul>
</section>
</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> </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