Skip to content
Snippets Groups Projects
Commit 57b605db authored by Kyle Fiedler's avatar Kyle Fiedler
Browse files

Added more styels to the section view and default section view

parent 6fee7928
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 328 additions and 134 deletions
cms/static/css/base-style.css
+ 124
− 46
View file @ 57b605db
......@@ -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/img/drag-handle.png 0 → 100644
+ 0
− 0
View file @ 57b605db
cms/static/img/drag-handle.png

98 B

cms/static/sass/_base.scss
+ 44
− 3
View file @ 57b605db
$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
+ 6
− 0
View file @ 57b605db
......@@ -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
+ 54
− 35
View file @ 57b605db
......@@ -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
+ 17
− 2
View file @ 57b605db
<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
+ 1
− 1
View file @ 57b605db
<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
+ 33
− 9
View file @ 57b605db
......@@ -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
+ 49
− 38
View file @ 57b605db
<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>
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