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 {
background: rgb(250,250,250);
font-family: $sans-serif;
......
lms/static/sass/base/_variables.scss
......@@ -14,7 +14,6 @@ $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
$body-font-family: $sans-serif;
$serif: $georgia;
$white: rgb(255,255,255);
$black: rgb(0,0,0);
$blue: rgb(29,157,217);
......@@ -31,12 +30,21 @@ $outer-border-color: rgb(170, 170, 170);
// old variables
$light-gray: #ddd;
$dark-gray: #333;
// edx.org-related
$m-gray-l: rgb(247, 247, 247);
$m-gray: rgb(67,67,67);
$m-blue: rgb(23,174,223);
$m-blue-s: rgb(2,159,211);
$m-base-font-size: em(16);
$m-gray-l1: rgb(203,203,203);
$m-gray-l2: rgb(246,246,246);
$m-gray: rgb(153,153,153);
$m-gray-d1: rgb(102,102,102);
$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);
......
lms/static/sass/multicourse/_account.scss
// plus on button
// border radius on inputs
// Account-Centric (Login/Register)
// =====
......@@ -5,8 +8,121 @@
.view-register, .view-login, .view-passwordreset {
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 {
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 @@
// shared
.login, .register, .passwordreset, #forgot-password-modal #password-reset {
padding: ($baseline*1.5);
@include clearfix;
// reset - horrible, but necessary
p, ol, ul, h1, h2, h3, h4, h5, h6, label, input, textarea {
color: $m-gray;
font-family: $sans-serif;
@extend .body-text;
}
h1, h2, h3, h4, h5, h6 {
......@@ -50,8 +163,8 @@
}
&:hover, &:active {
border-bottom: 1px dotted $m-blue-s;
color: $m-blue-s;
border-bottom: 1px dotted $m-blue-s1;
color: $m-blue-s1;
}
}
......@@ -59,72 +172,29 @@
font-weight: 600;
}
p, ul, ol, dl, blockquote {
font-size: $m-base-font-size;
}
// basic layout
.introduction {
width: flex-grid(8);
}
.content, aside {
@include box-sizing(border-box);
margin: $baseline 0 0 0;
}
.content {
margin-right: flex-gutter();
width: flex-grid(8);
margin-right: ($baseline*2);
width: 660px;
float: left;
}
aside {
margin: 0;
width: flex-grid(4);
width: 220px;
float: left;
}
// introduction
.introduction {
header {
@include clearfix();
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;
}
}
p, ol, ul {
font-size: 14px !important;
}
}
// content
.content {
background: $white;
}
// aside
......@@ -138,53 +208,24 @@
}
h3 {
@extend .heading-4;
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
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 {
padding-bottom: 0;
color: tint($m-gray, 30%);
font-size: em(14);
@extend .body-text-emphasized;
margin-bottom: $baseline;
}
fieldset {
margin: 0;
padding-top: $baseline;
padding-top: 0;
padding-bottom: $baseline;
// border-bottom: 1px solid rgba(216, 223, 230, 0.50);
}
.list-input {
......@@ -222,9 +263,12 @@
// elements
label, input, textarea {
@include border-radius(0);
display: block;
font-family: $sans-serif;
font-style: normal;
font-weight: 500;
color: $m-gray-d2;
}
label {
......@@ -243,6 +287,7 @@
input, textarea {
width: 100%;
margin: 0;
padding: $baseline ($baseline*.75);
&.long {
......@@ -308,11 +353,11 @@
&.is-focused {
label {
color: $m-blue-s;
color: $m-blue-s1;
}
.tip {
color: $m-blue-s;
color: $m-blue-s1;
}
}
......@@ -358,14 +403,7 @@
@include clearfix();
button[type="submit"] {
@include button(simple, $m-blue-s);
@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;
@extend .button-primary;
&:disabled {
opacity: 0.3;
......@@ -395,21 +433,23 @@
// forms - messages/status
.status {
@include box-sizing(border-box);
@include box-shadow(inset 0 -1px 2px 0 tint($yellow, 85%));
border-top: 2px solid $yellow;
border-bottom: 1px solid tint($m-gray,70%);
background: tint($yellow,70%);
margin: 0 0 $baseline 0;
border-bottom: 3px solid shade($yellow, 10%);
padding: $baseline $baseline;
background: tint($yellow,20%);
.message-title {
@extend .heading-4;
margin: 0 0 ($baseline/4) 0;
font-size: em(14);
font-weight: 600;
color: $m-gray-d2 !important;
}
.message-copy {
margin: 0;
@extend .body-text;
margin: 0 !important;
padding: 0;
font-size: em(14);
list-style: none;
li {
......@@ -420,13 +460,19 @@
.submission-error, .system-error {
@include box-shadow(inset 0 -1px 2px 0 tint($red, 85%));
border-top: 2px solid tint($red,65%);
background: tint($red,98%);
border-bottom: 3px solid shade($red, 10%);
background: tint($red,80%);
.message-title {
color: shade($red, 10%);
}
}
// misc
.orn-plus {
color: $white;
padding: 0 $baseline/4;
}
}
// =====
......@@ -434,24 +480,35 @@
// login
.view-login {
.group-form-accountpreferences {
padding-top: 0;
padding-bottom: 0;
.introduction {
padding: 0;
header {
height: 120px;
background: transparent url("../images/bg-banner-example.png") 0 0 no-repeat;
}
}
}
// register
.view-register {
.group-form-accountacknowledgements {
padding-top: 0;
padding-bottom: 0;
.introduction {
padding: 0;
header {
height: 120px;
background: transparent url("../images/bg-banner-example.png") 0 0 no-repeat;
}
}
}
// password reset
.view-passwordreset {
.introduction {
}
}
// modal password reset form
......@@ -461,7 +518,7 @@
.inner-wrapper {
@include border-radius(2px);
background: $m-gray-l;
background: $m-gray-l1;
padding-bottom: 0 !important;
}
......@@ -483,14 +540,6 @@
}
}
.instructions {
p {
color: $m-gray;
font-size: em(14);
}
}
fieldset {
padding: 0 !important;
margin: ($baseline*1.25) 0 !important;
......
lms/static/sass/shared/_footer.scss
......@@ -26,8 +26,8 @@
}
&:hover, &:active {
border-bottom: 1px dotted $m-blue-s;
color: $m-blue-s;
border-bottom: 1px dotted $m-blue-s1;
color: $m-blue-s1;
}
}
......@@ -49,7 +49,7 @@
color: tint($black, 20%);
&:hover, &:active {
color: $m-blue-s;
color: $m-blue-s1;
}
}
......@@ -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 {
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));
background: $white;
height: 76px;
......@@ -19,32 +19,9 @@ header.global {
h1.logo {
float: left;
margin: 0px 15px 0px 0px;
padding-right: 20px;
margin: -2px 39px 0px 0px;
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 {
display: block;
}
......@@ -253,16 +230,16 @@ header.global {
}
.nav-global {
margin-top: ($baseline/4);
margin-top: ($baseline/2);
list-style: none;
li {
display: inline-block;
margin: 0 ($baseline/4) 0 0;
font-size: em(16);
margin: 0 $baseline+1 0 0;
font-size: em(14);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
letter-spacing: 0 !important;
&:last-child {
margin-right: 0;
......@@ -271,11 +248,12 @@ header.global {
a {
display:block;
padding: ($baseline/4);
color: tint($black, 20%);
color: $m-gray-d1;
font-weight: 600;
&:hover, &:active {
text-decoration: none;
color: $m-blue-s;
color: $m-blue-s1;
}
}
......@@ -283,7 +261,7 @@ header.global {
a {
text-decoration: none;
color: $m-blue-s;
color: $m-blue-s1;
}
}
}
......@@ -296,22 +274,28 @@ header.global {
.nav-courseware {
float: right;
margin-top: ($baseline/2);
margin-top: ($baseline/4);
list-style: none;
li {
display: inline-block;
a {
@include button(simple, $m-blue);
@include box-sizing(border-box);
@include border-radius(3px);
padding: ($baseline/4) ($baseline/2);
font-size: em(15);
font-weight: 500;
letter-spacing: 1px;
@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: 300;
cursor: pointer;
text-align: center;
text-transform: uppercase;
border: none !important;
text-shadow: none;
letter-spacing: 0.1rem;
font-size: 14px;
box-shadow: none !important;
&:hover {
text-decoration: none;
......@@ -324,19 +308,24 @@ header.global {
}
}
}
// marketing site design syncing
.view-register, .view-login {
// =====
// 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;
}
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-s1 !important;
}
}
\ No newline at end of file
lms/templates/login.html
......@@ -53,16 +53,13 @@
</%block>
<section class="login container">
<section class="introduction">
<header>
<h1>Log Into Your Account</h1>
<span class="wrapper wrapper-action">
<a class="action action-register" href="#">Not enrolled? Sign up</a>
</span>
</header>
</section>
<section class="introduction">
<header>
<h1 class="sr">Log Into Your Account</h1>
</header>
</section>
<section class="login container">
<section role="main" class="content">
<header>
<h2 class="sr">Login Form</h2>
......@@ -117,7 +114,7 @@
</fieldset>
<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>
</form>
</section>
......@@ -136,6 +133,9 @@
% endif
<div class="cta cta-help">
<h3>Not Enrolled?</h3>
<p><a href="#">Sign up for edX today!</a></p>
<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>
</div>
......
lms/templates/navigation.html
......@@ -88,7 +88,7 @@ site_status_msg = get_site_status_msg(course_id)
<ol class="right nav-courseware">
<li class="nav-courseware-01">
% 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
</li>
</ol>
......
lms/templates/register.html
......@@ -36,16 +36,13 @@
</script>
</%block>
<section class="register container">
<section class="introduction">
<header>
<h1>Register for edX</h1>
<span class="wrapper wrapper-action">
<a class="action action-login" href="${reverse('login')}">Already have an account? Login</a>
</span>
</header>
</section>
<section class="introduction">
<header>
<h1 class="sr">Register for edX</h1>
</header>
</section>
<section class="register container">
<section role="main" class="content">
<header>
<h2 class="sr">Registration Form</h2>
......@@ -186,7 +183,7 @@
</fieldset>
<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>
</form>
</section>
......@@ -198,26 +195,17 @@
<div class="cta cta-welcome">
<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>
</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>
<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-nextsteps">
<h3>Next Steps</h3>
<ol>
<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>
<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>
</div>
<div class="cta cta-help">
<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>
</aside>
</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