Skip to content

E
edx-platform
Commit 5908d844 by Kyle Fiedler
Options

Added styles to be more consistant across pages

parent f041fc4a
Showing with 503 additions and 512 deletions
cms/static/sass/_module-header.scss deleted 100644 → 0
section.video-new,
section.video-edit,
section.problem-new,
section.problem-edit,
section.html-edit {
background: #fff;
border: 1px solid #333;
border-right: 0;
> header {
background: #eee;
@include clearfix;
padding: 6px;
border-bottom: 1px solid #333;
-webkit-font-smoothing: antialiased;
h2 {
float: left;
font-size: 14px;
}
a {
color: #fff;
&.save-update {
float: right;
}
&.cancel {
float: left;
}
}
}
> section {
padding: 20px;
> header {
h1 {
font-size: 24px;
margin: 12px 0;
}
section {
&.status-settings {
ul {
list-style: none;
@include border-radius(2px);
border: 1px solid #999;
@include inline-block();
li {
@include inline-block();
border-right: 1px solid #999;
padding: 6px;
&:last-child {
border-right: 0;
}
&.current {
background: #eee;
}
}
}
a.settings {
@include inline-block();
margin: 0 20px;
border: 1px solid #999;
padding: 6px;
}
select {
float: right;
}
}
&.meta {
background: #eee;
padding: 10px;
margin: 20px 0;
@include clearfix();
div {
float: left;
margin-right: 20px;
h2 {
font-size: 14px;
@include inline-block();
}
p {
@include inline-block();
}
}
}
}
}
section.notes {
margin-top: 20px;
padding: 6px;
background: #eee;
border: 1px solid #ccc;
textarea {
@include box-sizing(border-box);
display: block;
width: 100%;
}
h2 {
font-size: 14px;
margin-bottom: 6px;
}
input[type="submit"]{
margin-top: 10px;
}
}
}
}
cms/static/sass/_problem.scss
...@@ -4,68 +4,200 @@ section#unit-wrapper { ...@@ -4,68 +4,200 @@ section#unit-wrapper {
@include clearfix(); @include clearfix();
padding: 6px 20px; padding: 6px 20px;
h1 { section {
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
float: left; float: left;
h1 {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
@include inline-block();
}
p {
@include inline-block();
margin-left: 10px;
color: #999;
font-size: 12px;
font-style: italic;
}
} }
p { div {
float: right; float: right;
color: #666;
} }
} }
> section { > section {
padding: 20px; padding: 20px;
a.save-update {
@extend .button;
@include inline-block();
margin-top: 20px;
}
}
}
section.problem-new, section.meta {
section.problem-edit, section {
section.html-edit { &.status-settings {
textarea { float: left;
@include box-sizing(border-box); margin-bottom: 10px;
display: block;
width: 100%; ul {
} list-style: none;
@include border-radius(2px);
border: 1px solid #999;
@include inline-block();
li {
@include inline-block();
border-right: 1px solid #999;
padding: 6px;
&:last-child {
border-right: 0;
}
&.current {
background: #eee;
}
}
}
a.settings {
@include inline-block();
margin: 0 20px;
border: 1px solid #999;
padding: 6px;
}
select {
float: right;
}
}
&.author {
float: right;
dl {
dt {
font-weight: bold;
}
dd, dt {
@include inline-block();
}
}
}
&.tags {
background: #eee;
padding: 10px;
margin: 0 0 20px;
@include clearfix();
clear: both;
div.preview { div {
background: #eee; float: left;
@include box-sizing(border-box); margin-right: 20px;
min-height: 40px;
padding: 10px;
width: 100%;
margin-top: 10px;
h1 { h2 {
font-size: 24px; font-size: 14px;
margin-bottom: 1em; @include inline-block();
}
p {
@include inline-block();
}
}
}
}
} }
h2 { //general styles for main content
font-size: 20px; textarea {
margin-bottom: 1em; @include box-sizing(border-box);
display: block;
width: 100%;
} }
h3 { div.preview {
font-size: 18; background: #eee;
margin-bottom: 1em; @include box-sizing(border-box);
min-height: 40px;
padding: 10px;
width: 100%;
margin-top: 10px;
h1 {
font-size: 24px;
margin-bottom: 1em;
}
h2 {
font-size: 20px;
margin-bottom: 1em;
}
h3 {
font-size: 18;
margin-bottom: 1em;
}
ul {
padding-left: 20px;
margin-bottom: 1em;
}
p {
margin-bottom: 1em;
}
} }
ul { //notes
padding-left: 20px; section.notes {
margin-bottom: 1em; margin-top: 20px;
padding: 20px 0 0;
border-top: 1px solid #ccc;
h2 {
font-size: 14px;
margin-bottom: 6px;
}
form {
margin-bottom: 20px;
textarea {
@include box-sizing(border-box);
display: block;
width: 100%;
}
input[type="submit"]{
margin-top: 10px;
}
}
ul {
list-style: none;
li {
margin-bottom: 20px;
p {
margin-bottom: 10px;
&.author {
font-style: italic;
color: #999;
}
}
}
}
} }
p { div.actions {
margin-bottom: 1em; a.save-update {
@extend .button;
@include inline-block();
margin-top: 20px;
}
} }
} }
} }
cms/static/sass/_week.scss
...@@ -6,47 +6,6 @@ section.sequence-edit { ...@@ -6,47 +6,6 @@ section.sequence-edit {
border-bottom: 2px solid #333; border-bottom: 2px solid #333;
@include clearfix(); @include clearfix();
div {
@include clearfix();
padding: 6px 20px;
h1 {
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
float: left;
}
p {
float: right;
}
&.week {
background: #eee;
font-size: 12px;
border-bottom: 1px solid #ccc;
h2 {
font-size: 12px;
@include inline-block();
margin-right: 20px;
}
ul {
list-style: none;
@include inline-block();
li {
@include inline-block();
margin-right: 10px;
p {
float: none;
}
}
}
}
}
section.goals { section.goals {
background: #eee; background: #eee;
...@@ -68,121 +27,116 @@ section.sequence-edit { ...@@ -68,121 +27,116 @@ section.sequence-edit {
} }
} }
> section.content { section.filters {
@include box-sizing(border-box); @include clearfix;
padding: 20px; margin-bottom: 10px;
background: #efefef;
section.filters { border: 1px solid #ddd;
@include clearfix;
margin-bottom: 10px;
background: #efefef;
border: 1px solid #ddd;
ul { ul {
@include clearfix(); @include clearfix();
list-style: none; list-style: none;
padding: 6px; padding: 6px;
li { li {
@include inline-block(); @include inline-block();
&.advanced { &.advanced {
float: right; float: right;
}
} }
} }
} }
}
> div { > div {
display: table; display: table;
border: 1px solid; border: 1px solid;
width: 100%; width: 100%;
section { section {
header { header {
background: #eee; background: #eee;
padding: 6px; padding: 6px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
@include clearfix; @include clearfix;
h2 { h2 {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
font-size: 12px; font-size: 12px;
float: left; float: left;
}
} }
}
&.modules { &.modules {
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
width: flex-grid(6, 9); width: flex-grid(6, 9);
border-right: 1px solid #333; border-right: 1px solid #333;
&.empty { &.empty {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
a { a {
@extend .button; @extend .button;
@include inline-block(); @include inline-block();
margin-top: 10px; margin-top: 10px;
}
} }
}
ol { ol {
list-style: none; list-style: none;
border-bottom: 1px solid #333; border-bottom: 1px solid #333;
li {
border-bottom: 1px solid #333;
&:last-child{ li {
border-bottom: 0; border-bottom: 1px solid #333;
}
a { &:last-child{
color: #000; border-bottom: 0;
} }
ol { a {
list-style: none; color: #000;
}
li { ol {
padding: 6px; list-style: none;
&:hover { li {
a.draggable { padding: 6px;
opacity: 1;
}
}
&:hover {
a.draggable { a.draggable {
float: right; opacity: 1;
opacity: .5;
} }
}
a.draggable {
float: right;
opacity: .5;
}
&.group { &.group {
padding: 0; padding: 0;
header { header {
padding: 6px; padding: 6px;
background: none; background: none;
h3 { h3 {
font-size: 14px; font-size: 14px;
}
} }
}
ol { ol {
border-left: 4px solid #999; border-left: 4px solid #999;
border-bottom: 0; border-bottom: 0;
li { li {
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
}
} }
} }
} }
...@@ -191,63 +145,63 @@ section.sequence-edit { ...@@ -191,63 +145,63 @@ section.sequence-edit {
} }
} }
} }
}
&.scratch-pad { &.scratch-pad {
@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; vertical-align: top;
ol { ol {
list-style: none; list-style: none;
border-bottom: 1px solid #999; border-bottom: 1px solid #999;
li { li {
border-bottom: 1px solid #999; border-bottom: 1px solid #999;
background: #f9f9f9; background: #f9f9f9;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
ul { ul {
list-style: none; list-style: none;
li { li {
padding: 6px; padding: 6px;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
&:hover { &:hover {
a.draggable { a.draggable {
opacity: 1; opacity: 1;
}
} }
}
&.empty { &.empty {
padding: 12px; padding: 12px;
a { a {
@extend .button; @extend .button;
display: block; display: block;
text-align: center; text-align: center;
}
} }
}
a.draggable { a.draggable {
float: right; float: right;
opacity: .3; opacity: .3;
} }
a { a {
color: #000; color: #000;
}
} }
} }
} }
} }
} }
} }
......
cms/static/sass/base-style.scss
...@@ -3,4 +3,4 @@ ...@@ -3,4 +3,4 @@
@import 'base'; @import 'base';
@import 'calendar'; @import 'calendar';
@import 'week', 'video', 'problem', 'module-header'; @import 'week', 'video', 'problem';
cms/templates/unit.html
<section id="unit-wrapper" class="${type}"> <section id="unit-wrapper" class="${type}">
<header> <header>
<h1 class="editable">${name}</h1> <section>
<p>Unit type: ${type}</p> <h1 class="editable">${name}</h1>
<!-- <div class="actions"> --> <p>${type}</p>
<!-- <a href="#" class="cancel">Cancel</a> --> </section>
<!-- <a href="#" class="save-update">Save &amp; Update</a> -->
<!-- </div> -->
</header>
<section>
${contents}
</section>
<section>
<div class="actions"> <div class="actions">
<a href="" class="save-update">Save &amp; Update</a> <a href="" class="save-update">Save &amp; Update</a>
<a href="#" class="cancel">Cancel</a> <a href="#" class="cancel">Cancel</a>
</div> </div>
</header>
<section>
${contents}
</section> </section>
</section> </section>
cms/templates/widgets/html-edit.html
<section class="html-edit"> <section class="html-edit">
<section class="meta">
<section class="status-settings">
<ul>
<li><a href="#" class="current">Scrap</a></li>
<li><a href="#">Draft</a></li>
<li><a href="#">Proofed</a></li>
<li><a href="#">Published</a></li>
</ul>
<a href="#" class="settings">Settings</a>
</section>
<section class="author">
<dl>
<dt>Last modified:</dt>
<dd>mm/dd/yy</dd>
<dt>By</dt>
<dd>Anant Agarwal</dd>
</dl>
</section>
<section class="tags">
<div>
<h2>Tags:</h2>
<p class="editable">Click to edit</p>
</div>
<div>
<h2>Goal</h2>
<p class="editable">Click to edit</p>
</div>
</section>
</section>
<textarea name="" class="edit-box" rows="8" cols="40">${module.definition['data']['text']}</textarea> <textarea name="" class="edit-box" rows="8" cols="40">${module.definition['data']['text']}</textarea>
<div class="preview">${module.definition['data']['text']}</div> <div class="preview">${module.definition['data']['text']}</div>
<div class="actions">
<a href="" class="save-update">Save &amp; Update</a>
<a href="#" class="cancel">Cancel</a>
</div>
<section class="notes">
<h2>Add notes</h2>
<form>
<textarea name="" id= rows="8" cols="40"></textarea>
<input type="submit" name="" id="" value="post" />
</form>
<ul>
<li>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p class="author">Anant Agarwal</p>
</li>
<li>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p class="author">Anant Agarwal</p>
</li>
</ul>
</section>
</section> </section>
cms/templates/widgets/problem-edit.html
<section class="problem-edit"> <section class="problem-edit">
<header> <section class="meta">
<a href="#" class="cancel">Cancel</a> <section class="status-settings">
<a href="#" class="save-update">Save &amp; Update</a> <ul>
</header> <li><a href="#" class="current">Scrap</a></li>
<li><a href="#">Draft</a></li>
<section> <li><a href="#">Proofed</a></li>
<header> <li><a href="#">Published</a></li>
<h1 class="editable">${module.name}</h1> </ul>
<section class="author"> <a href="#" class="settings">Settings</a>
<div> </section>
<h2>Last modified:</h2>
<p>mm/dd/yy</p>
</div>
<div>
<h2>By</h2>
<p>Anant Agarwal</p>
</div>
</section>
<section class="status-settings">
<ul>
<li><a href="#" class="current">Scrap</a></li>
<li><a href="#">Draft</a></li>
<li><a href="#">Proofed</a></li>
<li><a href="#">Published</a></li>
</ul>
<a href="#" class="settings">Settings</a>
<select name="" id=""> <section class="author">
<option>Global</option> <dl>
</select> <dt>Last modified:</dt>
</section> <dd>mm/dd/yy</dd>
<section class="meta"> <dt>By</dt>
<div> <dd>Anant Agarwal</dd>
<h2>Tags:</h2> </dl>
<p class="editable">Click to edit</p> </section>
</div>
<div> <section class="tags">
<h2>Goal</h2> <div>
<p class="editable">Click to edit</p> <h2>Tags:</h2>
</div> <p class="editable">Click to edit</p>
</section> </div>
</header>
<section> <div>
<textarea name="" id= rows="8" cols="40">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</textarea> <h2>Goal</h2>
<div class="preview"> <p class="editable">Click to edit</p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</div> </div>
</section> </section>
</section>
<section>
<textarea name="" id= rows="8" cols="40">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</textarea>
<div class="preview">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</div>
</section>
<section class="notes"> <section class="notes">
<h2>Add notes</h2> <h2>Add notes</h2>
<form>
<textarea name="" id= rows="8" cols="40"></textarea> <textarea name="" id= rows="8" cols="40"></textarea>
<input type="submit" name="" id="" value="post" /> <input type="submit" name="" id="" value="post" />
</form>
<ul>
<li> <ul>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> <li>
<p class="author">Anant Agarwal</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</li> <p class="author">Anant Agarwal</p>
<li> </li>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> <li>
<p class="author">Anant Agarwal</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</li> <p class="author">Anant Agarwal</p>
</ul> </section> </li>
</ul>
<a href="" class="save-update">Save &amp; Update</a>
</section> </section>
</section> </section>
cms/templates/widgets/sequence-edit.html
<section class="sequence-edit"> <section class="sequence-edit">
<header> <section class="filters">
<div> <ul>
<h1 class="editable">${module.name}</h1> <li>
<p><strong>Module Type:</strong>${module.type}</p> <label for="">Sort by</label>
</div> <select>
</header> <option value="">Recently Modified</option>
</select>
</li>
<section class="content"> <li>
<section class="filters"> <label for="">Display</label>
<ul> <select>
<li> <option value="">All content</option>
<label for="">Sort by</label> </select>
<select> </li>
<option value="">Recently Modified</option> <li>
</select> <select>
</li> <option value="">Internal Only</option>
</select>
</li>
<li> <li class="advanced">
<label for="">Display</label> <a href="#">Advanced filters</a>
<select> </li>
<option value="">All content</option>
</select>
</li>
<li>
<select>
<option value="">Internal Only</option>
</select>
</li>
<li class="advanced"> <li>
<a href="#">Advanced filters</a> <input type="search" name="" id="" value="" />
</li> </li>
</ul>
</section>
<div>
<section class="modules">
<ol>
<li> <li>
<input type="search" name="" id="" value="" /> <ol>
% for child in module.get_children():
<li>
<a href="#" class="module-edit" id="${child.url}">${child.name}</a>
<a href="#" class="draggable">handle</a>
</li>
%endfor
</ol>
</li> </li>
</ul>
</section>
<div> </ol>
<section class="modules"> </section>
<ol>
<li>
<ol>
% for child in module.get_children():
<li>
<a href="#" class="module-edit" id="${child.url}">${child.name}</a>
<a href="#" class="draggable">handle</a>
</li>
%endfor
</ol>
</li>
<!-- <li class="new-module"> -->
<!-- <%include file="new-module.html"/> -->
<!-- </li> -->
</ol>
</section>
<section class="scratch-pad"> <section class="scratch-pad">
<ol> <ol>
<li> <li class="new-module">
<header> <%include file="new-module.html"/>
<h2>Section Scratch</h2> </li>
</header> <li>
<ul> <header>
<li> <h2>Section Scratch</h2>
<a href="#" class="problem-edit">Problem title 11</a> </header>
<a href="#" class="draggable">handle</a> <ul>
</li> <li>
<li> <a href="#" class="problem-edit">Problem title 11</a>
<a href="#" class="problem-edit">Problem title 13 </a>
<a href="#" class="draggable">handle</a> <a href="#" class="draggable">handle</a>
</li> </li>
<li> <li>
<a href="#" class="problem-edit"> Problem title 14</a> <a href="#" class="problem-edit">Problem title 13 </a>
<a href="#" class="draggable">handle</a> <a href="#" class="draggable">handle</a>
</li> </li>
<li> <li>
<a href="" class="video-edit">Video 3</a> <a href="#" class="problem-edit"> Problem title 14</a>
<a href="#" class="draggable">handle</a> <a href="#" class="draggable">handle</a>
</li> </li>
</ul> <li>
</li> <a href="" class="video-edit">Video 3</a>
<li> <a href="#" class="draggable">handle</a>
<header> </li>
<h2>Course Scratch</h2> </ul>
</header> </li>
<li>
<ul> <header>
<li> <h2>Course Scratch</h2>
<a href="#" class="problem-edit">Problem title 11</a> </header>
<a href="#" class="draggable">handle</a>
</li>
<li>
<a href="#" class="problem-edit">Problem title 13 </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 class="new-module"> --> <ul>
<!-- <%include file="new-module.html"/> --> <li>
<!-- </li> --> <a href="#" class="problem-edit">Problem title 11</a>
</ol> <a href="#" class="draggable">handle</a>
</section> </li>
</div> <li>
</section> <a href="#" class="problem-edit">Problem title 13 </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>
</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