Permalink
Browse files

[bug 795870] Mobile redesign base styles

  • Loading branch information...
1 parent 447d0b7 commit 0530cb1363df69e5ce9d6261863013db2f8969a7 @rehandalal rehandalal committed Oct 16, 2012
@@ -25,3 +25,16 @@
</button>
</form>
{%- endmacro %}
+
+{% macro mobile_nav_form(q='', params=None) %}
+ <form id="search" action="{{ url('search') }}">
+ {% if params %}
+ {% for k, v in params.items() %}
+ <input type="hidden" name="{{ k }}" value="{{ v }}" />
+ {% endfor %}
+ {% endif %}
+ <input type="hidden" name="esab" value="{% if waffle.flag('search-ab') %}a{% else %}b{% endif %}">
+ <input name="q" placeholder="{{ _('Search Mozilla Support') }}" required="required" type="search" value="{{ q }}">
+ <button class="icon-sprite" type="submit">{{ _('Search') }}</button>
+ </form>
+{% endmacro %}
Binary file not shown.
Oops, something went wrong.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.
Binary file not shown.
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,39 @@
+(function($) {
+ $(function() {
+ // Menu toggling
+ $('#menu-button').on('click', function() {
+ $page = $('#page');
+ $nav = $('body > nav');
+
+ var animation = {};
+
+ if ($('body').data('orientation') === 'right') {
+ if ($page.css('right') === '0px') {
+ animation.right = $nav.outerWidth();
+ } else {
+ animation.right = 0;
+ }
+ } else {
+ if ($page.css('left') === '0px') {
+ animation.left = $nav.outerWidth();
+ } else {
+ animation.left = 0;
+ }
+ }
+
+ $page.animate(animation);
+ });
+
+ // iOS Standalone Web App Fix
+ if (("standalone" in window.navigator) && window.navigator.standalone) {
+ $(document).on('click', 'a', function(event) {
+ var href = $(event.target).attr('href');
+
+ if (href) {
+ event.preventDefault();
+ location.href = href;
+ }
+ });
+ }
+ });
+})(jQuery)
View
@@ -1,45 +1,66 @@
-@font-face {
- font-family: 'OpenSans';
- src: url('../fonts/OpenSans-Regular-webfont.eot'); /* IE9 Compat Modes */
- src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/OpenSans-Regular-webfont.woff') format('woff'), /* Modern Browsers */
- url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/OpenSans-Regular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
-}
+.fonts(@fontpath:'../fonts') {
+ @font-face {
+ font-family: 'OpenSans';
+ src: url('@{fontpath}/OpenSans-Regular-webfont.eot'); /* IE9 Compat Modes */
+ src: url('@{fontpath}/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('@{fontpath}/OpenSans-Regular-webfont.woff') format('woff'), /* Modern Browsers */
+ url('@{fontpath}/OpenSans-Regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('@{fontpath}/OpenSans-Regular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
+ }
-@font-face {
- font-family: 'OpenSans';
- font-weight: bold;
- src: url('../fonts/OpenSans-Semibold-webfont.eot'); /* IE9 Compat Modes */
- src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'), /* Modern Browsers */
- url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/OpenSans-Semibold-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
-}
+ @font-face {
+ font-family: 'OpenSans';
+ font-weight: bold;
+ src: url('@{fontpath}/OpenSans-Semibold-webfont.eot'); /* IE9 Compat Modes */
+ src: url('@{fontpath}/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('@{fontpath}/OpenSans-Semibold-webfont.woff') format('woff'), /* Modern Browsers */
+ url('@{fontpath}/OpenSans-Semibold-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('@{fontpath}/OpenSans-Semibold-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
+ }
-@font-face {
- font-family: 'OpenSansLight';
- src: url('../fonts/OpenSans-Light-webfont.eot'); /* IE9 Compat Modes */
- src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/OpenSans-Light-webfont.woff') format('woff'), /* Modern Browsers */
- url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/OpenSans-Light-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
-}
+ @font-face {
+ font-family: 'OpenSansLight';
+ src: url('@{fontpath}/OpenSans-Light-webfont.eot'); /* IE9 Compat Modes */
+ src: url('@{fontpath}/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('@{fontpath}/OpenSans-Light-webfont.woff') format('woff'), /* Modern Browsers */
+ url('@{fontpath}/OpenSans-Light-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('@{fontpath}/OpenSans-Light-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
+ }
-@font-face {
- font-family: 'MetaBold';
- src: url('../fonts/MetaWebPro-Bold.eot'); /* IE9 Compat Modes */
- src: url('../fonts/MetaWebPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/MetaWebPro-Bold.woff') format('woff'), /* Modern Browsers */
- url('../fonts/MetaWebPro-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/MetaWebPro-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
-}
+ @font-face {
+ font-family: 'MetaBold';
+ src: url('@{fontpath}/MetaWebPro-Bold.eot'); /* IE9 Compat Modes */
+ src: url('@{fontpath}/MetaWebPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('@{fontpath}/MetaWebPro-Bold.woff') format('woff'), /* Modern Browsers */
+ url('@{fontpath}/MetaWebPro-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('@{fontpath}/MetaWebPro-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
+ }
-@font-face {
- font-family: 'MetaMedium';
- src: url('../fonts/MetaWebPro-Medium.eot'); /* IE9 Compat Modes */
- src: url('../fonts/MetaWebPro-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('../fonts/MetaWebPro-Medium.woff') format('woff'), /* Modern Browsers */
- url('../fonts/MetaWebPro-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
- url('../fonts/MetaWebPro-Medium.svg#svgFontName') format('svg'); /* Legacy iOS */
+ @font-face {
+ font-family: 'MetaMedium';
+ src: url('@{fontpath}/MetaWebPro-Medium.eot'); /* IE9 Compat Modes */
+ src: url('@{fontpath}/MetaWebPro-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('@{fontpath}/MetaWebPro-Medium.woff') format('woff'), /* Modern Browsers */
+ url('@{fontpath}/MetaWebPro-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('@{fontpath}/MetaWebPro-Medium.svg#svgFontName') format('svg'); /* Legacy iOS */
+ }
+
+ @font-face {
+ font-family: 'Moz';
+ src: url('@{fontpath}/Moz-Regular-webfont.eot'); /* IE9 Compat Modes */
+ src: url('@{fontpath}/Moz-Regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('@{fontpath}/Moz-Regular-webfont.woff') format('woff'), /* Modern Browsers */
+ url('@{fontpath}/Moz-Regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('@{fontpath}/Moz-Regular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
+ }
+
+ @font-face {
+ font-family: 'Moz';
+ font-weight: bold;
+ src: url('@{fontpath}/Moz-Medium-webfont.eot'); /* IE9 Compat Modes */
+ src: url('@{fontpath}/Moz-Medium-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('@{fontpath}/Moz-Medium-webfont.woff') format('woff'), /* Modern Browsers */
+ url('@{fontpath}/Moz-Medium-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('@{fontpath}/Moz-Medium-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
+ }
}
@@ -6,6 +6,8 @@
@import 'ui.less';
@import 'includes/kbox.less';
+.fonts();
+
a,
a:link,
a:visited {
@@ -0,0 +1,186 @@
+@import '../fonts.less';
+@import '../variables.less';
+@import '../vendors.less';
+
+.fonts('../../fonts');
+
+html, body {
+ height: 100%;
+}
+
+body {
+ font-family: @Moz;
+ overflow-x: hidden;
+ position: relative;
+
+ > * {
+ -webkit-transform: translateZ(0px);
+ }
+
+ > nav {
+ background: #323c3e url('../../img/grain.png') 0 0 repeat;
+ bottom: 0;
+ color: #fff;
+ left: 0;
+ overflow: auto;
+ position: absolute;
+ top: 0;
+ width: 270px;
+ z-index: 0;
+
+ > a,
+ > header {
+ border-bottom: 1px solid #929e9e;
+ }
+
+ > a,
+ > a:visited,
+ > a:hover {
+ color: #fff;
+ display: block;
+ font-size: 17px;
+ padding: 16px 16px 10px 16px;
+ text-decoration: none;
+ }
+
+ > header {
+ .linear-gradient-top(#1a2122, #1a2122, 0, #1b2324, 100%, url('../../img/grain.png'));
+ font-size: 14px;
+ font-weight: bold;
+ height: 29px;
+ line-height: 29px;
+ padding: 0 16px;
+ }
+
+ #search-bar {
+ .linear-gradient-top(#253132, #2c393b, 0, #253132, 100%, url('../../img/grain.png'));
+ .box-shadow(0 0 3px 0 rgba(0, 0, 0, 0.75));
+ padding: 10px 16px;
+
+ form {
+ display: block;
+ position: relative;
+ width: 238px;
+
+ button[type='submit'] {
+ background-color: transparent;
+ background-position: -54px -177px;
+ border: 0;
+ height: 18px;
+ margin: 0;
+ outline: 0;
+ padding: 0;
+ position: absolute;
+ right: 6px;
+ text-indent: -9999px;
+ top: 6px;
+ width: 18px;
+ }
+
+ input[type='search'] {
+ background: #283235;
+ border: 1px solid rgba(0, 0, 0, 0.25);
+ .border-radius(3px);
+ .box-shadow(2px 2px 3px 0 rgba(0, 0, 0, 0.25) inset);
+ color: #849b9f;
+ font-family: @Moz;
+ font-size: 14px;
+ outline: none;
+ padding: 5px 30px 4px 4px;
+ width: 200px;
+ }
+ }
+ }
+ }
+
+ &[data-orientation='right'] {
+ > nav {
+ left: auto;
+ right: 0;
+ }
+
+ #page {
+ left: auto;
+ right: 0;
+ }
+ }
+}
+
+.icon-sprite {
+ background: url('../../img/mobile/icons-sprite.png') 0 0 no-repeat;
+}
+
+.logo-sprite {
+ background: url('../../img/mobile/logos-sprite.png') -50px -50px no-repeat;
+ height: 48px;
+ width: 48px;
+
+ &.logo-firefox {
+ background-position: -50px -50px;
+ }
+}
+
+#page {
+ background: #fff;
+ bottom: 0;
+ .box-shadow(0 0 10px 0 rgba(0, 0, 0, 0.8));
+ left: 0;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ z-index: 10;
+ width: 100%;
+
+ > header {
+ .gradient(#cd6723, #cd6723, #bb482d);
+ border-bottom: 1px solid #992f21;
+ .box-shadow(0 0 4px 0 rgba(0, 0, 0, 0.75));
+ color: #fff;
+ height: 50px;
+ overflow: hidden;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 100%;
+ z-index: 10;
+
+ h1 {
+ font-size: 24px;
+ font-weight: normal;
+ line-height: 50px;
+ margin: 0 16px;
+ }
+ }
+
+ .wrapper {
+ bottom: 0;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 51px;
+ }
+}
+
+#menu-button {
+ background-position: -50px -50px;
+ cursor: pointer;
+ float: right;
+ height: 24px;
+ margin: 13px;
+ width: 24px;
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
+ .icon-sprite {
+ background-image: url('../../img/mobile/icons-sprite-2x.png');
+ .background-size(124px 248px);
+ }
+
+ .logo-sprite {
+ background-image: url('../../img/mobile/logos-sprite-2x.png');
+ .background-size(148px 148px)
+ }
+}
@@ -18,4 +18,5 @@
@OpenSans: 'OpenSans', Arial, Helvetica, sans-serif;
@OpenSansLight: 'OpenSansLight', Arial, Helvetica, sans-serif;
@MetaBold: 'MetaBold', Arial, Helvetica, sans-serif;
-@MetaMedium: 'MetaMedium', Arial, Helvetica, sans-serif;
+@MetaMedium: 'MetaMedium', Arial, Helvetica, sans-serif;
+@Moz: 'Moz', Verdana, Helvetica, Arial, sans-serif;
@@ -0,0 +1,2 @@
+INSERT IGNORE INTO `waffle_flag` (`name`, `everyone`, `superusers`, `staff`, `authenticated`, `rollout`, `note`, `testing`, `created`, `modified`) VALUES
+('new-theme', 0, 0, 0, 0, 0, '', 0, NOW(), NOW());
View
@@ -522,6 +522,10 @@ def JINJA_CONFIG():
'css/mobile.css',
'css/wiki_syntax.css',
),
+ 'mobile-new': (
+ 'css/normalize.css',
+ 'less/mobile/main.less',
+ ),
'messages': (
'css/users.autocomplete.css',
'less/messages.less',
@@ -648,6 +652,10 @@ def JINJA_CONFIG():
'js/aaq.js',
'js/mobile.js',
),
+ 'mobile-new': (
+ 'js/libs/jquery-1.7.1.min.js',
+ 'js/mobile/ui.js',
+ ),
'messages': (
'js/markup.js',
'js/libs/jquery.autoresize.js',
Oops, something went wrong.

0 comments on commit 0530cb1

Please sign in to comment.