Skip to content

E
edx-platform
Commit f2aa6236 by Kyle Fiedler
Options

Continued on week view styles

parent a687a1c2
Showing with 348 additions and 247 deletions
cms/static/js/main.js
......@@ -31,29 +31,28 @@ $(document).ready(function(){
setHeight = function(){
var windowHeight = $(this).height();
var calHeight = windowHeight - 29;
var sidebarHeight = windowHeight - 73;
var contentHeight = windowHeight - 29;
$('.sidebar').css('height', sidebarHeight);
$('body.content .cal').css('height', calHeight);
$('section.main-content > section').css('min-height', contentHeight);
$('body.content .cal').css('height', contentHeight);
$('.edit-week').click( function() {
$('body').addClass('content');
$('body.content .cal').css('height', calHeight);
$('body.content .cal').css('height', contentHeight);
$('section.week-new').show();
return false;
});
$('.cal ol li header h1 a').click( function() {
$('body').addClass('content');
$('body.content .cal').css('height', calHeight);
$('body.content .cal').css('height', contentHeight);
$('section.week-edit').show();
return false;
});
$('a.sequence-edit').click(function(){
$('body').addClass('content');
$('body.content .cal').css('height', calHeight);
$('body.content .cal').css('height', contentHeight);
$('section.sequence-edit').show();
return false;
});
......
cms/static/sass/_base.scss
......@@ -2,6 +2,7 @@
$fg-column: 70px;
$fg-gutter: 26px;
$fg-max-columns: 12;
$body-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
html {
height: 100%;
......@@ -10,7 +11,7 @@ html {
body {
@include clearfix();
height: 100%;
font: 14px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font: 14px $body-font-family;
> section {
display: table;
......@@ -57,6 +58,10 @@ a {
color: #888;
}
input {
font-family: $body-font-family;
}
input[type="submit"], .button {
border: 1px solid #ccc;
background: #efefef;
......
cms/static/sass/_calendar.scss
......@@ -2,7 +2,6 @@ section.cal {
@include box-sizing(border-box);
padding: 25px;
@include clearfix;
overflow: scroll;
> header {
@include clearfix;
......@@ -106,12 +105,22 @@ section.cal {
display: none;
@include position(absolute, 30px 0 0 0);
width: 90%;
background: rgba(#000, .8);
background: rgba(#000, .9);
padding: 10px;
@include box-sizing(border-box);
@include border-radius(3px);
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 {
li {
border-bottom: 0;
......@@ -157,67 +166,67 @@ section.cal {
section.new-section {
margin-top: 10px;
@include inline-block();
position: relative;
> a {
@extend .button;
@include inline-block();
display: block;
}
section {
display: none;
@include position(absolute, 32px 0 0 0);
background: rgba(#000, .8);
min-width: 300px;
padding: 10px;
@include box-sizing(border-box);
@include border-radius(3px);
z-index: 99;
header {
background: #fff;
text-align: left;
&:before {
content: " ";
display: block;
background: rgba(#000, .8);
width: 10px;
height: 10px;
@include position(absolute, -5px 0 0 20%);
@include transform(rotate(45deg));
}
form {
background: #fff;
width: 50%;
padding: 6px;
border: 1px solid #000;
margin: 0 auto;
@include box-shadow(0 0 2px #333);
position: relative;
&:before {
background: #fff;
border-left: 1px solid #000;
border-top: 1px solid #000;
content: " ";
display: block;
height: 10px;
left: 50%;
position: absolute;
top: -6px;
@include transform(rotate(45deg));
width: 10px;
z-index: 0;
}
select {
margin-bottom: 6px;
width: 100%;
ul {
list-style: none;
option {
padding: 10px 0 !important;
}
}
li {
border-bottom: 0;
background: none;
margin-bottom: 6px;
input[type="submit"] {
display: block;
margin-bottom: 6px;
width: 100%;
}
input {
width: 100%;
@include box-sizing(border-box);
border-color: #000;
padding: 6px;
}
a {
select {
width: 100%;
@include box-sizing(border-box);
&:first-child {
float: left;
}
option {
font-size: 14px;
}
}
&:last-child {
float: right;
a {
float: right;
&:first-child {
float: left;
}
}
}
}
}
......@@ -232,19 +241,24 @@ section.cal {
}
body.content
section.cal {
width: flex-grid(3) + flex-gutter();
float: left;
section.cal {
width: flex-grid(3) + flex-gutter();
float: left;
overflow: scroll;
@include box-sizing(border-box);
> header ul {
display: none;
}
ol {
li {
@include box-sizing(border-box);
width: 100%;
> header ul {
&.create-module {
display: none;
}
ol {
li {
@include box-sizing(border-box);
width: 100%;
}
}
}
}
}
cms/static/sass/_week.scss
......@@ -3,76 +3,118 @@ section.week-new,
section.sequence-edit {
> header {
border-bottom: 1px solid #ccc;
border-bottom: 2px solid #333;
@include clearfix();
padding: 6px;
h1 {
font-size: 18px;
float: left;
margin-top: 8px 6px;
margin: 8px 6px;
text-transform: uppercase;
letter-spacing: 1px;
}
a {
float: right;
@extend .button;
display: block;
section.goals {
background: #eee;
padding: 6px;
border-top: 1px solid #ccc;
header {
h2 {
font-size: 14px;
@include inline-block();
}
p {
@include inline-block();
}
}
ul {
list-style: none;
margin-top: 6px;
color: #999;
}
}
}
section {
header {
background: #666;
color: #fff;
padding: 6px;
border-bottom: 1px solid #333;
-webkit-font-smoothing: antialiased;
> section.content {
@include box-sizing(border-box);
padding: 20px;
section.filters {
@include clearfix;
margin-bottom: 10px;
background: #efefef;
border: 1px solid #ddd;
ul {
@include clearfix();
list-style: none;
padding: 6px;
li {
@include inline-block();
h2 {
font-size: 14px;
&.advanced {
float: right;
}
}
}
}
&.sidebar {
width: flex-grid(3, 9) + flex-gutter(9);
float: left;
background: #ccc;
border-right: 1px solid #333;
@include box-sizing(border-box);
> div {
display: table;
border: 1px solid;
width: 100%;
section {
height: 50%;
header {
background: #eee;
padding: 10px;
border-bottom: 1px solid #ccc;
h2 {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
}
}
> ul {
list-style: none;
&.modules {
@include box-sizing(border-box);
display: table-cell;
width: flex-grid(6, 9);
border-right: 1px solid #333;
> li {
padding: 6px;
border-bottom: 1px solid #666;
background: #eee;
ol {
list-style: none;
border-bottom: 1px solid #333;
&.new-module {
position: relative;
li {
border-bottom: 1px solid #333;
ul.new-dropdown {
&:last-child{
border-bottom: 0;
}
a {
color: #000;
}
ol {
list-style: none;
li {
display: none;
padding: 6px 0 6px 6px;
&:first-child {
display: block;
h3 {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
}
}
&:hover {
li {
display: block;
padding: 6px 0;
&:first-child {
padding-top: 0;
}
ol {
border-left: 1px solid;
}
}
}
......@@ -80,75 +122,71 @@ section.sequence-edit {
}
}
p {
padding: 6px;
border-bottom: 1px solid #666;
}
}
}
&.scratch-pad {
@include box-sizing(border-box);
display: table-cell;
width: flex-grid(3, 9) + flex-gutter(9);
&.weeks-content {
width: flex-grid(6, 9);
float: left;
@include box-sizing(border-box);
header {
@include clearfix;
ol {
list-style: none;
border-bottom: 1px solid #999;
h2 {
float: left;
}
li {
border-bottom: 1px solid #999;
background: #f9f9f9;
form {
float: right;
margin: -2px 0;
&:last-child {
border-bottom: 0;
}
input {
border: 1px solid #000;
background: #ddd;
padding: 2px 4px;
@include border-radius(2px);
}
}
}
ul {
list-style: none;
li {
padding: 6px;
section {
&.filters {
border-bottom: 1px solid #999;
a {
color: #000;
}
}
}
ul {
@include clearfix();
list-style: none;
padding: 6px;
&.new-module {
position: relative;
li {
@include inline-block();
ul.new-dropdown {
list-style: none;
&.advanced {
float: right;
}
}
}
}
li {
display: none;
&.modules {
ul {
list-style: none;
&:first-child {
display: block;
}
}
li {
padding: 6px;
font-weight: bold;
font-size: 16px;
border-bottom: 1px solid #333;
&:hover {
li {
display: block;
padding: 6px 0;
a {
color: #000;
&:first-child {
padding-top: 0;
}
}
}
}
}
}
}
p {
padding: 6px;
border-bottom: 1px solid #666;
}
}
}
}
}
}
cms/templates/widgets/navigation.html
......@@ -40,7 +40,7 @@
<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>
<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>
</header>
......@@ -146,7 +146,7 @@
<form>
<ul>
<li>
<input type="text" name="" id="" placeholder="Moldule title" />
<input type="text" name="" id="" placeholder="Section title" />
</li>
<li>
<select>
......@@ -157,8 +157,11 @@
</li>
<li>
<input type="submit" value="Save and edit week" class="edit-week" />
<a href="#" class="close">Save without edit</a>
<a href="#" class="close">cancel</a>
<div>
<a href="#" class="close">Save without edit</a>
<a href="#" class="close">cancel</a>
</div>
</li>
</ul>
</form>
......
cms/templates/widgets/week-edit.html
<section class="week-edit">
<header>
<h1 class="editable">Week 3</h1>
<p><a href="#">+ new goal</a></p>
<section class="goals">
<h2>Weeks goals:</h2>
<header>
<h2>Weeks goals:</h2>
<p><a href="#">+ new goal</a></p>
</header>
<ul>
<li>
<h3>Goal title</h2>
<p>This is the goal body</p>
<p><strong>Goal title:</strong> This is the goal body and is wehre the goal will be further explained</p>
</li>
</ul>
</section>
</header>
<section class="content">
<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>
<section class="weeks-content">
<header>
<h2>Weeks 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>
<li class="advanced">
<a href="#">Advanced filters</a>
</li>
<li>
<input type="search" name="" id="" value="" />
</li>
</ul>
</section>
<div>
<section class="modules">
<ul>
<ol>
<li>
<h2><a href="#">Lecture Sequence</a></h2>
<header>
<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 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>
</ol>
</li>
<li>
<header>
<h2><a href="#">Lecture Sequence</a></h2>
</header>
<ul>
<li><a href="#" class="problem-edit">Problem title 11</a></li>
<ol>
<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 14</a></li>
<li><a href="#" class="video-edit">Video 3</a></li>
</ul>
</ol>
</li>
<li>
<header>
<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 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>
</ol>
</li>
<li class="new-module">
<%include file="new-module.html"/>
</li>
</ul>
</ol>
</section>
</section>
<section class="scratch-pad">
<header>
<h2>Scratchpad</h2>
</header>
<ol>
<li>
<header>
<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>
<ul>
<li>Problem title 11</li>
<li>Problem title 13</li>
<li>Problem title 14</li>
<li>Video 3</li>
</ul>
</li>
<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>
<li class="new-module">
<%include file="new-module.html"/>
</li>
</ol>
</section>
</div>
</section>
</section>
cms/templates/widgets/week-new.html
<section class="week-new">
<header>
<h1>Week 6</h1>
<p><a href="#">+ new goal</a></p>
<section class="goals">
<h2>Weeks goals:</h2>
<header>
<h2>Weeks goals:</h2>
<p><a href="#">+</a></p>
</header>
<ul>
<li>
<h3>Create new goal</h2>
......@@ -40,32 +43,32 @@
</li>
<li>
<form>
<input type="search" name="" id="" value="" />
</form>
<form>
<input type="search" name="" id="" value="" />
</form>
</li>
</ul>
</section>
<section>
<section class="scratch-pad">
<header>
<h2>Scratch pad</h2>
</header>
<section class="content">
<ul>
<li class="new-module">
<%include file="new-module.html"/>
</li>
</ul>
</section>
<section class="weeks-content">
<header>
<h2>Weeks Content</h2>
</header>
</section>
<section class="weeks-content">
<header>
<h2>Weeks Content</h2>
</header>
<section class="scratch-pad">
<header>
<h2>Scratch pad</h2>
</header>
</section>
<ul>
<li class="new-module">
<%include file="new-module.html"/>
</li>
</ul>
</section>
</section>
<section class="new-bar">
......@@ -83,4 +86,5 @@
<a href="#">New Lab</a>
</li>
</ul>
</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