Skip to content

E
edx-platform
Commit 08f1bdd5 by Galen Frechette
Options

various ui tweeks

parent d7393cd5
Showing with 106 additions and 149 deletions
lms/static/sass/_index.scss
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
width: flex-grid(12); width: flex-grid(12);
.video-wrapper { .video-wrapper {
right: 0px; left: 0px;
position: absolute; position: absolute;
top: 0px; top: 0px;
...@@ -36,10 +36,10 @@ ...@@ -36,10 +36,10 @@
.welcome { .welcome {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left; float: right;
font-size: 0em; font-size: 0em;
width: flex-grid(12); width: flex-grid(12);
padding-right: 600px; padding-left: 600px;
padding-top: 20px; padding-top: 20px;
h1 { h1 {
...@@ -48,7 +48,6 @@ ...@@ -48,7 +48,6 @@
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 20px; margin-bottom: 20px;
position: relative; position: relative;
text-align: center;
text-transform: uppercase; text-transform: uppercase;
} }
...@@ -60,15 +59,13 @@ ...@@ -60,15 +59,13 @@
p { p {
color: $base-font-color; color: $base-font-color;
margin: 0px; margin: 0px;
text-align: center;
width: flex-grid(12); width: flex-grid(12);
} }
} }
.signup-wrapper { .signup-wrapper {
@include box-sizing(border-box); @include box-sizing(border-box);
margin: 0 auto; width: flex-grid(11);
width: flex-grid(10);
.sign-up { .sign-up {
background: rgb(240,240,240); background: rgb(240,240,240);
...@@ -97,31 +94,6 @@ ...@@ -97,31 +94,6 @@
text-align: center; text-align: center;
width: flex-grid(12); width: flex-grid(12);
} }
form {
input[type="text"],
input[type="email"],
input[type="password"] {
height: 45px;
margin-right: flex-gutter();
width: flex-grid(3);
&:last-child {
margin-right: 0px;
}
}
input[type="submit"] {
height: 45px;
width: flex-grid(3);
}
}
h3 {
color: $base-font-color;
font: normal 1.6rem/2rem $sans-serif;
text-align: center;
}
} }
} }
} }
...@@ -129,28 +101,16 @@ ...@@ -129,28 +101,16 @@
.university-partners { .university-partners {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(250,250,250, 0.8) 15%, rgb(250,250,250) 50%, rgba(250,250,250, 0.8) 85%, rgba(255,255,255, 0))); background: rgb(245,245,245);
//@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(250,250,250, 0.8) 15%, rgb(250,250,250) 50%, rgba(250,250,250, 0.8) 85%, rgba(255,255,255, 0)));
border: 1px solid rgb(210,210,210);
@include border-radius(4px);
margin-bottom: 60px; margin-bottom: 60px;
overflow: hidden;
padding: 10px 0px; padding: 10px 0px;
position: relative; position: relative;
width: flex-grid(12); width: flex-grid(12);
&:before {
@extend .faded-hr-divider;
content: "";
display: block;
position: absolute;
top: 0px;
}
&:after {
@extend .faded-hr-divider;
bottom: 0px;
content: "";
display: block;
position: absolute;
}
.partners { .partners {
font-size: 0em; font-size: 0em;
margin: 0 auto; margin: 0 auto;
...@@ -160,6 +120,7 @@ ...@@ -160,6 +120,7 @@
@include inline-block; @include inline-block;
margin-right: 40px; margin-right: 40px;
opacity: 0.7; opacity: 0.7;
position: relative;
&:last-child { &:last-child {
margin-right: 0px; margin-right: 0px;
...@@ -167,6 +128,20 @@ ...@@ -167,6 +128,20 @@
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;
&::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: 200px;
left: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
position: absolute;
top: 50%;
z-index: 1;
}
} }
} }
...@@ -176,6 +151,8 @@ ...@@ -176,6 +151,8 @@
font: 800 italic 2rem/2.2rem $sans-serif; font: 800 italic 2rem/2.2rem $sans-serif;
text-align: center; text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6); text-shadow: 0 1px rgba(255,255,255, 0.6);
position: relative;
z-index: 2;
vertical-align: middle; vertical-align: middle;
} }
...@@ -183,6 +160,8 @@ ...@@ -183,6 +160,8 @@
@include inline-block; @include inline-block;
max-width: 100px; max-width: 100px;
vertical-align: middle; vertical-align: middle;
position: relative;
z-index: 2;
} }
} }
} }
......
lms/static/sass/_shared_footer.scss
...@@ -9,9 +9,11 @@ footer { ...@@ -9,9 +9,11 @@ footer {
} }
nav { nav {
@include box-sizing(border-box);
@include clearfix; @include clearfix;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 10px;
width: flex-grid(12); width: flex-grid(12);
a.logo { a.logo {
...@@ -27,17 +29,8 @@ footer { ...@@ -27,17 +29,8 @@ footer {
font-size: 0em; font-size: 0em;
margin-top: 6px; margin-top: 6px;
&.right {
float: right;
li:first-child {
border: none;
}
}
&.social { &.social {
float: right; float: right;
margin: 0px 30px 0px 0px;
li { li {
border: none; border: none;
...@@ -65,17 +58,33 @@ footer { ...@@ -65,17 +58,33 @@ footer {
} }
.copyright { .copyright {
background: rgb(230,230,230);
height: 50px; height: 50px;
margin-top: 80px; margin-top: 80px;
width: 100%; width: 100%;
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;
}
}
p { p {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal 1rem/1.6rem $sans-serif; font: normal 1rem/1.6rem $sans-serif;
margin: 0 auto; margin: 0 auto;
padding-top: 15px; padding-top: 15px;
//text-align: center; text-align: center;
max-width: 1200px; max-width: 1200px;
a { a {
......
lms/static/sass/_shared_header.scss
...@@ -25,20 +25,6 @@ header.app { ...@@ -25,20 +25,6 @@ header.app {
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
&:hover {
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
content: "";
display: block;
height: 90px;
left: -20px;
position: absolute;
top: -32px;
width: 90px;
z-index: 1;
}
}
} }
.divider { .divider {
......
lms/static/sass/application.css
...@@ -340,7 +340,7 @@ a:link, a:visited { ...@@ -340,7 +340,7 @@ a:link, a:visited {
.container:after { .container:after {
clear: both; } clear: both; }
.faded-hr-divider, .horizontal-divider, .modal .inner-wrapper header hr::after, .modal .inner-wrapper form .honor-code-summary hr::after, .home .university-partners:before, .home .university-partners:after { .faded-hr-divider, .horizontal-divider, footer .copyright hr::after, .modal .inner-wrapper header hr::after, .modal .inner-wrapper form .honor-code-summary hr::after {
background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
...@@ -349,7 +349,7 @@ a:link, a:visited { ...@@ -349,7 +349,7 @@ a:link, a:visited {
height: 1px; height: 1px;
width: 100%; } width: 100%; }
.faded-hr-divider-light, .horizontal-divider::after, .modal .inner-wrapper header hr, .modal .inner-wrapper form .honor-code-summary hr { .faded-hr-divider-light, .horizontal-divider::after, footer .copyright hr, .modal .inner-wrapper header hr, .modal .inner-wrapper form .honor-code-summary hr {
background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0)); background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
...@@ -937,9 +937,13 @@ footer { ...@@ -937,9 +937,13 @@ footer {
position: absolute; position: absolute;
bottom: 0px; } bottom: 0px; }
footer nav { footer nav {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
zoom: 1; zoom: 1;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 10px;
width: 100%; } width: 100%; }
footer nav:before, footer nav:after { footer nav:before, footer nav:after {
content: ""; content: "";
...@@ -958,13 +962,8 @@ footer { ...@@ -958,13 +962,8 @@ footer {
float: left; float: left;
font-size: 0em; font-size: 0em;
margin-top: 6px; } margin-top: 6px; }
footer nav ol.right {
float: right; }
footer nav ol.right li:first-child {
border: none; }
footer nav ol.social { footer nav ol.social {
float: right; float: right; }
margin: 0px 30px 0px 0px; }
footer nav ol.social li { footer nav ol.social li {
border: none; border: none;
padding: 0px 5px; } padding: 0px 5px; }
...@@ -984,15 +983,26 @@ footer { ...@@ -984,15 +983,26 @@ footer {
font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
padding: 5px 0px; } padding: 5px 0px; }
footer .copyright { footer .copyright {
background: #e6e6e6;
height: 50px; height: 50px;
margin-top: 80px; margin-top: 80px;
width: 100%; } width: 100%; }
footer .copyright hr {
border: none;
margin: 0px;
position: relative;
z-index: 2; }
footer .copyright hr::after {
bottom: 0px;
content: "";
display: block;
position: absolute;
top: -1px; }
footer .copyright p { footer .copyright p {
color: #a0a0a0; color: #a0a0a0;
font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
margin: 0 auto; margin: 0 auto;
padding-top: 15px; padding-top: 15px;
text-align: center;
max-width: 1200px; } max-width: 1200px; }
footer .copyright p a { footer .copyright p a {
border-bottom: 1px solid #c8c8c8; border-bottom: 1px solid #c8c8c8;
...@@ -1035,20 +1045,6 @@ header.app { ...@@ -1035,20 +1045,6 @@ header.app {
header.app a.logo img { header.app a.logo img {
position: relative; position: relative;
z-index: 2; } z-index: 2; }
header.app a.logo:hover::before {
background-image: -webkit-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -moz-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -ms-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -o-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
content: "";
display: block;
height: 90px;
left: -20px;
position: absolute;
top: -32px;
width: 90px;
z-index: 1; }
header.app .divider { header.app .divider {
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
...@@ -1906,7 +1902,7 @@ header.app { ...@@ -1906,7 +1902,7 @@ header.app {
.home > header:after { .home > header:after {
clear: both; } clear: both; }
.home > header .video-wrapper { .home > header .video-wrapper {
right: 0px; left: 0px;
position: absolute; position: absolute;
top: 0px; } top: 0px; }
.home > header .video-wrapper .video-player { .home > header .video-wrapper .video-player {
...@@ -1931,10 +1927,10 @@ header.app { ...@@ -1931,10 +1927,10 @@ header.app {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
float: left; float: right;
font-size: 0em; font-size: 0em;
width: 100%; width: 100%;
padding-right: 600px; padding-left: 600px;
padding-top: 20px; } padding-top: 20px; }
.home > header .welcome h1 { .home > header .welcome h1 {
color: #a0a0a0; color: #a0a0a0;
...@@ -1942,7 +1938,6 @@ header.app { ...@@ -1942,7 +1938,6 @@ header.app {
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 20px; margin-bottom: 20px;
position: relative; position: relative;
text-align: center;
text-transform: uppercase; } text-transform: uppercase; }
.home > header .welcome .intro { .home > header .welcome .intro {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
...@@ -1953,14 +1948,12 @@ header.app { ...@@ -1953,14 +1948,12 @@ header.app {
.home > header .welcome .intro p { .home > header .welcome .intro p {
color: #3c3c3c; color: #3c3c3c;
margin: 0px; margin: 0px;
text-align: center;
width: 100%; } width: 100%; }
.home > header .welcome .signup-wrapper { .home > header .welcome .signup-wrapper {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto; width: 91.457%; }
width: 82.915%; }
.home > header .welcome .signup-wrapper .sign-up { .home > header .welcome .signup-wrapper .sign-up {
background: #f0f0f0; background: #f0f0f0;
background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
...@@ -2046,43 +2039,17 @@ header.app { ...@@ -2046,43 +2039,17 @@ header.app {
.home > header .welcome .signup-wrapper .sign-up a:disabled { .home > header .welcome .signup-wrapper .sign-up a:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; } cursor: not-allowed; }
.home > header .welcome .signup-wrapper .sign-up form input[type="text"],
.home > header .welcome .signup-wrapper .sign-up form input[type="email"],
.home > header .welcome .signup-wrapper .sign-up form input[type="password"] {
height: 45px;
margin-right: 2.513%;
width: 23.116%; }
.home > header .welcome .signup-wrapper .sign-up form input[type="text"]:last-child,
.home > header .welcome .signup-wrapper .sign-up form input[type="email"]:last-child,
.home > header .welcome .signup-wrapper .sign-up form input[type="password"]:last-child {
margin-right: 0px; }
.home > header .welcome .signup-wrapper .sign-up form input[type="submit"] {
height: 45px;
width: 23.116%; }
.home > header .welcome .signup-wrapper .sign-up h3 {
color: #3c3c3c;
font: normal 1.6rem/2rem "Open Sans", Verdana, Geneva, sans-serif;
text-align: center; }
.home .university-partners { .home .university-partners {
background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0)); background: #f5f5f5;
background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0)); border: 1px solid #d2d2d2;
background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0)); -webkit-border-radius: 4px;
background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0)); -moz-border-radius: 4px;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(250, 250, 250, 0.8) 15%, #fafafa 50%, rgba(250, 250, 250, 0.8) 85%, rgba(255, 255, 255, 0)); border-radius: 4px;
margin-bottom: 60px; margin-bottom: 60px;
overflow: hidden;
padding: 10px 0px; padding: 10px 0px;
position: relative; position: relative;
width: 100%; } width: 100%; }
.home .university-partners:before {
content: "";
display: block;
position: absolute;
top: 0px; }
.home .university-partners:after {
bottom: 0px;
content: "";
display: block;
position: absolute; }
.home .university-partners .partners { .home .university-partners .partners {
font-size: 0em; font-size: 0em;
margin: 0 auto; margin: 0 auto;
...@@ -2094,11 +2061,28 @@ header.app { ...@@ -2094,11 +2061,28 @@ header.app {
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
margin-right: 40px; margin-right: 40px;
opacity: 0.7; } opacity: 0.7;
position: relative; }
.home .university-partners .partners a:last-child { .home .university-partners .partners a:last-child {
margin-right: 0px; } margin-right: 0px; }
.home .university-partners .partners a:hover { .home .university-partners .partners a:hover {
opacity: 0.9; } opacity: 0.9; }
.home .university-partners .partners a:hover::before {
background-image: -webkit-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -moz-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -ms-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -o-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
content: "";
display: block;
height: 200px;
left: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
position: absolute;
top: 50%;
z-index: 1; }
.home .university-partners .partners .name { .home .university-partners .partners .name {
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
...@@ -2109,6 +2093,8 @@ header.app { ...@@ -2109,6 +2093,8 @@ header.app {
font: 800 italic 2rem/2.2rem "Open Sans", Verdana, Geneva, sans-serif; font: 800 italic 2rem/2.2rem "Open Sans", Verdana, Geneva, sans-serif;
text-align: center; text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); text-shadow: 0 1px rgba(255, 255, 255, 0.6);
position: relative;
z-index: 2;
vertical-align: middle; } vertical-align: middle; }
.home .university-partners .partners img { .home .university-partners .partners img {
display: inline-block; display: inline-block;
...@@ -2117,7 +2103,9 @@ header.app { ...@@ -2117,7 +2103,9 @@ header.app {
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
max-width: 100px; max-width: 100px;
vertical-align: middle; } vertical-align: middle;
position: relative;
z-index: 2; }
.home .highlighted-courses { .home .highlighted-courses {
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
......
lms/templates/footer.html
...@@ -13,21 +13,13 @@ ...@@ -13,21 +13,13 @@
<a href="#">About</a> <a href="#">About</a>
</li> </li>
<li> <li>
<a href="#">Contribute</a> <a href="#">Blog</a>
</li>
</ol>
<ol class="right">
<li>
<a href="/dashboard">My Dashboard</a>
</li> </li>
<li> <li>
<a href="#">Help</a> <a href="#">Jobs</a>
</li>
<li>
<a href="/index">Logout</a>
</li> </li>
</ol> </ol>
<ol class="social"> <ol class="social">
<li> <li>
<a href="#"><img src="${static.url('images/linkedin.png')}" /></a> <a href="#"><img src="${static.url('images/linkedin.png')}" /></a>
...@@ -41,6 +33,7 @@ ...@@ -41,6 +33,7 @@
</ol> </ol>
</nav> </nav>
<section class="copyright"> <section class="copyright">
<hr>
<p>Copyright &copy; 2012.edX. <a href="#">Some rights reserved.</a></p> <p>Copyright &copy; 2012.edX. <a href="#">Some rights reserved.</a></p>
</section> </section>
</footer> </footer>
lms/templates/navigation.html
...@@ -14,11 +14,13 @@ ...@@ -14,11 +14,13 @@
<a href="/courses">Find Courses</a> <a href="/courses">Find Courses</a>
<div class="divider"></div> <div class="divider"></div>
</li> </li>
%if not user.is_authenticated():
<li class="secondary"> <li class="secondary">
<a href="/about">About</a> <a href="/about">About</a>
<a href="#">Blog</a> <a href="#">Blog</a>
<a href="/jobs">Jobs</a> <a href="/jobs">Jobs</a>
</li> </li>
%endif
</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