diff --git a/media/css/devreg/footer.less b/media/css/devreg/footer.less index 27df23ec8e..11d88d32a1 100644 --- a/media/css/devreg/footer.less +++ b/media/css/devreg/footer.less @@ -1,26 +1,34 @@ @import 'lib'; +#footzilla { + background: url(../../img/mkt/logos/footzilla.png) 0 5px no-repeat; + float: left; + text-indent: -9999px; + width: 100px; + a { + display: block; + } +} + +#footzilla, +#footzilla a { + height: 26px; + width: 100px; +} + #footer { .border-box; border-top: 1px solid @faint-gray; color: @note-gray; - padding-top: 2em; + overflow: hidden; + padding: 30px 0; width: 100%; - #footzilla { - background: url(../../img/hub/footzilla.png) no-repeat; - float: left; - height: 50px; - margin-top: 5px; - opacity: .5; - text-indent: -9999px; - width: 100px; - } p, ul { .border-box; - border-left: 1px dotted @faint-gray; - font-size: 12px; + border-left: 1px dotted @light-gray; + font-size: 11px; line-height: 1.3; - margin-bottom: 1.5em; + margin: 0; padding-left: 1em; } p { @@ -29,10 +37,27 @@ } ul { float: right; - line-height: 1.1; + line-height: 1.2; width: 20%; - li + li { - margin-top: 2px; + a { + display: block; + } + } + li + li { + margin-top: 2px; + } + a { + color: lighten(#2189d9, 10%); + &:hover { + color: #2189d9; + text-decoration: underline; } } } + +@media @retina { + #footzilla { + background-image: url(../../img/mkt/logos/footzilla-2x.png); + background-size: 81px auto; + } +} diff --git a/media/css/devreg/lib.less b/media/css/devreg/lib.less index faa8f690bd..002df0a9dd 100644 --- a/media/css/devreg/lib.less +++ b/media/css/devreg/lib.less @@ -46,6 +46,10 @@ @mono-stack: Menlo, "Ubuntu Mono", "Andale Mono", monospace; +// Retina +@retina: ~'screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2)'; + + // Fixed Sizes @page-min-height: 404px; // height of the current gradient background image on #page diff --git a/media/css/ecosystem/documentation.less b/media/css/ecosystem/documentation.less index 7e01e87530..b23f6609eb 100644 --- a/media/css/ecosystem/documentation.less +++ b/media/css/ecosystem/documentation.less @@ -10,7 +10,7 @@ } * { - text-rendering: optimizeLegibility; + text-rendering: optimizeLegibility; } a[rel="external"]:after, a.external:after { @@ -470,20 +470,3 @@ a.app-source, .app-generator-detail #download-link { } } } - -#footer { - float: left; - padding: 1.5em 0 1em; - - p { - width: 550px; - } - - ul { - float: left; - } - - #footzilla { - margin-top: 16px; - } -} diff --git a/media/css/impala/lib.less b/media/css/impala/lib.less index 24e047156f..a8a08b9625 100644 --- a/media/css/impala/lib.less +++ b/media/css/impala/lib.less @@ -31,6 +31,10 @@ @mono-stack: "andale mono", monospace; +// Retina +@retina: ~'screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2)'; + + // Fixed Sizes @page-min-height: 404px; // height of the current gradient background image on #page diff --git a/media/css/impala/promos.less b/media/css/impala/promos.less index 2d140896e7..5f05fc72e1 100644 --- a/media/css/impala/promos.less +++ b/media/css/impala/promos.less @@ -668,10 +668,7 @@ } } -@media screen and (-webkit-min-device-pixel-ratio: 1.5), - screen and (min--moz-device-pixel-ratio: 1.5), - screen and (min--moz-device-pixel-ratio: 1.5), - screen and (min-device-pixel-ratio: 1.5) { +@media @retina { #holiday { .amazon, .ebay { background-size: auto 50%; diff --git a/media/css/mkt/banners.less b/media/css/mkt/banners.less index eb3fae272f..2dc685d6bc 100644 --- a/media/css/mkt/banners.less +++ b/media/css/mkt/banners.less @@ -120,10 +120,7 @@ } } -@media screen and (-webkit-min-device-pixel-ratio: 1.5), - screen and (min--moz-device-pixel-ratio: 1.5), - screen and (min--moz-device-pixel-ratio: 1.5), - screen and (min-device-pixel-ratio: 1.5) { +@media @retina { .incompatible-browser { div { background-image: url(../../img/mkt/icons/firefox-beta-2x.png); diff --git a/media/css/mkt/desktop.less b/media/css/mkt/desktop.less index ef0d1b1701..f4f94c51ff 100644 --- a/media/css/mkt/desktop.less +++ b/media/css/mkt/desktop.less @@ -1,6 +1,18 @@ @import 'lib'; +#footer, +#directory-footer { + display: none; +} + @media (min-width: @desktop) { + body { + background: @white; + } + #page { + background: @grain-src @bg; + } + #featured-home { border-bottom: 1px solid @white; } @@ -46,4 +58,98 @@ } } } + + footer { + padding: 30px 0; + .pad { + margin: 0 auto; + padding: 0; + width: 600px; // TODO: Change this to 768px when we increase page width. + } + ul { + list-style: none; + } + } + + #footer, + #directory-footer { + display: block; + } + + #footer { + background: @white; + border-top-color: rgba(0,0,0,.08); + } + + #directory-footer { + .box-shadow(0 1px 0 rgba(3,16,26,.15) inset); + background: #d5d9dc @grain-src; + //min-height: 100px; + .devhub { + background: url(../../img/mkt/icons/rocket.png) 0 35px no-repeat; + margin: -30px -20px -30px; + padding: 30px 20px 30px 60px; + h1 { + color: @dark-gray; + font-size: 20px; + text-shadow: 0 1px 1px rgba(245,247,250,.75); + } + b { + font-size: 14px; + font-weight: 400; + } + &:hover { + text-decoration: none; + h1 { + color: @black; + } + b { + text-decoration: underline; + } + } + } + .group { + float: left; + min-height: 71px; + padding: 0 20px; // TODO: Change this to 40px when we increase page width. + width: 25%; + position: relative; + &:after, + + .group:before { + content: ""; + display: block; + height: 100%; + position: absolute; + top: 0; + width: 1px; + } + &:after { + .gradient(~'top, rgba(185,190,195,0), rgba(185,190,195,.75) 25%, rgba(185,190,195,.75) 75%, rgba(185,190,195,0) 100%'); + right: 0; + } + + .group:before { + .gradient(~'top, rgba(226,228,231,0), rgba(226,228,231,.75) 25%, rgba(226,228,231,.75) 75%, rgba(226,228,231,0) 100%'); + left: 0; + } + &:first-child { + width: 50%; + } + &:last-child:after { + display: none; + } + a { + display: block; + } + } + } +} + +@media screen and (min-width: @desktop), + @retina { + #directory-footer { + .devhub { + background-image: url(../../img/mkt/icons/rocket-2x.png); + background-size: 47px auto; + } + } } diff --git a/media/css/mkt/lib.less b/media/css/mkt/lib.less index 7e279485d9..ae75a8240e 100644 --- a/media/css/mkt/lib.less +++ b/media/css/mkt/lib.less @@ -96,6 +96,10 @@ @open-stack: "Open Sans", "Helvetica Neue", Arial, sans-serif; +// Retina +@retina: ~'screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2)'; + + // Mixins @grain-src: url(../../img/mkt/grain.png); .grain() { diff --git a/media/css/mkt/splash.less b/media/css/mkt/splash.less index 6814bd3e0c..03f6f0acaf 100644 --- a/media/css/mkt/splash.less +++ b/media/css/mkt/splash.less @@ -35,7 +35,6 @@ } @media screen and (-webkit-min-device-pixel-ratio: 1.5), - screen and (min--moz-device-pixel-ratio: 1.5), screen and (min--moz-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { #splash-overlay { diff --git a/media/img/hub/footzilla.png b/media/img/hub/footzilla.png deleted file mode 100644 index 5184232782..0000000000 Binary files a/media/img/hub/footzilla.png and /dev/null differ diff --git a/media/img/mkt/icons/rocket-2x.png b/media/img/mkt/icons/rocket-2x.png new file mode 100644 index 0000000000..b1a5d13aa2 Binary files /dev/null and b/media/img/mkt/icons/rocket-2x.png differ diff --git a/media/img/mkt/icons/rocket.png b/media/img/mkt/icons/rocket.png new file mode 100644 index 0000000000..003d1f1000 Binary files /dev/null and b/media/img/mkt/icons/rocket.png differ diff --git a/media/img/mkt/logos/footzilla-2x.png b/media/img/mkt/logos/footzilla-2x.png new file mode 100644 index 0000000000..2b6529bff8 Binary files /dev/null and b/media/img/mkt/logos/footzilla-2x.png differ diff --git a/media/img/mkt/logos/footzilla.png b/media/img/mkt/logos/footzilla.png new file mode 100644 index 0000000000..5828b5d164 Binary files /dev/null and b/media/img/mkt/logos/footzilla.png differ diff --git a/mkt/account/tests/test_views.py b/mkt/account/tests/test_views.py index dff8b13753..5d8f3d4d44 100644 --- a/mkt/account/tests/test_views.py +++ b/mkt/account/tests/test_views.py @@ -930,6 +930,10 @@ class TestFeedback(amo.tests.TestCase): """Check that anonymous users get the correct feedback page.""" res = self.client.get(self.url) eq_(res.status_code, 200) + eq_(pq(res.content)('footer .feedback').attr('href'), self.url) + + res = self.client.get(self.url, {'mobile': 'true'}) + eq_(res.status_code, 200) doc = pq(res.content) assert not doc('.toggles') eq_(doc('.header-button.settings').attr('href'), self.url) diff --git a/mkt/asset_bundles.py b/mkt/asset_bundles.py index cf143cf6d9..9cb04e16d4 100644 --- a/mkt/asset_bundles.py +++ b/mkt/asset_bundles.py @@ -154,6 +154,7 @@ CSS = { CSS.update({ 'mkt/consumer-desktop': CSS['mkt/consumer'] + ( # TODO: Split components into individual, appropriate stylesheets. + 'css/devreg/footer.less', 'css/mkt/desktop.less', ), }) diff --git a/mkt/developers/templates/developers/login.html b/mkt/developers/templates/developers/login.html index 1980dbb558..16899de067 100644 --- a/mkt/developers/templates/developers/login.html +++ b/mkt/developers/templates/developers/login.html @@ -17,23 +17,3 @@ {% endblock %} - -{% block sitefooter %} - -{% endblock %} diff --git a/mkt/developers/templates/developers/skeleton_impala.html b/mkt/developers/templates/developers/skeleton_impala.html index 3e722c5df7..c4ca526c05 100644 --- a/mkt/developers/templates/developers/skeleton_impala.html +++ b/mkt/developers/templates/developers/skeleton_impala.html @@ -175,29 +175,7 @@ {% block site_nav_footer %}{% endblock %} - + {% include 'mkt/footer.html' %} {% if not logged %}
diff --git a/mkt/ratings/tests/test_views.py b/mkt/ratings/tests/test_views.py index bed8761dc4..f8d4c11a5c 100644 --- a/mkt/ratings/tests/test_views.py +++ b/mkt/ratings/tests/test_views.py @@ -76,7 +76,7 @@ class TestCreate(ReviewTest): r = self.client.get(self.add) eq_(r.status_code, 200) self.assertTemplateUsed(r, 'ratings/add.html') - eq_(pq(r.content)('#site-header h1').html(), 'Edit Your Review') + assert pq(r.content)('title').text().startswith('Edit Your Review') def test_add_admin(self): self.log_in_admin() diff --git a/mkt/templates/mkt/base_desktop.html b/mkt/templates/mkt/base_desktop.html index 1f9771d1da..d6f6dc7e8c 100644 --- a/mkt/templates/mkt/base_desktop.html +++ b/mkt/templates/mkt/base_desktop.html @@ -6,3 +6,29 @@ {% block site_css %} {{ css('mkt/consumer-desktop') }} {% endblock %} + +{% block sitefooter %} + + {% include 'mkt/footer.html' %} +{% endblock %} diff --git a/mkt/templates/mkt/footer.html b/mkt/templates/mkt/footer.html new file mode 100644 index 0000000000..55f23d7186 --- /dev/null +++ b/mkt/templates/mkt/footer.html @@ -0,0 +1,22 @@ +