Skip to content

E
edx-platform
Commit 1144b0ee by Brian Talbot
Options

studio - soft landing UI: initial header and templating work

parent 604bfcc0
Showing with 313 additions and 98 deletions
cms/static/sass/_base.scss
......@@ -4,9 +4,13 @@
//
// -------------------------------------
html {
font-size: 62.5%;
}
body {
min-width: 980px;
background: $m-gray-l;
background: $gray-l5;
font-size: 16px;
line-height: 1.6;
color: $baseFontColor;
......@@ -76,11 +80,6 @@ h1 {
float: right;
}
footer {
clear: both;
height: 100px;
}
input[type="text"],
input[type="email"],
input[type="password"],
......
cms/static/sass/_footer.scss 0 → 100644
// footer
.wrapper-footer {
margin: ($baseline*1.5) 0 $baseline 0;
padding: $baseline;
position: relative;
width: 100%;
}
footer {
@include clearfix();
@include font-size(13);
width: flex-grid(12);
margin: 0 auto;
padding-top: $baseline;
border-top: 1px solid $gray-l4;
color: $gray;
.colophon {
width: flex-grid(4, 12);
float: left;
margin-right: flex-gutter(2);
}
.nav-peripheral {
width: flex-grid(6, 12);
float: right;
text-align: right;
.nav-item {
display: inline-block;
margin-right: $baseline;
&:last-child {
margin-right: 0;
}
}
}
a {
color: $gray;
&:hover, &:active {
color: $blue;
}
}
}
\ No newline at end of file
cms/static/sass/_header.scss
......@@ -2,7 +2,7 @@
.wrapper-header {
margin: 0 0 ($baseline*1.5) 0;
padding: $baseline;
border-bottom: 1px solid tint($m-gray, 50%);
border-bottom: 1px solid $gray;
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
background: $white;
height: 76px;
......@@ -27,7 +27,7 @@
color: $lightGrey;
}
.branding, .info-course, .nav-course, .nav-account {
.branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch {
display: inline-block;
vertical-align: top;
}
......@@ -47,35 +47,13 @@
height: 32px;
background: transparent url('../img/logo-edx-studio.png') 0 0 no-repeat;
}
&:before {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 50px;
position: absolute;
right: 1px;
top: -8px;
width: 1px;
}
&:after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 50px;
position: absolute;
right: 0px;
top: -12px;
width: 1px;
}
}
.info-course {
position: relative;
max-width: 200px;
padding-right: 15px;
font-size: 14px;
@include font-size(14);
&:before {
@extend .faded-vertical-divider;
......@@ -104,7 +82,7 @@
}
.course-number {
font-size: 12px;
@include font-size(12);
}
.course-title {
......@@ -112,24 +90,22 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 16px;
font-weight: 600;
@include font-size(16);
font-weight: 550;
}
}
// course info
.nav-course {
width: 275px;
width: 335px;
margin-top: -($baseline/4);
font-size: 14px;
ol {
@include clearfix();
}
@include font-size(14);
.nav-item {
> ol > .nav-item {
display: inline-block;
vertical-align: bottom;
width: 100px;
margin: 0 ($baseline/2) 0 0;
&:last-child {
......@@ -140,6 +116,7 @@
display: block;
padding: 5px;
text-transform: uppercase;
font-weight: 550;
&:hover, &:active {
color: $blue;
......@@ -147,7 +124,7 @@
.label-prefix {
display: block;
font-size: 11px;
@include font-size(11);
}
.ss-icon {
......@@ -179,13 +156,14 @@
}
}
// account-based nav
.nav-account {
float: right;
max-width: 300px;
min-width: 175px;
width: 20%;
margin-top: 10px;
font-size: 14px;
@include font-size(14);
text-align: right;
.nav-account-username {
......@@ -193,7 +171,7 @@
display: inline-block;
vertical-align: middle;
margin-right: 3px;
font-size: 12px;
@include font-size(12);
}
.account-username {
......@@ -218,16 +196,16 @@
position: absolute;
top: 30px;
width: 125px;
border: 1px solid tint($m-gray, 50%);
border: 1px solid $gray-l2;
padding: ($baseline/4) ($baseline/2);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
background: $white;
li {
margin: 0 0 ($baseline/4) 0;
border-bottom: 1px solid tint($m-gray, 75%);
border-bottom: 1px solid $gray-l5;
padding: 0 0($baseline/4) 0;
font-size: 13px;
@include font-size(13);
&:last-child {
margin-bottom: 0;
......@@ -323,6 +301,86 @@
}
}
// is-signed in
.is-signedin {
&.course .branding {
&:before {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 50px;
position: absolute;
right: 1px;
top: -8px;
width: 1px;
}
&:after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 50px;
position: absolute;
right: 0px;
top: -12px;
width: 1px;
}
}
}
// not signed in
.not-signedin {
// unauthenticated nav
.nav-not-signedin {
float: right;
margin-top: ($baseline/4);
.nav-item {
@include font-size(16);
display: inline-block;
vertical-align: middle;
margin: 0 $baseline 0 0;
font-weight: 550;
&:last-child {
margin-right: 0;
}
.action {
margin-top: -($baseline/4);
display: inline-block;
padding: ($baseline/4) ($baseline/2);
font-weight: 550;
}
}
// specific items
.nav-not-signedin-help {
}
.nav-not-signedin-signup {
.action-signup {
@include blue-button;
@include transition(all .15s);
}
}
.nav-not-signedin-signin {
.action-signin {
@include white-button;
@include transition(all .15s);
}
}
}
}
// js enabled
.js {
......
cms/static/sass/_variables.scss
$baseline: 20px;
// grid
$gw-column: 80px;
$gw-gutter: 20px;
$fg-column: $gw-column;
$fg-gutter: $gw-gutter;
$fg-max-columns: 12;
$fg-max-width: 1400px;
$fg-min-width: 810px;
$fg-max-width: 1280px;
$fg-min-width: 980px;
// type
$sans-serif: 'Open Sans', $verdana;
$body-line-height: golden-ratio(.875em, 1);
$error-red: rgb(253, 87, 87);
$white: rgb(255,255,255);
// colors - new for re-org
$black: rgb(0,0,0);
$pink: rgb(182,37,104);
$error-red: rgb(253, 87, 87);
$white: rgb(255,255,255);
$gray: rgb(127,127,127);
$gray-l1: tint($gray,20%);
$gray-l2: tint($gray,40%);
$gray-l3: tint($gray,60%);
$gray-l4: tint($gray,80%);
$gray-l5: tint($gray,90%);
$gray-d1: shade($gray,20%);
$gray-d2: shade($gray,40%);
$gray-d3: shade($gray,60%);
$gray-d4: shade($gray,80%);
$blue: rgb(85, 151, 221);
$blue-l1: tint($blue,20%);
$blue-l2: tint($blue,40%);
$blue-l3: tint($blue,60%);
$blue-l4: tint($blue,80%);
$blue-l5: tint($blue,90%);
$blue-d1: shade($blue,20%);
$blue-d2: shade($blue,40%);
$blue-d3: shade($blue,60%);
$blue-d4: shade($blue,80%);
$pink: rgb(183, 37, 103);
$pink-l1: tint($pink,20%);
$pink-l2: tint($pink,40%);
$pink-l3: tint($pink,60%);
$pink-l4: tint($pink,80%);
$pink-l5: tint($pink,90%);
$pink-d1: shade($pink,20%);
$pink-d2: shade($pink,40%);
$pink-d3: shade($pink,60%);
$pink-d4: shade($pink,80%);
$green: rgb(37, 184, 90);
$green-l1: tint($green,20%);
$green-l2: tint($green,40%);
$green-l3: tint($green,60%);
$green-l4: tint($green,80%);
$green-l5: tint($green,90%);
$green-d1: shade($green,20%);
$green-d2: shade($green,40%);
$green-d3: shade($green,60%);
$green-d4: shade($green,80%);
$yellow: rgb(231, 214, 143);
$yellow-l1: tint($yellow,20%);
$yellow-l2: tint($yellow,40%);
$yellow-l3: tint($yellow,60%);
$yellow-l4: tint($yellow,80%);
$yellow-l5: tint($yellow,90%);
$yellow-d1: shade($yellow,20%);
$yellow-d2: shade($yellow,40%);
$yellow-d3: shade($yellow,60%);
$yellow-d4: shade($yellow,80%);
$shadow: rgba(0,0,0,0.2);
$shadow-l1: rgba(0,0,0,0.1);
$shadow-d1: rgba(0,0,0,0.4);
// colors - inherited
$baseFontColor: #3c3c3c;
$offBlack: #3c3c3c;
$black: rgb(0,0,0);
$white: rgb(255,255,255);
$blue: #5597dd;
$orange: #edbd3c;
$red: #b20610;
$green: #108614;
......@@ -36,8 +94,4 @@ $brightGreen: rgb(22, 202, 87);
$disabledGreen: rgb(124, 206, 153);
$darkGreen: rgb(52, 133, 76);
$lightBluishGrey: rgb(197, 207, 223);
$lightBluishGrey2: rgb(213, 220, 228);
// new colors - progress for re-org
$m-gray-l: rgb(247, 247, 247);
$m-gray: rgb(67,67,67);
$lightBluishGrey2: rgb(213, 220, 228);
\ No newline at end of file
cms/static/sass/base-style.scss
@import 'bourbon/bourbon';
@import 'bourbon/addons/button';
@import 'vendor/normalize';
@import 'keyframes';
......@@ -11,6 +12,7 @@
@import "extends";
@import "base";
@import "header";
@import "footer";
@import "dashboard";
@import "courseware";
@import "subsection";
......
cms/templates/base.html
......@@ -5,6 +5,10 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><%block name="title"></%block></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="path_prefix" content="${MITX_ROOT_URL}">
<%static:css group='base-style'/>
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/skins/simple/style.css')}" />
......@@ -12,16 +16,11 @@
<link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-symbolicons-block.css')}" />
<link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-standard.css')}" />
<title><%block name="title"></%block></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="path_prefix" content="${MITX_ROOT_URL}">
<%block name="header_extras"></%block>
</head>
<body class="<%block name='bodyclass'></%block> hide-wip">
<%include file="widgets/header.html" args="active_tab=active_tab"/>
<%include file="widgets/header.html" />
<%include file="courseware_vendor_js.html"/>
<script type="text/javascript" src="${static.url('js/vendor/json2.js')}"></script>
......@@ -47,9 +46,9 @@
</script>
<%block name="content"></%block>
<%include file="widgets/footer.html" />
<%block name="jsextra"></%block>
</body>
</html>
......
cms/templates/course_index.html
<%inherit file="base.html" />
<%block name="title">Course Manager</%block>
<%include file="widgets/header.html"/>
<%block name="content">
......
cms/templates/course_info.html
......@@ -3,7 +3,8 @@
<!-- TODO decode course # from context_course into title -->
<%block name="title">Course Info</%block>
<%block name="bodyclass">course-info</%block>
<%block name="bodyclass">is-signedin course course-info updates</%block>
<%block name="jsextra">
<script type="text/javascript" src="${static.url('js/template_loader.js')}"></script>
......
cms/templates/edit-static-page.html
<%inherit file="base.html" />
<%! from django.core.urlresolvers import reverse %>
<%block name="title">Edit Static Page</%block>
<%block name="bodyclass">edit-static-page</%block>
<%block name="bodyclass">is-signedin course pages edit-static-page</%block>
<%block name="content">
<div class="main-wrapper">
......
cms/templates/edit-tabs.html
<%inherit file="base.html" />
<%! from django.core.urlresolvers import reverse %>
<%block name="title">Tabs</%block>
<%block name="bodyclass">static-pages</%block>
<%block name="bodyclass">is-signedin course pages static-pages</%block>
<%block name="jsextra">
<script type='text/javascript'>
......
cms/templates/edit_subsection.html
......@@ -7,8 +7,9 @@
%>
<%! from django.core.urlresolvers import reverse %>
<%block name="bodyclass">subsection</%block>
<%block name="title">CMS Subsection</%block>
<%block name="bodyclass">is-signedin course subsection</%block>
<%namespace name="units" file="widgets/units.html" />
<%namespace name='static' file='static_content.html'/>
......
cms/templates/export.html
......@@ -3,7 +3,7 @@
<%! from django.core.urlresolvers import reverse %>
<%block name="title">Export</%block>
<%block name="bodyclass">export</%block>
<%block name="bodyclass">is-signedin course export</%block>
<%block name="content">
<div class="main-wrapper">
......
cms/templates/import.html
......@@ -3,7 +3,7 @@
<%! from django.core.urlresolvers import reverse %>
<%block name="title">Import</%block>
<%block name="bodyclass">import</%block>
<%block name="bodyclass">is-signedin course import</%block>
<%block name="content">
<div class="main-wrapper">
......
cms/templates/index.html
<%inherit file="base.html" />
<%block name="bodyclass">index</%block>
<%block name="bodyclass">is-signedin index dashboard</%block>
<%block name="title">Courses</%block>
<%block name="header_extras">
......
cms/templates/login.html
<%inherit file="base.html" />
<%! from django.core.urlresolvers import reverse %>
<%block name="title">Log in</%block>
<%block name="bodyclass">no-header</%block>
<%block name="bodyclass">not-signedin signin</%block>
<%block name="content">
......
cms/templates/manage_users.html
<%inherit file="base.html" />
<%block name="title">Course Staff Manager</%block>
<%block name="bodyclass">users</%block>
<%block name="bodyclass">is-signedin course users team</%block>
<%block name="content">
<div class="main-wrapper">
......
cms/templates/overview.html
......@@ -7,6 +7,7 @@
%>
<%! from django.core.urlresolvers import reverse %>
<%block name="title">CMS Courseware Overview</%block>
<%block name="bodyclass">is-signedin course outline</%block>
<%namespace name='static' file='static_content.html'/>
<%namespace name="units" file="widgets/units.html" />
......
cms/templates/settings.html
<%inherit file="base.html" />
<%block name="bodyclass">settings</%block>
<%block name="title">Settings</%block>
<%block name="bodyclass">is-signedin course settings</%block>
<%namespace name='static' file='static_content.html'/>
<%!
......
cms/templates/signup.html
......@@ -2,7 +2,7 @@
<%! from django.core.urlresolvers import reverse %>
<%block name="title">Sign up</%block>
<%block name="bodyclass">no-header</%block>
<%block name="bodyclass">not-signedin signup</%block>
<%block name="content">
......
cms/templates/unit.html
<%inherit file="base.html" />
<%! from django.core.urlresolvers import reverse %>
<%namespace name="units" file="widgets/units.html" />
<%block name="bodyclass">unit</%block>
<%block name="title">CMS Unit</%block>
<%block name="bodyclass">is-signedin course unit</%block>
<%block name="jsextra">
<script type='text/javascript'>
$(document).ready(function() {
......
cms/templates/widgets/footer.html 0 → 100644
<%! from django.core.urlresolvers import reverse %>
<div class="wrapper-footer wrapper">
<footer class="main" role="navigation">
<div class="colophon">
<p>&copy; 2013 <a href="http://www.edx.org" rel="external">edX</a>. All rights reversed.</p>
</div>
<nav class="nav-peripheral">
<ol>
<li class="nav-item nav-peripheral-tos">
<a href="#">Terms of Service</a>
</li>
<li class="nav-item nav-peripheral-pp">
<a href="#">Privacy Policy</a>
</li>
<li class="nav-item nav-peripheral-help">
<a href="#">edX Studio Help</a>
</li>
<li class="nav-item nav-peripheral-contact">
<a href="#">Contact edX</a>
</li>
% if user.is_authenticated():
<!-- add in zendesk/tender feedback form UI -->
% endif
</ol>
</nav>
</footer>
</div>
\ No newline at end of file
cms/templates/widgets/header.html
......@@ -23,10 +23,10 @@
<div class="nav-sub">
<ul>
<li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a></li>
<li><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a></li>
<li><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Pages/Tabs</a></li>
<li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Files &amp; Uploads</a></li>
<li class="nav-item"><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a></li>
<li class="nav-item"><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a></li>
<li class="nav-item"><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Pages/Tabs</a></li>
<li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Files &amp; Uploads</a></li>
</ul>
</div>
</li>
......@@ -36,10 +36,10 @@
<div class="nav-sub">
<ul>
<li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule &amp; Details</a></li>
<li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Grading</a></li>
<li><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li>
<li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Advanced Settings</a></li>
<li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule &amp; Details</a></li>
<li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Grading</a></li>
<li class="nav-item"><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li>
<li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Advanced Settings</a></li>
</ul>
</div>
</li>
......@@ -49,8 +49,8 @@
<div class="nav-sub">
<ul>
<li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a></li>
<li><a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Export</a></li>
<li class="nav-item"><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a></li>
<li class="nav-item"><a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Export</a></li>
</ul>
</div>
</li>
......@@ -58,8 +58,8 @@
</nav>
% endif
% if user.is_authenticated():
<nav class="nav-account is-logged-in nav-dropdown">
% if user.is_authenticated():
<nav class="nav-account nav-is-signedin nav-dropdown">
<h2 class="sr">Currently logged in as:</h2>
<ol>
<li class="nav-item nav-account-username">
......@@ -73,19 +73,28 @@
<div class="nav-sub">
<ul>
<li><a href="#">Help</a></li>
<li><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
<li class="nav-item"><a href="#">Help</a></li>
<li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
</ul>
</div>
</li>
</ol>
</nav>
% else:
<nav class="nav-account nav-dropdown">
<h2 class="sr">You're not currently logged in</h2>
<nav class="nav-not-signedin">
<h2 class="sr">You're not currently signed in</h2>
<ol>
<li>
<a class="action action-login" href="${reverse('login')}">Login</a>
<li class="nav-item nav-not-signedin-how">
<a href="">How Studio Works</a>
</li>
<li class="nav-item nav-not-signedin-help">
<a href="#">Studio Help</a>
</li>
<li class="nav-item nav-not-signedin-signup">
<a class="action action-signup" href="${reverse('signup')}">Sign Up</a>
</li>
<li class="nav-item nav-not-signedin-signin">
<a class="action action-signin" href="${reverse('login')}">Sign In</a>
</li>
</ol>
</nav>
......
common/static/sass/_mixins.scss
// font-sizing
@function em($pxval, $base: 16) {
@return #{$pxval / $base}em;
}
@mixin font-size($sizeValue: 1.6){
font-size: $sizeValue + px;
font-size: ($sizeValue/10) + rem;
}
// Line-height
@function lh($amount: 1) {
@return $body-line-height * $amount;
......@@ -26,6 +32,7 @@
width: 1px;
}
// vertical and horizontal centering
@mixin vertically-and-horizontally-centered ( $height, $width ) {
left: 50%;
margin-left: -$width / 2;
......
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