Skip to content

E
edx-platform
Commit 96a91421 by Calen Pennington
Options

Fix up overview page with new design mockup

parent 2ad7b11f
Showing with 962 additions and 45 deletions
cms/static/sass/_alerts.scss 0 → 100644
.alert {
padding: 15px 20px;
margin-bottom: 30px;
border-radius: 3px;
border: 1px solid #edbd3c;
border-radius: 3px;
background: #fbf6e1;
// background: #edbd3c;
font-size: 14px;
@include clearfix;
.alert-message {
float: left;
margin-top: 4px;
}
strong {
font-weight: 700;
}
.alert-action {
float: right;
&.secondary {
@include orange-button;
}
}
}
\ No newline at end of file
cms/static/sass/_cms_mixins.scss 0 → 100644
@mixin clearfix {
&:after {
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
}
@mixin button {
display: inline-block;
padding: 4px 20px 6px;
font-size: 14px;
font-weight: 700;
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0);
-webkit-transition: background-color .15s, box-shadow .15s;
&:hover {
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15);
}
}
@mixin blue-button {
@include button;
border: 1px solid #437fbf;
border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) $blue;
color: #fff;
&:hover {
background-color: #62aaf5;
color: #fff;
}
}
@mixin white-button {
@include button;
border: 1px solid $darkGrey;
border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%) #dfe5eb;
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
color: #5d6779;
&:hover {
background-color: #f2f6f9;
color: #5d6779;
}
}
@mixin orange-button {
@include button;
border: 1px solid #bda046;
border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%) #edbd3c;
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
color: #3c3c3c;
&:hover {
background-color: #ffcd46;
color: #3c3c3c;
}
}
@mixin grey-button {
@include button;
border: 1px solid $darkGrey;
border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3;
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
color: #6d788b;
&:hover {
background-color: #d9e3ee;
color: #6d788b;
}
}
@mixin edit-box {
padding: 15px 20px;
border-radius: 3px;
border: 1px solid #5597dd;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) #5597dd;
box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
label {
color: #fff;
}
input,
textarea {
border: 1px solid #3c3c3c;
}
textarea {
min-height: 80px;
}
h5 {
margin-bottom: 8px;
color: #fff;
font-weight: 700;
}
.row {
margin-bottom: 10px;
padding: 0;
border: none;
}
.save-button {
@include orange-button;
border-color: #3c3c3c;
margin-top: 0;
}
.cancel-button {
@include white-button;
border-color: #30649C;
margin-top: 0;
}
}
@mixin tree-view {
border: 1px solid #ced2db;
background: #edf1f5;
.branch {
margin-bottom: 10px;
&.collapsed {
margin-bottom: 0;
}
}
.branch > .section-item {
border-top: 1px solid #c5cad4;
}
.section-item {
position: relative;
display: block;
padding: 6px 8px 8px 16px;
background: #edf1f5;
font-size: 13px;
&:hover {
background: #fffcf1;
.item-actions {
display: block;
}
}
&.editing {
background: #d1dae3;
}
.draft-item,
.hidden-item {
color: #a4aab7;
}
.has-new-draft-item {
color: #9f7d10;
}
.item-actions {
// display: none;
}
}
a {
color: #2c2e33;
}
ol {
.section-item {
padding-left: 56px;
}
.new-unit-item {
margin-left: 56px;
}
}
ol ol {
.section-item {
padding-left: 96px;
}
.new-unit-item {
margin-left: 96px;
}
}
}
\ No newline at end of file
cms/static/sass/_course-info.scss 0 → 100644
body.updates {
h2 {
margin-bottom: 24px;
font-size: 22px;
font-weight: 300;
}
}
.course-updates {
padding: 30px 40px;
li {
padding: 24px 0 32px;
border-top: 1px solid #cbd1db;
}
h3 {
margin-bottom: 18px;
font-size: 14px;
font-weight: 700;
color: #646464;
letter-spacing: 1px;
text-transform: uppercase;
}
.update-contents {
padding-left: 30px;
p {
font-size: 14px;
line-height: 18px;
}
p + p {
margin-top: 18px;
}
}
.new-update-button {
@include grey-button;
display: block;
text-align: center;
padding: 12px 0;
margin-bottom: 28px;
}
.new-update-form {
@include edit-box;
margin-bottom: 24px;
textarea {
height: 180px;
}
}
}
.course-handouts {
padding: 15px 20px;
.new-handout-button {
@include grey-button;
display: block;
text-align: center;
padding: 12px 0;
margin-bottom: 28px;
}
li {
margin-bottom: 10px;
font-size: 14px;
}
.new-handout-form {
@include edit-box;
margin-bottom: 24px;
}
}
\ No newline at end of file
cms/static/sass/_courseware.scss 0 → 100644
input.courseware-unit-search-input {
position: absolute;
right: 0;
top: 5px;
width: 260px;
background-color: #fff;
}
.courseware-overview {
.new-courseware-section-button {
@include grey-button;
display: block;
text-align: center;
padding: 12px 0;
}
}
.courseware-section {
position: relative;
background: #fff;
border: 1px solid $darkGrey;
border-radius: 3px;
margin: 10px 0;
padding-bottom: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
&:first-child {
margin-top: 0;
}
&.collapsed {
padding-bottom: 0;
header {
height: 47px;
}
h4 {
display: none !important;
}
}
&.collapsed .unit-list,
.collapsed .unit-list,
.collapsed > ol {
display: none !important;
}
header {
height: 67px;
.item-details {
float: left;
padding: 10px 0 0;
}
.item-actions {
margin-top: 11px;
margin-right: 12px;
.edit-button,
.delete-button {
margin-top: -3px;
}
}
.expand-collapse-icon {
float: left;
margin: 16px 6px 16px 16px;
}
.drag-handle {
margin-left: 11px;
}
}
h3 {
font-size: 16px;
font-weight: 700;
color: $blue;
}
h4 {
font-size: 12px;
color: #878e9d;
strong {
font-weight: 700;
}
}
.list-header {
background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .1)) #ced2db;
border-radius: 3px 3px 0 0;
}
.unit-list {
margin: 0 12px;
> ol {
@include tree-view;
border-top-width: 0;
}
}
}
.new-section-name,
.new-subsection-name-input {
width: 515px;
}
.new-section-name-save,
.new-subsection-name-save {
@include blue-button;
padding: 2px 20px 5px;
margin: 0 5px;
}
.new-section-name-cancel,
.new-subsection-name-cancel {
@include white-button;
padding: 2px 20px 5px;
}
.dummy-calendar {
display: none;
position: absolute;
top: 55px;
left: 110px;
z-index: 9999;
border: 1px solid #3C3C3C;
box-shadow: 0 1px 15px rgba(0, 0, 0, .2);
}
.unit-name-input {
padding: 20px 40px;
label {
display: block;
}
input {
width: 100%;
font-size: 20px;
}
}
.preview {
background: url(../img/preview.jpg) center top no-repeat;
}
cms/static/sass/_graphics.scss 0 → 100644
.expand-collapse-icon {
position: relative;
display: inline-block;
width: 9px;
height: 11px;
margin-right: 10px;
background: url(../img/expand-collapse-icons.png) no-repeat;
&.expand {
top: 1px;
background-position: 0 0;
}
&.collapse {
top: -1px;
background-position: 0 -11px;
}
}
.sequence-icon {
display: inline-block;
width: 15px;
height: 9px;
margin-right: 5px;
background: url(../img/sequence-icon.png) no-repeat;
}
.video-icon {
display: inline-block;
width: 14px;
height: 12px;
margin-right: 5px;
background: url(../img/video-icon.png) no-repeat;
}
.list-icon {
display: inline-block;
width: 14px;
height: 10px;
margin-right: 5px;
background: url(../img/list-icon.png) no-repeat;
}
.calendar-icon {
display: inline-block;
width: 12px;
height: 11px;
margin-right: 5px;
background: url(../img/calendar-icon.png) no-repeat;
}
.edit-icon {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 2px;
background: url(../img/edit-icon.png) no-repeat;
&.white {
background: url(../img/edit-icon-white.png) no-repeat;
}
}
.visibility-toggle {
.toggle-icon {
display: inline-block;
width: 27px;
height: 20px;
background: url(../img/small-toggle-icons.png) no-repeat;
background-position: 0 -34px;
}
&.hidden .toggle-icon {
background-position: 0 -4px;
}
&.both .toggle-icon {
background-position: 0 -64px;
}
}
.delete-icon {
display: inline-block;
width: 10px;
height: 11px;
margin-right: 2px;
background: url(../img/delete-icon.png) no-repeat;
&.white {
background: url(../img/delete-icon-white.png) no-repeat;
}
}
.drag-handle {
display: inline-block;
float: right;
width: 7px;
height: 22px;
margin-left: 10px;
background: url(../img/drag-handles.png) no-repeat;
cursor: move;
}
.draft-tag,
.hidden-tag,
.has-new-draft-tag {
margin-left: 3px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
color: #a4aab7;
}
.has-new-draft-tag {
color: #9f7d10;
}
.plus-icon {
display: inline-block;
width: 11px;
height: 11px;
margin-right: 8px;
background: url(../img/plus-icon.png) no-repeat;
}
.folder-icon {
display: inline-block;
width: 15px;
height: 11px;
margin-right: 4px;
background: url(../img/folder-icon.png) no-repeat;
}
.new-folder-icon {
display: inline-block;
width: 23px;
height: 11px;
margin-right: 8px;
background: url(../img/new-folder-icon.png) no-repeat;
}
.file-icon {
display: inline-block;
width: 10px;
height: 11px;
margin-right: 8px;
background: url(../img/file-icon.png) no-repeat;
}
.new-unit-icon {
display: inline-block;
width: 23px;
height: 12px;
margin-right: 8px;
background: url(../img/new-unit-icon.png) right no-repeat;
}
.textbook-icon {
display: inline-block;
width: 32px;
height: 32px;
margin-right: 8px;
vertical-align: middle;
background: url(../img/textbook-icon.png) no-repeat;
}
.slides-icon {
display: inline-block;
width: 32px;
height: 32px;
margin-right: 8px;
vertical-align: middle;
background: url(../img/slides-icon.png) no-repeat;
}
.large-slide-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/large-slide-icon.png) center no-repeat;
}
.large-textbook-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/large-textbook-icon.png) center no-repeat;
}
.large-discussion-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/large-discussion-icon.png) center no-repeat;
}
.large-freeform-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/large-freeform-icon.png) center no-repeat;
}
.large-problem-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/large-problem-icon.png) center no-repeat;
}
.large-video-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/large-video-icon.png) center no-repeat;
}
cms/static/sass/_header.scss 0 → 100644
.primary-header {
width: 100%;
height: 36px;
border-bottom: 1px solid #2c2e33;
background: -webkit-linear-gradient(top, #686b76, #54565e);
font-size: 13px;
color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset;
.drop-icon {
margin-left: 5px;
font-size: 11px;
}
.settings-icon {
font-size: 18px;
line-height: 18px;
}
a {
float: left;
display: inline-block;
height: 29px;
padding: 7px 15px 0;
color: #e4e6ee;
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, -1px 0 0 rgba(0, 0, 0, 0.3) inset;
&:hover {
background: rgba(255, 255, 255, .1);
}
&.active {
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
box-shadow: 0 2px 8px rgba(0, 0, 0, .7) inset;
}
&:last-child {
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, -1px 0 0 rgba(0, 0, 0, 0.3) inset, 1px 0 0 rgba(255, 255, 255, 0.2);
}
&:first-child {
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, -1px 0 0 rgba(0, 0, 0, 0.3) inset, -1px 0 0 rgba(0, 0, 0, 0.3);
}
}
}
\ No newline at end of file
cms/static/sass/_modal.scss 0 → 100644
.modal-cover {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .8);
}
.history-modal {
display: none;
position: fixed;
top: 60px;
left: 50%;
z-index: 1001;
width: 930px;
height: 540px;
margin-left: -465px;
background: #fff;
.modal-body {
height: 400px;
padding: 40px;
overflow-y: scroll;
}
.modal-actions {
height: 60px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) #d1dae3;
}
h2 {
margin: 0 10px 30px;
color: #646464;
font-size: 19px;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
}
p {
margin: 20px;
}
.revert-button {
@include blue-button;
margin: 13px 6px 0 13px;
}
.close-button {
@include white-button;
margin-top: 13px;
}
}
\ No newline at end of file
cms/static/sass/_subsection.scss 0 → 100644
.subsection-body {
padding: 32px 40px;
@include clearfix;
> div {
margin-bottom: 40px;
}
input {
font-size: 14px;
}
.unit-subtitle {
display: block;
width: 100%;
}
.unit-list {
ol {
@include tree-view;
}
}
}
.subsection-name-input {
label {
display: block;
}
input {
width: 100%;
font-size: 20px;
}
}
.scheduled-date-input,
.due-date-input {
@include clearfix;
.date-input,
.time-input {
display: inline-block;
width: 100px;
}
.inherits-check {
label {
font-size: 13px;
}
}
.notice {
margin-top: 6px;
font-size: 11px;
color: #999;
}
}
.due-date-input {
label {
display: inline-block !important;
margin-right: 10px;
}
a {
font-size: 11px;
font-weight: 700;
line-height: 31px;
text-transform: uppercase;
}
.date-setter {
@include clearfix;
display: none;
}
.remove-date {
display: block;
}
}
.row.visibility {
label {
display: inline-block !important;
margin-right: 10px;
line-height: 31px;
}
a {
display: inline-block;
height: 31px;
margin-right: 8px;
vertical-align: middle;
font-size: 11px;
font-weight: 700;
line-height: 31px;
text-transform: uppercase;
}
.large-toggle {
width: 41px;
background: url(../img/large-toggles.png) no-repeat;
background-position: 0 -5px;
}
}
cms/static/sass/_variables.scss 0 → 100644
$gw-column: 80px;
$gw-gutter: 20px;
$fg-column: $gw-column;
$fg-gutter: $gw-gutter;
$fg-max-columns: 12;
$fg-max-width: 1400px;
$fg-min-width: 810px;
$sans-serif: 'Open Sans', $verdana;
$body-line-height: golden-ratio(.875em, 1);
$pink: rgb(182,37,104);
$error-red: rgb(253, 87, 87);
$blue: #5597dd;
$darkGrey: #8891a1;
cms/static/sass/base-style.scss
......@@ -4,9 +4,20 @@
@import 'reset';
@import 'mixins';
@import 'base', 'layout', 'content-types';
@import 'calendar';
@import 'section', 'unit', 'index';
@import "variables";
@import "cms_mixins";
@import "base";
@import "header";
@import "courseware";
@import "subsection";
@import "unit";
@import "course-info";
@import "graphics";
@import "modal";
@import "alerts";
@import 'content-types';
@import 'module/module-styles.scss';
@import 'descriptor/module-styles.scss';
cms/templates/overview.html
......@@ -22,51 +22,55 @@
<a href="#" class="drag-handle"></a>
</div>
</header>
<ol>
% for subsection in section.get_children():
<li class="branch collapsed">
<div class="section-item">
<a href="#" class="expand-collapse-icon expand"></a>
<a href="#" class="draft-item">
<span class="${subsection.category}-icon"></span>${subsection.display_name} <span class="draft-tag">– draft</span>
</a>
<div class="item-actions">
<a href="#" class="edit-button"><span class="edit-icon"></span></a>
<a href="#" class="edit-button"><span class="delete-icon"></span></a>
<a href="#" class="drag-handle"></a>
</div>
</div>
<ol>
% for unit in subsection.get_children():
<li class="branch collapsed">
<div class="section-item">
<a href="#" class="draft-item">
<span class="${unit.category}-icon"></span>${unit.display_name} <span class="draft-tag">– draft</span>
<div class="unit-list">
<div class="list-header">
<a href="#" class="new-subsection-item">
<span class="new-folder-icon"></span>New Subsection
</a>
</div>
<ol>
% for subsection in section.get_children():
<li class="branch collapsed">
<div class="section-item">
<div>
<a href="#" class="expand-collapse-icon expand"></a>
<a href="#">
<span class="folder-icon"></span>
<span class="subsection-name"><span class="subsection-name-value">${subsection.display_name}</span></span>
</a>
<div class="item-actions">
<a href="${reverse('edit_unit', args=[unit.location])}" class="edit-button"><span class="edit-icon"></span></a>
<a href="${reverse('delete_unit', args=[unit.location])}" class="edit-button"><span class="delete-icon"></span></a>
<a href="#" class="drag-handle"></a>
</div>
</div>
</li>
% endfor
<li>
<a href="#" class="section-item new-unit-item">
<span class="plus-icon"></span>New Unit
</a>
</li>
</ol>
</li>
% endfor
<div class="item-actions">
<a href="#" class="delete-button"><span class="delete-icon"></span></a>
<a href="#" class="visibility-toggle"><span class="toggle-icon"></span></a>
<a href="#" class="drag-handle"></a>
</div>
</div>
<li>
<a href="#" class="section-item new-subsection-item">
<span class="plus-icon"></span>New Subsection
</a>
</li>
</ol>
<ol>
% for unit in subsection.get_children():
<li class="leaf">
<div class="section-item">
<a href="${reverse('edit_unit', args=[unit.location])}" class="hidden-item">
<span class="${unit.category}-icon"></span>${unit.display_name} <span class="hidden-tag">– hidden</span>
</a>
<div class="item-actions">
<a href="${reverse('delete_unit', args=[unit.location])}" class="edit-button"><span class="delete-icon"></span></a>
<a href="#" class="visibility-toggle hidden"><span class="toggle-icon"></span></a>
<a href="#" class="drag-handle"></a>
</div>
</div>
</li>
% endfor
<li>
<a href="#" class="new-unit-item">
<span class="new-unit-icon"></span>New Unit
</a>
</li>
</ol>
</li>
% endfor
</ol>
</div>
</section>
% endfor
</article>
......
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