Skip to content

E
edx-platform
Commit d23679ea by Brian Talbot
Options

edx.org redesign - revised temporary login/register views to fit with design… 

edx.org redesign - revised temporary login/register views to fit with design requirements/fixes from marketing team's overall design changes to site's visual theme
parent 6f2e6116
Showing with 273 additions and 217 deletions
lms/static/images/header-logo.png
lms/static/images/header-logo.png

1.51 KB | W: | H:

lms/static/images/header-logo.png

1.19 KB | W: | H:

lms/static/images/header-logo.png
lms/static/images/header-logo.png
lms/static/images/header-logo.png
lms/static/images/header-logo.png
  • 2-up
  • Swipe
  • Onion skin
lms/static/sass/base/_base.scss
// html {
// overflow-y: scroll;
// }
body { body {
background: rgb(250,250,250); background: rgb(250,250,250);
font-family: $sans-serif; font-family: $sans-serif;
......
lms/static/sass/base/_variables.scss
...@@ -14,7 +14,6 @@ $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; ...@@ -14,7 +14,6 @@ $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
$body-font-family: $sans-serif; $body-font-family: $sans-serif;
$serif: $georgia; $serif: $georgia;
$white: rgb(255,255,255); $white: rgb(255,255,255);
$black: rgb(0,0,0); $black: rgb(0,0,0);
$blue: rgb(29,157,217); $blue: rgb(29,157,217);
...@@ -31,12 +30,21 @@ $outer-border-color: rgb(170, 170, 170); ...@@ -31,12 +30,21 @@ $outer-border-color: rgb(170, 170, 170);
// old variables // old variables
$light-gray: #ddd; $light-gray: #ddd;
$dark-gray: #333; $dark-gray: #333;
// edx.org-related // edx.org-related
$m-gray-l: rgb(247, 247, 247); $m-gray-l1: rgb(203,203,203);
$m-gray: rgb(67,67,67); $m-gray-l2: rgb(246,246,246);
$m-blue: rgb(23,174,223); $m-gray: rgb(153,153,153);
$m-blue-s: rgb(2,159,211); $m-gray-d1: rgb(102,102,102);
$m-base-font-size: em(16); $m-gray-d2: rgb(51,51,51);
$m-gray-a1: rgb(80,80,80);
$m-blue: rgb(85, 151, 221);
$m-blue-l1: rgb(230,245,252);
$m-blue-d1: shade($m-blue,15%);
$m-blue-s1: saturate($m-blue,15%);
$m-pink: rgb(204,51,102);
$m-base-font-size: em(15);
$base-font-color: rgb(60,60,60); $base-font-color: rgb(60,60,60);
......
lms/static/sass/multicourse/_account.scss
// plus on button
// border radius on inputs
// Account-Centric (Login/Register) // Account-Centric (Login/Register)
// ===== // =====
...@@ -5,8 +8,121 @@ ...@@ -5,8 +8,121 @@
.view-register, .view-login, .view-passwordreset { .view-register, .view-login, .view-passwordreset {
background: $white; background: $white;
// edx.org - marketing typography
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .body-text-emphasized, .body-text, .button-primary, .button-secondary {
display: block;
font-family: $sans-serif;
line-height: lh(1);
}
.heading-2 {
font-size: 25px;
margin: 0 0 $baseline 0;
font-weight: 300;
text-transform: uppercase;
color: $m-blue;
}
.heading-3 {
font-size: 21px;
margin: 0 0 $baseline 0;
font-weight: 300;
color: $m-gray-d2;
}
.heading-4 {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0 !important;
color: $m-blue-s1;
}
.heading-5 {
}
// specific examples - body
.body-text-emphasized {
font-size: 18px;
margin: 0 0 $baseline 0;
font-weight: 300;
color: $m-gray-a1;
font-family: 'Open Sans', sans-serif;
line-height: lh(1.1);
}
.body-text {
font-size: 15px;
margin: 0 0 $baseline 0;
color: $m-gray-a1;
line-height: lh(1);
}
// specific examples - buttons
.button-primary {
@include border-radius(0);
@include linear-gradient($m-blue-s1 5%, $m-blue-d1 95%);
display: inline-block;
padding: $baseline/2 $baseline*2.5;
text-transform: lowercase;
color: $white;
letter-spacing: 0.1rem;
font-weight: 500;
cursor: pointer;
text-align: center;
border: none !important;
text-shadow: none;
letter-spacing: 0;
font-size: 16px;
box-shadow: none !important;
}
.button-secondary {
@include linear-gradient($m-gray 5%, $m-gray-d1 95%);
display: inline-block;
padding: $baseline/2 $baseline*2.5;
text-transform: lowercase;
color: $white;
letter-spacing: 0.1rem;
font-weight: 600;
cursor: pointer;
text-align: center;
border: none !important;
text-shadow: none;
letter-spacing: 0;
font-size: 16px;
box-shadow: 0 !important;
}
// layout
.content-wrapper { .content-wrapper {
background: $m-gray-l; background: $m-gray-l2;
padding-bottom: 0;
}
.container, .introduction {
@include box-sizing(border-box);
@include clearfix;
margin: 0 auto;
width: 960px;
background: $white;
}
.container {
padding: $baseline $baseline ($baseline*2) $baseline;
}
.introduction {
padding: ($baseline*2) $baseline 0 $baseline;
header h1 {
@extend .heading-2;
margin-bottom: $baseline;
padding-bottom: $baseline;
text-align: left;
}
} }
} }
...@@ -27,13 +143,10 @@ ...@@ -27,13 +143,10 @@
// shared // shared
.login, .register, .passwordreset, #forgot-password-modal #password-reset { .login, .register, .passwordreset, #forgot-password-modal #password-reset {
padding: ($baseline*1.5);
@include clearfix;
// reset - horrible, but necessary // reset - horrible, but necessary
p, ol, ul, h1, h2, h3, h4, h5, h6, label, input, textarea { p, ol, ul, h1, h2, h3, h4, h5, h6, label, input, textarea {
color: $m-gray; @extend .body-text;
font-family: $sans-serif;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
...@@ -50,8 +163,8 @@ ...@@ -50,8 +163,8 @@
} }
&:hover, &:active { &:hover, &:active {
border-bottom: 1px dotted $m-blue-s; border-bottom: 1px dotted $m-blue-s1;
color: $m-blue-s; color: $m-blue-s1;
} }
} }
...@@ -59,72 +172,29 @@ ...@@ -59,72 +172,29 @@
font-weight: 600; font-weight: 600;
} }
p, ul, ol, dl, blockquote {
font-size: $m-base-font-size;
}
// basic layout // basic layout
.introduction {
width: flex-grid(8);
}
.content, aside { .content, aside {
@include box-sizing(border-box); @include box-sizing(border-box);
margin: $baseline 0 0 0;
} }
.content { .content {
margin-right: flex-gutter(); margin-right: ($baseline*2);
width: flex-grid(8); width: 660px;
float: left; float: left;
} }
aside { aside {
margin: 0; width: 220px;
width: flex-grid(4);
float: left; float: left;
}
// introduction
.introduction {
header { p, ol, ul {
@include clearfix(); font-size: 14px !important;
h1 {
float: left;
width: flex-grid(5,8);
margin-right: flex-gutter(0);
font-family: $sans-serif;
font-size: em(36);
font-weight: 700;
text-align: left;
}
.wrapper-action {
display: block;
float: right;
width: flex-grid(3,8);
margin-top: $baseline;
font-size: em(14);
text-align: right;
.action {
@include button(simple, $m-gray-l);
@include box-sizing(border-box);
@include border-radius(3px);
padding: ($baseline/4) ($baseline/2);
font-size: em(16);
font-weight: 700;
letter-spacing: 0;
text-align: center;
}
}
} }
} }
// content // content
.content { .content {
background: $white;
} }
// aside // aside
...@@ -138,53 +208,24 @@ ...@@ -138,53 +208,24 @@
} }
h3 { h3 {
@extend .heading-4;
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
color: tint($black, 20%);
font-size: em(16);
font-weight: 600;
text-transform: uppercase;
}
p, ul, ol, dl, blockquote {
color: tint($m-gray, 30%);
font-size: em(14);
}
ol, ul {
margin: 0;
padding: 0;
list-style: none;
li {
margin: 0 0 ($baseline/2);
line-height: 1.6em;
}
} }
} }
} }
// forms // forms
form { form {
border: 1px solid tint($m-gray,70%);
@include border-radius(3px);
@include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.3));
.instructions, fieldset, .form-actions, .status {
padding: ($baseline*1.5);
}
.instructions { .instructions {
padding-bottom: 0; @extend .body-text-emphasized;
color: tint($m-gray, 30%); margin-bottom: $baseline;
font-size: em(14);
} }
fieldset { fieldset {
margin: 0; margin: 0;
padding-top: $baseline; padding-top: 0;
padding-bottom: $baseline; padding-bottom: $baseline;
// border-bottom: 1px solid rgba(216, 223, 230, 0.50);
} }
.list-input { .list-input {
...@@ -222,9 +263,12 @@ ...@@ -222,9 +263,12 @@
// elements // elements
label, input, textarea { label, input, textarea {
@include border-radius(0);
display: block; display: block;
font-family: $sans-serif; font-family: $sans-serif;
font-style: normal; font-style: normal;
font-weight: 500;
color: $m-gray-d2;
} }
label { label {
...@@ -243,6 +287,7 @@ ...@@ -243,6 +287,7 @@
input, textarea { input, textarea {
width: 100%; width: 100%;
margin: 0;
padding: $baseline ($baseline*.75); padding: $baseline ($baseline*.75);
&.long { &.long {
...@@ -308,11 +353,11 @@ ...@@ -308,11 +353,11 @@
&.is-focused { &.is-focused {
label { label {
color: $m-blue-s; color: $m-blue-s1;
} }
.tip { .tip {
color: $m-blue-s; color: $m-blue-s1;
} }
} }
...@@ -358,14 +403,7 @@ ...@@ -358,14 +403,7 @@
@include clearfix(); @include clearfix();
button[type="submit"] { button[type="submit"] {
@include button(simple, $m-blue-s); @extend .button-primary;
@include box-sizing(border-box);
@include border-radius(3px);
padding: ($baseline*0.75) $baseline;
font-size: em(16);
font-weight: 700;
letter-spacing: 0;
text-align: center;
&:disabled { &:disabled {
opacity: 0.3; opacity: 0.3;
...@@ -395,21 +433,23 @@ ...@@ -395,21 +433,23 @@
// forms - messages/status // forms - messages/status
.status { .status {
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(inset 0 -1px 2px 0 tint($yellow, 85%)); margin: 0 0 $baseline 0;
border-top: 2px solid $yellow; border-bottom: 3px solid shade($yellow, 10%);
border-bottom: 1px solid tint($m-gray,70%); padding: $baseline $baseline;
background: tint($yellow,70%); background: tint($yellow,20%);
.message-title { .message-title {
@extend .heading-4;
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
font-size: em(14); font-size: em(14);
font-weight: 600; font-weight: 600;
color: $m-gray-d2 !important;
} }
.message-copy { .message-copy {
margin: 0; @extend .body-text;
margin: 0 !important;
padding: 0; padding: 0;
font-size: em(14);
list-style: none; list-style: none;
li { li {
...@@ -420,13 +460,19 @@ ...@@ -420,13 +460,19 @@
.submission-error, .system-error { .submission-error, .system-error {
@include box-shadow(inset 0 -1px 2px 0 tint($red, 85%)); @include box-shadow(inset 0 -1px 2px 0 tint($red, 85%));
border-top: 2px solid tint($red,65%); border-bottom: 3px solid shade($red, 10%);
background: tint($red,98%); background: tint($red,80%);
.message-title { .message-title {
color: shade($red, 10%); color: shade($red, 10%);
} }
} }
// misc
.orn-plus {
color: $white;
padding: 0 $baseline/4;
}
} }
// ===== // =====
...@@ -434,24 +480,35 @@ ...@@ -434,24 +480,35 @@
// login // login
.view-login { .view-login {
.group-form-accountpreferences { .introduction {
padding-top: 0; padding: 0;
padding-bottom: 0;
header {
height: 120px;
background: transparent url("../images/bg-banner-example.png") 0 0 no-repeat;
}
} }
} }
// register // register
.view-register { .view-register {
.group-form-accountacknowledgements { .introduction {
padding-top: 0; padding: 0;
padding-bottom: 0;
header {
height: 120px;
background: transparent url("../images/bg-banner-example.png") 0 0 no-repeat;
}
} }
} }
// password reset // password reset
.view-passwordreset { .view-passwordreset {
.introduction {
}
} }
// modal password reset form // modal password reset form
...@@ -461,7 +518,7 @@ ...@@ -461,7 +518,7 @@
.inner-wrapper { .inner-wrapper {
@include border-radius(2px); @include border-radius(2px);
background: $m-gray-l; background: $m-gray-l1;
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
...@@ -483,14 +540,6 @@ ...@@ -483,14 +540,6 @@
} }
} }
.instructions {
p {
color: $m-gray;
font-size: em(14);
}
}
fieldset { fieldset {
padding: 0 !important; padding: 0 !important;
margin: ($baseline*1.25) 0 !important; margin: ($baseline*1.25) 0 !important;
......
lms/static/sass/shared/_footer.scss
...@@ -26,8 +26,8 @@ ...@@ -26,8 +26,8 @@
} }
&:hover, &:active { &:hover, &:active {
border-bottom: 1px dotted $m-blue-s; border-bottom: 1px dotted $m-blue-s1;
color: $m-blue-s; color: $m-blue-s1;
} }
} }
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
color: tint($black, 20%); color: tint($black, 20%);
&:hover, &:active { &:hover, &:active {
color: $m-blue-s; color: $m-blue-s1;
} }
} }
...@@ -143,4 +143,20 @@ ...@@ -143,4 +143,20 @@
} }
} }
}
// marketing site design syncing
.view-register, .view-login {
.wrapper-footer footer {
width: 960px;
.colophon-about img {
margin-top: ($baseline*1.5);
}
.colophon-about p {
width: 360px;
}
}
} }
\ No newline at end of file
lms/static/sass/shared/_header.scss
header.global { header.global {
border-bottom: 1px solid tint($m-gray,50%); border-bottom: 1px solid $m-gray;
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
background: $white; background: $white;
height: 76px; height: 76px;
...@@ -19,32 +19,9 @@ header.global { ...@@ -19,32 +19,9 @@ header.global {
h1.logo { h1.logo {
float: left; float: left;
margin: 0px 15px 0px 0px; margin: -2px 39px 0px 0px;
padding-right: 20px;
position: relative; position: relative;
&::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;
}
a { a {
display: block; display: block;
} }
...@@ -253,16 +230,16 @@ header.global { ...@@ -253,16 +230,16 @@ header.global {
} }
.nav-global { .nav-global {
margin-top: ($baseline/4); margin-top: ($baseline/2);
list-style: none; list-style: none;
li { li {
display: inline-block; display: inline-block;
margin: 0 ($baseline/4) 0 0; margin: 0 $baseline+1 0 0;
font-size: em(16); font-size: em(14);
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0 !important;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
...@@ -271,11 +248,12 @@ header.global { ...@@ -271,11 +248,12 @@ header.global {
a { a {
display:block; display:block;
padding: ($baseline/4); padding: ($baseline/4);
color: tint($black, 20%); color: $m-gray-d1;
font-weight: 600;
&:hover, &:active { &:hover, &:active {
text-decoration: none; text-decoration: none;
color: $m-blue-s; color: $m-blue-s1;
} }
} }
...@@ -283,7 +261,7 @@ header.global { ...@@ -283,7 +261,7 @@ header.global {
a { a {
text-decoration: none; text-decoration: none;
color: $m-blue-s; color: $m-blue-s1;
} }
} }
} }
...@@ -296,22 +274,28 @@ header.global { ...@@ -296,22 +274,28 @@ header.global {
.nav-courseware { .nav-courseware {
float: right; float: right;
margin-top: ($baseline/2); margin-top: ($baseline/4);
list-style: none; list-style: none;
li { li {
display: inline-block; display: inline-block;
a { a {
@include button(simple, $m-blue); @include border-radius(0);
@include box-sizing(border-box); @include linear-gradient($m-blue-s1 5%, $m-blue-d1 95%);
@include border-radius(3px); display: inline-block;
padding: ($baseline/4) ($baseline/2); padding: $baseline/2 $baseline*2.5;
font-size: em(15); text-transform: lowercase;
font-weight: 500; color: $white;
letter-spacing: 1px; letter-spacing: 0.1rem;
font-weight: 300;
cursor: pointer;
text-align: center; text-align: center;
text-transform: uppercase; border: none !important;
text-shadow: none;
letter-spacing: 0.1rem;
font-size: 14px;
box-shadow: none !important;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
...@@ -324,19 +308,24 @@ header.global { ...@@ -324,19 +308,24 @@ header.global {
} }
} }
}
// marketing site design syncing
.view-register, .view-login {
// ===== header.global nav {
width: 960px;
// page-based nav states
.view-howitworks .nav-global-01,
.view-courses .nav-global-02,
.view-schools .nav-global-03,
.view-register .nav-global-04 {
a {
text-decoration: none;
color: $m-blue-s !important;
}
} }
} }
// page-based nav states
.view-howitworks .nav-global-01,
.view-courses .nav-global-02,
.view-schools .nav-global-03,
.view-register .nav-global-04 {
a {
text-decoration: none;
color: $m-blue-s1 !important;
}
}
\ No newline at end of file
lms/templates/login.html
...@@ -53,16 +53,13 @@ ...@@ -53,16 +53,13 @@
</%block> </%block>
<section class="login container"> <section class="introduction">
<section class="introduction"> <header>
<header> <h1 class="sr">Log Into Your Account</h1>
<h1>Log Into Your Account</h1> </header>
<span class="wrapper wrapper-action"> </section>
<a class="action action-register" href="#">Not enrolled? Sign up</a>
</span>
</header>
</section>
<section class="login container">
<section role="main" class="content"> <section role="main" class="content">
<header> <header>
<h2 class="sr">Login Form</h2> <h2 class="sr">Login Form</h2>
...@@ -117,7 +114,7 @@ ...@@ -117,7 +114,7 @@
</fieldset> </fieldset>
<div class="form-actions"> <div class="form-actions">
<button name="submit" type="submit" id="submit" class="action action-primary action-update">Log into My edX Account &amp; Access My Courses</button> <button name="submit" type="submit" id="submit" class="action action-primary action-update">Log into My edX Account <span class="orn-plus">+</span> Access My Courses</button>
</div> </div>
</form> </form>
</section> </section>
...@@ -136,6 +133,9 @@ ...@@ -136,6 +133,9 @@
% endif % endif
<div class="cta cta-help"> <div class="cta cta-help">
<h3>Not Enrolled?</h3>
<p><a href="#">Sign up for edX today!</a></p>
<h3>Need Help?</h3> <h3>Need Help?</h3>
<p>Looking for help in logging in or with your edX account? <a href="#">View our help section for answers to commonly asked questions</a></p> <p>Looking for help in logging in or with your edX account? <a href="#">View our help section for answers to commonly asked questions</a></p>
</div> </div>
......
lms/templates/navigation.html
...@@ -88,7 +88,7 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -88,7 +88,7 @@ site_status_msg = get_site_status_msg(course_id)
<ol class="right nav-courseware"> <ol class="right nav-courseware">
<li class="nav-courseware-01"> <li class="nav-courseware-01">
% if not settings.MITX_FEATURES['DISABLE_LOGIN_BUTTON']: % if not settings.MITX_FEATURES['DISABLE_LOGIN_BUTTON']:
<a class="cta cta-login" href="#">Login</a> <a class="cta cta-login" href="#">Log in</a>
% endif % endif
</li> </li>
</ol> </ol>
......
lms/templates/register.html
...@@ -36,16 +36,13 @@ ...@@ -36,16 +36,13 @@
</script> </script>
</%block> </%block>
<section class="register container"> <section class="introduction">
<section class="introduction"> <header>
<header> <h1 class="sr">Register for edX</h1>
<h1>Register for edX</h1> </header>
<span class="wrapper wrapper-action"> </section>
<a class="action action-login" href="${reverse('login')}">Already have an account? Login</a>
</span>
</header>
</section>
<section class="register container">
<section role="main" class="content"> <section role="main" class="content">
<header> <header>
<h2 class="sr">Registration Form</h2> <h2 class="sr">Registration Form</h2>
...@@ -186,7 +183,7 @@ ...@@ -186,7 +183,7 @@
</fieldset> </fieldset>
<div class="form-actions"> <div class="form-actions">
<button name="submit" type="submit" id="submit" class="action action-primary action-update">Register &amp; Create My Account</button> <button name="submit" type="submit" id="submit" class="action action-primary action-update">Register <span class="orn-plus">+</span> Create My Account</button>
</div> </div>
</form> </form>
</section> </section>
...@@ -198,26 +195,17 @@ ...@@ -198,26 +195,17 @@
<div class="cta cta-welcome"> <div class="cta cta-welcome">
<h3>Welcome to edX</h3> <h3>Welcome to edX</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Matt to provide copy]</p> <p>Registering with edX gives you access to all of our current and future free courses. Not ready to take a course just yet? Registering puts you on our mailing list – we will update you as courses are added.</p>
</div>
<div class="cta cta-salespitch">
<h3>What an edX Account Gives You</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. [Matt to provide copy]</p>
</div> </div>
<div class="cta cta-nextsteps"> <div class="cta cta-nextsteps">
<h3>Next Steps</h3> <h3>Next Steps</h3>
<ol> <p>As part of joining edX, you will receive an activation email. You must click on the activation link to complete the process. Don’t see the email? Check your spam folder and mark edX emails as ‘not spam’. At edX, we communicate mostly through email.</p>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</li>
<li>Donec quam felis, ultricies nec, pellentesque eu, pretium quis. [Matt to provide copy]</li>
</ol>
</div> </div>
<div class="cta cta-help"> <div class="cta cta-help">
<h3>Need Help?</h3> <h3>Need Help?</h3>
<p>Looking for help in registering with edX? View our <a href="#">help section for answers to commonly asked questions</a></p> <p>Need help in registering with edX? <a href="#">View our FAQs for answers to commonly asked questions</a>. Once registered, most questions can be answered in the course specific discussion forums or through the FAQs.</p>
</div> </div>
</aside> </aside>
</section> </section>
......
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