Skip to content

E
edx-platform
Commit a63a9387 by Galen Frechette
Options

various ui tweeks

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