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 { .signup, .signin {
.wrapper-content { .wrapper-content {
...@@ -25,7 +26,6 @@ ...@@ -25,7 +26,6 @@
h1 { h1 {
@include font-size(32); @include font-size(32);
float: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-weight: 600; font-weight: 600;
...@@ -244,6 +244,8 @@ ...@@ -244,6 +244,8 @@
} }
} }
// ====================
// messages // messages
.message { .message {
@include font-size(14); @include font-size(14);
......
cms/static/sass/_base.scss
// ------------------------------------- // studio base styling
// // ====================
// Universal
//
// -------------------------------------
// basic reset
html { html {
font-size: 62.5%; font-size: 62.5%;
} }
body { body {
min-width: 980px; @include font-size(16);
background: $gray-l5; min-width: 980px;
font-size: 16px; background: $gray-l5;
line-height: 1.6; line-height: 1.6;
color: $baseFontColor; color: $baseFontColor;
} }
body, body, input {
input { font-family: 'Open Sans', sans-serif;
font-family: 'Open Sans', sans-serif;
} }
a { a {
text-decoration: none; text-decoration: none;
color: $blue; color: $blue;
@include transition(color .15s); @include transition(color .15s);
&:hover { &:hover {
color: #cb9c40; color: #cb9c40;
} }
} }
h1 { h1 {
float: left; @include font-size(28);
font-size: 28px; font-weight: 300;
font-weight: 300;
margin: 24px 6px;
} }
.waiting { .waiting {
opacity: 0.1; opacity: 0.1;
} }
.page-actions { .page-actions {
margin-bottom: 30px; margin-bottom: 30px;
} }
.wrapper { .wrapper {
...@@ -52,134 +47,269 @@ h1 { ...@@ -52,134 +47,269 @@ h1 {
width: 100%; 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; position: relative;
max-width: 1280px; margin-bottom: $baseline;
margin: auto; 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 { .bit {
clear: both; @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 { .sidebar {
float: right; float: right;
width: 28%; width: 28%;
} }
.left { .left {
float: left; float: left;
} }
.right { .right {
float: right; float: right;
} }
// ====================
// forms
input[type="text"], input[type="text"],
input[type="email"], input[type="email"],
input[type="password"], input[type="password"],
textarea.text { textarea.text {
padding: 6px 8px 8px; padding: 6px 8px 8px;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid $mediumGrey; border: 1px solid $mediumGrey;
border-radius: 2px; border-radius: 2px;
@include linear-gradient($lightGrey, tint($lightGrey, 90%)); @include linear-gradient($lightGrey, tint($lightGrey, 90%));
background-color: $lightGrey; background-color: $lightGrey;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: 11px; font-size: 11px;
color: $baseFontColor; color: $baseFontColor;
outline: 0; outline: 0;
&::-webkit-input-placeholder, &::-webkit-input-placeholder,
&:-moz-placeholder, &:-moz-placeholder,
&:-ms-input-placeholder { &:-ms-input-placeholder {
color: #979faf; color: #979faf;
} }
&:focus { &:focus {
@include linear-gradient($paleYellow, tint($paleYellow, 90%)); @include linear-gradient($paleYellow, tint($paleYellow, 90%));
outline: 0; outline: 0;
} }
} }
// forms - specific
input.search { input.search {
padding: 6px 15px 8px 30px; padding: 6px 15px 8px 30px;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
border-radius: 20px; border-radius: 20px;
background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5; background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
color: $baseFontColor; color: $baseFontColor;
outline: 0; outline: 0;
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: #979faf; color: #979faf;
} }
} }
label { label {
font-size: 12px; font-size: 12px;
} }
code { code {
padding: 0 4px; padding: 0 4px;
border-radius: 3px; border-radius: 3px;
background: #eee; background: #eee;
font-family: Monaco, monospace; font-family: Monaco, monospace;
} }
.CodeMirror { .CodeMirror {
font-size: 13px; font-size: 13px;
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
background: #fff; background: #fff;
} }
.text-editor { .text-editor {
width: 100%; width: 100%;
min-height: 80px; min-height: 80px;
padding: 10px; padding: 10px;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid $mediumGrey; border: 1px solid $mediumGrey;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)); @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
background-color: #edf1f5; background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset); @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
font-family: Monaco, monospace; 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-unit-item,
.new-subsection-item, .new-subsection-item,
.new-policy-item { .new-policy-item {
@include grey-button; @include grey-button;
margin: 5px 8px; margin: 5px 8px;
padding: 3px 10px 4px 10px; padding: 3px 10px 4px 10px;
font-size: 10px; font-size: 10px;
.new-folder-icon, .new-folder-icon,
.new-policy-icon, .new-policy-icon,
.new-unit-icon { .new-unit-icon {
position: relative; position: relative;
top: 2px; top: 2px;
} }
} }
.item-actions { .item-actions {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 5px; right: 5px;
.edit-button, .edit-button,
.delete-button, .delete-button,
.visibility-toggle { .visibility-toggle {
float: left; float: left;
margin-right: 13px; margin-right: 13px;
color: #a4aab7; color: #a4aab7;
} }
}
// ====================
// misc
hr.divide {
@include text-sr();
} }
.item-details { .item-details {
...@@ -194,81 +324,56 @@ code { ...@@ -194,81 +324,56 @@ code {
} }
.window { .window {
margin-bottom: 20px; // @include border-radius(3px);
border: 1px solid $mediumGrey; // @include box-shadow(0 1px 1px $shadow-l1);
border-radius: 3px; // margin-bottom: $baseline;
background: #fff; // border: 1px solid $gray-l2;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1)); // background: $white;
.window-contents { .window-contents {
padding: 20px; 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);
}
label { .header {
display: block; padding: 6px 14px;
margin-bottom: 6px; border-bottom: 1px solid $mediumGrey;
font-weight: 700; border-radius: 2px 2px 0 0;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
&.inline-label { background-color: $lightBluishGrey;
display: inline; @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);
.description { }
display: block;
font-size: 11px;
font-weight: 400;
font-style: italic;
line-height: 1.3;
color: #999;
}
}
.row { label {
margin-bottom: 10px; display: block;
padding-bottom: 10px; margin-bottom: 6px;
border-bottom: 1px solid #cbd1db; font-weight: 700;
}
}
body.hide-wip { &.inline-label {
.wip, .wip-box { display: inline;
display: none !important;
} }
}
body.show-wip { .description {
.wip { display: block;
outline: 1px solid #f00 !important; font-size: 11px;
position: relative; font-weight: 400;
font-style: italic;
line-height: 1.3;
color: #999;
} }
}
.wip-box { .row {
@extend .wip; margin-bottom: 10px;
&:after { padding-bottom: 10px;
content: "WIP"; border-bottom: 1px solid #cbd1db;
font-size: 8px; }
padding: 2px;
background: #f00;
color: #fff;
@include position(absolute, 0px 0px 0 0);
}
}
} }
.waiting { // ====================
} // system notifications
.toast-notification { .toast-notification {
display: none; display: none;
position: fixed; position: fixed;
...@@ -328,50 +433,50 @@ body.show-wip { ...@@ -328,50 +433,50 @@ body.show-wip {
} }
.waiting { .waiting {
position: relative; position: relative;
&:before { &:before {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 999998; z-index: 999998;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: inherit; border-radius: inherit;
background: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .9);
} }
&:after { &:after {
content: ''; content: '';
@extend .spinner-icon; @extend .spinner-icon;
display: block; display: block;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin-left: -10px; margin-left: -10px;
margin-top: -10px; margin-top: -10px;
z-index: 999999; z-index: 999999;
} }
} }
.waiting-inline { .waiting-inline {
&:after { &:after {
content: ''; content: '';
@extend .spinner-icon; @extend .spinner-icon;
} }
} }
.new-button { .new-button {
@include green-button; @include green-button;
font-size: 13px; font-size: 13px;
padding: 8px 20px 10px; padding: 8px 20px 10px;
text-align: center; text-align: center;
&.big { &.big {
display: block; display: block;
} }
} }
.edit-button.standard, .edit-button.standard,
...@@ -391,11 +496,12 @@ body.show-wip { ...@@ -391,11 +496,12 @@ body.show-wip {
.delete-button.standard { .delete-button.standard {
&:hover { &:hover {
background-color: tint($orange, 75%); background-color: tint($orange, 75%);
} }
} }
// misc
.tooltip { .tooltip {
position: absolute; position: absolute;
top: 0; top: 0;
......
cms/static/sass/_header.scss
...@@ -29,6 +29,10 @@ ...@@ -29,6 +29,10 @@
margin: 0 auto; margin: 0 auto;
color: $gray-l1; color: $gray-l1;
} }
nav .nav-item {
display: inline-block;
}
} }
// ==================== // ====================
...@@ -51,9 +55,6 @@ ...@@ -51,9 +55,6 @@
// general nav styles // general nav styles
// ==================== // ====================
nav .nav-item {
display: inline-block;
}
// ==================== // ====================
...@@ -81,10 +82,10 @@ nav .nav-item { ...@@ -81,10 +82,10 @@ nav .nav-item {
// specific elements - course name/info // specific elements - course name/info
.info-course { .info-course {
@include font-size(14);
position: relative; position: relative;
margin: -3px ($baseline/2) 0 0; margin: -3px ($baseline/2) 0 0;
padding-right: ($baseline*0.75); padding-right: ($baseline*0.75);
@include font-size(14);
&:before { &:before {
@extend .faded-vertical-divider; @extend .faded-vertical-divider;
......
cms/static/sass/_index.scss
...@@ -311,6 +311,11 @@ ...@@ -311,6 +311,11 @@
.content-cta { .content-cta {
border-top: 1px solid $gray-l4; border-top: 1px solid $gray-l4;
header {
border: none;
margin: 0;
padding: 0;
}
.list-actions { .list-actions {
position: relative; position: relative;
......
cms/static/sass/_settings.scss
.settings { // Studio - Course Settings
.settings-overview { // ====================
@extend .window; body.course.settings {
@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);
}
}
}
.settings-page-section { .content-primary, .content-supplementary {
> .alert { @include box-sizing(border-box);
display: none; float: left;
}
&.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;
}
&.tall { .content-primary {
height: 200px; @extend .window;
} width: flex-grid(9, 12);
margin-right: flex-gutter();
}
&.short { .group-settings {
min-width: 100px; margin: 0 0 ($baseline*2) 0;
width: 25%;
}
&.date { header {
display: block !important; @include clearfix();
}
&.time { .title-2 {
width: 85px !important; width: flex-grid(4, 9);
min-width: 85px !important; margin: 0 flex-gutter() 0 0;
float: left;
} }
&:disabled { .tip {
border: none; @include font-size(13);
@include box-shadow(none); width: flex-grid(5, 9);
padding: 0; float: right;
color: $darkGrey !important; margin-top: ($baseline/2);
font-weight: bold; text-align: right;
background: #fff; color: $gray-l2;
} }
} }
textarea.tinymce { // basic layout/elements
border: 1px solid $darkGrey; .title-2 {
height: 300px;
}
input[type="checkbox"], input[type="radio"] {
} }
input:disabled + .copy > label, input:disabled + .label { .title-3 {
color: $mediumGrey;
}
.input-default input, .input-default textarea {
color: $mediumGrey;
background: $lightGrey;
}
::-webkit-input-placeholder {
color: $mediumGrey;
font-size: 13px;
} }
:-moz-placeholder {
color: $mediumGrey;
font-size: 13px;
}
.tip {
color: $mediumGrey;
font-size: 13px;
}
// form layouts // form basics
.row { .list-input {
margin-bottom: 30px; margin: 0;
padding-bottom: 30px; padding: 0;
border-bottom: 1px solid $lightGrey; list-style: none;
&: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;
}
// structural field, not semantic fields per se
.field { .field {
display: inline-block; margin: 0 0 ($baseline*0.75) 0;
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;
}
input, .input, textarea { &:last-child {
margin-bottom: 0;
} }
.tip-stacked { &.required {
margin-top: 0;
}
}
}
// multi stacked label {
&.multi-stacked { font-weight: 600;
.group {
input, .input, textarea {
min-width: 370px;
width: 370px;
}
}
} }
// multi-field inline label:after {
&.multi-inline { margin-left: ($baseline/4);
@include clearfix; content: "*";
.group {
float: left;
margin-right: 20px;
&:nth-child(2) {
margin-right: 0;
}
.input, input, textarea {
width: 100%;
}
}
} }
} }
// input-list label, input, textarea {
.input-list { display: block;
}
.input {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dotted $lightGrey;
@include clearfix();
&:last-child { label {
border: 0; @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, textarea {
.input-radio { @include font-size(16);
@include clearfix(); height: 100%;
width: 100%;
padding: ($baseline/2);
input { &.long {
display: block; width: 100%;
float: left;
margin-right: 10px;
} }
.copy { &.short {
position: relative; width: 25%;
top: -5px;
float: left;
width: 350px;
} }
label { ::-webkit-input-placeholder {
display: block; color: $gray-l4;
margin-bottom: 0;
} }
.tip { :-moz-placeholder {
display: block; color: $gray-l3;
margin-top: 0;
} }
.message-error { ::-moz-placeholder {
color: $gray-l3;
} }
}
.input-checkbox {
}
// enumerated inputs :-ms-input-placeholder {
&.enum { color: $gray-l3;
} }
}
// layout - aligned label/field pairs
&.row-col2 {
> label, .label {
width: 200px;
}
.field {
width: 400px ! important;
}
&.multi-inline {
@include clearfix();
.group {
width: 170px;
}
} }
}
.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);
}
textarea.long {
// editing controls - removing height: ($baseline*5);
.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;
} }
.remove-doc-data { input[type="checkbox"] {
display: inline-block; display: inline-block;
margin-top: 0; margin-right: ($baseline/4);
width: 150px; width: auto;
} height: auto;
}
}
// specific sections & + label {
.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 {
display: inline-block; display: inline-block;
} }
} }
#course-faculty-bio-input { .tip {
margin-bottom: 0; @include font-size(13);
}
.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 {
display: block; 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) { .field-group {
background: #ef54a1; @include clearfix();
} margin: 0 0 ($baseline/2) 0;
&:nth-child(5), .field {
&.bar-fail { display: block;
background: #fb336c; width: 47%;
} border-bottom: none;
margin: 0 $baseline 0 0;
padding-bottom: 0;
.letter-grade { &:nth-child(odd) {
display: block; float: left;
margin: 10px 15px 0 0;
font-size: 16px;
font-weight: 700;
line-height: 14px;
} }
.range { &:nth-child(even) {
display: block; float: right;
margin-right: 15px; margin-right: 0;
font-size: 10px;
line-height: 12px;
} }
.drag-bar { input, textarea {
position: absolute; width: 100%;
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;
}
} }
} }
} }
} }
} }
.content-supplementary {
width: flex-grid(3, 12);
}
} }
\ No newline at end of file
cms/templates/login.html
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<div class="wrapper-content wrapper"> <div class="wrapper-content wrapper">
<section class="content"> <section class="content">
<header> <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> <a href="" class="action action-signin">Don't have a Studio Account? Sign up!</a>
</header> </header>
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<h2 class="sr">Studio Support</h2> <h2 class="sr">Studio Support</h2>
<div class="bit"> <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> <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> </div>
</aside> </aside>
......
cms/templates/settings.html
<%inherit file="base.html" /> <%inherit file="base.html" />
<%block name="title">Schedule &amp; Details</%block> <%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'/> <%namespace name='static' file='static_content.html'/>
<%! <%!
from contentstore import utils from contentstore import utils
%> %>
<%block name="jsextra"> <%block name="jsextra">
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" /> <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> <script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
...@@ -37,214 +35,99 @@ from contentstore import utils ...@@ -37,214 +35,99 @@ from contentstore import utils
</%block> </%block>
<%block name="content"> <%block name="content">
<!-- --> <div class="wrapper-content wrapper">
<div class="main-wrapper"> <section class="content">
<div class="inner-wrapper"> <header>
<h1>Settings</h1> <span class="title-sub">Settings</span>
<article class="settings-overview"> <h1 class="title-1">Schedule &amp; Details</h1>
<div class="settings-page-section main-column"> </header>
<section class="settings-details is-shown"> <div class="introduction">
<h2 class="title">Course Details</h2> <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>
<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="row row-col2"> <article class="content-primary" role="main">
<label for="course-organization">Organization:</label> <form id="settings_details" method="post" action="">
<div class="field"> <section class="group-settings basic">
<div class="input"> <header>
<input type="text" class="long" id="course-organization" value="[Course Organization]" disabled="disabled"> <h2 class="title-2">Basic Information</h2>
<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> <span class="tip">The nuts and bolts of your course</span>
</div> </header>
</div>
</div>
<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"> </section>
<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>
<div class="row row-col2"> <hr class="divide" />
<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>
<div class="field field-additional"> <section class="group-settings schedule">
<div class="input multi multi-inline" id="enrollment-end"> <header>
<div class="group"> <h2 class="title-2">Course Schedule</h2>
<label for="course-enrollment-end-date">End Date</label> <span class="tip">Important steps and segments of your course</span>
<input type="text" class="end-date date end" id="course-enrollment-end-date" placeholder="MM/DD/YYYY" autocomplete="off"> </header>
<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>
<!-- <div class="row row-col2"> </section>
<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>
<div class="row row-col2"> <hr class="divide" />
<label for="course-introduction-video">Introduction Video:</label>
<div class="field"> <section class="group-settings marketing">
<div class="input input-existing"> <header>
<div class="current current-course-introduction-video"> <h2 class="title-2">Introducing Your Course</h2>
<iframe width="380" height="215" src="" frameborder="0" allowfullscreen></iframe> <span class="tip">Information for perspective students</span>
</header>
<a href="#" class="remove-item remove-course-introduction-video remove-video-data"><span class="delete-icon"></span> Delete Video</a>
</div> <ol class="list-input">
</div> <li class="field text" id="field-course-overview">
<label for="course-overview">Course Overview:</label>
<div class="input"> <input id="email" type="email" name="email" placeholder="e.g. jane.doe@gmail.com" />
<input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="id" autocomplete="off"> <textarea class="tinymce text-editor" id="course-overview"></textarea>
<span class="tip tip-stacked">Video restrictions go here</span> <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> </li>
</div>
</div> <li class="field video" id="field-course-introduction-video">
</section><!-- .settings-details-marketing --> <div class="input input-existing">
<div class="current current-course-introduction-video">
<hr class="divide" /> <iframe width="100%" height="" src="" frameborder="0" allowfullscreen></iframe>
<section class="settings-details-requirements"> <a href="#" class="remove-item remove-course-introduction-video remove-video-data"><span class="delete-icon"></span> Delete Video</a>
<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>
</div> </div>
</div> </div>
</section>
</section><!-- .settings-details -->
</div> <div class="input">
</article> <input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="id" autocomplete="off">
</div> <span class="tip tip-stacked">Video restrictions go here</span>
</div> </div>
<footer></footer> </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> </%block>
cms/templates/signup.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div class="wrapper-content wrapper"> <div class="wrapper-content wrapper">
<section class="content"> <section class="content">
<header> <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> <a href="" class="action action-signin">Already have a Studio Account? Sign in</a>
</header> </header>
...@@ -77,17 +77,17 @@ ...@@ -77,17 +77,17 @@
<h2 class="sr">Common Studio Questions</h2> <h2 class="sr">Common Studio Questions</h2>
<div class="bit"> <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> <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>
<div class="bit"> <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> <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>
<div class="bit"> <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> <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> </div>
</aside> </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