Skip to content

E
edx-platform
Commit efe15837 by Kyle Fiedler Committed by Matthew Mongeau
Options

Added more styles and markup for sequence

parent b48ac79a
Showing with 402 additions and 113 deletions
cms/static/css/base-style.css
......@@ -460,7 +460,7 @@ section.cal {
section.cal section.new-section section {
display: none;
position: absolute;
top: 32px;
top: 30px;
background: rgba(0, 0, 0, 0.8);
min-width: 300px;
padding: 10px;
......@@ -575,46 +575,96 @@ section.sequence-edit > header {
section.week-new > header:after,
section.sequence-edit > header:after {
clear: both; }
section.week-edit > header h1,
section.week-new > header h1,
section.sequence-edit > header h1 {
font-size: 18px;
margin: 8px 6px;
text-transform: uppercase;
letter-spacing: 1px; }
section.week-edit > header div,
section.week-new > header div,
section.sequence-edit > header div {
zoom: 1;
padding: 6px 20px; }
section.week-edit > header div:before, section.week-edit > header div:after,
section.week-new > header div:before,
section.week-new > header div:after,
section.sequence-edit > header div:before,
section.sequence-edit > header div:after {
content: "";
display: table; }
section.week-edit > header div:after,
section.week-new > header div:after,
section.sequence-edit > header div:after {
clear: both; }
section.week-edit > header div h1,
section.week-new > header div h1,
section.sequence-edit > header div h1 {
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
float: left; }
section.week-edit > header div p,
section.week-new > header div p,
section.sequence-edit > header div p {
float: right; }
section.week-edit > header div.week,
section.week-new > header div.week,
section.sequence-edit > header div.week {
background: #eee;
font-size: 12px;
border-bottom: 1px solid #ccc; }
section.week-edit > header div.week h2,
section.week-new > header div.week h2,
section.sequence-edit > header div.week h2 {
font-size: 12px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 20px; }
section.week-edit > header div.week ul,
section.week-new > header div.week ul,
section.sequence-edit > header div.week ul {
list-style: none;
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 div.week ul li,
section.week-new > header div.week ul li,
section.sequence-edit > header div.week ul li {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 10px; }
section.week-edit > header div.week ul li p,
section.week-new > header div.week ul li p,
section.sequence-edit > header div.week ul li p {
float: none; }
section.week-edit > header section.goals,
section.week-new > header section.goals,
section.sequence-edit > header section.goals {
background: #eee;
padding: 6px;
padding: 6px 20px;
border-top: 1px solid #ccc; }
section.week-edit > header section.goals header h2,
section.week-new > header section.goals header h2,
section.sequence-edit > header section.goals header h2 {
font-size: 14px;
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 > header section.goals ul li,
section.week-new > header section.goals ul li,
section.sequence-edit > header section.goals ul li {
margin-bottom: 6px; }
section.week-edit > header section.goals ul li:last-child,
section.week-new > header section.goals ul li:last-child,
section.sequence-edit > header section.goals ul li:last-child {
margin-bottom: 0; }
section.week-edit > section.content,
section.week-new > section.content,
section.sequence-edit > section.content {
......
cms/static/sass/_calendar.scss
......@@ -176,7 +176,7 @@ section.cal {
section {
display: none;
@include position(absolute, 32px 0 0 0);
@include position(absolute, 30px 0 0 0);
background: rgba(#000, .8);
min-width: 300px;
padding: 10px;
......
cms/static/sass/_week.scss
......@@ -6,34 +6,64 @@ section.sequence-edit {
border-bottom: 2px solid #333;
@include clearfix();
h1 {
font-size: 18px;
margin: 8px 6px;
text-transform: uppercase;
letter-spacing: 1px;
}
div {
@include clearfix();
padding: 6px 20px;
h1 {
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
float: left;
}
section.goals {
background: #eee;
padding: 6px;
border-top: 1px solid #ccc;
p {
float: right;
}
&.week {
background: #eee;
font-size: 12px;
border-bottom: 1px solid #ccc;
header {
h2 {
font-size: 14px;
font-size: 12px;
@include inline-block();
margin-right: 20px;
}
p {
ul {
list-style: none;
@include inline-block();
}
li {
@include inline-block();
margin-right: 10px;
p {
float: none;
}
}
}
}
}
section.goals {
background: #eee;
padding: 6px 20px;
border-top: 1px solid #ccc;
ul {
list-style: none;
margin-top: 6px;
color: #999;
li {
margin-bottom: 6px;
&:last-child {
margin-bottom: 0;
}
}
}
}
}
......
cms/templates/widgets/sequnce-edit.html
<%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>
<div class="week">
<h2><a href="">Week 1</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>
<%include file="new-module.html"/>
<li>
<p class="editable"><strong>Goal title:</strong> This is the goal body and is where the goal will be further explained</p>
</li>
</ul>
</div>
<div>
<h1 class="editable">Lecture sequence</h1>
<p><strong>Group type:</strong> Ordered Sequence</p>
</div>
</header>
</section>
</section>
<section class="weeks-content">
<header>
<h2>Sequence Content</h2>
<form>
<input type="search" name="" id="" value="" />
</form>
</header>
<section class="content">
<section class="filters">
<ul>
<li>
......@@ -66,20 +39,149 @@
<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>
<li>
<input type="search" name="" id="" value="" />
</li>
</ul>
</section>
<div>
<section class="modules">
<ol>
<li>
<ol>
<li>
<a href="" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="sequence-edit">Problem Group</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 14</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="video-edit">Video 3</a>
<a href="#" class="draggable">handle</a>
</li>
<li class="group">
<header>
<h3>
<a href="#" class="problem-edit">Problem group</a>
<a href="#" class="draggable">handle</a>
</h3>
</header>
<ol>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
</ol>
</li>
<li>
<a href="#" class="problem-edit">Problem title 13</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 14</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="video-edit">Video 3</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="sequence-edit">Problem Group</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 14</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="video-edit">Video 3</a>
<a href="#" class="draggable">handle</a>
</li>
</ol>
</li>
<!-- <li class="new-module"> -->
<!-- <%include file="new-module.html"/> -->
<!-- </li> -->
</ol>
</section>
<section class="scratch-pad">
<ol>
<li>
<header>
<h2>Section Scratch</h2>
</header>
<ul>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 13 </a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit"> Problem title 14</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="" class="video-edit">Video 3</a>
<a href="#" class="draggable">handle</a>
</li>
</ul>
</li>
<li>
<header>
<h2>Course Scratch</h2>
</header>
<ul>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 13 </a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit"> Problem title 14</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="" class="video-edit">Video 3</a>
<a href="#" class="draggable">handle</a>
</li>
</ul>
</li>
<!-- <li class="new-module"> -->
<!-- <%include file="new-module.html"/> -->
<!-- </li> -->
</ol>
</section>
</div>
</section>
</section>
</%block>
cms/templates/widgets/week-edit.html
<section class="week-edit">
<header>
<h1 class="editable">Week 3</h1>
<div>
<h1 class="editable">Week 3</h1>
<p><a href="#">+ new goal</a></p>
</div>
<section class="goals">
<header>
<h2>Weeks goals:</h2>
<p><a href="#">+ new goal</a></p>
</header>
<ul>
<li>
<p><strong>Goal title:</strong> This is the goal body and is where the goal will be further explained</p>
<p class="editable"><strong>Goal title:</strong> This is the goal body and is where the goal will be further explained</p>
</li>
</ul>
</section>
......@@ -62,7 +60,40 @@
<a href="" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<li class="group">
<header>
<h3>
<a href="#" class="problem-edit">Problem group</a>
<a href="#" class="draggable">handle</a>
</h3>
</header>
<ol>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 13</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 14</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="video-edit">Video 3</a>
<a href="#" class="draggable">handle</a>
</li>
</ol>
</li> <li>
<a href="#" class="sequence-edit">Problem Group</a>
<a href="#" class="draggable">handle</a>
</li>
......@@ -70,11 +101,77 @@
<a href="#" class="problem-edit">Problem title 14</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<li class="group">
<header>
<h3>
<a href="#" class="problem-edit">Problem group</a>
<a href="#" class="draggable">handle</a>
</h3>
</header>
<ol>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 13</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 14</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="video-edit">Video 3</a>
<a href="#" class="draggable">handle</a>
</li>
</ol>
</li> <li>
<a href="#" class="video-edit">Video 3</a>
<a href="#" class="draggable">handle</a>
</li>
</ol>
<li class="group">
<header>
<h3>
<a href="#" class="problem-edit">Problem group</a>
<a href="#" class="draggable">handle</a>
</h3>
</header>
<ol>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 13</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 14</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="video-edit">Video 3</a>
<a href="#" class="draggable">handle</a>
</li>
</ol>
</li> </ol>
</li>
<li>
<header>
......@@ -103,6 +200,18 @@
<a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 13</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 14</a>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="video-edit">Video 3</a>
<a href="#" class="draggable">handle</a>
</li>
</ol>
</li>
<li>
......
cms/templates/widgets/week-new.html
<section class="week-new">
<header>
<h1 class="editable">Week 3</h1>
<div>
<h1 class="editable">Week 3</h1>
<p><a href="#">+ new goal</a></p>
</div>
<section class="goals">
<header>
<h2>Weeks goals:</h2>
<p><a href="#">+ new goal</a></p>
</header>
<ul>
<li>
<p><strong>Please add a goal for this section</strong> </p>
......
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