Skip to content

E
edx-platform
Commit 908966e0 by Kyle Fiedler
Options

Added more styels to the section view and default section view

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