Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Bug 830644 - [FTU][Hidpi]Support high resolution devices #9007

Merged
merged 1 commit into from

2 participants

@basiclines
Collaborator
  • Updated @2x images
  • Converted some px to rem rules

In order to test this PR you need to:

  • HIDPI Device: HIDPI=1 make install-gaia
  • non-HIDPI Device: make install-gaia
  • B2G desktop: run it with --screen=480x800 flag

This is the updated version of #8737 fixing the issues addressed by @fcampo

@basiclines basiclines merged commit c0ec827 into mozilla-b2g:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 8, 2013
  1. @rexboy7 @basiclines
This page is out of date. Refresh to see the latest.
Showing with 25 additions and 9 deletions.
  1. BIN  apps/communications/ftu/css/images/bg_bubbles@2x.png
  2. BIN  apps/communications/ftu/css/images/checked.png
  3. BIN  apps/communications/ftu/css/images/checked@2x.png
  4. BIN  apps/communications/ftu/css/images/icon_tour@2x.png
  5. BIN  apps/communications/ftu/css/images/import_fb.png
  6. BIN  apps/communications/ftu/css/images/import_fb@2x.png
  7. BIN  apps/communications/ftu/css/images/import_sim.png
  8. BIN  apps/communications/ftu/css/images/import_sim@2x.png
  9. BIN  apps/communications/ftu/css/images/map@2x.png
  10. BIN  apps/communications/ftu/css/images/next@2x.png
  11. BIN  apps/communications/ftu/css/images/prev@2x.png
  12. BIN  apps/communications/ftu/css/images/thumb_up@2x.png
  13. BIN  apps/communications/ftu/css/images/timezone/+0000@2x.png
  14. BIN  apps/communications/ftu/css/images/timezone/+0100@2x.png
  15. BIN  apps/communications/ftu/css/images/timezone/+0200@2x.png
  16. BIN  apps/communications/ftu/css/images/timezone/+0300@2x.png
  17. BIN  apps/communications/ftu/css/images/timezone/+0330@2x.png
  18. BIN  apps/communications/ftu/css/images/timezone/+0400@2x.png
  19. BIN  apps/communications/ftu/css/images/timezone/+0500@2x.png
  20. BIN  apps/communications/ftu/css/images/timezone/+0600@2x.png
  21. BIN  apps/communications/ftu/css/images/timezone/+0630@2x.png
  22. BIN  apps/communications/ftu/css/images/timezone/+0700@2x.png
  23. BIN  apps/communications/ftu/css/images/timezone/+0800@2x.png
  24. BIN  apps/communications/ftu/css/images/timezone/+0845@2x.png
  25. BIN  apps/communications/ftu/css/images/timezone/+0900@2x.png
  26. BIN  apps/communications/ftu/css/images/timezone/+0930@2x.png
  27. BIN  apps/communications/ftu/css/images/timezone/+1000@2x.png
  28. BIN  apps/communications/ftu/css/images/timezone/+1100@2x.png
  29. BIN  apps/communications/ftu/css/images/timezone/+1200@2x.png
  30. BIN  apps/communications/ftu/css/images/timezone/+1300@2x.png
  31. BIN  apps/communications/ftu/css/images/timezone/+1400@2x.png
  32. BIN  apps/communications/ftu/css/images/timezone/+430@2x.png
  33. BIN  apps/communications/ftu/css/images/timezone/+530@2x.png
  34. BIN  apps/communications/ftu/css/images/timezone/+545@2x.png
  35. BIN  apps/communications/ftu/css/images/timezone/-0100@2x.png
  36. BIN  apps/communications/ftu/css/images/timezone/-0200@2x.png
  37. BIN  apps/communications/ftu/css/images/timezone/-0300@2x.png
  38. BIN  apps/communications/ftu/css/images/timezone/-0330@2x.png
  39. BIN  apps/communications/ftu/css/images/timezone/-0400@2x.png
  40. BIN  apps/communications/ftu/css/images/timezone/-0500@2x.png
  41. BIN  apps/communications/ftu/css/images/timezone/-0600@2x.png
  42. BIN  apps/communications/ftu/css/images/timezone/-0700@2x.png
  43. BIN  apps/communications/ftu/css/images/timezone/-0800@2x.png
  44. BIN  apps/communications/ftu/css/images/timezone/-0900@2x.png
  45. BIN  apps/communications/ftu/css/images/timezone/-1000@2x.png
  46. BIN  apps/communications/ftu/css/images/timezone/-1100@2x.png
  47. BIN  apps/communications/ftu/css/images/timezone/-1200@2x.png
  48. BIN  apps/communications/ftu/css/images/timezone/-430@2x.png
  49. BIN  apps/communications/ftu/css/images/timezone/-930@2x.png
  50. BIN  apps/communications/ftu/css/images/timezone/map@2x.png
  51. BIN  apps/communications/ftu/css/images/tutorial/1@2x.png
  52. BIN  apps/communications/ftu/css/images/tutorial/2@2x.png
  53. BIN  apps/communications/ftu/css/images/tutorial/3@2x.png
  54. BIN  apps/communications/ftu/css/images/tutorial/4@2x.png
  55. BIN  apps/communications/ftu/css/images/tutorial/5@2x.png
  56. BIN  apps/communications/ftu/css/images/wifi_connected_locked_sprite@2x.png
  57. BIN  apps/communications/ftu/css/images/wifi_connected_sprite.png
  58. BIN  apps/communications/ftu/css/images/wifi_connected_sprite@2x.png
  59. BIN  apps/communications/ftu/css/images/wifi_disconnected_locked_sprite@2x.png
  60. BIN  apps/communications/ftu/css/images/wifi_disconnected_sprite@2x.png
  61. +23 −8 apps/communications/ftu/css/style.css
  62. +2 −0  apps/communications/ftu/index.html
  63. +0 −1  shared/style/responsive.css
View
BIN  apps/communications/ftu/css/images/bg_bubbles@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/checked.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/checked@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/icon_tour@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/import_fb.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/import_fb@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/import_sim.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/import_sim@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/map@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/next@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/prev@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/thumb_up@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/timezone/+0000@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/timezone/+0100@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/timezone/+0200@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/timezone/+0300@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/timezone/+0330@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/timezone/+0400@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/timezone/+0500@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/timezone/+0600@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/timezone/+0630@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/timezone/+0700@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/timezone/+0800@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/timezone/+0845@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/timezone/+0900@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  apps/communications/ftu/css/images/timezone/+0930@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/+1000@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/+1100@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/+1200@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/+1300@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/+1400@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/+430@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/+530@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/+545@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/-0100@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/-0200@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/-0300@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/-0330@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/-0400@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/-0500@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/-0600@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/-0700@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/-0800@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/-0900@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/-1000@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/-1100@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/-1200@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/-430@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/-930@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/timezone/map@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/tutorial/1@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/tutorial/2@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/tutorial/3@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/tutorial/4@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/tutorial/5@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/wifi_connected_locked_sprite@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/wifi_connected_sprite.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/wifi_connected_sprite@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/wifi_disconnected_locked_sprite@2x.png
Diff not rendered
View
BIN  apps/communications/ftu/css/images/wifi_disconnected_sprite@2x.png
Diff not rendered
View
31 apps/communications/ftu/css/style.css
@@ -70,7 +70,7 @@ html, body {
}
[role=navigation] button {
- width: calc((100% - 1rem) / 2);
+ width: calc((100% / 2) - 0.5rem);
float: left;
margin-right: 1rem;
position: relative;
@@ -88,12 +88,12 @@ html, body {
left: 0;
position: absolute;
pointer-events: none;
- background: url(images/prev.png) no-repeat center center;
+ background: url(images/prev.png) no-repeat center center / 1.1rem;
}
[role=navigation] button.recommend span {
left: calc(100% - 3rem);
- background: url(images/next.png) no-repeat center center;
+ background-image: url(images/next.png);
}
[role=navigation] #wifi-join-button {
@@ -200,7 +200,8 @@ html, body {
z-index: 3000;
transition: all 1s ease;
background-image: url(/shared/resources/branding/powered.png);
- background-size: 100% auto;
+ background-size: cover;
+ background-position: center top;
}
#splash-screen.show {
@@ -336,7 +337,7 @@ html, body {
#wifi #no-result-container {
position: absolute;
- background: url('images/wifi_icon.png') no-repeat fixed center;
+ background: url('images/wifi_icon.png') no-repeat fixed center / 23.6rem;
height: 100%;
width: 100%;
}
@@ -361,7 +362,8 @@ html, body {
aside.wifi-icon {
background-repeat: no-repeat;
background-position: 0 center;
- width: 3rem;
+ background-size: 16rem;
+ width: 3.2rem;
}
aside.wifi-signal { background-image: url(images/wifi_disconnected_sprite.png);}
aside.connected { background-image: url(images/wifi_connected_sprite.png);}
@@ -482,6 +484,7 @@ aside.connecting {
height: calc(100% - 6rem);
padding: 0 3rem;
width: calc(100% - 6rem);
+ background-size: 17.6rem;
}
#finish-screen [role=navigation],#tutorialFinish [role=navigation] {
@@ -492,6 +495,10 @@ aside.connecting {
text-align: center;
}
+#step1Img, #step2Img, #step3Img, #step4Img, #step5Img {
+ width: 28.9rem;
+}
+
/*
Date and time
*/
@@ -504,6 +511,7 @@ aside.connecting {
#time_zone_overlay {
background-position: bottom;
background-repeat: no-repeat;
+ background-size: 100%;
position: relative;
position: absolute;
z-index: 10;
@@ -558,6 +566,7 @@ aside.connecting {
background-image: url('images/timezone/map.png') ;
background-position: bottom;
background-repeat: no-repeat;
+ background-size: 100%;
position: relative;
height: 21.5rem;
width: 100%;
@@ -691,7 +700,7 @@ aside.connecting {
#fb_after_import1 {
- background: url('images/import_fb.png') center left no-repeat;
+ background: url('images/import_fb.png') no-repeat center left /3rem;
}
#statusMsg.ftu {
@@ -720,10 +729,15 @@ aside.connecting {
font-size: 1.35rem;
line-height: 1.8rem;
}
+
#welcome_browser #browser_logo_horizontal {
margin: 1rem 0;
}
+#welcome_browser #browser_logo_horizontal img{
+ max-width: 100%;
+}
+
#welcome_browser label {
position: absolute;
margin: -1.5rem 0 0 -1.5rem;
@@ -977,7 +991,7 @@ i.hack-first-child {
}
[data-type="list"].pack-value-selector li label:not([for]) input:checked + span {
- background: url("images/checked.png") no-repeat right center;
+ background: url("images/checked.png") no-repeat right center / 100%;
}
[data-type="list"].pack-value-selector li label:not([for]) input + span + p {
@@ -1067,3 +1081,4 @@ i.hack-first-child {
width: calc(100% / 5);
background: #FFFFFF;
}
+
View
2  apps/communications/ftu/index.html
@@ -22,6 +22,8 @@
<link rel="stylesheet" type="text/css" href="/ftu/css/style.css">
<link rel="stylesheet" type="text/css" href="/ftu/css/fb_extensions.css">
<link rel="stylesheet" type="text/css" href="/facebook/style/curtain_frame.css">
+ <!-- HIDPI support -->
+ <link rel="stylesheet" type="text/css" href="/shared/style/responsive.css" >
<title>Welcome to Browser OS</title>
View
1  shared/style/responsive.css
@@ -50,4 +50,3 @@
html { font-size: 105%!important; }
}
-
Something went wrong with that request. Please try again.