From a63a93873fc199952cbb2637ec32e1eca7a51588 Mon Sep 17 00:00:00 2001 From: Galen Frechette Date: Mon, 25 Jun 2012 17:47:36 -0400 Subject: [PATCH] various ui tweeks --- lms/static/sass/_index.scss | 77 +++++++----------- lms/static/sass/_shared_footer.scss | 31 +++++--- lms/static/sass/_shared_header.scss | 14 ---- lms/static/sass/application.css | 116 +++++++++++++--------------- lms/templates/footer.html | 17 ++-- lms/templates/navigation.html | 2 + 6 files changed, 107 insertions(+), 150 deletions(-) diff --git a/lms/static/sass/_index.scss b/lms/static/sass/_index.scss index 3429ec80fc..8635532826 100644 --- a/lms/static/sass/_index.scss +++ b/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; } } } diff --git a/lms/static/sass/_shared_footer.scss b/lms/static/sass/_shared_footer.scss index 81cc64ecf3..4bcc7b1b66 100644 --- a/lms/static/sass/_shared_footer.scss +++ b/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 { diff --git a/lms/static/sass/_shared_header.scss b/lms/static/sass/_shared_header.scss index 1d1dde37d5..2af61dfdbe 100644 --- a/lms/static/sass/_shared_header.scss +++ b/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 { diff --git a/lms/static/sass/application.css b/lms/static/sass/application.css index d82ceba1d3..62e53af279 100755 --- a/lms/static/sass/application.css +++ b/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; diff --git a/lms/templates/footer.html b/lms/templates/footer.html index 358dfff111..a5d32bf378 100644 --- a/lms/templates/footer.html +++ b/lms/templates/footer.html @@ -13,21 +13,13 @@ About
  • - Contribute + Blog +
    • +
  • + Jobs
    • -
      -
    1. - My Dashboard -
      2. -
    2. - Help -
      3. -
    3. - Logout -
      4. -
    1. @@ -41,6 +33,7 @@
    +

    Copyright © 2012.edX. Some rights reserved.

    diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html index fe1656cfc2..8198ea097a 100644 --- a/lms/templates/navigation.html +++ b/lms/templates/navigation.html @@ -14,11 +14,13 @@ Find Courses
    + %if not user.is_authenticated():
  • About Blog Jobs
    • + %endif