Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added more styels to the section view and default section view

Browse Source
This commit is contained in:
Kyle Fiedler
2012-06-14 17:15:23 -04:00
committed by Matthew Mongeau
parent 2d2a16dd70
commit 2b9d47bbea
9 changed files with 336 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
cms/static/css/base-style.css
View File

@@ -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;

BIN
cms/static/img/drag-handle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 B

47
cms/static/sass/_base.scss
View File

@@ -1,4 +1,3 @@
$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;
}

6
cms/static/sass/_calendar.scss
View File

@@ -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);

99
cms/static/sass/_week.scss
View File

@@ -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;
ol {
border-left: 1px solid;
header {
padding: 3px 6px;
background: none;
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;
&:last-child {
border-bottom: 0;
}
&:hover {
a.draggable {
opacity: 1;
}
}
&.empty {
padding: 12px;
a {
@extend .button;
display: block;
text-align: center;
}
}
a.draggable {
float: right;
opacity: .3;
}
a {
color: #000;
}
}
}
&.new-module {
position: relative;
ul.new-dropdown {
list-style: none;
li {
display: none;
&:first-child {
display: block;
}
}
&:hover {
li {
display: block;
padding: 6px 0;
&:first-child {
padding-top: 0;
}
}
}
}
}
}
}
p {
padding: 6px;
border-bottom: 1px solid #666;
}
}
}
}
}
}

19
cms/templates/widgets/header.html
View File

@@ -1,6 +1,21 @@
<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>

2
cms/templates/widgets/new-module.html
View File

@@ -1,5 +1,5 @@
<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>

42
cms/templates/widgets/week-edit.html
View File

@@ -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>

93
cms/templates/widgets/week-new.html
View File

@@ -1,23 +1,23 @@
<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>
<section class="scratch-pad">
<ol>
<li>
<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>
<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>
<ul>
<li class="new-module">
<%include file="new-module.html"/>
</li>
</ul>
</section>
<li class="new-module">
<%include file="new-module.html"/>
</li>
</ol>
</section>
<section class="new-bar">
<ul>
<li>
<a href="#">Existing content</a>
</li>
<li>
<a href="#">New Video</a>
</li>
<li>
<a href="#">New Problem</a>
</li>
<li>
<a href="#">New Lab</a>
</li>
</ul>
</div>
</section>
</section>