Skip to content

E
edx-platform
Commit dc07e737 by Brian Talbot
Options

studio - settings: revamp of tabs to views WIP

parent 9f5eeaf8
Showing with 528 additions and 1159 deletions
cms/static/sass/_account.scss
// login and sign up UI
// Studio - Sign In/Up
// ====================
.signup, .signin {
.wrapper-content {
......@@ -25,7 +26,6 @@
h1 {
@include font-size(32);
float: none;
margin: 0;
padding: 0;
font-weight: 600;
......@@ -244,6 +244,8 @@
}
}
// ====================
// messages
.message {
@include font-size(14);
......
cms/static/sass/_base.scss
// -------------------------------------
//
// Universal
//
// -------------------------------------
// studio base styling
// ====================
// basic reset
html {
font-size: 62.5%;
}
body {
min-width: 980px;
background: $gray-l5;
font-size: 16px;
line-height: 1.6;
color: $baseFontColor;
@include font-size(16);
min-width: 980px;
background: $gray-l5;
line-height: 1.6;
color: $baseFontColor;
}
body,
input {
font-family: 'Open Sans', sans-serif;
body, input {
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
color: $blue;
@include transition(color .15s);
text-decoration: none;
color: $blue;
@include transition(color .15s);
&:hover {
color: #cb9c40;
}
&:hover {
color: #cb9c40;
}
}
h1 {
float: left;
font-size: 28px;
font-weight: 300;
margin: 24px 6px;
@include font-size(28);
font-weight: 300;
}
.waiting {
opacity: 0.1;
opacity: 0.1;
}
.page-actions {
margin-bottom: 30px;
margin-bottom: 30px;
}
.wrapper {
......@@ -52,134 +47,269 @@ h1 {
width: 100%;
}
.main-wrapper {
position: relative;
margin: 0 40px;
// ====================
// layout - basic
.wrapper-content {
margin: 0;
padding: 0 $baseline;
position: relative;
}
.inner-wrapper {
.content {
@include clearfix();
@include font-size(16);
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
margin: 0 auto;
color: $gray-d2;
header {
position: relative;
max-width: 1280px;
margin: auto;
margin-bottom: $baseline;
border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/2);
.title-sub {
@include font-size(14);
display: block;
margin: 0;
color: $gray-l2;
}
.title, .title-1 {
@include font-size(32);
margin: 0;
padding: 0;
font-weight: 600;
color: $gray-d3;
}
}
.introduction {
@include font-size(14);
margin: 0 0 $baseline 0;
}
}
.content-primary, .content-supplementary {
@include box-sizing(border-box);
}
.content-primary {
.title-1, .title-2, .title-3, .title-4, .title-5, .title-5 {
color: $gray-d3;
}
.title-1 {
}
.title-2 {
@include font-size(24);
margin: 0 0 ($baseline/2) 0;
font-weight: 600;
}
.title-3 {
@include font-size(16);
margin: 0 0 ($baseline/4) 0;
font-weight: 500;
}
.title-4 {
}
.title-5 {
}
}
.content-supplementary {
> article {
clear: both;
.bit {
@include font-size(13);
margin: 0 0 $baseline 0;
border-bottom: 1px solid $gray-l4;
padding: 0 0 $baseline 0;
color: $gray-l1;
&:last-child {
margin-bottom: 0;
border: none;
padding-bottom: 0;
}
h3 {
@include font-size(14);
margin: 0 0 ($baseline/4) 0;
color: $gray-d2;
font-weight: 600;
}
}
}
// ====================
// layout - grandfathered
.main-wrapper {
position: relative;
margin: 0 40px;
}
.inner-wrapper {
position: relative;
max-width: 1280px;
margin: auto;
> article {
clear: both;
}
}
.sidebar {
float: right;
width: 28%;
float: right;
width: 28%;
}
.left {
float: left;
float: left;
}
.right {
float: right;
float: right;
}
// ====================
// forms
input[type="text"],
input[type="email"],
input[type="password"],
textarea.text {
padding: 6px 8px 8px;
@include box-sizing(border-box);
border: 1px solid $mediumGrey;
border-radius: 2px;
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
background-color: $lightGrey;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: $baseFontColor;
outline: 0;
padding: 6px 8px 8px;
@include box-sizing(border-box);
border: 1px solid $mediumGrey;
border-radius: 2px;
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
background-color: $lightGrey;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: $baseFontColor;
outline: 0;
&::-webkit-input-placeholder,
&:-moz-placeholder,
&:-ms-input-placeholder {
color: #979faf;
}
&::-webkit-input-placeholder,
&:-moz-placeholder,
&:-ms-input-placeholder {
color: #979faf;
}
&:focus {
@include linear-gradient($paleYellow, tint($paleYellow, 90%));
outline: 0;
}
&:focus {
@include linear-gradient($paleYellow, tint($paleYellow, 90%));
outline: 0;
}
}
// forms - specific
input.search {
padding: 6px 15px 8px 30px;
@include 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: $baseFontColor;
outline: 0;
&::-webkit-input-placeholder {
color: #979faf;
}
padding: 6px 15px 8px 30px;
@include 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: $baseFontColor;
outline: 0;
&::-webkit-input-placeholder {
color: #979faf;
}
}
label {
font-size: 12px;
font-size: 12px;
}
code {
padding: 0 4px;
border-radius: 3px;
background: #eee;
font-family: Monaco, monospace;
padding: 0 4px;
border-radius: 3px;
background: #eee;
font-family: Monaco, monospace;
}
.CodeMirror {
font-size: 13px;
border: 1px solid $darkGrey;
background: #fff;
font-size: 13px;
border: 1px solid $darkGrey;
background: #fff;
}
.text-editor {
width: 100%;
min-height: 80px;
padding: 10px;
@include box-sizing(border-box);
border: 1px solid $mediumGrey;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
font-family: Monaco, monospace;
width: 100%;
min-height: 80px;
padding: 10px;
@include box-sizing(border-box);
border: 1px solid $mediumGrey;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
font-family: Monaco, monospace;
}
// ====================
// UI - chrome
.window {
@include clearfix();
@include border-radius(3px);
@include box-shadow(0 1px 1px $shadow-l1);
margin-bottom: $baseline;
border: 1px solid $gray-l2;
background: $white;
padding: $baseline ($baseline*1.5);
}
// ====================
// UI - actions
.new-unit-item,
.new-subsection-item,
.new-policy-item {
@include grey-button;
margin: 5px 8px;
padding: 3px 10px 4px 10px;
font-size: 10px;
.new-folder-icon,
.new-policy-icon,
.new-unit-icon {
position: relative;
top: 2px;
}
@include grey-button;
margin: 5px 8px;
padding: 3px 10px 4px 10px;
font-size: 10px;
.new-folder-icon,
.new-policy-icon,
.new-unit-icon {
position: relative;
top: 2px;
}
}
.item-actions {
position: absolute;
top: 5px;
right: 5px;
.edit-button,
.delete-button,
.visibility-toggle {
float: left;
margin-right: 13px;
color: #a4aab7;
}
position: absolute;
top: 5px;
right: 5px;
.edit-button,
.delete-button,
.visibility-toggle {
float: left;
margin-right: 13px;
color: #a4aab7;
}
}
// ====================
// misc
hr.divide {
@include text-sr();
}
.item-details {
......@@ -194,81 +324,56 @@ code {
}
.window {
margin-bottom: 20px;
border: 1px solid $mediumGrey;
border-radius: 3px;
background: #fff;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
.window-contents {
padding: 20px;
}
.header {
padding: 6px 14px;
border-bottom: 1px solid $mediumGrey;
border-radius: 2px 2px 0 0;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: $lightBluishGrey;
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset);
font-size: 14px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
// @include border-radius(3px);
// @include box-shadow(0 1px 1px $shadow-l1);
// margin-bottom: $baseline;
// border: 1px solid $gray-l2;
// background: $white;
.window-contents {
padding: 20px;
}
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;
}
}
.header {
padding: 6px 14px;
border-bottom: 1px solid $mediumGrey;
border-radius: 2px 2px 0 0;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: $lightBluishGrey;
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset);
font-size: 14px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.row {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #cbd1db;
}
}
label {
display: block;
margin-bottom: 6px;
font-weight: 700;
body.hide-wip {
.wip, .wip-box {
display: none !important;
&.inline-label {
display: inline;
}
}
body.show-wip {
.wip {
outline: 1px solid #f00 !important;
position: relative;
.description {
display: block;
font-size: 11px;
font-weight: 400;
font-style: italic;
line-height: 1.3;
color: #999;
}
}
.wip-box {
@extend .wip;
&:after {
content: "WIP";
font-size: 8px;
padding: 2px;
background: #f00;
color: #fff;
@include position(absolute, 0px 0px 0 0);
}
}
.row {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #cbd1db;
}
}
.waiting {
}
// ====================
// system notifications
.toast-notification {
display: none;
position: fixed;
......@@ -328,50 +433,50 @@ body.show-wip {
}
.waiting {
position: relative;
position: relative;
&:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 999998;
width: 100%;
height: 100%;
border-radius: inherit;
background: rgba(255, 255, 255, .9);
}
&:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 999998;
width: 100%;
height: 100%;
border-radius: inherit;
background: rgba(255, 255, 255, .9);
}
&:after {
content: '';
@extend .spinner-icon;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
z-index: 999999;
}
&:after {
content: '';
@extend .spinner-icon;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
z-index: 999999;
}
}
.waiting-inline {
&:after {
content: '';
@extend .spinner-icon;
}
&:after {
content: '';
@extend .spinner-icon;
}
}
.new-button {
@include green-button;
font-size: 13px;
padding: 8px 20px 10px;
text-align: center;
@include green-button;
font-size: 13px;
padding: 8px 20px 10px;
text-align: center;
&.big {
display: block;
}
&.big {
display: block;
}
}
.edit-button.standard,
......@@ -391,11 +496,12 @@ body.show-wip {
.delete-button.standard {
&:hover {
background-color: tint($orange, 75%);
}
&:hover {
background-color: tint($orange, 75%);
}
}
// misc
.tooltip {
position: absolute;
top: 0;
......
cms/static/sass/_header.scss
......@@ -29,6 +29,10 @@
margin: 0 auto;
color: $gray-l1;
}
nav .nav-item {
display: inline-block;
}
}
// ====================
......@@ -51,9 +55,6 @@
// general nav styles
// ====================
nav .nav-item {
display: inline-block;
}
// ====================
......@@ -81,10 +82,10 @@ nav .nav-item {
// specific elements - course name/info
.info-course {
@include font-size(14);
position: relative;
margin: -3px ($baseline/2) 0 0;
padding-right: ($baseline*0.75);
@include font-size(14);
&:before {
@extend .faded-vertical-divider;
......
cms/static/sass/_index.scss
......@@ -311,6 +311,11 @@
.content-cta {
border-top: 1px solid $gray-l4;
header {
border: none;
margin: 0;
padding: 0;
}
.list-actions {
position: relative;
......
cms/static/sass/_settings.scss
.settings {
.settings-overview {
@extend .window;
@include clearfix;
display: table;
width: 100%;
// layout
.sidebar {
display: table-cell;
float: none;
width: 20%;
padding: 30px 0 30px 20px;
@include border-radius(3px 0 0 3px);
background: $lightGrey;
}
.main-column {
display: table-cell;
float: none;
width: 80%;
padding: 30px 40px 30px 60px;
}
.settings-page-menu {
a {
display: block;
padding-left: 20px;
line-height: 52px;
&.is-shown {
background: #fff;
@include border-radius(5px 0 0 5px);
}
}
}
// Studio - Course Settings
// ====================
body.course.settings {
.settings-page-section {
> .alert {
display: none;
&.is-shown {
display: block;
}
}
> section {
display: none;
margin-bottom: 40px;
&.is-shown {
display: block;
}
&:last-child {
border-bottom: none;
}
> .title {
margin-bottom: 30px;
font-size: 28px;
font-weight: 300;
color: $blue;
}
> section {
margin-bottom: 100px;
@include clearfix;
header {
@include clearfix;
border-bottom: 1px solid $mediumGrey;
margin-bottom: 20px;
padding-bottom: 10px;
h3 {
color: $darkGrey;
float: left;
margin: 0 40px 0 0;
text-transform: uppercase;
}
.detail {
float: right;
margin-top: 3px;
color: $mediumGrey;
font-size: 13px;
}
}
&:last-child {
padding-bottom: 0;
border-bottom: none;
}
}
}
}
// form basics
label, .label {
padding: 0;
border: none;
background: none;
font-size: 15px;
font-weight: 400;
&.check-label {
display: inline;
margin-left: 10px;
}
&.ranges {
margin-bottom: 20px;
}
}
input, textarea {
@include transition(all 1s ease-in-out);
@include box-sizing(border-box);
font-size: 15px;
&.long {
width: 100%;
min-width: 400px;
}
.content-primary, .content-supplementary {
@include box-sizing(border-box);
float: left;
}
&.tall {
height: 200px;
}
.content-primary {
@extend .window;
width: flex-grid(9, 12);
margin-right: flex-gutter();
}
&.short {
min-width: 100px;
width: 25%;
}
.group-settings {
margin: 0 0 ($baseline*2) 0;
&.date {
display: block !important;
}
header {
@include clearfix();
&.time {
width: 85px !important;
min-width: 85px !important;
.title-2 {
width: flex-grid(4, 9);
margin: 0 flex-gutter() 0 0;
float: left;
}
&:disabled {
border: none;
@include box-shadow(none);
padding: 0;
color: $darkGrey !important;
font-weight: bold;
background: #fff;
.tip {
@include font-size(13);
width: flex-grid(5, 9);
float: right;
margin-top: ($baseline/2);
text-align: right;
color: $gray-l2;
}
}
textarea.tinymce {
border: 1px solid $darkGrey;
height: 300px;
}
input[type="checkbox"], input[type="radio"] {
// basic layout/elements
.title-2 {
}
input:disabled + .copy > label, input:disabled + .label {
color: $mediumGrey;
}
.input-default input, .input-default textarea {
color: $mediumGrey;
background: $lightGrey;
}
.title-3 {
::-webkit-input-placeholder {
color: $mediumGrey;
font-size: 13px;
}
:-moz-placeholder {
color: $mediumGrey;
font-size: 13px;
}
.tip {
color: $mediumGrey;
font-size: 13px;
}
// form layouts
.row {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid $lightGrey;
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
// structural labels, not semantic labels per se
> label, .label {
display: inline-block;
vertical-align: top;
}
// tips
.tip-inline {
display: inline-block;
margin-left: 10px;
}
.tip-stacked {
display: block;
margin-top: 10px;
}
// form basics
.list-input {
margin: 0;
padding: 0;
list-style: none;
// structural field, not semantic fields per se
.field {
display: inline-block;
width: 100%;
> input, > textarea, .input {
display: inline-block;
&:last-child {
margin-bottom: 0;
}
.group {
input, textarea {
margin-bottom: 5px;
}
.label, label {
font-size: 13px;
}
}
// multi-field
&.multi {
display: block;
background: tint($lightGrey, 50%);
padding: 20px;
@include border-radius(4px);
@include box-sizing(border-box);
.group {
margin-bottom: 10px;
max-width: 175px;
&:last-child {
margin-bottom: 0;
}
margin: 0 0 ($baseline*0.75) 0;
input, .input, textarea {
}
&:last-child {
margin-bottom: 0;
}
.tip-stacked {
margin-top: 0;
}
}
}
&.required {
// multi stacked
&.multi-stacked {
.group {
input, .input, textarea {
min-width: 370px;
width: 370px;
}
}
label {
font-weight: 600;
}
// multi-field inline
&.multi-inline {
@include clearfix;
.group {
float: left;
margin-right: 20px;
&:nth-child(2) {
margin-right: 0;
}
.input, input, textarea {
width: 100%;
}
}
label:after {
margin-left: ($baseline/4);
content: "*";
}
}
// input-list
.input-list {
.input {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dotted $lightGrey;
@include clearfix();
label, input, textarea {
display: block;
}
&:last-child {
border: 0;
}
label {
@include font-size(14);
@include transition(color, 0.15s, ease-in-out);
margin: 0 0 ($baseline/4) 0;
.row {
}
&.is-focused {
color: $blue;
}
}
//radio buttons and checkboxes
.input-radio {
@include clearfix();
input, textarea {
@include font-size(16);
height: 100%;
width: 100%;
padding: ($baseline/2);
input {
display: block;
float: left;
margin-right: 10px;
&.long {
width: 100%;
}
.copy {
position: relative;
top: -5px;
float: left;
width: 350px;
&.short {
width: 25%;
}
label {
display: block;
margin-bottom: 0;
::-webkit-input-placeholder {
color: $gray-l4;
}
.tip {
display: block;
margin-top: 0;
:-moz-placeholder {
color: $gray-l3;
}
.message-error {
::-moz-placeholder {
color: $gray-l3;
}
}
.input-checkbox {
}
// enumerated inputs
&.enum {
}
}
// layout - aligned label/field pairs
&.row-col2 {
> label, .label {
width: 200px;
}
.field {
width: 400px ! important;
}
&.multi-inline {
@include clearfix();
.group {
width: 170px;
}
:-ms-input-placeholder {
color: $gray-l3;
}
}
}
.field-additional {
margin-left: 204px;
}
}
// editing controls - adding
.new-item, .replace-item {
clear: both;
display: block;
margin-top: 10px;
padding-bottom: 10px;
@include grey-button;
@include box-sizing(border-box);
}
// editing controls - removing
.delete-button {
float: right;
}
// editing controls - preview
.input-existing {
display: block !important;
.current {
width: 100%;
margin: 10px 0;
padding: 10px;
@include box-sizing(border-box);
@include border-radius(5px);
font-size: 14px;
background: tint($lightGrey, 50%);
@include clearfix();
.doc-filename {
display: inline-block;
width: 220px;
overflow: hidden;
text-overflow: ellipsis;
textarea.long {
height: ($baseline*5);
}
.remove-doc-data {
input[type="checkbox"] {
display: inline-block;
margin-top: 0;
width: 150px;
}
}
}
margin-right: ($baseline/4);
width: auto;
height: auto;
// specific sections
.settings-details {
}
.settings-faculty {
.settings-faculty-members {
> header {
display: none;
}
.field .multi {
display: block;
margin-bottom: 40px;
padding: 20px;
background: tint($lightGrey, 50%);
@include border-radius(4px);
@include box-sizing(border-box);
}
.course-faculty-list-item {
.row {
&:nth-child(4) {
padding-bottom: 0;
border-bottom: none;
}
}
.remove-faculty-photo {
& + label {
display: inline-block;
}
}
#course-faculty-bio-input {
margin-bottom: 0;
}
.new-course-faculty-item {
}
.current-faculty-photo {
padding: 0;
img {
display: block;
@include box-shadow(0 1px 3px rgba(0,0,0,0.1));
padding: 10px;
border: 2px solid $mediumGrey;
background: #fff;
}
}
}
}
.settings-grading {
.setting-grading-assignment-types {
.row .field.enum {
width: 684px;
}
}
.course-grading-assignment-list-item {
}
.input-list {
.row {
.input {
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
}
}
}
}
.settings-handouts {
}
.settings-problems {
> section {
&.is-shown {
.tip {
@include font-size(13);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
}
}
}
.settings-discussions {
.course-discussions-categories-list-item {
label {
display: none;
}
.group {
display: inline-block;
}
.remove-item {
display: inline-block !important;
margin-left: 10px;
}
}
}
// states
label.is-focused {
color: $blue;
@include transition(color 1s ease-in-out);
}
// extras/abbreviations
// .settings-extras {
// > header {
// cursor: pointer;
// &.active {
// }
// }
// > div {
// display: none;
// @include transition(display 0.25s ease-in-out);
// &.is-shown {
// display: block;
// }
// }
// }
input.error, textarea.error {
border-color: $red;
}
.message-error {
display: block;
margin-top: 5px;
color: $red;
font-size: 13px;
}
// misc
.divide {
display: none;
}
i.ss-icon {
position: relative;
top: 1px;
margin-right: 5px;
}
.well {
padding: 20px;
background: $lightGrey;
border: 1px solid $mediumGrey;
@include border-radius(4px);
@include box-shadow(0 1px 1px rgba(0,0,0,0.05) inset)
}
}
h3 {
margin-bottom: 30px;
font-size: 15px;
font-weight: 700;
color: $blue;
}
.grade-controls {
@include clearfix;
width: 642px;
}
.new-grade-button {
position: relative;
float: left;
display: block;
width: 29px;
height: 29px;
margin: 10px 20px 0 0;
border-radius: 20px;
border: 1px solid $darkGrey;
@include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
background-color: #d1dae3;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #6d788b;
.plus-icon {
position: absolute;
top: 50%;
left: 50%;
margin-left: -6px;
margin-top: -6px;
}
}
.grade-slider {
float: left;
width: 580px;
margin-bottom: 10px;
.grade-bar {
position: relative;
width: 100%;
height: 50px;
background: $lightGrey;
.increments {
position: relative;
li {
position: absolute;
top: 52px;
width: 30px;
margin-left: -15px;
font-size: 9px;
text-align: center;
&.increment-0 {
left: 0;
}
&.increment-10 {
left: 10%;
}
&.increment-20 {
left: 20%;
}
&.increment-30 {
left: 30%;
}
&.increment-40 {
left: 40%;
}
&.increment-50 {
left: 50%;
}
&.increment-60 {
left: 60%;
}
&.increment-70 {
left: 70%;
}
&.increment-80 {
left: 80%;
}
&.increment-90 {
left: 90%;
}
&.increment-100 {
left: 100%;
}
}
}
.grade-specific-bar {
height: 50px !important;
}
.grades {
position: relative;
li {
position: absolute;
top: 0;
height: 50px;
text-align: right;
@include border-radius(2px);
&:hover,
&.is-dragging {
.remove-button {
display: block;
}
}
&.is-dragging {
}
.remove-button {
display: none;
position: absolute;
top: -17px;
right: 1px;
height: 17px;
font-size: 10px;
}
&:nth-child(1) {
background: #4fe696;
}
&:nth-child(2) {
background: #ffdf7e;
}
&:nth-child(3) {
background: #ffb657;
}
&:nth-child(4) {
background: #ef54a1;
}
.field-group {
@include clearfix();
margin: 0 0 ($baseline/2) 0;
&:nth-child(5),
&.bar-fail {
background: #fb336c;
}
.field {
display: block;
width: 47%;
border-bottom: none;
margin: 0 $baseline 0 0;
padding-bottom: 0;
.letter-grade {
display: block;
margin: 10px 15px 0 0;
font-size: 16px;
font-weight: 700;
line-height: 14px;
&:nth-child(odd) {
float: left;
}
.range {
display: block;
margin-right: 15px;
font-size: 10px;
line-height: 12px;
&:nth-child(even) {
float: right;
margin-right: 0;
}
.drag-bar {
position: absolute;
top: 0;
right: -1px;
height: 50px;
width: 2px;
background-color: #fff;
@include box-shadow(-1px 0 3px rgba(0,0,0,0.1));
cursor: ew-resize;
@include transition(none);
&:hover {
width: 6px;
right: -2px;
}
input, textarea {
width: 100%;
}
}
}
}
}
.content-supplementary {
width: flex-grid(3, 12);
}
}
\ No newline at end of file
cms/templates/login.html
......@@ -8,7 +8,7 @@
<div class="wrapper-content wrapper">
<section class="content">
<header>
<h1>Sign into edX Studio</h1>
<h1 class="title title-1">Sign into edX Studio</h1>
<a href="" class="action action-signin">Don't have a Studio Account? Sign up!</a>
</header>
......@@ -45,7 +45,7 @@
<h2 class="sr">Studio Support</h2>
<div class="bit">
<h3>Need Help?</h3>
<h3 class="title-3">Need Help?</h3>
<p>Having trouble with your account? Use <a href="" rel="external">our support center</a> to look over self help steps, find solutions others have found to the same problem, or let us know of your issue.</p>
</div>
</aside>
......
cms/templates/settings.html
<%inherit file="base.html" />
<%block name="title">Schedule &amp; Details</%block>
<%block name="bodyclass">is-signedin course settings</%block>
<%block name="bodyclass">is-signedin course schedule settings</%block>
<%namespace name='static' file='static_content.html'/>
<%!
from contentstore import utils
%>
<%block name="jsextra">
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
<script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
......@@ -37,214 +35,99 @@ from contentstore import utils
</%block>
<%block name="content">
<!-- -->
<div class="main-wrapper">
<div class="inner-wrapper">
<h1>Settings</h1>
<article class="settings-overview">
<div class="settings-page-section main-column">
<section class="settings-details is-shown">
<h2 class="title">Course Details</h2>
<section class="settings-details-basic">
<header>
<h3>Basic Information</h3>
<span class="detail">The nuts and bolts of your course</span>
</header>
<div class="row row-col2">
<label for="course-name">Course Name:</label>
<div class="field">
<div class="input">
<input type="text" class="long" id="course-name" value="[Course Name]" disabled="disabled">
<span class="tip tip-stacked">This is used in <a href="${utils.get_lms_link_for_about_page(course_location)}">your course URL</a>, and cannot be changed</span>
</div>
</div>
</div>
<div class="wrapper-content wrapper">
<section class="content">
<header>
<span class="title-sub">Settings</span>
<h1 class="title-1">Schedule &amp; Details</h1>
</header>
<div class="introduction">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div>
<div class="row row-col2">
<label for="course-organization">Organization:</label>
<div class="field">
<div class="input">
<input type="text" class="long" id="course-organization" value="[Course Organization]" disabled="disabled">
<span class="tip tip-stacked">This is used in <a href="${utils.get_lms_link_for_about_page(course_location)}">your course URL</a>, and cannot be changed</span>
</div>
</div>
</div>
<article class="content-primary" role="main">
<form id="settings_details" method="post" action="">
<section class="group-settings basic">
<header>
<h2 class="title-2">Basic Information</h2>
<span class="tip">The nuts and bolts of your course</span>
</header>
<div class="row row-col2">
<label for="course-number">Course Number:</label>
<div class="field">
<div class="input">
<input type="text" class="short" id="course-number" value="[Course No.]" disabled="disabled">
<span class="tip tip-stacked">This is used in <a href="${utils.get_lms_link_for_about_page(course_location)}">your course URL</a>, and cannot be changed</span>
</div>
</div>
</div>
</section><!-- .settings-details-basic -->
<hr class="divide" />
<section class="settings-details-schedule">
<header>
<h3>Course Schedule</h3>
<span class="detail">Important steps and segments of your course</span>
</header>
<div class="row row-col2">
<h4 class="label">Course Dates:</h4>
<div class="field">
<div class="input multi multi-inline" id="course-start">
<div class="group">
<label for="course-start-date">Start Date</label>
<input type="text" class="start-date date start datepicker" id="course-start-date" placeholder="MM/DD/YYYY" autocomplete="off">
<span class="tip tip-stacked">First day the course begins</span>
</div>
<div class="group">
<label for="course-start-time">Start Time</label>
<input type="text" class="time start timepicker" id="course-start-time" value="" placeholder="HH:MM" autocomplete="off">
<span class="tip tip-stacked" id="timezone"></span>
</div>
</div>
</div>
<div class="field field-additional">
<div class="input multi multi-inline" id="course-end">
<div class="group">
<label for="course-end-date">End Date</label>
<input type="text" class="end-date date end" id="course-end-date" placeholder="MM/DD/YYYY" autocomplete="off">
<span class="tip tip-stacked">Last day the course is active</span>
</div>
<div class="group">
<label for="course-end-time">End Time</label>
<input type="text" class="time end" id="course-end-time" value="" placeholder="HH:MM" autocomplete="off">
<span class="tip tip-stacked" id="timezone"></span>
</div>
</div>
</div>
</div>
</section>
<div class="row row-col2">
<h4 class="label">Enrollment Dates:</h4>
<div class="field">
<div class="input multi multi-inline" id="enrollment-start">
<div class="group">
<label for="course-enrollment-start-date">Start Date</label>
<input type="text" class="start-date date start" id="course-enrollment-start-date" placeholder="MM/DD/YYYY" autocomplete="off">
<span class="tip tip-stacked">First day students can enroll</span>
</div>
<div class="group">
<label for="course-enrollment-start-time">Start Time</label>
<input type="text" class="time start" id="course-enrollment-start-time" value="" placeholder="HH:MM" autocomplete="off">
<span class="tip tip-stacked" id="timezone"></span>
</div>
</div>
</div>
<hr class="divide" />
<div class="field field-additional">
<div class="input multi multi-inline" id="enrollment-end">
<div class="group">
<label for="course-enrollment-end-date">End Date</label>
<input type="text" class="end-date date end" id="course-enrollment-end-date" placeholder="MM/DD/YYYY" autocomplete="off">
<span class="tip tip-stacked">Last day students can enroll</span>
</div>
<div class="group">
<label for="course-enrollment-end-time">End Time</label>
<input type="text" class="time end" id="course-enrollment-end-time" value="" placeholder="HH:MM" autocomplete="off">
<span class="tip tip-stacked" id="timezone"></span>
</div>
</div>
</div>
</div>
<section class="group-settings schedule">
<header>
<h2 class="title-2">Course Schedule</h2>
<span class="tip">Important steps and segments of your course</span>
</header>
<!-- <div class="row row-col2">
<label for="course-syllabus">Course Syllabus</label>
<div class="field">
<div class="input input-existing">
<div class="current current-course-syllabus">
<span class="doc-filename"></span>
<a href="#" class="remove-item remove-course-syllabus remove-doc-data" id="course-syllabus"><span class="delete-icon"></span> Delete Syllabus</a>
</div>
</div>
<div class="input">
<a href="#" class="new-item new-course-syllabus add-syllabus-data" id="course-syllabus">
<span class="upload-icon"></span>Upload Syllabus
</a>
<span class="tip tip-inline">PDF formatting preferred</span>
</div>
</div>
</div> -->
</section><!-- .settings-details-schedule -->
<hr class="divide" />
<section class="setting-details-marketing">
<header>
<h3>Introducing Your Course</h3>
<span class="detail">Information for perspective students</span>
</header>
<div class="row row-col2">
<label for="course-overview">Course Overview:</label>
<div class="field">
<div class="input">
<textarea class="long tall tinymce text-editor" id="course-overview"></textarea>
<span class="tip tip-stacked">Introductions, prerequisites, FAQs that are used on <a href="${utils.get_lms_link_for_about_page(course_location)}">your course summary page</a></span>
</div>
</div>
</div>
</section>
<div class="row row-col2">
<label for="course-introduction-video">Introduction Video:</label>
<div class="field">
<div class="input input-existing">
<div class="current current-course-introduction-video">
<iframe width="380" height="215" src="" frameborder="0" allowfullscreen></iframe>
<a href="#" class="remove-item remove-course-introduction-video remove-video-data"><span class="delete-icon"></span> Delete Video</a>
</div>
</div>
<div class="input">
<input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="id" autocomplete="off">
<span class="tip tip-stacked">Video restrictions go here</span>
</div>
</div>
</div>
</section><!-- .settings-details-marketing -->
<hr class="divide" />
<section class="settings-details-requirements">
<header>
<h3>Requirements</h3>
<span class="detail">Expectations of the students taking this course</span>
</header>
<div class="row row-col2">
<label for="course-effort">Hours of Effort per Week:</label>
<div class="field">
<div class="input">
<input type="text" class="short time" id="course-effort" placeholder="HH:MM">
<span class="tip tip-inline">Time spent on all course work</span>
</div>
<hr class="divide" />
<section class="group-settings marketing">
<header>
<h2 class="title-2">Introducing Your Course</h2>
<span class="tip">Information for perspective students</span>
</header>
<ol class="list-input">
<li class="field text" id="field-course-overview">
<label for="course-overview">Course Overview:</label>
<input id="email" type="email" name="email" placeholder="e.g. jane.doe@gmail.com" />
<textarea class="tinymce text-editor" id="course-overview"></textarea>
<span class="tip tip-stacked">Introductions, prerequisites, FAQs that are used on <a href="${utils.get_lms_link_for_about_page(course_location)}">your course summary page</a></span>
</li>
<li class="field video" id="field-course-introduction-video">
<div class="input input-existing">
<div class="current current-course-introduction-video">
<iframe width="100%" height="" src="" frameborder="0" allowfullscreen></iframe>
<a href="#" class="remove-item remove-course-introduction-video remove-video-data"><span class="delete-icon"></span> Delete Video</a>
</div>
</div>
</section>
</section><!-- .settings-details -->
</div>
</article>
</div>
</div>
<footer></footer>
<div class="input">
<input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="id" autocomplete="off">
<span class="tip tip-stacked">Video restrictions go here</span>
</div>
</li>
</ol>
</section>
<hr class="divide" />
<section class="group-settings requirements">
<header>
<h2 class="title-2">Requirements</h2>
<span class="tip">Expectations of the students taking this course</span>
</header>
</section>
</form>
</article>
<aside class="content-supplementary" role="complimentary">
<div class="bit">
<h3 class="title-3">How will these settings be used</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div>
<div class="bit">
<h3 class="title-3">Other Course Settings</h3>
<nav class="nav-related">
<ul>
<li class="nav-item"><a href="">Grading</a></li>
<li class="nav-item"><a href="">Advanced Settings</a></li>
</ul>
</nav>
</div>
</aside>
</section>
</div>
</%block>
cms/templates/signup.html
......@@ -9,7 +9,7 @@
<div class="wrapper-content wrapper">
<section class="content">
<header>
<h1>Sign Up for edX Studio</h1>
<h1 class="title title-1">Sign Up for edX Studio</h1>
<a href="" class="action action-signin">Already have a Studio Account? Sign in</a>
</header>
......@@ -77,17 +77,17 @@
<h2 class="sr">Common Studio Questions</h2>
<div class="bit">
<h3>Who is Studio for?</h3>
<h3 class="title-3">Who is Studio for?</h3>
<p>Studio is for anyone that wants to create online courses that leverage the global edX platform. Our users are often faculty members, teaching assistants and course staff, and members of instructional technology groups.</p>
</div>
<div class="bit">
<h3>How technically savvy do I need to be to create courses in Studio?</h3>
<h3 class="title-3">How technically savvy do I need to be to create courses in Studio?</h3>
<p>Studio is designed to be easy to use by almost anyone familiar with common web-based authoring environments (Wordpress, Moodle, etc.). No programming knowledge is required, but for some of the more advanced features, a technical background would be helpful. As always, we are here to help, so don't hesitate to dive right in.</p>
</div>
<div class="bit">
<h3>I've never authored a course online before. Is there help?</h3>
<h3 class="title-3">I've never authored a course online before. Is there help?</h3>
<p>Absolutely. We have created an online course, edX101, that describes some best practices: from filming video, creating exercises, to the basics of running an online course. Additionally, we're always here to help, just drop us a note.</p>
</div>
</aside>
......
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