Skip to content

E
edx-platform
Commit f2080fde by Calen Pennington
Options

Porting latest changes from ui_prototype

parent 8338031f
Showing with 1316 additions and 836 deletions
cms/static/css/base-style.css
...@@ -191,13 +191,28 @@ body { ...@@ -191,13 +191,28 @@ body {
clear: both; } clear: both; }
body > header nav h2 { body > header nav h2 {
font-size: 14px; font-size: 14px;
text-transform: uppercase; } text-transform: uppercase;
float: left; }
body > header nav a.new-module {
float: right; }
body.content section.main-content {
border-left: 2px solid #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 74.423%;
float: left;
-webkit-box-shadow: -2px 0 3px #dddddd;
-moz-box-shadow: -2px 0 3px #dddddd;
box-shadow: -2px 0 3px #dddddd; }
a { a {
text-decoration: none; text-decoration: none;
color: #888; } color: #888; }
input[type="submit"], .button, section.week-edit > header a, section.week-new > header a { input[type="submit"], .button, section.cal section.new-section > a, section.week-edit > header a,
section.week-new > header a,
section.sequence-edit > header a, section.video-new > section section.upload a.upload-button, section.video-edit > section section.upload a.upload-button, section.video-new > section a.save-update, section.video-edit > section a.save-update, section.problem-new > section a.save, section.problem-edit > section a.save {
border: 1px solid #ccc; border: 1px solid #ccc;
background: #efefef; background: #efefef;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
...@@ -221,17 +236,36 @@ section.cal { ...@@ -221,17 +236,36 @@ section.cal {
clear: both; } clear: both; }
section.cal > header { section.cal > header {
zoom: 1; zoom: 1;
margin-bottom: 10px; } margin-bottom: 10px;
background: #efefef;
border: 1px solid #ddd; }
section.cal > header:before, section.cal > header:after { section.cal > header:before, section.cal > header:after {
content: ""; content: "";
display: table; } display: table; }
section.cal > header:after { section.cal > header:after {
clear: both; } clear: both; }
section.cal > header h1 { section.cal > header h2 {
float: left; display: -moz-inline-box;
font-size: 18px; } -moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
padding: 6px;
margin-left: 6px;
font-size: 12px; }
section.cal > header ul { section.cal > header ul {
float: right; } display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto; }
section.cal > header ul li { section.cal > header ul li {
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
...@@ -239,42 +273,37 @@ section.cal { ...@@ -239,42 +273,37 @@ section.cal {
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; } *vertical-align: auto;
margin-left: 6px;
padding-left: 6px;
border-left: 1px solid #ddd;
padding: 6px; }
section.cal > header ul li a { section.cal > header ul li a {
padding: 6px; display: -moz-inline-box;
border: 1px solid #ddd; -moz-box-orient: vertical;
display: block; display: inline-block;
-webkit-border-radius: 3px; vertical-align: baseline;
-moz-border-radius: 3px; zoom: 1;
-ms-border-radius: 3px; *display: inline;
-o-border-radius: 3px; *vertical-align: auto; }
border-radius: 3px; section.cal > header ul li ul {
background: #efefef; } display: -moz-inline-box;
section.cal > header ul li.dropdown { -moz-box-orient: vertical;
position: relative; } display: inline-block;
section.cal > header ul li.dropdown ul { vertical-align: baseline;
display: none; zoom: 1;
position: absolute; *display: inline;
background: #fff; *vertical-align: auto; }
border: 1px solid #ddd; } section.cal > header ul li ul li {
section.cal > header ul li.dropdown ul li { display: -moz-inline-box;
padding: 6px; -moz-box-orient: vertical;
display: block; display: inline-block;
border-top: 1px solid transparent; vertical-align: baseline;
border-bottom: 1px solid transparent; } zoom: 1;
section.cal > header ul li.dropdown ul li:hover { *display: inline;
background-color: #efefef; *vertical-align: auto;
border-top: 1px solid #ddd; padding: 0;
border-bottom: 1px solid #ddd; } border-left: 0; }
section.cal > header ul li.dropdown:hover ul {
display: block; }
section.cal > header ul li.dropdown:hover a {
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-ms-border-radius: 3px 3px 0 0;
-o-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
border-bottom: 0; }
section.cal ol { section.cal ol {
list-style: none; list-style: none;
zoom: 1; zoom: 1;
...@@ -297,75 +326,26 @@ section.cal { ...@@ -297,75 +326,26 @@ section.cal {
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
width: 25.0%; } width: 25.0%; }
section.cal ol > li:last-child {
text-align: center;
background: #eee;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
section.cal ol > li:last-child p {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
section.cal ol > li:last-child p a {
display: block;
width: 100%;
height: 100%; }
section.cal ol > li:last-child section.new-week header {
background: #fff;
text-align: left; }
section.cal ol > li:last-child section.new-week form {
background: #fff;
width: 50%;
padding: 6px;
border: 1px solid #000;
margin: 0 auto;
-webkit-box-shadow: 0 0 2px #333333;
-moz-box-shadow: 0 0 2px #333333;
box-shadow: 0 0 2px #333333;
position: relative; }
section.cal ol > li:last-child section.new-week form:before {
background: #fff;
border-left: 1px solid #000;
border-top: 1px solid #000;
content: " ";
display: block;
height: 10px;
left: 50%;
position: absolute;
top: -6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 10px;
z-index: 0; }
section.cal ol > li:last-child section.new-week form select {
margin-bottom: 6px;
width: 100%; }
section.cal ol > li:last-child section.new-week form select option {
padding: 10px 0 !important; }
section.cal ol > li:last-child section.new-week form input[type="submit"] {
display: block;
margin-bottom: 6px;
width: 100%; }
section.cal ol > li:last-child section.new-week form a:first-child {
float: left; }
section.cal ol > li:last-child section.new-week form a:last-child {
float: right; }
section.cal ol > li header { section.cal ol > li header {
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
-webkit-box-shadow: 0 1px 2px #cccccc; -webkit-box-shadow: 0 1px 2px #aaaaaa;
-moz-box-shadow: 0 1px 2px #cccccc; -moz-box-shadow: 0 1px 2px #aaaaaa;
box-shadow: 0 1px 2px #cccccc; box-shadow: 0 1px 2px #aaaaaa;
display: block; display: block;
margin-bottom: 2px; margin-bottom: 2px; }
padding: 6px; }
section.cal ol > li header h1 { section.cal ol > li header h1 {
font-size: 14px; } font-size: 14px;
text-transform: uppercase;
border-bottom: 1px solid #ccc;
padding: 6px; }
section.cal ol > li header h1 a {
color: #000;
display: block; }
section.cal ol > li header ul li {
background: #fff;
color: #888;
border-bottom: 0;
font-size: 12px; }
section.cal ol > li ul { section.cal ol > li ul {
list-style: none; list-style: none;
margin-bottom: 1px; } margin-bottom: 1px; }
...@@ -373,8 +353,104 @@ section.cal { ...@@ -373,8 +353,104 @@ section.cal {
background: #efefef; background: #efefef;
border-bottom: 1px solid #666; border-bottom: 1px solid #666;
padding: 6px; } padding: 6px; }
section.cal ol > li ul li.goal { section.cal ol > li ul li.create-module {
background: #fff; } position: relative; }
section.cal ol > li ul li.create-module > div {
display: none;
position: absolute;
top: 30px;
width: 90%;
background: rgba(0, 0, 0, 0.8);
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
z-index: 99; }
section.cal ol > li ul li.create-module > div ul li {
border-bottom: 0;
background: none; }
section.cal ol > li ul li.create-module > div ul li input {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-color: #000;
padding: 6px; }
section.cal ol > li ul li.create-module > div ul li select {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
section.cal ol > li ul li.create-module > div ul li select option {
font-size: 14px; }
section.cal ol > li ul li.create-module > div ul li a {
float: right; }
section.cal ol > li ul li.create-module > div ul li a:first-child {
float: left; }
section.cal ol > li ul li.create-module:hover div {
display: block; }
section.cal section.new-section {
margin-top: 10px; }
section.cal section.new-section > a {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto; }
section.cal section.new-section section {
display: none; }
section.cal section.new-section section header {
background: #fff;
text-align: left; }
section.cal section.new-section section form {
background: #fff;
width: 50%;
padding: 6px;
border: 1px solid #000;
margin: 0 auto;
-webkit-box-shadow: 0 0 2px #333333;
-moz-box-shadow: 0 0 2px #333333;
box-shadow: 0 0 2px #333333;
position: relative; }
section.cal section.new-section section form:before {
background: #fff;
border-left: 1px solid #000;
border-top: 1px solid #000;
content: " ";
display: block;
height: 10px;
left: 50%;
position: absolute;
top: -6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 10px;
z-index: 0; }
section.cal section.new-section section form select {
margin-bottom: 6px;
width: 100%; }
section.cal section.new-section section form select option {
padding: 10px 0 !important; }
section.cal section.new-section section form input[type="submit"] {
display: block;
margin-bottom: 6px;
width: 100%; }
section.cal section.new-section section form a:first-child {
float: left; }
section.cal section.new-section section form a:last-child {
float: right; }
section.cal section.new-section:hover section {
display: block; }
body.content body.content
section.cal { section.cal {
...@@ -393,31 +469,49 @@ section.cal { ...@@ -393,31 +469,49 @@ section.cal {
box-sizing: border-box; box-sizing: border-box;
width: 100%; } width: 100%; }
section.week-edit > header, section.week-new > header { section.week-edit > header,
section.week-new > header,
section.sequence-edit > header {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
zoom: 1; zoom: 1;
padding: 6px; } padding: 6px; }
section.week-edit > header:before, section.week-edit > header:after, section.week-new > header:before, section.week-new > header:after { section.week-edit > header:before, section.week-edit > header:after,
section.week-new > header:before,
section.week-new > header:after,
section.sequence-edit > header:before,
section.sequence-edit > header:after {
content: ""; content: "";
display: table; } display: table; }
section.week-edit > header:after, section.week-new > header:after { section.week-edit > header:after,
section.week-new > header:after,
section.sequence-edit > header:after {
clear: both; } clear: both; }
section.week-edit > header h1, section.week-new > header h1 { section.week-edit > header h1,
section.week-new > header h1,
section.sequence-edit > header h1 {
font-size: 18px; font-size: 18px;
float: left; float: left;
margin-top: 8px 6px; } margin-top: 8px 6px; }
section.week-edit > header a, section.week-new > header a { section.week-edit > header a,
section.week-new > header a,
section.sequence-edit > header a {
float: right; float: right;
display: block; } display: block; }
section.week-edit section header, section.week-new section header { section.week-edit section header,
section.week-new section header,
section.sequence-edit section header {
background: #666; background: #666;
color: #fff; color: #fff;
padding: 6px; padding: 6px;
border-bottom: 1px solid #333; border-bottom: 1px solid #333;
-webkit-font-smoothing: antialiased; } -webkit-font-smoothing: antialiased; }
section.week-edit section header h2, section.week-new section header h2 { section.week-edit section header h2,
section.week-new section header h2,
section.sequence-edit section header h2 {
font-size: 14px; } font-size: 14px; }
section.week-edit section.sidebar, section.week-new section.sidebar { section.week-edit section.sidebar,
section.week-new section.sidebar,
section.sequence-edit section.sidebar {
width: 34.368%; width: 34.368%;
float: left; float: left;
background: #ccc; background: #ccc;
...@@ -425,49 +519,85 @@ section.week-edit section.sidebar, section.week-new section.sidebar { ...@@ -425,49 +519,85 @@ section.week-edit section.sidebar, section.week-new section.sidebar {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
section.week-edit section.sidebar section, section.week-new section.sidebar section { section.week-edit section.sidebar section,
section.week-new section.sidebar section,
section.sequence-edit section.sidebar section {
height: 50%; } height: 50%; }
section.week-edit section.sidebar section > ul, section.week-new section.sidebar section > ul { section.week-edit section.sidebar section > ul,
section.week-new section.sidebar section > ul,
section.sequence-edit section.sidebar section > ul {
list-style: none; } list-style: none; }
section.week-edit section.sidebar section > ul > li, section.week-new section.sidebar section > ul > li { section.week-edit section.sidebar section > ul > li,
section.week-new section.sidebar section > ul > li,
section.sequence-edit section.sidebar section > ul > li {
padding: 6px; padding: 6px;
border-bottom: 1px solid #666; border-bottom: 1px solid #666;
background: #eee; } background: #eee; }
section.week-edit section.sidebar section > ul > li.new-module, section.week-new section.sidebar section > ul > li.new-module { section.week-edit section.sidebar section > ul > li.new-module,
section.week-new section.sidebar section > ul > li.new-module,
section.sequence-edit section.sidebar section > ul > li.new-module {
position: relative; } position: relative; }
section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown, section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown { section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown,
section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown,
section.sequence-edit section.sidebar section > ul > li.new-module ul.new-dropdown {
list-style: none; } list-style: none; }
section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown li, section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown li { section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown li,
section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown li,
section.sequence-edit section.sidebar section > ul > li.new-module ul.new-dropdown li {
display: none; } display: none; }
section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown li:first-child, section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown li:first-child { section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown li:first-child,
section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown li:first-child,
section.sequence-edit section.sidebar section > ul > li.new-module ul.new-dropdown li:first-child {
display: block; } display: block; }
section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown:hover li, section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown:hover li { section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown:hover li,
section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown:hover li,
section.sequence-edit section.sidebar section > ul > li.new-module ul.new-dropdown:hover li {
display: block; display: block;
padding: 6px 0; } padding: 6px 0; }
section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown:hover li:first-child, section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown:hover li:first-child { section.week-edit section.sidebar section > ul > li.new-module ul.new-dropdown:hover li:first-child,
section.week-new section.sidebar section > ul > li.new-module ul.new-dropdown:hover li:first-child,
section.sequence-edit section.sidebar section > ul > li.new-module ul.new-dropdown:hover li:first-child {
padding-top: 0; } padding-top: 0; }
section.week-edit section.sidebar section p, section.week-new section.sidebar section p { section.week-edit section.sidebar section p,
section.week-new section.sidebar section p,
section.sequence-edit section.sidebar section p {
padding: 6px; padding: 6px;
border-bottom: 1px solid #666; } border-bottom: 1px solid #666; }
section.week-edit section.weeks-content, section.week-new section.weeks-content { section.week-edit section.weeks-content,
section.week-new section.weeks-content,
section.sequence-edit section.weeks-content {
width: 65.632%; width: 65.632%;
float: left; float: left;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; } box-sizing: border-box; }
section.week-edit section.weeks-content header, section.week-new section.weeks-content header { section.week-edit section.weeks-content header,
section.week-new section.weeks-content header,
section.sequence-edit section.weeks-content header {
zoom: 1; } zoom: 1; }
section.week-edit section.weeks-content header:before, section.week-edit section.weeks-content header:after, section.week-new section.weeks-content header:before, section.week-new section.weeks-content header:after { section.week-edit section.weeks-content header:before, section.week-edit section.weeks-content header:after,
section.week-new section.weeks-content header:before,
section.week-new section.weeks-content header:after,
section.sequence-edit section.weeks-content header:before,
section.sequence-edit section.weeks-content header:after {
content: ""; content: "";
display: table; } display: table; }
section.week-edit section.weeks-content header:after, section.week-new section.weeks-content header:after { section.week-edit section.weeks-content header:after,
section.week-new section.weeks-content header:after,
section.sequence-edit section.weeks-content header:after {
clear: both; } clear: both; }
section.week-edit section.weeks-content header h2, section.week-new section.weeks-content header h2 { section.week-edit section.weeks-content header h2,
section.week-new section.weeks-content header h2,
section.sequence-edit section.weeks-content header h2 {
float: left; } float: left; }
section.week-edit section.weeks-content header form, section.week-new section.weeks-content header form { section.week-edit section.weeks-content header form,
section.week-new section.weeks-content header form,
section.sequence-edit section.weeks-content header form {
float: right; float: right;
margin: -2px 0; } margin: -2px 0; }
section.week-edit section.weeks-content header form input, section.week-new section.weeks-content header form input { section.week-edit section.weeks-content header form input,
section.week-new section.weeks-content header form input,
section.sequence-edit section.weeks-content header form input {
border: 1px solid #000; border: 1px solid #000;
background: #ddd; background: #ddd;
padding: 2px 4px; padding: 2px 4px;
...@@ -476,18 +606,30 @@ section.week-edit section.weeks-content, section.week-new section.weeks-content ...@@ -476,18 +606,30 @@ section.week-edit section.weeks-content, section.week-new section.weeks-content
-ms-border-radius: 2px; -ms-border-radius: 2px;
-o-border-radius: 2px; -o-border-radius: 2px;
border-radius: 2px; } border-radius: 2px; }
section.week-edit section.weeks-content section.filters, section.week-new section.weeks-content section.filters { section.week-edit section.weeks-content section.filters,
section.week-new section.weeks-content section.filters,
section.sequence-edit section.weeks-content section.filters {
border-bottom: 1px solid #999; } border-bottom: 1px solid #999; }
section.week-edit section.weeks-content section.filters ul, section.week-new section.weeks-content section.filters ul { section.week-edit section.weeks-content section.filters ul,
section.week-new section.weeks-content section.filters ul,
section.sequence-edit section.weeks-content section.filters ul {
zoom: 1; zoom: 1;
list-style: none; list-style: none;
padding: 6px; } padding: 6px; }
section.week-edit section.weeks-content section.filters ul:before, section.week-edit section.weeks-content section.filters ul:after, section.week-new section.weeks-content section.filters ul:before, section.week-new section.weeks-content section.filters ul:after { section.week-edit section.weeks-content section.filters ul:before, section.week-edit section.weeks-content section.filters ul:after,
section.week-new section.weeks-content section.filters ul:before,
section.week-new section.weeks-content section.filters ul:after,
section.sequence-edit section.weeks-content section.filters ul:before,
section.sequence-edit section.weeks-content section.filters ul:after {
content: ""; content: "";
display: table; } display: table; }
section.week-edit section.weeks-content section.filters ul:after, section.week-new section.weeks-content section.filters ul:after { section.week-edit section.weeks-content section.filters ul:after,
section.week-new section.weeks-content section.filters ul:after,
section.sequence-edit section.weeks-content section.filters ul:after {
clear: both; } clear: both; }
section.week-edit section.weeks-content section.filters ul li, section.week-new section.weeks-content section.filters ul li { section.week-edit section.weeks-content section.filters ul li,
section.week-new section.weeks-content section.filters ul li,
section.sequence-edit section.weeks-content section.filters ul li {
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
display: inline-block; display: inline-block;
...@@ -495,95 +637,201 @@ section.week-edit section.weeks-content, section.week-new section.weeks-content ...@@ -495,95 +637,201 @@ section.week-edit section.weeks-content, section.week-new section.weeks-content
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; } *vertical-align: auto; }
section.week-edit section.weeks-content section.filters ul li.advanced, section.week-new section.weeks-content section.filters ul li.advanced { section.week-edit section.weeks-content section.filters ul li.advanced,
section.week-new section.weeks-content section.filters ul li.advanced,
section.sequence-edit section.weeks-content section.filters ul li.advanced {
float: right; } float: right; }
section.week-edit section.weeks-content section.modules ul, section.week-new section.weeks-content section.modules ul { section.week-edit section.weeks-content section.modules ul,
section.week-new section.weeks-content section.modules ul,
section.sequence-edit section.weeks-content section.modules ul {
list-style: none; } list-style: none; }
section.week-edit section.weeks-content section.modules ul li, section.week-new section.weeks-content section.modules ul li { section.week-edit section.weeks-content section.modules ul li,
section.week-new section.weeks-content section.modules ul li,
section.sequence-edit section.weeks-content section.modules ul li {
padding: 6px; padding: 6px;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
border-bottom: 1px solid #333; } border-bottom: 1px solid #333; }
section.week-edit section.weeks-content section.modules ul li a, section.week-new section.weeks-content section.modules ul li a { section.week-edit section.weeks-content section.modules ul li a,
section.week-new section.weeks-content section.modules ul li a,
section.sequence-edit section.weeks-content section.modules ul li a {
color: #000; } color: #000; }
section.video-new, section.video-edit { section.video-new > section section.upload, section.video-edit > section section.upload {
position: absolute; padding: 6px;
top: 80px; margin-bottom: 10px;
right: 0; border: 1px solid #ddd; }
background: #fff; section.video-new > section section.upload a.upload-button, section.video-edit > section section.upload a.upload-button {
width: 40.32%; display: -moz-inline-box;
-webkit-box-shadow: 0 0 6px #666666; -moz-box-orient: vertical;
-moz-box-shadow: 0 0 6px #666666; display: inline-block;
box-shadow: 0 0 6px #666666; vertical-align: baseline;
border: 1px solid #333;
border-right: 0;
z-index: 4; }
section.video-new > header, section.video-edit > header {
background: #666;
zoom: 1; zoom: 1;
color: #fff; *display: inline;
padding: 6px; *vertical-align: auto; }
border-bottom: 1px solid #333; section.video-new > section section.in-use h2, section.video-edit > section section.in-use h2 {
-webkit-font-smoothing: antialiased; } font-size: 14px; }
section.video-new > header:before, section.video-new > header:after, section.video-edit > header:before, section.video-edit > header:after { section.video-new > section section.in-use div, section.video-edit > section section.in-use div {
content: ""; background: #eee;
display: table; } text-align: center;
section.video-new > header:after, section.video-edit > header:after { padding: 6px; }
clear: both; } section.video-new > section a.save-update, section.video-edit > section a.save-update {
section.video-new > header h2, section.video-edit > header h2 { display: -moz-inline-box;
float: left; -moz-box-orient: vertical;
font-size: 14px; } display: inline-block;
section.video-new > header a, section.video-edit > header a { vertical-align: baseline;
float: right; } zoom: 1;
section.video-new section ul, section.video-edit section ul { *display: inline;
list-style: none; } *vertical-align: auto;
section.video-new section ul li, section.video-edit section ul li { margin-top: 20px; }
border-bottom: 1px solid #333;
padding: 10px 25px; }
section.problem-new, section.problem-edit { section.problem-new > section textarea, section.problem-edit > section textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 100%; }
section.problem-new > section div.preview, section.problem-edit > section div.preview {
background: #eee;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 40px;
padding: 10px;
width: 100%; }
section.problem-new > section a.save, section.problem-edit > section a.save {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-top: 20px; }
section.video-new, section.video-edit, section.problem-new, section.problem-edit {
position: absolute; position: absolute;
top: 80px; top: 72px;
right: 0; right: 0;
background: #fff; background: #fff;
width: 40.32%; width: 48.845%;
-webkit-box-shadow: 0 0 6px #666666; -webkit-box-shadow: 0 0 6px #666666;
-moz-box-shadow: 0 0 6px #666666; -moz-box-shadow: 0 0 6px #666666;
box-shadow: 0 0 6px #666666; box-shadow: 0 0 6px #666666;
border: 1px solid #333; border: 1px solid #333;
border-right: 0; border-right: 0;
z-index: 4; } z-index: 4; }
section.problem-new > header, section.problem-edit > header { section.video-new > header, section.video-edit > header, section.problem-new > header, section.problem-edit > header {
background: #666; background: #666;
zoom: 1; zoom: 1;
color: #fff; color: #fff;
padding: 6px; padding: 6px;
border-bottom: 1px solid #333; border-bottom: 1px solid #333;
-webkit-font-smoothing: antialiased; } -webkit-font-smoothing: antialiased; }
section.problem-new > header:before, section.problem-new > header:after, section.problem-edit > header:before, section.problem-edit > header:after { section.video-new > header:before, section.video-new > header:after, section.video-edit > header:before, section.video-edit > header:after, section.problem-new > header:before, section.problem-new > header:after, section.problem-edit > header:before, section.problem-edit > header:after {
content: ""; content: "";
display: table; } display: table; }
section.problem-new > header:after, section.problem-edit > header:after { section.video-new > header:after, section.video-edit > header:after, section.problem-new > header:after, section.problem-edit > header:after {
clear: both; } clear: both; }
section.problem-new > header h2, section.problem-edit > header h2 { section.video-new > header h2, section.video-edit > header h2, section.problem-new > header h2, section.problem-edit > header h2 {
float: left; float: left;
font-size: 14px; } font-size: 14px; }
section.problem-new > header a, section.problem-edit > header a { section.video-new > header a, section.video-edit > header a, section.problem-new > header a, section.problem-edit > header a {
color: #fff; }
section.video-new > header a.save-update, section.video-edit > header a.save-update, section.problem-new > header a.save-update, section.problem-edit > header a.save-update {
float: right; }
section.video-new > header a.cancel, section.video-edit > header a.cancel, section.problem-new > header a.cancel, section.problem-edit > header a.cancel {
float: left; }
section.video-new > section, section.video-edit > section, section.problem-new > section, section.problem-edit > section {
padding: 20px; }
section.video-new > section > header h1, section.video-edit > section > header h1, section.problem-new > section > header h1, section.problem-edit > section > header h1 {
font-size: 24px;
margin: 12px 0; }
section.video-new > section > header section.status-settings ul, section.video-edit > section > header section.status-settings ul, section.problem-new > section > header section.status-settings ul, section.problem-edit > section > header section.status-settings ul {
list-style: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
border: 1px solid #999;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto; }
section.video-new > section > header section.status-settings ul li, section.video-edit > section > header section.status-settings ul li, section.problem-new > section > header section.status-settings ul li, section.problem-edit > section > header section.status-settings ul li {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
border-right: 1px solid #999;
padding: 6px; }
section.video-new > section > header section.status-settings ul li:last-child, section.video-edit > section > header section.status-settings ul li:last-child, section.problem-new > section > header section.status-settings ul li:last-child, section.problem-edit > section > header section.status-settings ul li:last-child {
border-right: 0; }
section.video-new > section > header section.status-settings ul li.current, section.video-edit > section > header section.status-settings ul li.current, section.problem-new > section > header section.status-settings ul li.current, section.problem-edit > section > header section.status-settings ul li.current {
background: #eee; }
section.video-new > section > header section.status-settings a.settings, section.video-edit > section > header section.status-settings a.settings, section.problem-new > section > header section.status-settings a.settings, section.problem-edit > section > header section.status-settings a.settings {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin: 0 20px;
border: 1px solid #999;
padding: 6px; }
section.video-new > section > header section.status-settings select, section.video-edit > section > header section.status-settings select, section.problem-new > section > header section.status-settings select, section.problem-edit > section > header section.status-settings select {
float: right; } float: right; }
section.problem-new section ul, section.problem-edit section ul { section.video-new > section > header section.meta, section.video-edit > section > header section.meta, section.problem-new > section > header section.meta, section.problem-edit > section > header section.meta {
list-style: none; } background: #eee;
section.problem-new section ul li, section.problem-edit section ul li { padding: 10px;
border-bottom: 1px solid #333; margin: 20px 0;
padding: 10px 25px; } zoom: 1; }
section.video-new > section > header section.meta:before, section.video-new > section > header section.meta:after, section.video-edit > section > header section.meta:before, section.video-edit > section > header section.meta:after, section.problem-new > section > header section.meta:before, section.problem-new > section > header section.meta:after, section.problem-edit > section > header section.meta:before, section.problem-edit > section > header section.meta:after {
body.content section.main-content { content: "";
border-left: 2px solid #000; display: table; }
-webkit-box-sizing: border-box; section.video-new > section > header section.meta:after, section.video-edit > section > header section.meta:after, section.problem-new > section > header section.meta:after, section.problem-edit > section > header section.meta:after {
-moz-box-sizing: border-box; clear: both; }
box-sizing: border-box; section.video-new > section > header section.meta div, section.video-edit > section > header section.meta div, section.problem-new > section > header section.meta div, section.problem-edit > section > header section.meta div {
width: 74.423%; float: left;
float: left; margin-right: 20px; }
-webkit-box-shadow: -2px 0 3px #dddddd; section.video-new > section > header section.meta div h2, section.video-edit > section > header section.meta div h2, section.problem-new > section > header section.meta div h2, section.problem-edit > section > header section.meta div h2 {
-moz-box-shadow: -2px 0 3px #dddddd; font-size: 14px;
box-shadow: -2px 0 3px #dddddd; } display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto; }
section.video-new > section > header section.meta div p, section.video-edit > section > header section.meta div p, section.problem-new > section > header section.meta div p, section.problem-edit > section > header section.meta div p {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto; }
section.video-new > section section.notes, section.video-edit > section section.notes, section.problem-new > section section.notes, section.problem-edit > section section.notes {
margin-top: 20px;
padding: 6px;
background: #eee;
border: 1px solid #ccc; }
section.video-new > section section.notes textarea, section.video-edit > section section.notes textarea, section.problem-new > section section.notes textarea, section.problem-edit > section section.notes textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 100%; }
section.video-new > section section.notes h2, section.video-edit > section section.notes h2, section.problem-new > section section.notes h2, section.problem-edit > section section.notes h2 {
font-size: 14px;
margin-bottom: 6px; }
section.video-new > section section.notes input[type="submit"], section.video-edit > section section.notes input[type="submit"], section.problem-new > section section.notes input[type="submit"], section.problem-edit > section section.notes input[type="submit"] {
margin-top: 10px; }
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