Skip to content

Commit

Permalink
Merge pull request #66 from sgarrity/bug-744918
Browse files Browse the repository at this point in the history 
Bug 744918 - Implement updated /Central Page
  • Loading branch information
@jlongster
jlongster committed Apr 23, 2012
2 parents 1c14eb8 + 0f97120 commit 3a168a8
Show file tree
Hide file tree
Showing 9 changed files with 203 additions and 415 deletions.
317 changes: 104 additions & 213 deletions apps/firefox/templates/firefox/central.html
View file

Large diffs are not rendered by default.

198 changes: 68 additions & 130 deletions media/css/firefox/central.less
View file
@@ -1,41 +1,54 @@
@import "template.less"; @import "template.less";


#main-feature h1 { h1.large {
margin-bottom: 48px; margin-bottom: 48px;

}

#main-feature {
#gradient > .radial(center, 45px, ellipse, farthest-corner, #eee 0%, #ffffff 100%);
margin-bottom: @baseLine * 2;
h2 {
margin-bottom: @baseLine * 2;
}
} }

.roll-over { .roll-over {
position: absolute; position: absolute;
width: 160px; top: 20px;
padding: 12px 12px 12px 60px; right: 20px;
margin-top: -38px; width: 88px;
.small; padding: 12px 12px 12px 68px;
color: #404040; font-size: @smallFontSize;
line-height: 100%;
color: @textColorSecondary;
background-image: url(/media/img/firefox/central/callout-down.png); background-image: url(/media/img/firefox/central/callout-down.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 18px 50%; background-position: 18px 50%;
background-color: rgba(0,0,0,0.02); background-color: rgba(0,0,0,0.05);
background-size: 30px; background-size: 30px;
box-shadow: 0 0 3px rgba(0,0,0,0.1) inset; box-shadow: 0 0 3px rgba(0,0,0,0.1) inset;
border-bottom: 1px solid rgba(255,255,255,0.8); border-bottom: 1px solid rgba(255,255,255,0.8);
} }


#figure { #figure {
width: 940px;
position: relative; position: relative;
margin: 10px 0 50px -20px; margin: 0;
margin-left: -48px;
margin-bottom: -48px;
} }


#figure .platform-img { #figure img {
position: relative; display: block;
top: 45px; height: 208px;
margin-left: -20px; width: 992px;
} }


#figure #svg-path { #figure #svg-path {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; bottom: -57px;
width: 100%; width: 952px;
height: 300px; height: 300px;
background: url(/media/img/firefox/central/path.svg) left top no-repeat; background: url(/media/img/firefox/central/path.svg) left top no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
Expand Down Expand Up @@ -122,128 +135,53 @@
} }




#features { #features h1 {
position: absolute; margin-bottom: @baseLine * 2;
top: 270px;
left: 50px;
width: 853px;
height: 136px;
}

#features p,
#features ul {
float: left;
margin: 0 5px;
}

#features p {
width: 230px;
margin-right: 30px;
font-size: 32px;
.open-sans-light;
line-height: 110%;
}

#features li {
display: block;
margin-bottom: 24px;
margin-left: 12px;
}
#features li a {
display: block;
.open-sans-light;
font-size: 22px;
letter-spacing: -1px;
}
#features li a:after {
content: " »";
}
#overlay {
position: absolute;
top: 0;
left: 0;
background: black;
opacity: .2;
filter: alpha(opacity=20);
width: 100%;
display: none;
z-index: 9999;
}

.overlay-box {
position: fixed;
_position: absolute;
top: 0;
left: 0;
display: none;
width: 910px;
background: white;
background: -moz-linear-gradient(top, white, white 50%, #f4f9ff);
background: -o-linear-gradient(top, white, white 50%, #f4f9ff);
background: -webkit-linear-gradient(top, white, white 50%, #f4f9ff);
background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(0.5, white), to(#f4f9ff));
border: 1px solid #b0c1d2;
box-shadow: 0 3px rgba(0,0,0, .1), inset 0 -2px #e0ecf9, inset 0 0 12px rgba(223, 236, 249, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 35px;
clear: both;
z-index: 10000;
color: #484848;
text-align: left;
} }


.overlay-box .close { #features .figure {
position: absolute;
top: 25px;
right: 25px;
display: block; display: block;
.button-white; width: (@gridColumnWidth * 5) + (@gridGutterWidth * 4);
margin-bottom: @baseLine;
} }


.overlay-box .info { #features .figcaption {
float: left; text-align: center;
width: 360px;
}

.overlay-box .info p {
border-bottom: 1px dotted @borderColor;
padding-bottom: 12px;
}
.overlay-box h1 {
font-size: 32px;
letter-spacing: -1px;
}
.overlay-box div p {
font-size: 16px;
}
.overlay-box ul {
margin: 0;
}
.overlay-box li {
display: block; display: block;
font-size: 18px; padding-top: @baseLine / 2;
line-height: 100%; padding-bottom: @baseLine / 2;
margin: 0 0 12px 0; color: @textColorSecondary;
.open-sans-light; .open-sans-light;
border-bottom: 1px dotted @borderColor;
} }
.overlay-box li a::after {
content: " »"; #features .pager-tabs {
} .span(4);
.overlay-box .figure { margin-left: 0;
float: left;
display: block;
width: 480px;
margin: 70px 0 0 30px ;
}
.overlay-box .figure img, .overlay-box .figure video {
box-shadow: 0 1px 2px rgba(0,0,0,.75);
}
.overlay-box .figcaption {
text-align: center;
display: block;
padding-top: 6px;
font-size: 18px;
.open-sans-light; .open-sans-light;
font-size: 22px;
li {
list-style-type: none;
margin: 0 0 @baseLine 0;
a.selected {
color: @textColorSecondary;
content: "";
}
}

a:after {
content: " »";
}
}

#features .pager-content {
.span(5);
margin-bottom: @baseLine * 2;
li {
margin-left: 0;
list-style-type: none;
a:after {
content: " »";
}
}
} }
Binary file modified media/img/firefox/central/screen-linux.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified media/img/firefox/central/screen-mac.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified media/img/firefox/central/screen.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added media/img/firefox/central/speed-illustration.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added media/img/firefox/central/sync-illustration.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
102 changes: 30 additions & 72 deletions media/js/firefox/central.js
View file
Expand Up @@ -27,84 +27,42 @@ var gPlatformVista = navigator.userAgent.indexOf('Windows NT 6.0') !=-1


$('<div id="overlay" />').appendTo('body'); $('<div id="overlay" />').appendTo('body');


$('#features li a')
.click(function(e) {
e.preventDefault();
$('#overlay')
.css('display', 'block')
.css('height', $(document).height() + 'px');

var width = $('#overlay-' + this.id).outerWidth();
var height = $('#overlay-' + this.id).outerHeight();
var docWidth = $(document).width();
var viewHeight = $(window).height();


var $overlay = $('#overlay-' + this.id);
var top = ((viewHeight - height) / 2);
if ($overlay.css('position') == 'absolute') {
top += $(window).scrollTop();
}
$overlay.appendTo('body')
.css('display', 'block')
.css('top', top + 'px')
.css('left', ((docWidth - width) / 2) + 'px')
});

$('#overlay,.overlay-box .close').click(function(e) {
e.preventDefault();
$('.overlay-box').each(function() {
$(this).css('display', 'none');
});
$('#overlay').css('display', 'none');
$('video').each(function() {
if (typeof this.pause != 'undefined') {
this.pause();
}
});
});
var tips = {} var tips = {}
tips[PLATFORM_WINDOWS] = [ tips[PLATFORM_WINDOWS] = [
{'left': 77, 'top': 73, 'id': 'firefox-menu-button'}, {'left': 113, 'top': 34, 'id': 'firefox-menu-button'},
{'left': 28, 'top': 105, 'id': 'app-tab'}, {'left': 42, 'top': 70, 'id': 'app-tab', 'direction': 'up'},
{'left': 37, 'top': 137, 'id': 'private-browsing', 'direction': 'up'}, {'left': 89, 'top': 102, 'id': 'instant-website-id', 'direction': 'up'},
{'left': 88, 'top': 137, 'id': 'instant-website-id', 'direction': 'up'}, {'left': 245, 'top': 62, 'id': 'tabs-on-top'},
{'left': 155, 'top': 105, 'id': 'tabs-on-top'}, {'left': 325, 'top': 97, 'id': 'awesome-bar', 'direction': 'up'},
{'left': 345, 'top': 137, 'id': 'awesome-bar', 'direction': 'up'}, {'left': 349, 'top': 56, 'id': 'addons-manager'},
{'left': 355, 'top': 105, 'id': 'addons-manager'}, {'left': 530, 'top': 65, 'id': 'switch-to-tab', 'direction': 'up'},
{'left': 510, 'top': 137, 'id': 'switch-to-tab', 'direction': 'up'}, {'left': 676, 'top': 82, 'id': 'customize-toolbar'},
{'left': 575, 'top': 105, 'id': 'password-manager'}, {'left': 755, 'top': 41, 'id': 'themes'},
{'left': 695, 'top': 105, 'id': 'customize-toolbar'}, {'left': 933, 'top': 87, 'id': 'bookmark-button'},
{'left': 805, 'top': 105, 'id': 'personas'}, {'left': 894, 'top': 107, 'id': 'home-button', 'direction': 'up'},
{'left': 920, 'top': 137, 'id': 'bookmark-button', 'direction': 'up'},
{'left': 928, 'top': 105, 'id': 'sync'}
]; ];
tips[PLATFORM_MACOSX] = [ tips[PLATFORM_MACOSX] = [
{'left': 18, 'top': 105, 'id': 'app-tab'}, {'left': 38, 'top': 57, 'id': 'app-tab'},
{'left': 37, 'top': 137, 'id': 'private-browsing', 'direction': 'up'}, {'left': 76, 'top': 101, 'id': 'instant-website-id', 'direction': 'up'},
{'left': 80, 'top': 137, 'id': 'instant-website-id', 'direction': 'up'}, {'left': 245, 'top': 57, 'id': 'tabs-on-top'},
{'left': 155, 'top': 105, 'id': 'tabs-on-top'}, {'left': 345, 'top': 97, 'id': 'awesome-bar', 'direction': 'up'},
{'left': 345, 'top': 137, 'id': 'awesome-bar', 'direction': 'up'}, {'left': 355, 'top': 61, 'id': 'addons-manager'},
{'left': 355, 'top': 105, 'id': 'addons-manager'}, {'left': 510, 'top': 62, 'id': 'switch-to-tab', 'direction': 'up'},
{'left': 510, 'top': 137, 'id': 'switch-to-tab', 'direction': 'up'}, {'left': 660, 'top': 88, 'id': 'customize-toolbar'},
{'left': 575, 'top': 105, 'id': 'password-manager'}, {'left': 750, 'top': 41, 'id': 'themes'},
{'left': 695, 'top': 105, 'id': 'customize-toolbar'}, {'left': 940, 'top': 87, 'id': 'bookmark-button'},
{'left': 805, 'top': 105, 'id': 'personas'}, {'left': 899, 'top': 101, 'id': 'home-button', 'direction': 'up'},
{'left': 920, 'top': 137, 'id': 'bookmark-button', 'direction': 'up'},
{'left': 928, 'top': 105, 'id': 'sync'}
]; ];
tips[PLATFORM_LINUX] = [ tips[PLATFORM_LINUX] = [
{'left': 18, 'top': 130, 'id': 'app-tab'}, {'left': 42, 'top': 94, 'id': 'app-tab'},
{'left': 37, 'top': 170, 'id': 'private-browsing', 'direction': 'up'}, {'left': 80, 'top': 142, 'id': 'instant-website-id', 'direction': 'up'},
{'left': 91, 'top': 170, 'id': 'instant-website-id', 'direction': 'up'}, {'left': 155, 'top': 95, 'id': 'tabs-on-top'},
{'left': 155, 'top': 130, 'id': 'tabs-on-top'}, {'left': 445, 'top': 134, 'id': 'awesome-bar', 'direction': 'up'},
{'left': 345, 'top': 170, 'id': 'awesome-bar', 'direction': 'up'}, {'left': 415, 'top': 98, 'id': 'addons-manager'},
{'left': 355, 'top': 130, 'id': 'addons-manager'}, {'left': 510, 'top': 110, 'id': 'switch-to-tab', 'direction': 'up'},
{'left': 510, 'top': 170, 'id': 'switch-to-tab', 'direction': 'up'}, {'left': 699, 'top': 127, 'id': 'customize-toolbar'},
{'left': 575, 'top': 130, 'id': 'password-manager'}, {'left': 785, 'top': 50, 'id': 'themes'},
{'left': 695, 'top': 130, 'id': 'customize-toolbar'}, {'left': 945, 'top': 123, 'id': 'home-button'},
{'left': 805, 'top': 130, 'id': 'personas'},
{'left': 928, 'top': 130, 'id': 'sync'}
]; ];




Expand Down
1 change: 1 addition & 0 deletions settings/base.py
View file
Expand Up @@ -189,6 +189,7 @@ def JINJA_CONFIG():
'firefox_central': ( 'firefox_central': (
'js/mozilla-video-tools.js', 'js/mozilla-video-tools.js',
'js/firefox/central.js', 'js/firefox/central.js',
'js/mozilla-pager.js',
), ),
'firefox_customize': ( 'firefox_customize': (
'js/mozilla-video-tools.js', 'js/mozilla-video-tools.js',
Expand Down

0 comments on commit 3a168a8

Please sign in to comment.