Skip to content

E
edx-platform
Commit 57b605db by Kyle Fiedler
Options

Added more styels to the section view and default section view

parent 6fee7928
Showing with 204 additions and 88 deletions
cms/static/sass/_base.scss
$fg-column: 70px;
$fg-gutter: 26px;
$fg-max-columns: 12;
......@@ -36,8 +35,17 @@ body {
float: left;
}
a.new-module {
float: right;
ul {
float: left;
&.user-nav {
float: right;
}
li {
@include inline-block();
margin-left: 15px;
}
}
}
}
......@@ -68,3 +76,36 @@ input[type="submit"], .button {
@include border-radius(3px);
padding: 6px;
}
.new-module {
position: relative;
a {
padding: 6px;
display: block;
}
ul.new-dropdown {
list-style: none;
position: absolute;
li {
display: none;
padding: 6px;
}
}
&:hover {
ul.new-dropdown {
display: block;
}
}
}
.draggable {
width: 7px;
min-height: 14px;
background: url('../img/drag-handle.png') no-repeat center;
text-indent: -9999px;
}
cms/static/sass/_calendar.scss
......@@ -246,11 +246,17 @@ section.cal {
float: left;
overflow: scroll;
@include box-sizing(border-box);
opacity: .4;
@include transition();
> header ul {
display: none;
}
&:hover {
opacity: 1;
}
ol {
li {
@include box-sizing(border-box);
......
cms/static/sass/_week.scss
......@@ -86,6 +86,17 @@ section.sequence-edit {
width: flex-grid(6, 9);
border-right: 1px solid #333;
&.empty {
text-align: center;
vertical-align: middle;
a {
@extend .button;
@include inline-block();
margin-top: 10px;
}
}
ol {
list-style: none;
border-bottom: 1px solid #333;
......@@ -105,16 +116,30 @@ section.sequence-edit {
list-style: none;
li {
padding: 6px 0 6px 6px;
padding: 6px;
h3 {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
}
&.group {
padding: 0;
border-left: 4px solid #999;
header {
padding: 3px 6px;
background: none;
ol {
border-left: 1px solid;
h3 {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
}
}
ol {
li {
&:last-child {
border-bottom: 0;
}
}
}
}
}
}
......@@ -126,6 +151,7 @@ section.sequence-edit {
@include box-sizing(border-box);
display: table-cell;
width: flex-grid(3, 9) + flex-gutter(9);
vertical-align: top;
ol {
list-style: none;
......@@ -145,48 +171,41 @@ section.sequence-edit {
li {
padding: 6px;
a {
color: #000;
&:last-child {
border-bottom: 0;
}
}
}
&.new-module {
position: relative;
ul.new-dropdown {
list-style: none;
&:hover {
a.draggable {
opacity: 1;
}
}
li {
display: none;
&.empty {
padding: 12px;
&:first-child {
display: block;
a {
@extend .button;
display: block;
text-align: center;
}
}
&:hover {
li {
display: block;
padding: 6px 0;
a.draggable {
float: right;
opacity: .3;
}
&:first-child {
padding-top: 0;
}
}
a {
color: #000;
}
}
}
}
}
p {
padding: 6px;
border-bottom: 1px solid #666;
}
}
}
}
}
}
}
cms/templates/widgets/header.html
<header>
<nav>
<h2><a href="/ui_prototype">6.002x circuits and electronics</a></h2>
<a href="#" class="new-module">New module</a>
<h2><a href="/">6.002x circuits and electronics</a></h2>
<ul>
<li>
<a href="#" class="new-module">New Section</a>
</li>
<li>
<a href="#" class="new-module">New Module</a>
</li>
<li>
<a href="#" class="new-module">New Unit</a>
</li>
</ul>
<ul class="user-nav">
<li><a href="#">Tasks</a></li>
<li><a href="#">Settings</a></li>
</ul>
</nav>
</header>
cms/templates/widgets/new-module.html
<a href="" class="default">+ add new</a>
<ul class="new-dropdown">
<li class="default">+ add new</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="problem-new"><a href="#">Create new problem</a></li>
......
cms/templates/widgets/week-edit.html
......@@ -56,10 +56,22 @@
</header>
<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>
<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>
......@@ -68,7 +80,7 @@
</header>
<ol>
<li>
<li class="group">
<header>
<h3>
<a href="#" class="problem-edit">Problem group</a>
......@@ -97,10 +109,22 @@
</header>
<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>
<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>
......
cms/templates/widgets/week-new.html
<section class="week-new">
<header>
<h1>Week 6</h1>
<h1 class="editable">Week 3</h1>
<section class="goals">
<header>
<h2>Weeks goals:</h2>
<p><a href="#">+</a></p>
<p><a href="#">+ new goal</a></p>
</header>
<ul>
<li>
<h3>Create new goal</h2>
<p>Goals are overarching themes for the week</p>
<p><strong>Please add a goal for this section</strong> </p>
</li>
</ul>
</section>
</header>
<section class="filters disabled">
<section class="content">
<section class="filters">
<ul>
<li>
<label for="">Sort by</label>
......@@ -43,48 +43,59 @@
</li>
<li>
<form>
<input type="search" name="" id="" value="" />
</form>
<input type="search" name="" id="" value="" />
</li>
</ul>
</section>
<section class="content">
<section class="weeks-content">
<header>
<h2>Weeks Content</h2>
</header>
<div>
<section class="modules empty">
<p>This are no groups or units in this section yet</p>
<a href="#">Add a Group</a>
<a href="#">Add a Unit</a>
</section>
<section class="scratch-pad">
<header>
<h2>Scratch pad</h2>
</header>
<ul>
<li class="new-module">
<%include file="new-module.html"/>
</li>
</ul>
</section>
</section>
<section class="new-bar">
<ul>
<li>
<a href="#">Existing content</a>
</li>
<section class="scratch-pad">
<ol>
<li>
<a href="#">New Video</a>
<header>
<h2>Section Scratch</h2>
</header>
<ul>
<li class="empty">
<p><a href="#">There are no units in this scratch yet. Add one</a></p>
</li>
</ul>
</li>
<li>
<a href="#">New Problem</a>
<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="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>
</ul>
</li>
<li>
<a href="#">New Lab</a>
<li class="new-module">
<%include file="new-module.html"/>
</li>
</ul>
</ol>
</section>
</div>
</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