Skip to content

E
edx-platform
Commit 3eb7c69b by Kyle Fiedler
Options

Continued on week view styles

parent d96d982a
Showing with 538 additions and 357 deletions
cms/static/css/base-style.css
...@@ -210,9 +210,10 @@ a { ...@@ -210,9 +210,10 @@ a {
text-decoration: none; text-decoration: none;
color: #888; } color: #888; }
input[type="submit"], .button, section.cal section.new-section > a, section.week-edit > header a, input {
section.week-new > header a, font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; }
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 {
input[type="submit"], .button, section.cal section.new-section > 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;
...@@ -227,8 +228,7 @@ section.cal { ...@@ -227,8 +228,7 @@ section.cal {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
padding: 25px; padding: 25px;
zoom: 1; zoom: 1; }
overflow: scroll; }
section.cal:before, section.cal:after { section.cal:before, section.cal:after {
content: ""; content: "";
display: table; } display: table; }
...@@ -360,7 +360,7 @@ section.cal { ...@@ -360,7 +360,7 @@ section.cal {
position: absolute; position: absolute;
top: 30px; top: 30px;
width: 90%; width: 90%;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.9);
padding: 10px; padding: 10px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
...@@ -371,6 +371,20 @@ section.cal { ...@@ -371,6 +371,20 @@ section.cal {
-o-border-radius: 3px; -o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
z-index: 99; } z-index: 99; }
section.cal ol > li ul li.create-module > div:before {
content: " ";
display: block;
background: rgba(0, 0, 0, 0.8);
width: 10px;
height: 10px;
position: absolute;
top: -5px;
left: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
section.cal ol > li ul li.create-module > div ul li { section.cal ol > li ul li.create-module > div ul li {
border-bottom: 0; border-bottom: 0;
background: none; } background: none; }
...@@ -395,60 +409,71 @@ section.cal { ...@@ -395,60 +409,71 @@ section.cal {
section.cal ol > li ul li.create-module:hover div { section.cal ol > li ul li.create-module:hover div {
display: block; } display: block; }
section.cal section.new-section { section.cal section.new-section {
margin-top: 10px; } margin-top: 10px;
section.cal section.new-section > a {
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; } *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; } position: relative; }
section.cal section.new-section section form:before { section.cal section.new-section > a {
background: #fff; display: block; }
border-left: 1px solid #000; section.cal section.new-section section {
border-top: 1px solid #000; display: none;
position: absolute;
top: 32px;
background: rgba(0, 0, 0, 0.8);
min-width: 300px;
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 section.new-section section:before {
content: " "; content: " ";
display: block; display: block;
background: rgba(0, 0, 0, 0.8);
width: 10px;
height: 10px; height: 10px;
left: 50%;
position: absolute; position: absolute;
top: -6px; top: -5px;
left: 20%;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg); -moz-transform: rotate(45deg);
-ms-transform: rotate(45deg); -ms-transform: rotate(45deg);
-o-transform: rotate(45deg); -o-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg); }
width: 10px; section.cal section.new-section section form ul {
z-index: 0; } list-style: none; }
section.cal section.new-section section form select { section.cal section.new-section section form ul li {
margin-bottom: 6px; border-bottom: 0;
width: 100%; } background: none;
section.cal section.new-section section form select option { margin-bottom: 6px; }
padding: 10px 0 !important; } section.cal section.new-section section form ul li input {
section.cal section.new-section section form input[type="submit"] { width: 100%;
display: block; -webkit-box-sizing: border-box;
margin-bottom: 6px; -moz-box-sizing: border-box;
width: 100%; } box-sizing: border-box;
section.cal section.new-section section form a:first-child { border-color: #000;
float: left; } padding: 6px; }
section.cal section.new-section section form a:last-child { section.cal section.new-section section form ul li select {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
section.cal section.new-section section form ul li select option {
font-size: 14px; }
section.cal section.new-section section form ul li a {
float: right; } float: right; }
section.cal section.new-section section form ul li a:first-child {
float: left; }
section.cal section.new-section:hover section { section.cal section.new-section:hover section {
display: block; } display: block; }
...@@ -456,6 +481,7 @@ body.content ...@@ -456,6 +481,7 @@ body.content
section.cal { section.cal {
width: 25.577%; width: 25.577%;
float: left; float: left;
overflow: scroll;
-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; }
...@@ -468,13 +494,15 @@ section.cal { ...@@ -468,13 +494,15 @@ section.cal {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
width: 100%; } width: 100%; }
body.content
section.cal ol li.create-module {
display: none; }
section.week-edit > header, section.week-edit > header,
section.week-new > header, section.week-new > header,
section.sequence-edit > header { section.sequence-edit > header {
border-bottom: 1px solid #ccc; border-bottom: 2px solid #333;
zoom: 1; zoom: 1; }
padding: 6px; }
section.week-edit > header:before, section.week-edit > header:after, section.week-edit > header:before, section.week-edit > header:after,
section.week-new > header:before, section.week-new > header:before,
section.week-new > header:after, section.week-new > header:after,
...@@ -490,146 +518,87 @@ section.sequence-edit > header { ...@@ -490,146 +518,87 @@ section.sequence-edit > header {
section.week-new > header h1, section.week-new > header h1,
section.sequence-edit > header h1 { section.sequence-edit > header h1 {
font-size: 18px; font-size: 18px;
float: left; margin: 8px 6px;
margin-top: 8px 6px; } text-transform: uppercase;
section.week-edit > header a, letter-spacing: 1px; }
section.week-new > header a, section.week-edit > header section.goals,
section.sequence-edit > header a { section.week-new > header section.goals,
float: right; section.sequence-edit > header section.goals {
display: block; } background: #eee;
section.week-edit section header,
section.week-new section header,
section.sequence-edit section header {
background: #666;
color: #fff;
padding: 6px;
border-bottom: 1px solid #333;
-webkit-font-smoothing: antialiased; }
section.week-edit section header h2,
section.week-new section header h2,
section.sequence-edit section header h2 {
font-size: 14px; }
section.week-edit section.sidebar,
section.week-new section.sidebar,
section.sequence-edit section.sidebar {
width: 34.368%;
float: left;
background: #ccc;
border-right: 1px solid #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
section.week-edit section.sidebar section,
section.week-new section.sidebar section,
section.sequence-edit section.sidebar section {
height: 50%; }
section.week-edit section.sidebar section > ul,
section.week-new section.sidebar section > ul,
section.sequence-edit section.sidebar section > ul {
list-style: none; }
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;
border-bottom: 1px solid #666;
background: #eee; }
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; }
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; }
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; }
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; }
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;
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.sequence-edit section.sidebar section > ul > li.new-module ul.new-dropdown:hover li:first-child {
padding-top: 0; }
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-top: 1px solid #ccc; }
section.week-edit section.weeks-content, section.week-edit > header section.goals header h2,
section.week-new section.weeks-content, section.week-new > header section.goals header h2,
section.sequence-edit section.weeks-content { section.sequence-edit > header section.goals header h2 {
width: 65.632%; font-size: 14px;
float: left; display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto; }
section.week-edit > header section.goals header p,
section.week-new > header section.goals header p,
section.sequence-edit > header section.goals header p {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto; }
section.week-edit > header section.goals ul,
section.week-new > header section.goals ul,
section.sequence-edit > header section.goals ul {
list-style: none;
margin-top: 6px;
color: #999; }
section.week-edit > section.content,
section.week-new > section.content,
section.sequence-edit > section.content {
-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, padding: 20px; }
section.week-new section.weeks-content header, section.week-edit > section.content section.filters,
section.sequence-edit section.weeks-content header { section.week-new > section.content section.filters,
zoom: 1; } section.sequence-edit > section.content section.filters {
section.week-edit section.weeks-content header:before, section.week-edit section.weeks-content header:after, zoom: 1;
section.week-new section.weeks-content header:before, margin-bottom: 10px;
section.week-new section.weeks-content header:after, background: #efefef;
section.sequence-edit section.weeks-content header:before, border: 1px solid #ddd; }
section.sequence-edit section.weeks-content header:after { section.week-edit > section.content section.filters:before, section.week-edit > section.content section.filters:after,
section.week-new > section.content section.filters:before,
section.week-new > section.content section.filters:after,
section.sequence-edit > section.content section.filters:before,
section.sequence-edit > section.content section.filters:after {
content: ""; content: "";
display: table; } display: table; }
section.week-edit section.weeks-content header:after, section.week-edit > section.content section.filters:after,
section.week-new section.weeks-content header:after, section.week-new > section.content section.filters:after,
section.sequence-edit section.weeks-content header:after { section.sequence-edit > section.content section.filters:after {
clear: both; } clear: both; }
section.week-edit section.weeks-content header h2, section.week-edit > section.content section.filters ul,
section.week-new section.weeks-content header h2, section.week-new > section.content section.filters ul,
section.sequence-edit section.weeks-content header h2 { section.sequence-edit > section.content section.filters ul {
float: left; }
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;
margin: -2px 0; }
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;
background: #ddd;
padding: 2px 4px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px; }
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; }
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-edit > section.content section.filters ul:before, section.week-edit > section.content section.filters ul:after,
section.week-new section.weeks-content section.filters ul:before, section.week-new > section.content section.filters ul:before,
section.week-new section.weeks-content section.filters ul:after, section.week-new > section.content section.filters ul:after,
section.sequence-edit section.weeks-content section.filters ul:before, section.sequence-edit > section.content section.filters ul:before,
section.sequence-edit section.weeks-content section.filters ul:after { section.sequence-edit > section.content section.filters ul:after {
content: ""; content: "";
display: table; } display: table; }
section.week-edit section.weeks-content section.filters ul:after, section.week-edit > section.content section.filters ul:after,
section.week-new section.weeks-content section.filters ul:after, section.week-new > section.content section.filters ul:after,
section.sequence-edit section.weeks-content section.filters ul:after { section.sequence-edit > section.content section.filters ul:after {
clear: both; } clear: both; }
section.week-edit section.weeks-content section.filters ul li, section.week-edit > section.content section.filters ul li,
section.week-new section.weeks-content section.filters ul li, section.week-new > section.content section.filters ul li,
section.sequence-edit section.weeks-content section.filters ul li { section.sequence-edit > section.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;
...@@ -637,25 +606,136 @@ section.sequence-edit section.weeks-content { ...@@ -637,25 +606,136 @@ section.sequence-edit 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-edit > section.content section.filters ul li.advanced,
section.week-new section.weeks-content section.filters ul li.advanced, section.week-new > section.content section.filters ul li.advanced,
section.sequence-edit section.weeks-content section.filters ul li.advanced { section.sequence-edit > section.content section.filters ul li.advanced {
float: right; } float: right; }
section.week-edit section.weeks-content section.modules ul, section.week-edit > section.content > div,
section.week-new section.weeks-content section.modules ul, section.week-new > section.content > div,
section.sequence-edit section.weeks-content section.modules ul { section.sequence-edit > section.content > div {
list-style: none; } display: table;
section.week-edit section.weeks-content section.modules ul li, border: 1px solid;
section.week-new section.weeks-content section.modules ul li, width: 100%; }
section.sequence-edit section.weeks-content section.modules ul li { section.week-edit > section.content > div section header,
padding: 6px; section.week-new > section.content > div section header,
font-weight: bold; section.sequence-edit > section.content > div section header {
font-size: 16px; background: #eee;
padding: 10px;
border-bottom: 1px solid #ccc; }
section.week-edit > section.content > div section header h2,
section.week-new > section.content > div section header h2,
section.sequence-edit > section.content > div section header h2 {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px; }
section.week-edit > section.content > div section.modules,
section.week-new > section.content > div section.modules,
section.sequence-edit > section.content > div section.modules {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
width: 65.632%;
border-right: 1px solid #333; }
section.week-edit > section.content > div section.modules ol,
section.week-new > section.content > div section.modules ol,
section.sequence-edit > section.content > div section.modules ol {
list-style: none;
border-bottom: 1px solid #333; } border-bottom: 1px solid #333; }
section.week-edit section.weeks-content section.modules ul li a, section.week-edit > section.content > div section.modules ol li,
section.week-new section.weeks-content section.modules ul li a, section.week-new > section.content > div section.modules ol li,
section.sequence-edit section.weeks-content section.modules ul li a { section.sequence-edit > section.content > div section.modules ol li {
border-bottom: 1px solid #333; }
section.week-edit > section.content > div section.modules ol li:last-child,
section.week-new > section.content > div section.modules ol li:last-child,
section.sequence-edit > section.content > div section.modules ol li:last-child {
border-bottom: 0; }
section.week-edit > section.content > div section.modules ol li a,
section.week-new > section.content > div section.modules ol li a,
section.sequence-edit > section.content > div section.modules ol li a {
color: #000; } color: #000; }
section.week-edit > section.content > div section.modules ol li ol,
section.week-new > section.content > div section.modules ol li ol,
section.sequence-edit > section.content > div section.modules ol li ol {
list-style: none; }
section.week-edit > section.content > div section.modules ol li ol li,
section.week-new > section.content > div section.modules ol li ol li,
section.sequence-edit > section.content > div section.modules ol li ol li {
padding: 6px 0 6px 6px; }
section.week-edit > section.content > div section.modules ol li ol li h3,
section.week-new > section.content > div section.modules ol li ol li h3,
section.sequence-edit > section.content > div section.modules ol li ol li h3 {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px; }
section.week-edit > section.content > div section.modules ol li ol li ol,
section.week-new > section.content > div section.modules ol li ol li ol,
section.sequence-edit > section.content > div section.modules ol li ol li ol {
border-left: 1px solid; }
section.week-edit > section.content > div section.scratch-pad,
section.week-new > section.content > div section.scratch-pad,
section.sequence-edit > section.content > div section.scratch-pad {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
width: 34.368%; }
section.week-edit > section.content > div section.scratch-pad ol,
section.week-new > section.content > div section.scratch-pad ol,
section.sequence-edit > section.content > div section.scratch-pad ol {
list-style: none;
border-bottom: 1px solid #999; }
section.week-edit > section.content > div section.scratch-pad ol li,
section.week-new > section.content > div section.scratch-pad ol li,
section.sequence-edit > section.content > div section.scratch-pad ol li {
border-bottom: 1px solid #999;
background: #f9f9f9; }
section.week-edit > section.content > div section.scratch-pad ol li:last-child,
section.week-new > section.content > div section.scratch-pad ol li:last-child,
section.sequence-edit > section.content > div section.scratch-pad ol li:last-child {
border-bottom: 0; }
section.week-edit > section.content > div section.scratch-pad ol li ul,
section.week-new > section.content > div section.scratch-pad ol li ul,
section.sequence-edit > section.content > div section.scratch-pad ol li ul {
list-style: none; }
section.week-edit > section.content > div section.scratch-pad ol li ul li,
section.week-new > section.content > div section.scratch-pad ol li ul li,
section.sequence-edit > section.content > div section.scratch-pad ol li ul li {
padding: 6px; }
section.week-edit > section.content > div section.scratch-pad ol li ul li a,
section.week-new > section.content > div section.scratch-pad ol li ul li a,
section.sequence-edit > section.content > div section.scratch-pad ol li ul li a {
color: #000; }
section.week-edit > section.content > div section.scratch-pad ol li.new-module,
section.week-new > section.content > div section.scratch-pad ol li.new-module,
section.sequence-edit > section.content > div section.scratch-pad ol li.new-module {
position: relative; }
section.week-edit > section.content > div section.scratch-pad ol li.new-module ul.new-dropdown,
section.week-new > section.content > div section.scratch-pad ol li.new-module ul.new-dropdown,
section.sequence-edit > section.content > div section.scratch-pad ol li.new-module ul.new-dropdown {
list-style: none; }
section.week-edit > section.content > div section.scratch-pad ol li.new-module ul.new-dropdown li,
section.week-new > section.content > div section.scratch-pad ol li.new-module ul.new-dropdown li,
section.sequence-edit > section.content > div section.scratch-pad ol li.new-module ul.new-dropdown li {
display: none; }
section.week-edit > section.content > div section.scratch-pad ol li.new-module ul.new-dropdown li:first-child,
section.week-new > section.content > div section.scratch-pad ol li.new-module ul.new-dropdown li:first-child,
section.sequence-edit > section.content > div section.scratch-pad ol li.new-module ul.new-dropdown li:first-child {
display: block; }
section.week-edit > section.content > div section.scratch-pad ol li.new-module ul.new-dropdown:hover li,
section.week-new > section.content > div section.scratch-pad ol li.new-module ul.new-dropdown:hover li,
section.sequence-edit > section.content > div section.scratch-pad ol li.new-module ul.new-dropdown:hover li {
display: block;
padding: 6px 0; }
section.week-edit > section.content > div section.scratch-pad ol li.new-module ul.new-dropdown:hover li:first-child,
section.week-new > section.content > div section.scratch-pad ol li.new-module ul.new-dropdown:hover li:first-child,
section.sequence-edit > section.content > div section.scratch-pad ol li.new-module ul.new-dropdown:hover li:first-child {
padding-top: 0; }
section.week-edit > section.content > div section.scratch-pad p,
section.week-new > section.content > div section.scratch-pad p,
section.sequence-edit > section.content > div section.scratch-pad p {
padding: 6px;
border-bottom: 1px solid #666; }
section.video-new > section section.upload, section.video-edit > section section.upload { section.video-new > section section.upload, section.video-edit > section section.upload {
padding: 6px; padding: 6px;
......
cms/static/js/main.js
...@@ -31,29 +31,28 @@ $(document).ready(function(){ ...@@ -31,29 +31,28 @@ $(document).ready(function(){
setHeight = function(){ setHeight = function(){
var windowHeight = $(this).height(); var windowHeight = $(this).height();
var calHeight = windowHeight - 29; var contentHeight = windowHeight - 29;
var sidebarHeight = windowHeight - 73;
$('.sidebar').css('height', sidebarHeight); $('section.main-content > section').css('min-height', contentHeight);
$('body.content .cal').css('height', calHeight); $('body.content .cal').css('height', contentHeight);
$('.edit-week').click( function() { $('.edit-week').click( function() {
$('body').addClass('content'); $('body').addClass('content');
$('body.content .cal').css('height', calHeight); $('body.content .cal').css('height', contentHeight);
$('section.week-new').show(); $('section.week-new').show();
return false; return false;
}); });
$('.cal ol li header h1 a').click( function() { $('.cal ol li header h1 a').click( function() {
$('body').addClass('content'); $('body').addClass('content');
$('body.content .cal').css('height', calHeight); $('body.content .cal').css('height', contentHeight);
$('section.week-edit').show(); $('section.week-edit').show();
return false; return false;
}); });
$('a.sequence-edit').click(function(){ $('a.sequence-edit').click(function(){
$('body').addClass('content'); $('body').addClass('content');
$('body.content .cal').css('height', calHeight); $('body.content .cal').css('height', contentHeight);
$('section.sequence-edit').show(); $('section.sequence-edit').show();
return false; return false;
}); });
......
cms/static/sass/_base.scss
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
$fg-column: 70px; $fg-column: 70px;
$fg-gutter: 26px; $fg-gutter: 26px;
$fg-max-columns: 12; $fg-max-columns: 12;
$body-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
html { html {
height: 100%; height: 100%;
...@@ -10,7 +11,7 @@ html { ...@@ -10,7 +11,7 @@ html {
body { body {
@include clearfix(); @include clearfix();
height: 100%; height: 100%;
font: 14px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; font: 14px $body-font-family;
> section { > section {
display: table; display: table;
...@@ -57,6 +58,10 @@ a { ...@@ -57,6 +58,10 @@ a {
color: #888; color: #888;
} }
input {
font-family: $body-font-family;
}
input[type="submit"], .button { input[type="submit"], .button {
border: 1px solid #ccc; border: 1px solid #ccc;
background: #efefef; background: #efefef;
......
cms/static/sass/_calendar.scss
...@@ -2,7 +2,6 @@ section.cal { ...@@ -2,7 +2,6 @@ section.cal {
@include box-sizing(border-box); @include box-sizing(border-box);
padding: 25px; padding: 25px;
@include clearfix; @include clearfix;
overflow: scroll;
> header { > header {
@include clearfix; @include clearfix;
...@@ -106,12 +105,22 @@ section.cal { ...@@ -106,12 +105,22 @@ section.cal {
display: none; display: none;
@include position(absolute, 30px 0 0 0); @include position(absolute, 30px 0 0 0);
width: 90%; width: 90%;
background: rgba(#000, .8); background: rgba(#000, .9);
padding: 10px; padding: 10px;
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px); @include border-radius(3px);
z-index: 99; z-index: 99;
&:before {
content: " ";
display: block;
background: rgba(#000, .8);
width: 10px;
height: 10px;
@include position(absolute, -5px 0 0 50%);
@include transform(rotate(45deg));
}
ul { ul {
li { li {
border-bottom: 0; border-bottom: 0;
...@@ -157,67 +166,67 @@ section.cal { ...@@ -157,67 +166,67 @@ section.cal {
section.new-section { section.new-section {
margin-top: 10px; margin-top: 10px;
@include inline-block();
position: relative;
> a { > a {
@extend .button; @extend .button;
@include inline-block(); display: block;
} }
section { section {
display: none; display: none;
@include position(absolute, 32px 0 0 0);
header { background: rgba(#000, .8);
background: #fff; min-width: 300px;
text-align: left; padding: 10px;
} @include box-sizing(border-box);
@include border-radius(3px);
form { z-index: 99;
background: #fff;
width: 50%;
padding: 6px;
border: 1px solid #000;
margin: 0 auto;
@include box-shadow(0 0 2px #333);
position: relative;
&:before { &:before {
background: #fff;
border-left: 1px solid #000;
border-top: 1px solid #000;
content: " "; content: " ";
display: block; display: block;
background: rgba(#000, .8);
width: 10px;
height: 10px; height: 10px;
left: 50%; @include position(absolute, -5px 0 0 20%);
position: absolute;
top: -6px;
@include transform(rotate(45deg)); @include transform(rotate(45deg));
width: 10px;
z-index: 0;
} }
select { form {
ul {
list-style: none;
li {
border-bottom: 0;
background: none;
margin-bottom: 6px; margin-bottom: 6px;
width: 100%;
option { input {
padding: 10px 0 !important; width: 100%;
} @include box-sizing(border-box);
border-color: #000;
padding: 6px;
} }
input[type="submit"] { select {
display: block;
margin-bottom: 6px;
width: 100%; width: 100%;
@include box-sizing(border-box);
option {
font-size: 14px;
}
} }
a { a {
float: right;
&:first-child { &:first-child {
float: left; float: left;
} }
}
&:last-child {
float: right;
} }
} }
} }
...@@ -232,9 +241,10 @@ section.cal { ...@@ -232,9 +241,10 @@ section.cal {
} }
body.content body.content
section.cal { section.cal {
width: flex-grid(3) + flex-gutter(); width: flex-grid(3) + flex-gutter();
float: left; float: left;
overflow: scroll;
@include box-sizing(border-box); @include box-sizing(border-box);
> header ul { > header ul {
...@@ -245,6 +255,10 @@ body.content ...@@ -245,6 +255,10 @@ body.content
li { li {
@include box-sizing(border-box); @include box-sizing(border-box);
width: 100%; width: 100%;
&.create-module {
display: none;
} }
} }
} }
}
cms/static/sass/_week.scss
...@@ -3,147 +3,175 @@ section.week-new, ...@@ -3,147 +3,175 @@ section.week-new,
section.sequence-edit { section.sequence-edit {
> header { > header {
border-bottom: 1px solid #ccc; border-bottom: 2px solid #333;
@include clearfix(); @include clearfix();
padding: 6px;
h1 { h1 {
font-size: 18px; font-size: 18px;
float: left; margin: 8px 6px;
margin-top: 8px 6px; text-transform: uppercase;
letter-spacing: 1px;
} }
a { section.goals {
float: right; background: #eee;
@extend .button;
display: block;
}
}
section {
header {
background: #666;
color: #fff;
padding: 6px; padding: 6px;
border-bottom: 1px solid #333; border-top: 1px solid #ccc;
-webkit-font-smoothing: antialiased;
header {
h2 { h2 {
font-size: 14px; font-size: 14px;
@include inline-block();
} }
p {
@include inline-block();
} }
&.sidebar { }
width: flex-grid(3, 9) + flex-gutter(9);
float: left; ul {
background: #ccc; list-style: none;
border-right: 1px solid #333; margin-top: 6px;
color: #999;
}
}
}
> section.content {
@include box-sizing(border-box); @include box-sizing(border-box);
padding: 20px;
section { section.filters {
height: 50%; @include clearfix;
margin-bottom: 10px;
background: #efefef;
border: 1px solid #ddd;
> ul { ul {
@include clearfix();
list-style: none; list-style: none;
> li {
padding: 6px; padding: 6px;
border-bottom: 1px solid #666;
li {
@include inline-block();
&.advanced {
float: right;
}
}
}
}
> div {
display: table;
border: 1px solid;
width: 100%;
section {
header {
background: #eee; background: #eee;
padding: 10px;
border-bottom: 1px solid #ccc;
&.new-module { h2 {
position: relative; text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
}
}
ul.new-dropdown { &.modules {
@include box-sizing(border-box);
display: table-cell;
width: flex-grid(6, 9);
border-right: 1px solid #333;
ol {
list-style: none; list-style: none;
border-bottom: 1px solid #333;
li { li {
display: none; border-bottom: 1px solid #333;
&:first-child { &:last-child{
display: block; border-bottom: 0;
} }
a {
color: #000;
} }
&:hover { ol {
list-style: none;
li { li {
display: block; padding: 6px 0 6px 6px;
padding: 6px 0;
&:first-child { h3 {
padding-top: 0; text-transform: uppercase;
} letter-spacing: 1px;
} font-size: 12px;
}
} }
ol {
border-left: 1px solid;
} }
} }
} }
p {
padding: 6px;
border-bottom: 1px solid #666;
} }
} }
} }
&.weeks-content { &.scratch-pad {
width: flex-grid(6, 9);
float: left;
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell;
width: flex-grid(3, 9) + flex-gutter(9);
header { ol {
@include clearfix; list-style: none;
border-bottom: 1px solid #999;
h2 { li {
float: left; border-bottom: 1px solid #999;
background: #f9f9f9;
&:last-child {
border-bottom: 0;
} }
form { ul {
float: right; list-style: none;
margin: -2px 0;
li {
padding: 6px;
input { a {
border: 1px solid #000; color: #000;
background: #ddd;
padding: 2px 4px;
@include border-radius(2px);
} }
} }
} }
&.new-module {
position: relative;
section { ul.new-dropdown {
&.filters {
border-bottom: 1px solid #999;
ul {
@include clearfix();
list-style: none; list-style: none;
padding: 6px;
li { li {
@include inline-block(); display: none;
&.advanced { &:first-child {
float: right; display: block;
}
}
} }
} }
&.modules { &:hover {
ul {
list-style: none;
li { li {
padding: 6px; display: block;
font-weight: bold; padding: 6px 0;
font-size: 16px;
border-bottom: 1px solid #333;
a { &:first-child {
color: #000; padding-top: 0;
} }
} }
} }
...@@ -151,4 +179,14 @@ section.sequence-edit { ...@@ -151,4 +179,14 @@ section.sequence-edit {
} }
} }
} }
p {
padding: 6px;
border-bottom: 1px solid #666;
}
}
}
}
}
} }
cms/templates/widgets/navigation.html
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<h1><a href="#">Week 1</a></h1> <h1><a href="#">Week 1</a></h1>
<ul> <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:</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> <li class="goal editable"><strong>Goal title two:</strong> This is another goal for this week so that students have two things to learn</li>
</ul> </ul>
</header> </header>
...@@ -146,7 +146,7 @@ ...@@ -146,7 +146,7 @@
<form> <form>
<ul> <ul>
<li> <li>
<input type="text" name="" id="" placeholder="Moldule title" /> <input type="text" name="" id="" placeholder="Section title" />
</li> </li>
<li> <li>
<select> <select>
...@@ -157,8 +157,11 @@ ...@@ -157,8 +157,11 @@
</li> </li>
<li> <li>
<input type="submit" value="Save and edit week" class="edit-week" /> <input type="submit" value="Save and edit week" class="edit-week" />
<div>
<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> </li>
</ul> </ul>
</form> </form>
......
cms/templates/widgets/week-edit.html
<section class="week-edit"> <section class="week-edit">
<header> <header>
<h1 class="editable">Week 3</h1> <h1 class="editable">Week 3</h1>
<p><a href="#">+ new goal</a></p>
<section class="goals"> <section class="goals">
<header>
<h2>Weeks goals:</h2> <h2>Weeks goals:</h2>
<p><a href="#">+ new goal</a></p>
</header>
<ul> <ul>
<li> <li>
<h3>Goal title</h2> <p><strong>Goal title:</strong> This is the goal body and is wehre the goal will be further explained</p>
<p>This is the goal body</p>
</li> </li>
</ul> </ul>
</section> </section>
</header> </header>
<section class="content">
<section class="weeks-content">
<header>
<h2>Weeks Content</h2>
<form>
<input type="search" name="" id="" value="" />
</form>
</header>
<section class="filters"> <section class="filters">
<ul> <ul>
<li> <li>
...@@ -48,60 +41,105 @@ ...@@ -48,60 +41,105 @@
<li class="advanced"> <li class="advanced">
<a href="#">Advanced filters</a> <a href="#">Advanced filters</a>
</li> </li>
<li>
<input type="search" name="" id="" value="" />
</li>
</ul> </ul>
</section> </section>
<div>
<section class="modules"> <section class="modules">
<ul> <ol>
<li> <li>
<header>
<h2><a href="#">Lecture Sequence</a></h2> <h2><a href="#">Lecture Sequence</a></h2>
</header>
<ul> <ol>
<li><a href="#" class="problem-edit">Problem title 11</a></li> <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 13</a></li>
<li><a href="#" class="problem-edit">Problem title 14</a></li> <li><a href="#" class="problem-edit">Problem title 14</a></li>
<li><a href="#" class="video-edit">Video 3</a></li> <li><a href="#" class="video-edit">Video 3</a></li>
</ul> </ol>
</li> </li>
<li> <li>
<header>
<h2><a href="#">Lecture Sequence</a></h2> <h2><a href="#">Lecture Sequence</a></h2>
</header>
<ul> <ol>
<li><a href="#" class="problem-edit">Problem title 11</a></li> <li>
<header>
<h3>
<a href="#" class="problem-edit">Problem group</a>
</h3>
</header>
<ol>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
</li>
</ol>
</li>
<li><a href="#" class="problem-edit">Problem title 13</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="problem-edit">Problem title 14</a></li>
<li><a href="#" class="video-edit">Video 3</a></li> <li><a href="#" class="video-edit">Video 3</a></li>
</ul> </ol>
</li> </li>
<li> <li>
<header>
<h2><a href="#">Homework 1a</a></h2> <h2><a href="#">Homework 1a</a></h2>
</header>
<ul> <ol>
<li><a href="#" class="problem-edit">Problem title 11</a></li> <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 13</a></li>
<li><a href="#" class="problem-edit">Problem title 14</a></li> <li><a href="#" class="problem-edit">Problem title 14</a></li>
<li><a href="#" class="video-edit">Video 3</a></li> <li><a href="#" class="video-edit">Video 3</a></li>
</ul> </ol>
</li> </li>
<li class="new-module"> <li class="new-module">
<%include file="new-module.html"/> <%include file="new-module.html"/>
</li> </li>
</ul> </ol>
</section>
</section> </section>
<section class="scratch-pad"> <section class="scratch-pad">
<ol>
<li>
<header> <header>
<h2>Scratchpad</h2> <h2>Section Scratch</h2>
</header>
<ul>
<li>Problem title 11</li>
<li>Problem title 13</li>
<li>Problem title 14</li>
<li>Video 3</li>
</ul>
</li>
<li>
<header>
<h2>Course Scratch</h2>
</header> </header>
<ul> <ul>
<li>Problem title 11</li> <li>Problem title 11</li>
<li>Problem title 13</li> <li>Problem title 13</li>
<li>Problem title 14</li> <li>Problem title 14</li>
<li>Video 3</li> <li>Video 3</li>
<%include file="new-module.html"/>
</ul> </ul>
</li>
<li class="new-module">
<%include file="new-module.html"/>
</li>
</ol>
</section>
</div>
</section> </section>
</section> </section>
cms/templates/widgets/week-new.html
<section class="week-new"> <section class="week-new">
<header> <header>
<h1>Week 6</h1> <h1>Week 6</h1>
<p><a href="#">+ new goal</a></p>
<section class="goals"> <section class="goals">
<header>
<h2>Weeks goals:</h2> <h2>Weeks goals:</h2>
<p><a href="#">+</a></p>
</header>
<ul> <ul>
<li> <li>
<h3>Create new goal</h2> <h3>Create new goal</h2>
...@@ -47,7 +50,14 @@ ...@@ -47,7 +50,14 @@
</ul> </ul>
</section> </section>
<section> <section class="content">
<section class="weeks-content">
<header>
<h2>Weeks Content</h2>
</header>
</section>
<section class="scratch-pad"> <section class="scratch-pad">
<header> <header>
<h2>Scratch pad</h2> <h2>Scratch pad</h2>
...@@ -59,13 +69,6 @@ ...@@ -59,13 +69,6 @@
</li> </li>
</ul> </ul>
</section> </section>
<section class="weeks-content">
<header>
<h2>Weeks Content</h2>
</header>
</section>
</section> </section>
<section class="new-bar"> <section class="new-bar">
...@@ -83,4 +86,5 @@ ...@@ -83,4 +86,5 @@
<a href="#">New Lab</a> <a href="#">New Lab</a>
</li> </li>
</ul> </ul>
</section>
</section> </section>
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