Skip to content

E
edx-platform
Commit dc07e737 by Brian Talbot
Options

studio - settings: revamp of tabs to views WIP

parent 9f5eeaf8
Showing with 309 additions and 940 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 {
@include font-size(16);
min-width: 980px; min-width: 980px;
background: $gray-l5; background: $gray-l5;
font-size: 16px;
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;
} }
...@@ -32,10 +29,8 @@ a { ...@@ -32,10 +29,8 @@ a {
} }
h1 { h1 {
float: left; @include font-size(28);
font-size: 28px;
font-weight: 300; font-weight: 300;
margin: 24px 6px;
} }
.waiting { .waiting {
...@@ -52,6 +47,114 @@ h1 { ...@@ -52,6 +47,114 @@ h1 {
width: 100%; width: 100%;
} }
// ====================
// layout - basic
.wrapper-content {
margin: 0;
padding: 0 $baseline;
position: relative;
}
.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;
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 {
.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 { .main-wrapper {
position: relative; position: relative;
margin: 0 40px; margin: 0 40px;
...@@ -80,6 +183,9 @@ h1 { ...@@ -80,6 +183,9 @@ h1 {
float: right; float: right;
} }
// ====================
// forms
input[type="text"], input[type="text"],
input[type="email"], input[type="email"],
input[type="password"], input[type="password"],
...@@ -108,6 +214,7 @@ textarea.text { ...@@ -108,6 +214,7 @@ textarea.text {
} }
} }
// 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);
...@@ -152,6 +259,22 @@ code { ...@@ -152,6 +259,22 @@ code {
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 {
...@@ -182,6 +305,13 @@ code { ...@@ -182,6 +305,13 @@ code {
} }
} }
// ====================
// misc
hr.divide {
@include text-sr();
}
.item-details { .item-details {
float: left; float: left;
padding: 10px 0; padding: 10px 0;
...@@ -194,11 +324,11 @@ code { ...@@ -194,11 +324,11 @@ 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;
...@@ -241,34 +371,9 @@ code { ...@@ -241,34 +371,9 @@ code {
} }
} }
body.hide-wip { // ====================
.wip, .wip-box {
display: none !important;
}
}
body.show-wip {
.wip {
outline: 1px solid #f00 !important;
position: relative;
}
.wip-box {
@extend .wip;
&:after {
content: "WIP";
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;
...@@ -396,6 +501,7 @@ body.show-wip { ...@@ -396,6 +501,7 @@ body.show-wip {
} }
} }
// 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 {
> .alert {
display: none;
&.is-shown {
display: block;
}
}
> section { .content-primary, .content-supplementary {
display: none; @include box-sizing(border-box);
margin-bottom: 40px; float: left;
&.is-shown {
display: block;
}
&:last-child {
border-bottom: none;
} }
> .title { .content-primary {
margin-bottom: 30px; @extend .window;
font-size: 28px; width: flex-grid(9, 12);
font-weight: 300; margin-right: flex-gutter();
color: $blue;
} }
> section { .group-settings {
margin-bottom: 100px; margin: 0 0 ($baseline*2) 0;
@include clearfix;
header { header {
@include clearfix; @include clearfix();
border-bottom: 1px solid $mediumGrey;
margin-bottom: 20px;
padding-bottom: 10px;
h3 { .title-2 {
color: $darkGrey; width: flex-grid(4, 9);
margin: 0 flex-gutter() 0 0;
float: left; float: left;
margin: 0 40px 0 0;
text-transform: uppercase;
} }
.detail { .tip {
@include font-size(13);
width: flex-grid(5, 9);
float: right; float: right;
margin-top: 3px; margin-top: ($baseline/2);
color: $mediumGrey; text-align: right;
font-size: 13px; color: $gray-l2;
}
}
&: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 { // basic layout/elements
@include transition(all 1s ease-in-out); .title-2 {
@include box-sizing(border-box);
font-size: 15px;
&.long {
width: 100%;
min-width: 400px;
}
&.tall {
height: 200px;
}
&.short {
min-width: 100px;
width: 25%;
} }
&.date { .title-3 {
display: block !important;
}
&.time {
width: 85px !important;
min-width: 85px !important;
} }
&:disabled { // form basics
border: none; .list-input {
@include box-shadow(none); margin: 0;
padding: 0; padding: 0;
color: $darkGrey !important; list-style: none;
font-weight: bold;
background: #fff;
}
}
textarea.tinymce {
border: 1px solid $darkGrey;
height: 300px;
}
input[type="checkbox"], input[type="radio"] {
}
input:disabled + .copy > label, input:disabled + .label {
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
.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;
}
// 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 { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
input, .input, textarea { &.required {
}
.tip-stacked {
margin-top: 0;
}
}
}
// multi stacked
&.multi-stacked {
.group { label {
input, .input, textarea { font-weight: 600;
min-width: 370px;
width: 370px;
}
}
}
// multi-field inline
&.multi-inline {
@include clearfix;
.group {
float: left;
margin-right: 20px;
&:nth-child(2) {
margin-right: 0;
}
.input, input, textarea {
width: 100%;
}
}
}
}
// input-list
.input-list {
.input {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dotted $lightGrey;
@include clearfix();
&:last-child {
border: 0;
} }
.row { label:after {
} margin-left: ($baseline/4);
content: "*";
} }
} }
//radio buttons and checkboxes label, input, textarea {
.input-radio {
@include clearfix();
input {
display: block; display: block;
float: left;
margin-right: 10px;
}
.copy {
position: relative;
top: -5px;
float: left;
width: 350px;
} }
label { label {
display: block; @include font-size(14);
margin-bottom: 0; @include transition(color, 0.15s, ease-in-out);
} margin: 0 0 ($baseline/4) 0;
.tip {
display: block;
margin-top: 0;
}
.message-error {
&.is-focused {
color: $blue;
} }
} }
.input-checkbox { input, textarea {
@include font-size(16);
height: 100%;
width: 100%;
padding: ($baseline/2);
&.long {
width: 100%;
} }
// enumerated inputs &.short {
&.enum { width: 25%;
}
} }
// layout - aligned label/field pairs ::-webkit-input-placeholder {
&.row-col2 { color: $gray-l4;
> label, .label {
width: 200px;
} }
.field { :-moz-placeholder {
width: 400px ! important; color: $gray-l3;
} }
&.multi-inline { ::-moz-placeholder {
@include clearfix(); color: $gray-l3;
.group {
width: 170px;
}
}
} }
.field-additional { :-ms-input-placeholder {
margin-left: 204px; color: $gray-l3;
} }
} }
// editing controls - adding textarea.long {
.new-item, .replace-item { height: ($baseline*5);
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[type="checkbox"] {
.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; display: inline-block;
width: 220px; margin-right: ($baseline/4);
overflow: hidden; width: auto;
text-overflow: ellipsis; height: auto;
}
.remove-doc-data { & + label {
display: inline-block; display: inline-block;
margin-top: 0;
width: 150px;
}
} }
} }
// specific sections .tip {
.settings-details { @include font-size(13);
}
.settings-faculty {
.settings-faculty-members {
> header {
display: none;
}
.field .multi {
display: block; display: block;
margin-bottom: 40px; margin-top: ($baseline/4);
padding: 20px; color: $gray-l3;
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;
}
}
#course-faculty-bio-input {
margin-bottom: 0;
} }
.new-course-faculty-item {
} }
.current-faculty-photo { .field-group {
padding: 0; @include clearfix();
margin: 0 0 ($baseline/2) 0;
img { .field {
display: block; display: block;
@include box-shadow(0 1px 3px rgba(0,0,0,0.1)); width: 47%;
padding: 10px; border-bottom: none;
border: 2px solid $mediumGrey; margin: 0 $baseline 0 0;
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; padding-bottom: 0;
}
}
}
}
}
.settings-handouts {
}
.settings-problems {
> section {
&.is-shown {
display: block;
}
}
}
.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 { &:nth-child(odd) {
// 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; 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 { &:nth-child(even) {
left: 20%; float: right;
} margin-right: 0;
&.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) { input, textarea {
background: #4fe696; width: 100%;
} }
&:nth-child(2) {
background: #ffdf7e;
} }
&:nth-child(3) {
background: #ffb657;
} }
&:nth-child(4) {
background: #ef54a1;
}
&:nth-child(5),
&.bar-fail {
background: #fb336c;
} }
.letter-grade {
display: block;
margin: 10px 15px 0 0;
font-size: 16px;
font-weight: 700;
line-height: 14px;
} }
.range { .content-supplementary {
display: block; width: flex-grid(3, 12);
margin-right: 15px;
font-size: 10px;
line-height: 12px;
}
.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;
}
}
}
}
}
} }
} }
\ 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,178 +35,58 @@ from contentstore import utils ...@@ -37,178 +35,58 @@ 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">
<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> <header>
<h3>Basic Information</h3> <span class="title-sub">Settings</span>
<span class="detail">The nuts and bolts of your course</span> <h1 class="title-1">Schedule &amp; Details</h1>
</header> </header>
<div class="row row-col2"> <div class="introduction">
<label for="course-name">Course Name:</label> <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 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">
<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> </div>
<div class="row row-col2"> <article class="content-primary" role="main">
<label for="course-number">Course Number:</label> <form id="settings_details" method="post" action="">
<div class="field"> <section class="group-settings basic">
<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> <header>
<h3>Course Schedule</h3> <h2 class="title-2">Basic Information</h2>
<span class="detail">Important steps and segments of your course</span> <span class="tip">The nuts and bolts of your course</span>
</header> </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>
<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>
<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"> </section>
<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"> <hr class="divide" />
<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> <section class="group-settings schedule">
</div> <header>
</div> <h2 class="title-2">Course Schedule</h2>
<span class="tip">Important steps and segments of your course</span>
</header>
<div class="input"> </section>
<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" /> <hr class="divide" />
<section class="setting-details-marketing"> <section class="group-settings marketing">
<header> <header>
<h3>Introducing Your Course</h3> <h2 class="title-2">Introducing Your Course</h2>
<span class="detail">Information for perspective students</span> <span class="tip">Information for perspective students</span>
</header> </header>
<div class="row row-col2"> <ol class="list-input">
<li class="field text" id="field-course-overview">
<label for="course-overview">Course Overview:</label> <label for="course-overview">Course Overview:</label>
<div class="field"> <input id="email" type="email" name="email" placeholder="e.g. jane.doe@gmail.com" />
<div class="input"> <textarea class="tinymce text-editor" id="course-overview"></textarea>
<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> <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>
<div class="row row-col2"> <li class="field video" id="field-course-introduction-video">
<label for="course-introduction-video">Introduction Video:</label>
<div class="field">
<div class="input input-existing"> <div class="input input-existing">
<div class="current current-course-introduction-video"> <div class="current current-course-introduction-video">
<iframe width="380" height="215" src="" frameborder="0" allowfullscreen></iframe> <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> <a href="#" class="remove-item remove-course-introduction-video remove-video-data"><span class="delete-icon"></span> Delete Video</a>
</div> </div>
...@@ -218,33 +96,38 @@ from contentstore import utils ...@@ -218,33 +96,38 @@ from contentstore import utils
<input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="id" autocomplete="off"> <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> <span class="tip tip-stacked">Video restrictions go here</span>
</div> </div>
</div> </li>
</div> </ol>
</section><!-- .settings-details-marketing --> </section>
<hr class="divide" /> <hr class="divide" />
<section class="settings-details-requirements"> <section class="group-settings requirements">
<header> <header>
<h3>Requirements</h3> <h2 class="title-2">Requirements</h2>
<span class="detail">Expectations of the students taking this course</span> <span class="tip">Expectations of the students taking this course</span>
</header> </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>
</section> </section>
</section><!-- .settings-details --> </form>
</div>
</article> </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>
<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> </div>
<footer></footer> </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