Skip to content

E
edx-platform
Commit 9bcdcec6 by Galen Frechette
Options

adds about and jobs pages, cleans up header and login modal

parent 9d0c52df
Showing with 195 additions and 136 deletions
lms/static/sass/_base_extends.scss
.faded-hr-divider { .faded-hr-divider {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(200,200,200, 0.8) 15%, rgb(200,200,200) 50%, rgba(200,200,200, 0.8) 85%, rgba(255,255,255, 0))); @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
height: 1px;
width: 100%;
}
.faded-hr-divider-light {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.8) 50%,
rgba(255,255,255, 0)));
height: 1px; height: 1px;
width: 100%; width: 100%;
} }
.faded-vertical-divider { .faded-vertical-divider {
@include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(200,200,200, 0.6) 25%, rgb(200,200,200) 50%, rgba(200,200,200, 0.6) 75%, rgba(255,255,255, 0))); @include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
height: 100%;
width: 1px;
}
.faded-vertical-divider-light {
@include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.6) 50%,
rgba(255,255,255, 0)));
height: 100%; height: 100%;
width: 1px; width: 1px;
} }
.vertical-divider {
@extend .faded-vertical-divider;
position: relative;
&::after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
position: absolute;
left: 1px;
}
}
.horizontal-divider {
@extend .faded-hr-divider;
position: relative;
&::after {
@extend .faded-hr-divider-light;
content: "";
display: block;
position: absolute;
top: 1px;
}
}
lms/static/sass/_base_mixins.scss
...@@ -5,5 +5,5 @@ ...@@ -5,5 +5,5 @@
min-height: $height; min-height: $height;
min-width: $width; min-width: $width;
position: fixed; position: fixed;
top: 35%; top: 45%;
} }
lms/static/sass/_index.scss
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
} }
a { a {
@include button(shiny, $pink); @include button(shiny, $blue);
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px); @include border-radius(3px);
@include inline-block; @include inline-block;
...@@ -95,20 +95,7 @@ ...@@ -95,20 +95,7 @@
padding: 15px 0px; padding: 15px 0px;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
width: flex-grid(6); width: flex-grid(12);
&:first-child {
margin-right: flex-gutter();
}
&.find-courses {
@include button(shiny, $blue);
@include box-sizing(border-box);
@include border-radius(3px);
@include inline-block;
font: normal italic 1.2rem/1.6rem $serif;
padding: 15px 0px;
}
} }
form { form {
......
lms/static/sass/_shared_header.scss
...@@ -18,75 +18,87 @@ header.app { ...@@ -18,75 +18,87 @@ header.app {
display: block; display: block;
float: left; float: left;
height: 100%; height: 100%;
margin: 16px 30px 0px 0px; margin: 16px 15px 0px 0px;
position: relative;
&::after {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 50px;
position: absolute;
right: -15px;
top: -12px;
}
} }
a.discover-courses { .divider {
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%)); @extend .vertical-divider;
border: 1px solid rgb(200,200,200); @include inline-block;
@include border-radius(3px); height: 40px;
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); vertical-align: middle;
color: $base-font-color;
display: block;
float: left;
font: normal 1rem/1.2rem $sans-serif;
height: 15px;
margin-top: 12px;
padding: 8px 10px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
&:hover {
}
} }
nav.guest {
float: right; nav {
height: 40px;
margin-top: 8px;
&.find-courses {
float: left;
}
&.guest {
float: right;
}
ol { ol {
font-size: 0em; font-size: 0em;
li { li {
@include inline-block; @include inline-block;
margin-top: 12px; vertical-align: top;
padding: 0px 5px; }
position: relative;
vertical-align: bottom;
&:last-child { li.secondary {
padding-right: 0px; margin: 0px 15px;
}
a { a {
@include border-radius(3px); @include border-radius(3px);
border: 1px solid transparent; border: 1px solid transparent;
color: $base-font-color; @include box-sizing(border-box);
color: $lighter-base-font-color;
display: block; display: block;
font: normal italic 1.2rem/1.2rem $serif; font: normal italic 1.2rem/1.4rem $serif;
height: 15px; height: 30px;
padding: 8px; @include inline-block;
margin: 5px 15px 5px 0px;
padding: 7px 2px;
text-decoration: none; text-decoration: none;
text-transform: lowercase; text-transform: lowercase;
text-shadow: 0 1px rgba(255,255,255, 0.6); text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle;
&:last-child {
margin-right: 0px;
}
&:hover {
color: $base-font-color;
}
}
}
li.primary {
a {
border: 1px solid transparent;
@include border-radius(3px);
@include box-sizing(border-box);
color: $base-font-color;
display: block;
font: normal 1.2rem/1.4rem $sans-serif;
height: 30px;
@include inline-block;
margin: 5px;
padding: 6px 8px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle;
&:hover { &:hover {
background: rgb(220,220,220);
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%)); @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
border-color: rgb(200,200,200); border-color: rgb(200,200,200);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
color: $base-font-color;
} }
} }
} }
......
lms/static/sass/_shared_login_modal.scss
.modal-wrapper { .modal-wrapper {
@include background-image(radial-gradient(50% 50%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.7))); @include background-image(radial-gradient(50% 45%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.8)));
bottom: 0; bottom: 0;
content: ""; content: "";
display: none; display: none;
...@@ -16,48 +16,58 @@ ...@@ -16,48 +16,58 @@
.login-modal { .login-modal {
background: rgba(0,0,0, 0.6); background: rgba(0,0,0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.9); border: 1px solid rgba(0, 0, 0, 0.9);
@include border-radius(4px); @include border-radius(0px);
@include box-shadow(0 10px 60px 10px rgba(0,0,0, 0.5)); @include box-shadow(0 15px 70px 5px rgba(0,0,0, 0.5));
color: #fff; color: #fff;
padding: 10px; padding: 8px;
width: grid-width(7); width: grid-width(6);
@include vertically-and-horizontally-centered(400px, grid-width(7)); @include vertically-and-horizontally-centered(410px, grid-width(6));
z-index: 10; z-index: 10;
.inner-wrapper { .inner-wrapper {
@include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225))); background: rgb(240,240,240);
@include border-radius(4px); @include border-radius(0px);
border: 1px solid rgba(0, 0, 0, 0.9); border: 1px solid rgba(0, 0, 0, 0.9);
@include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7)); @include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
height: 380px; height: 410px;
overflow: hidden; overflow: hidden;
padding: 30px;
position: relative; position: relative;
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
content: "";
display: block;
height: 400px;
left: 0px;
margin: 0 auto;
position: absolute;
bottom: -140px;
width: 100%;
}
header { header {
margin-bottom: 30px; margin-bottom: 30px;
padding-top: 5px; overflow: hidden;
padding: 28px 20px 0px;
position: relative; position: relative;
z-index: 2; z-index: 2;
&::after { &::before {
@extend .faded-hr-divider; @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
bottom: 0px;
content: ""; content: "";
display: block; display: block;
height: 400px;
left: 0px;
margin: 0 auto;
position: absolute; position: absolute;
top: -140px;
width: 100%;
z-index: 1;
}
hr {
@extend .faded-hr-divider-light;
border: none;
margin: 0px;
position: relative;
z-index: 2;
&::after {
@extend .faded-hr-divider;
bottom: 0px;
content: "";
display: block;
position: absolute;
top: -1px;
}
} }
h3 { h3 {
...@@ -68,12 +78,15 @@ ...@@ -68,12 +78,15 @@
text-shadow: 0 1px rgba(255,255,255, 0.4); text-shadow: 0 1px rgba(255,255,255, 0.4);
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
position: relative;
z-index: 2;
} }
} }
form { form {
@include clearfix; margin-bottom: 12px;
padding: 0px 20px;
position: relative; position: relative;
z-index: 2; z-index: 2;
...@@ -81,37 +94,30 @@ ...@@ -81,37 +94,30 @@
display: none; display: none;
} }
label.remember-me {
background: rgb(230,230,230);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
display: block;
margin-bottom: 60px;
padding: 8px 10px;
position: relative;
&::before {
@extend .faded-hr-divider;
bottom: -30px;
content: "";
display: block;
position: absolute;
}
}
input[type="checkbox"] { input[type="checkbox"] {
margin-right: 5px; margin-right: 5px;
} }
input[type="email"], input[type="email"],
input[type="password"] { input[type="password"] {
background: rgb(255,255,255);
display: block; display: block;
height: 45px; height: 45px;
margin-bottom: 20px; margin-bottom: 20px;
width: 100%; width: 100%;
} }
label.remember-me {
background: rgb(230,230,230);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
display: block;
margin-bottom: 38px;
padding: 8px 10px;
position: relative;
}
input[type="submit"] { input[type="submit"] {
display: block; display: block;
height: 45px; height: 45px;
...@@ -121,9 +127,8 @@ ...@@ -121,9 +127,8 @@
} }
.login-extra { .login-extra {
padding: 15px 0px;
position: relative; position: relative;
z-index: 2;
p { p {
color: $lighter-base-font-color; color: $lighter-base-font-color;
...@@ -134,6 +139,10 @@ ...@@ -134,6 +139,10 @@
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal italic 1.2rem/1.6rem $serif; font: normal italic 1.2rem/1.6rem $serif;
text-decoration: underline; text-decoration: underline;
&:hover {
color: $base-font-color;
}
} }
span + a { span + a {
...@@ -143,17 +152,14 @@ ...@@ -143,17 +152,14 @@
} }
.close-modal { .close-modal {
//background: rgb(240,240,240);
//border: 1px solid rgba(180,180,180, 0.7);
@include border-radius(2px); @include border-radius(2px);
//@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 0 2px 0 rgba(0,0,0, 0.1));
cursor: pointer; cursor: pointer;
@include inline-block; @include inline-block;
padding: 5px 10px; padding: 10px;
position: absolute; position: absolute;
right: 5px; right: 2px;
top: 5px; top: 0px;
@include transition(all, 0.15s, ease-out); z-index: 3;
.inner { .inner {
p { p {
...@@ -166,9 +172,6 @@ ...@@ -166,9 +172,6 @@
} }
&:hover { &:hover {
//background: rgb(235,235,235);
//@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 0 2px 0 rgba(0,0,0, 0.125));
p { p {
color: $base-font-color; color: $base-font-color;
} }
......
lms/templates/about.html 0 → 100644
<%inherit file="main.html" />
<h1>About Us</h1>
lms/templates/index.html
...@@ -22,7 +22,6 @@ ...@@ -22,7 +22,6 @@
<div class="signup-wrapper"> <div class="signup-wrapper">
<section class="sign-up"> <section class="sign-up">
<a href="#" class="find-courses">Find Courses</a> <a href="#" class="find-courses">Find Courses</a>
<a href="#" class="create-account">Sign Up</a>
</section> </section>
</div> </div>
</section> </section>
......
lms/templates/jobs.html 0 → 100644
<%inherit file="main.html" />
<h1>Jobs</h1>
lms/templates/login_modal.html
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<div class="inner-wrapper"> <div class="inner-wrapper">
<header> <header>
<h3>Log In</h3> <h3>Log In</h3>
<hr>
</header> </header>
<form id="login_form" method="post"> <form id="login_form" method="post">
......
lms/templates/navigation.html
...@@ -7,7 +7,20 @@ ...@@ -7,7 +7,20 @@
<a href="${ MITX_ROOT_URL }" class="logo"> <a href="${ MITX_ROOT_URL }" class="logo">
<img src="${static.url('images/logo.png')}" /> <img src="${static.url('images/logo.png')}" />
</a> </a>
<a href="/courses" class="discover-courses">Find Courses</a> <nav class="find-courses">
<ol>
<li class="primary">
<div class="divider"></div>
<a href="/courses">Find Courses</a>
<div class="divider"></div>
</li>
<li class="secondary">
<a href="/about">About</a>
<a href="#">Blog</a>
<a href="/jobs">Jobs</a>
</li>
</ol>
</nav>
%if user.is_authenticated(): %if user.is_authenticated():
<nav class="user"> <nav class="user">
...@@ -31,20 +44,12 @@ ...@@ -31,20 +44,12 @@
%else: %else:
<nav class="guest"> <nav class="guest">
<ol> <ol>
<li> <li class="primary">
<a href="#">About</a> <div class="divider"></div>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Jobs</a>
</li>
<li>
<a href="#" class="login">Log In</a> <a href="#" class="login">Log In</a>
</li> <div class="divider"></div>
<li> <a href="#" class="signup">Sign Up</a>
<a href="#">Sign Up</a> <div class="divider"></div>
</li> </li>
</ol> </ol>
</nav> </nav>
......
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