Skip to content

E
edx-platform
Commit dc07e737 by Brian Talbot
Options

studio - settings: revamp of tabs to views WIP

parent 9f5eeaf8
Showing with 169 additions and 55 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 {
@include font-size(16);
min-width: 980px;
background: $gray-l5;
font-size: 16px;
line-height: 1.6;
color: $baseFontColor;
}
body,
input {
body, input {
font-family: 'Open Sans', sans-serif;
}
......@@ -32,10 +29,8 @@ a {
}
h1 {
float: left;
font-size: 28px;
@include font-size(28);
font-weight: 300;
margin: 24px 6px;
}
.waiting {
......@@ -52,6 +47,114 @@ h1 {
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 {
position: relative;
margin: 0 40px;
......@@ -80,6 +183,9 @@ h1 {
float: right;
}
// ====================
// forms
input[type="text"],
input[type="email"],
input[type="password"],
......@@ -108,6 +214,7 @@ textarea.text {
}
}
// forms - specific
input.search {
padding: 6px 15px 8px 30px;
@include box-sizing(border-box);
......@@ -152,6 +259,22 @@ code {
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 {
......@@ -182,6 +305,13 @@ code {
}
}
// ====================
// misc
hr.divide {
@include text-sr();
}
.item-details {
float: left;
padding: 10px 0;
......@@ -194,11 +324,11 @@ 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));
// @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;
......@@ -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 {
display: none;
position: fixed;
......@@ -396,6 +501,7 @@ body.show-wip {
}
}
// 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/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/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