Skip to content

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

Added more styels to the section view and default section view

parent 2d2a16dd
Showing with 328 additions and 134 deletions
cms/static/css/base-style.css
......@@ -193,8 +193,19 @@ body {
font-size: 14px;
text-transform: uppercase;
float: left; }
body > header nav a.new-module {
float: right; }
body > header nav ul {
float: left; }
body > header nav ul.user-nav {
float: right; }
body > header nav ul li {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-left: 15px; }
body.content section.main-content {
border-left: 2px solid #000;
-webkit-box-sizing: border-box;
......@@ -213,7 +224,11 @@ a {
input {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; }
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 {
input[type="submit"], .button, section.cal section.new-section > a, section.week-edit > section.content > div section.modules.empty a,
section.week-new > section.content > div section.modules.empty a,
section.sequence-edit > section.content > div section.modules.empty a, section.week-edit > section.content > div section.scratch-pad ol li ul li.empty a,
section.week-new > section.content > div section.scratch-pad ol li ul li.empty a,
section.sequence-edit > section.content > div section.scratch-pad ol li ul li.empty 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;
background: #efefef;
-webkit-border-radius: 3px;
......@@ -223,6 +238,26 @@ input[type="submit"], .button, section.cal section.new-section > a, section.vide
border-radius: 3px;
padding: 6px; }
.new-module {
position: relative; }
.new-module a {
padding: 6px;
display: block; }
.new-module ul.new-dropdown {
list-style: none;
position: absolute; }
.new-module ul.new-dropdown li {
display: none;
padding: 6px; }
.new-module:hover ul.new-dropdown {
display: block; }
.draggable {
width: 7px;
min-height: 14px;
background: url("../img/drag-handle.png") no-repeat center;
text-indent: -9999px; }
section.cal {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
......@@ -484,11 +519,35 @@ section.cal {
overflow: scroll;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
box-sizing: border-box;
opacity: .4;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
body.content
section.cal > header ul {
display: none; }
body.content
section.cal:hover {
opacity: 1; }
body.content
section.cal ol li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
......@@ -637,6 +696,22 @@ section.sequence-edit > section.content {
display: table-cell;
width: 65.632%;
border-right: 1px solid #333; }
section.week-edit > section.content > div section.modules.empty,
section.week-new > section.content > div section.modules.empty,
section.sequence-edit > section.content > div section.modules.empty {
text-align: center;
vertical-align: middle; }
section.week-edit > section.content > div section.modules.empty a,
section.week-new > section.content > div section.modules.empty a,
section.sequence-edit > section.content > div section.modules.empty a {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-top: 10px; }
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 {
......@@ -661,17 +736,27 @@ section.sequence-edit > section.content {
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; }
padding: 6px; }
section.week-edit > section.content > div section.modules ol li ol li.group,
section.week-new > section.content > div section.modules ol li ol li.group,
section.sequence-edit > section.content > div section.modules ol li ol li.group {
padding: 0;
border-left: 4px solid #999; }
section.week-edit > section.content > div section.modules ol li ol li.group header,
section.week-new > section.content > div section.modules ol li ol li.group header,
section.sequence-edit > section.content > div section.modules ol li ol li.group header {
padding: 3px 6px;
background: none; }
section.week-edit > section.content > div section.modules ol li ol li.group header h3,
section.week-new > section.content > div section.modules ol li ol li.group header h3,
section.sequence-edit > section.content > div section.modules ol li ol li.group header h3 {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px; }
section.week-edit > section.content > div section.modules ol li ol li.group ol li:last-child,
section.week-new > section.content > div section.modules ol li ol li.group ol li:last-child,
section.sequence-edit > section.content > div section.modules ol li ol li.group ol li:last-child {
border-bottom: 0; }
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 {
......@@ -679,7 +764,8 @@ section.sequence-edit > section.content {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
width: 34.368%; }
width: 34.368%;
vertical-align: top; }
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 {
......@@ -702,40 +788,32 @@ section.sequence-edit > section.content {
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:last-child,
section.week-new > section.content > div section.scratch-pad ol li ul li:last-child,
section.sequence-edit > section.content > div section.scratch-pad ol li ul li:last-child {
border-bottom: 0; }
section.week-edit > section.content > div section.scratch-pad ol li ul li:hover a.draggable,
section.week-new > section.content > div section.scratch-pad ol li ul li:hover a.draggable,
section.sequence-edit > section.content > div section.scratch-pad ol li ul li:hover a.draggable {
opacity: 1; }
section.week-edit > section.content > div section.scratch-pad ol li ul li.empty,
section.week-new > section.content > div section.scratch-pad ol li ul li.empty,
section.sequence-edit > section.content > div section.scratch-pad ol li ul li.empty {
padding: 12px; }
section.week-edit > section.content > div section.scratch-pad ol li ul li.empty a,
section.week-new > section.content > div section.scratch-pad ol li ul li.empty a,
section.sequence-edit > section.content > div section.scratch-pad ol li ul li.empty a {
display: block;
text-align: center; }
section.week-edit > section.content > div section.scratch-pad ol li ul li a.draggable,
section.week-new > section.content > div section.scratch-pad ol li ul li a.draggable,
section.sequence-edit > section.content > div section.scratch-pad ol li ul li a.draggable {
float: right;
opacity: .3; }
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 {
padding: 6px;
......
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