Skip to content

E
edx-platform
Commit 96a91421 by Calen Pennington
Options

Fix up overview page with new design mockup

parent 2ad7b11f
Showing with 1464 additions and 1246 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/_base.scss
$fg-column: 70px;
$fg-gutter: 26px;
$fg-max-columns: 12;
$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
$sans-serif: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
$body-font-size: 14px;
$body-line-height: 20px;
$blue: #5597dd;
$light-blue: #f0f7fd;
$dark-blue: #50545c;
$bright-blue: #3c8ebf;
$orange: #f96e5b;
$yellow: #fff8af;
$cream: #F6EFD4;
$border-color: #ddd;
// edX colors
$blue: rgb(29,157,217);
$pink: rgb(182,37,104);
$error-red: rgb(253, 87, 87);
@mixin hide-text {
background-color: transparent;
border: 0;
color: transparent;
font: 0/0 a;
text-shadow: none;
}
// -------------------------------------
//
// Universal
// Universal
//
// -------------------------------------
body {
min-width: 980px;
background: #f3f4f5;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #3c3c3c;
min-width: 980px;
background: #f3f4f5;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #3c3c3c;
}
a {
text-decoration: none;
color: $blue;
-webkit-transition: color .15s;
text-decoration: none;
color: $blue;
-webkit-transition: color .15s;
&:hover {
color: #cb9c40;
}
&:hover {
color: #cb9c40;
}
}
h1 {
font-size: 28px;
margin: 36px 6px;
font-size: 28px;
margin: 36px 6px;
}
.main-wrapper {
position: relative;
margin: 0 40px;
position: relative;
margin: 0 40px;
}
.inner-wrapper {
position: relative;
max-width: 1280px;
margin: auto;
position: relative;
max-width: 1280px;
margin: auto;
}
.window {
background: #fff;
border: 1px solid #8891a1;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
background: #fff;
border: 1px solid $darkGrey;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.sidebar {
float: right;
width: 28%;
float: right;
width: 28%;
}
footer {
clear: both;
height: 100px;
.left {
float: left;
}
input[type="text"] {
padding: 6px 8px 8px;
box-sizing: border-box;
border: 1px solid #b0b6c2;
border-radius: 2px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)) #edf1f5;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: #3c3c3c;
outline: 0;
&::-webkit-input-placeholder {
color: #979faf;
}
.right {
float: right;
}
input.search {
padding: 6px 15px 8px 30px;
box-sizing: border-box;
border: 1px solid #b0b6c2;
border-radius: 20px;
background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
font-family: 'Open Sans', sans-serif;
color: #3c3c3c;
outline: 0;
&::-webkit-input-placeholder {
color: #979faf;
}
}
label {
font-size: 12px;
}
@mixin blue-button {
display: inline-block;
padding: 4px 20px 6px;
border: 1px solid #437fbf;
border-radius: 3px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) $blue;
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
font-size: 14px;
font-weight: 700;
color: #fff;
}
@mixin white-button {
display: inline-block;
padding: 4px 20px 6px;
border: 1px solid #8891a1;
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;
font-size: 14px;
font-weight: 700;
color: #8891a1;
footer {
clear: both;
height: 100px;
}
@mixin orange-button {
display: inline-block;
padding: 4px 20px 6px;
border: 1px solid #3c3c3c;
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;
font-size: 14px;
font-weight: 700;
color: #3c3c3c;
input[type="text"] {
padding: 6px 8px 8px;
box-sizing: border-box;
border: 1px solid #b0b6c2;
border-radius: 2px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)) #edf1f5;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: #3c3c3c;
outline: 0;
&::-webkit-input-placeholder {
color: #979faf;
}
}
input.search {
padding: 6px 15px 8px 30px;
box-sizing: border-box;
border: 1px solid $darkGrey;
border-radius: 20px;
background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
font-family: 'Open Sans', sans-serif;
color: #3c3c3c;
outline: 0;
// -------------------------------------
//
// Courseware
//
// -------------------------------------
.components {
padding: 40px;
}
.xmodule_display {
font-size: 16px;
&::-webkit-input-placeholder {
color: #979faf;
}
}
input.courseware-unit-search-input {
position: absolute;
right: 0;
top: 5px;
width: 260px;
background-color: #fff;
label {
font-size: 12px;
}
.courseware-overview {
.new-courseware-section-button {
display: block;
padding: 12px 0;
border-radius: 3px;
border: 1px solid #8891a1;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3;
font-size: 14px;
font-weight: 700;
text-align: center;
color: #6d788b;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.text-editor {
width: 100%;
min-height: 80px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #b0b6c2;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)) #edf1f5;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
font-family: Monaco, monospace;
}
.courseware-section {
position: relative;
background: #fff;
border: 1px solid #8891a1;
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;
}
}
&.collapsed > ol,
.collapsed > ol {
display: none;
}
.publish-date {
position: absolute;
left: -60px;
top: 0;
width: 40px;
height: 40px;
background: url(../img/date-circle.png) no-repeat;
font-size: 12px;
text-align: center;
.month,
.day {
position: absolute;
display: block;
width: 40px;
line-height: 0;
}
.month {
top: 10px;
font-size: 9px;
font-weight: 700;
color: #f3f4f5;
}
.day {
top: 25px;
font-size: 16px;
font-weight: 700;
color: #b0b6c2;
}
}
header {
height: 67px;
.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: 19px;
}
}
h3 {
font-size: 16px;
font-weight: 700;
color: $blue;
}
h4 {
font-size: 12px;
color: #878e9d;
strong {
font-weight: 700;
}
}
.new-unit-item,
.new-subsection-item {
@include grey-button;
margin: 5px 8px;
padding: 3px 10px 4px 10px;
font-size: 10px;
> ol {
margin: 0 12px;
border: 1px solid #ced2db;
}
ol {
.section-item {
display: block;
padding: 6px 8px 8px 16px;
background: #edf1f5;
font-size: 13px;
&:hover {
background: #fffcf1;
.item-actions {
display: block;
}
}
&.new-unit-item {
font-weight: 700;
color: #6d788b;
&:hover {
background: #d1dae3;
}
}
.draft-item {
color: #a4aab7;
}
.item-actions {
display: none;
}
}
a {
color: #2c2e33;
}
}
ol ol {
.section-item {
padding-left: 56px;
}
}
ol ol ol {
.section-item {
padding-left: 96px;
}
}
.new-folder-icon,
.new-unit-icon {
position: relative;
top: 2px;
}
}
.component-actions {
float: right;
.item-actions {
position: absolute;
top: 5px;
right: 5px;
.edit-button,
.delete-button {
float: left;
margin-right: 6px;
color: #a4aab7;
}
.edit-button,
.delete-button,
.visibility-toggle {
float: left;
margin-right: 13px;
color: #a4aab7;
}
}
.item-details {
float: left;
padding: 10px 0;
}
.unit-library {
float: right;
width: 28%;
padding-bottom: 12px;
border: 1px solid #8891a1;
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
h2 {
font-weight: 700;
margin: 14px;
}
.list-search {
margin: 0 12px 8px;
}
.list-search-input {
width: 100%;
padding: 6px 15px 8px 30px;
box-sizing: border-box;
border: 1px solid #b0b6c2;
border-radius: 20px;
background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
font-family: 'Open Sans', sans-serif;
color: #3c3c3c;
outline: 0;
&::-webkit-input-placeholder {
color: #979faf;
}
}
.list-wrapper {
height: 500px;
margin: 0 12px;
border: 1px solid #ced2db;
overflow-y: scroll;
}
ul {
.section-item {
display: block;
padding: 6px 8px 8px 10px;
background: #edf1f5;
font-size: 13px;
&:hover {
background: #fffcf1;
.item-actions {
display: block;
}
}
&.new-unit-item {
font-weight: 700;
color: #6d788b;
&:hover {
background: #d1dae3;
}
}
.item-actions {
display: none;
}
}
a {
color: #2c2e33;
}
}
}
// -------------------------------------
//
// Unit Editor
//
// -------------------------------------
.unit .main-wrapper {
margin: 40px;
}
.unit-body {
float: left;
width: 70%;
.breadcrumbs {
border-radius: 3px 3px 0 0;
border-bottom: 1px solid #cbd1db;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5;
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
@include clearfix;
li {
float: left;
}
a,
.current-page {
display: block;
padding: 15px 35px 15px 30px;
font-size: 14px;
background: url(../img/breadcrumb-arrow.png) no-repeat right center;
}
}
h2 {
margin: 30px 40px;
color: #646464;
font-size: 19px;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
}
.components {
.component {
position: relative;
border: 1px solid transparent;
z-index: 10;
&:hover {
border-color: #6696d7;
border: 1px solid #d1ddec;
border-radius: 3px;
-webkit-transition: border-color .15s;
> .component-actions {
opacity: 1;
}
}
&.editing {
border-color: #6696d7;
&:hover {
.drag-handle,
.component-actions {
opacity: 0;
}
}
}
.rendered-component {
padding: 20px;
}
.component-actions {
position: absolute;
top: 4px;
right: 4px;
opacity: 0;
-webkit-transition: opacity .15s;
}
.edit-button,
.delete-button {
float: left;
padding: 3px 10px 4px;
margin-left: 3px;
border: 1px solid #fff;
border-radius: 3px;
background: $blue;
font-size: 12px;
color: #fff;
-webkit-transition: all .15s;
&:hover {
background-color: $blue;
color: #fff;
}
.edit-icon,
.delete-icon {
margin-right: 4px;
}
}
.drag-handle {
position: absolute;
display: block;
top: -1px;
right: -16px;
z-index: -1;
width: 15px;
height: 100%;
border-radius: 0 3px 3px 0;
border: 1px solid $blue;
background: url(../img/drag-handles.png) center no-repeat $blue;
cursor: move;
opacity: 0;
-webkit-transition: opacity .15s;
}
}
.new-component-item {
padding: 0;
border: 1px solid #8891a1;
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, .2) inset;
-webkit-transition: background-color .15s, border-color .15s;
&.adding {
background-color: $blue;
border-color: #437fbf;
}
.new-component-button {
display: block;
padding: 20px;
text-align: center;
color: #6d788b;
}
h5 {
margin-bottom: 8px;
color: #fff;
font-weight: 700;
}
.rendered-component {
display: none;
background: #fff;
border-radius: 3px 3px 0 0;
}
.new-component-type, .new-component-template {
@include clearfix;
a {
position: relative;
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 8px;
font-size: 13px;
line-height: 14px;
color: #fff;
text-align: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset;
-webkit-transition: background-color .15s;
&:hover {
background-color: rgba(255, 255, 255, .2);
}
.name {
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
}
}
.new-component-template {
a {
height: 60px;
}
}
.new-component,
.new-component-templates {
display: none;
padding: 20px;
.cancel-button {
@include blue-button;
border-color: #30649c;
}
}
}
}
.component-editor {
display: none;
padding: 20px;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1)) $blue;
h5 {
margin-bottom: 8px;
color: #fff;
font-weight: 700;
}
textarea {
width: 100%;
min-height: 80px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #3c3c3c;
font-family: Monaco, monospace;
}
.save-button {
@include orange-button;
margin-right: 8px;
}
.cancel-button {
@include blue-button;
border-color: #30649c;
}
}
}
.unit-properties,
.unit-history {
margin-bottom: 20px;
.window-contents {
padding: 20px;
}
h4 {
padding: 6px 14px;
border-bottom: 1px solid #cbd1db;
border-radius: 3px 3px 0 0;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5;
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
font-size: 14px;
font-weight: 600;
}
.row {
margin-bottom: 15px;
}
input[type="text"] {
display: block;
width: 100%;
}
.visibility-options .option {
margin-right: 10px;
padding: 3px 13px 6px;
border-radius: 3px;
background: #edf1f5;
&.checked {
background: #d1dae3;
}
input[type="radio"] {
margin-right: 7px;
}
}
.save-button {
@include blue-button;
margin-top: 10px;
}
.publish-button {
@include orange-button;
margin-top: 10px;
border-color: #bda046;
}
}
.unit-properties {
.window-contents {
padding: 10px 20px;
}
}
.unit-history {
&.collapsed {
h4 {
border-bottom: none;
border-radius: 3px;
}
.window-contents {
display: none;
}
}
ol {
border: 1px solid #ced2db;
li {
display: block;
padding: 6px 8px 8px 10px;
background: #edf1f5;
font-size: 12px;
&:hover {
background: #fffcf1;
.item-actions {
display: block;
}
}
&.checked {
background: #d1dae3;
}
.item-actions {
display: none;
}
input[type="radio"] {
margin-right: 7px;
}
}
}
}
// -------------------------------------
//
// Icons / Tags
//
// -------------------------------------
.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;
}
}
.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;
}
}
.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,
.publish-flag {
margin-left: 3px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
color: #a4aab7;
}
.plus-icon {
display: inline-block;
width: 11px;
height: 11px;
margin-right: 8px;
background: url(../img/plus-icon.png) 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-template-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
}
.large-discussion-icon {
background: url(../img/large-discussion-icon.png) center no-repeat;
float: left;
padding: 10px 0;
}
.large-html-icon {
background: url(../img/large-freeform-icon.png) center no-repeat;
}
.large-problem-icon {
background: url(../img/large-problem-icon.png) center no-repeat;
}
.large-video-icon {
background: url(../img/large-video-icon.png) center no-repeat;
}
// -------------------------------------
//
// Modal
//
// -------------------------------------
.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;
}
.window {
margin-bottom: 20px;
.window-contents {
padding: 20px;
}
h4 {
padding: 6px 14px;
border-bottom: 1px solid #cbd1db;
border-radius: 3px 3px 0 0;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5;
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
font-size: 14px;
font-weight: 600;
}
label {
display: block;
margin-bottom: 6px;
font-weight: 700;
&.inline-label {
display: inline;
}
.description {
display: block;
font-size: 11px;
font-weight: 400;
font-style: italic;
line-height: 1.3;
color: #999;
}
}
.row {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #cbd1db;
}
}
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/_unit.scss
section#unit-wrapper {
> header {
border-bottom: 1px solid lighten($dark-blue, 50%);
@include linear-gradient(#fff, lighten($dark-blue, 62%));
@include clearfix();
@include box-shadow( 0 2px 0 $light-blue, inset 0 -1px 0 #fff);
text-shadow: 0 1px 0 #fff;
section {
float: left;
padding: 10px 20px;
h1 {
font-size: 18px;
@include inline-block();
color: $dark-blue;
margin: 0;
}
p {
@include inline-block();
margin: 0;
a {
@include inline-block();
font-size: 12px;
}
}
}
div {
@include clearfix;
color: #666;
float: right;
padding: 6px 20px;
a {
@include inline-block;
&.cancel {
margin-right: 20px;
font-style: italic;
font-size: 12px;
padding: 6px 0;
}
&.save-update {
padding: 6px 20px;
@include border-radius(3px);
border: 1px solid lighten($dark-blue, 40%);
@include box-shadow(inset 0 0 0 1px #fff);
color: $dark-blue;
@include linear-gradient(lighten($dark-blue, 60%), lighten($dark-blue, 55%));
&:hover, &:focus {
@include linear-gradient(lighten($dark-blue, 58%), lighten($dark-blue, 53%));
@include box-shadow(inset 0 0 6px 1px #fff);
}
}
}
}
}
> section {
padding: 20px;
section.meta {
background: $light-blue;
border-bottom: 1px solid lighten($dark-blue, 40%);
padding: 10px 20px;
margin: -20px -20px 10px;
opacity: .7;
@include transition;
&:hover {
opacity: 1;
padding: 20px;
margin: -20px -20px 10px;
}
section {
&.status-settings {
float: left;
margin-bottom: 10px;
color: $dark-blue;
@include clearfix;
ul {
border: 1px solid darken($light-blue, 15%);
@include clearfix();
float: left;
list-style: none;
margin: 0;
padding: 0;
li {
border-right: 1px solid darken($light-blue, 15%);
float: left;
&:last-child {
border-right: 0;
}
a {
color: $dark-blue;
padding: 6px;
display: block;
&.current {
background: darken($light-blue, 5%);
}
&:hover {
background-color: lighten($yellow, 13%);
}
}
}
}
a.settings {
float: left;
margin: 0 20px;
padding: 6px;
border: 1px solid darken($light-blue, 15%);
color: $dark-blue;
&:hover {
background-color: lighten($yellow, 13%);
}
}
select {
float: right;
}
}
&.author {
float: right;
color: lighten($dark-blue, 6%);
dl {
dt {
font-weight: bold;
}
dd, dt {
@include inline-block();
}
}
}
&.tags {
color: lighten($dark-blue, 6%);
@include clearfix();
clear: both;
div {
float: left;
margin-right: 20px;
h2 {
font-size: 14px;
@include inline-block();
margin: 0;
}
p {
@include inline-block();
margin: 0;
}
}
}
}
}
//general styles for main content
.preview {
@include box-sizing(border-box);
border: 1px solid lighten($dark-blue, 40%);
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;
}
}
//notes
section.notes {
margin-top: 40px;
padding: 40px 0 0;
border-top: 2px solid lighten( $dark-blue, 60% );
h2 {
margin-bottom: 6px;
font-size: $body-font-size;
text-transform: uppercase;
color: $bright-blue;
letter-spacing: 1px;
}
form {
margin-bottom: 20px;
input[type="submit"]{
margin-top: 10px;
}
}
ul {
list-style: none;
margin: 0;
padding: 0;
li {
margin-bottom: 20px;
p {
margin-bottom: 10px;
&.author {
font-style: italic;
color: #999;
}
}
}
}
}
div.actions {
a.save-update {
@extend .button;
@include inline-block();
margin-top: 20px;
}
a.cancel {
float: right;
font-style: italic;
margin-top: 20px;
}
}
}
.unit .main-wrapper,
.subsection .main-wrapper {
margin: 40px;
}
.main-column {
float: left;
width: 70%;
}
.unit-body.published {
.components > li {
border: none;
.rendered-component {
padding: 0 20px;
}
}
}
.unit-body {
.breadcrumbs {
border-radius: 3px 3px 0 0;
border-bottom: 1px solid #cbd1db;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5;
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
@include clearfix;
li {
float: left;
}
a,
.current-page {
display: block;
padding: 15px 35px 15px 30px;
font-size: 14px;
background: url(../img/breadcrumb-arrow.png) no-repeat right center;
}
}
h2 {
margin: 30px 40px;
color: #646464;
font-size: 19px;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
}
.components {
> li {
position: relative;
z-index: 10;
margin: 20px 40px;
border: 1px solid #d1ddec;
border-radius: 3px;
background: #fff;
-webkit-transition: border-color .15s;
&:hover {
border-color: #6696d7;
.drag-handle,
.component-actions a {
background-color: $blue;
}
.drag-handle {
border-color: $blue;
}
}
&.editing {
border-color: #6696d7;
&:hover {
.drag-handle,
.component-actions a {
background-color: $blue;
}
.drag-handle {
border-color: $blue;
}
}
}
.rendered-component {
padding: 40px 20px 20px;
}
.component-actions {
position: absolute;
top: 4px;
right: 4px;
-webkit-transition: opacity .15s;
}
.edit-button,
.delete-button {
float: left;
padding: 3px 10px 4px;
margin-left: 3px;
border: 1px solid #fff;
border-radius: 3px;
// background: $blue;
background: #d1ddec;
font-size: 12px;
color: #fff;
-webkit-transition: all .15s;
&:hover {
background-color: $blue;
color: #fff;
}
.edit-icon,
.delete-icon {
margin-right: 4px;
}
}
.drag-handle {
position: absolute;
display: block;
top: -1px;
right: -16px;
z-index: -1;
width: 15px;
height: 100%;
border-radius: 0 3px 3px 0;
border: 1px solid #d1ddec;
background: url(../img/drag-handles.png) center no-repeat #d1ddec;
cursor: move;
-webkit-transition: all .15s;
}
&.new-component-item {
padding: 0;
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, .2) inset;
-webkit-transition: background-color .15s, border-color .15s;
&.adding {
background-color: $blue;
border-color: #437fbf;
}
.new-component-button {
@include grey-button;
display: block;
text-align: center;
padding: 20px 0;
border: none;
}
h5 {
margin-bottom: 8px;
color: #fff;
font-weight: 700;
}
.rendered-component {
display: none;
background: #fff;
border-radius: 3px 3px 0 0;
}
.new-component-type {
@include clearfix;
a {
position: relative;
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 8px;
font-size: 13px;
line-height: 14px;
color: #fff;
text-align: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset;
-webkit-transition: background-color .15s;
&:hover {
background-color: rgba(255, 255, 255, .2);
}
.name {
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
}
}
.new-component-step-1,
.new-component-step-2 {
display: none;
padding: 20px;
}
}
}
.video-unit img,
.discussion-unit img {
width: 100%;
}
}
.component-editor,
.new-component-step-2 {
@include edit-box;
display: none;
padding: 20px;
border-radius: 0 0 3px 3px;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1)) $blue;
h5 {
margin-bottom: 8px;
color: #fff;
font-weight: 700;
}
.save-button {
margin-right: 8px;
}
}
}
.unit-properties {
.window-contents {
padding: 10px 20px;
}
.unit-actions {
border-bottom: none;
padding-bottom: 0;
}
.published-alert {
padding: 10px;
border: 1px solid #edbd3c;
border-radius: 3px;
background: #fbf6e1;
font-size: 14px;
line-height: 1.4;
div {
margin-top: 15px;
}
}
.visibility-options .option {
margin-right: 10px;
padding: 3px 13px 6px;
border-radius: 3px;
background: #edf1f5;
&.checked {
background: #d1dae3;
}
input[type="radio"] {
margin-right: 7px;
}
}
.save-button {
@include blue-button;
margin-top: 10px;
}
.preview-button {
@include white-button;
margin-top: 10px;
}
.publish-button {
@include orange-button;
margin-top: 10px;
}
}
.unit-history {
&.collapsed {
h4 {
border-bottom: none;
border-radius: 3px;
}
.window-contents {
display: none;
}
}
ol {
border: 1px solid #ced2db;
li {
display: block;
padding: 6px 8px 8px 10px;
background: #edf1f5;
font-size: 12px;
&:hover {
background: #fffcf1;
.item-actions {
display: block;
}
}
&.checked {
background: #d1dae3;
}
.item-actions {
display: none;
}
input[type="radio"] {
margin-right: 7px;
}
}
}
}
.unit-location {
.url {
width: 100%;
margin-bottom: 10px;
box-shadow: none;
}
.window-contents > ol {
@include tree-view;
ol {
.section-item {
padding-left: 30px;
}
.new-unit-item {
margin-left: 30px;
}
}
ol ol {
.section-item {
padding-left: 50px;
}
.new-unit-item {
margin-left: 50px;
}
}
}
}
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