Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Bug 830644 - [calendar][Hidpi]Support high resolution devices #9060

Merged
merged 1 commit into from

3 participants

@basiclines
Collaborator
  • Updated @2x images
  • Converted some px to rem rules
  • Removed per device MQ

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 https://github.com/mozilla-b2g/gaia/pull/8980/files & https://github.com/mozilla-b2g/gaia/pull/8980/files please @lightsofapollo take a look!

@lightsofapollo lightsofapollo merged commit f98218f into mozilla-b2g:master

1 check passed

Details default The Travis build passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 9, 2013
  1. @rexboy7 @basiclines
This page is out of date. Refresh to see the latest.
Showing with 47 additions and 58 deletions.
  1. +2 −1  apps/calendar/index.html
  2. +3 −3 apps/calendar/style/building_blocks.css
  3. BIN  apps/calendar/style/building_blocks/drawer/images/icons/add.png
  4. BIN  apps/calendar/style/building_blocks/drawer/images/icons/add@2x.png
  5. BIN  apps/calendar/style/building_blocks/drawer/images/icons/close.png
  6. BIN  apps/calendar/style/building_blocks/drawer/images/icons/close@2x.png
  7. BIN  apps/calendar/style/building_blocks/drawer/images/icons/edit.png
  8. BIN  apps/calendar/style/building_blocks/drawer/images/icons/edit@2x.png
  9. BIN  apps/calendar/style/building_blocks/drawer/images/icons/menu.png
  10. BIN  apps/calendar/style/building_blocks/drawer/images/icons/menu@2x.png
  11. BIN  apps/calendar/style/building_blocks/drawer/images/icons/user.png
  12. BIN  apps/calendar/style/building_blocks/drawer/images/icons/user@2x.png
  13. BIN  apps/calendar/style/building_blocks/drawer/images/ui/separator@2x.png
  14. BIN  apps/calendar/style/building_blocks/drawer/images/ui/shadow-header.png
  15. BIN  apps/calendar/style/building_blocks/drawer/images/ui/shadow-header@2x.png
  16. BIN  apps/calendar/style/building_blocks/drawer/images/ui/shadow.png
  17. BIN  apps/calendar/style/building_blocks/drawer/images/ui/shadow@2x.png
  18. BIN  apps/calendar/style/building_blocks/input_areas/images/icons/clear.png
  19. BIN  apps/calendar/style/building_blocks/input_areas/images/icons/clear@2x.png
  20. BIN  apps/calendar/style/building_blocks/input_areas/images/ui/shadow@2x.png
  21. +3 −2 apps/calendar/style/calendar.css
  22. +17 −17 apps/calendar/style/day_views.css
  23. +1 −0  apps/calendar/style/forms.css
  24. BIN  apps/calendar/style/icons/60/Calendar@2x.png
  25. BIN  apps/calendar/style/icons/ActionIcons_30x30_back_nav.png
  26. BIN  apps/calendar/style/icons/ActionIcons_30x30_back_nav@2x.png
  27. BIN  apps/calendar/style/icons/ActionIcons_30x30_done.png
  28. BIN  apps/calendar/style/icons/ActionIcons_30x30_done@2x.png
  29. BIN  apps/calendar/style/icons/ActionIcons_30x30_forward_nav.png
  30. BIN  apps/calendar/style/icons/ActionIcons_30x30_forward_nav@2x.png
  31. BIN  apps/calendar/style/icons/ActionIcons_30x30_refresh.png
  32. BIN  apps/calendar/style/icons/ActionIcons_30x30_refresh@2x.png
  33. BIN  apps/calendar/style/icons/ActionIcons_30x30_settings.png
  34. BIN  apps/calendar/style/icons/ActionIcons_30x30_settings@2x.png
  35. BIN  apps/calendar/style/icons/Calendar@2x.png
  36. BIN  apps/calendar/style/icons/HeaderIcon_30x30_add@2x.png
  37. BIN  apps/calendar/style/icons/HeaderIcon_30x30_close@2x.png
  38. BIN  apps/calendar/style/icons/HeaderIcon_30x30_menu@2x.png
  39. BIN  apps/calendar/style/icons/alarm@2x.png
  40. BIN  apps/calendar/style/icons/checkmark@2x.png
  41. BIN  apps/calendar/style/icons/update.png
  42. +7 −7 apps/calendar/style/settings.css
  43. +3 −18 apps/calendar/style/ui.css
  44. BIN  apps/calendar/style/ui/drawer_shadow@2x.png
  45. BIN  apps/calendar/style/ui/shadow-header@2x.png
  46. +11 −10 apps/calendar/style/week_view.css
View
3  apps/calendar/index.html
@@ -10,6 +10,7 @@
<link rel="stylesheet" type="text/css" href="/style/building_blocks.css" />
<link rel="stylesheet" type="text/css" href="/shared/style/headers.css" />
<link rel="stylesheet" type="text/css" href="/shared/style_unstable/toolbars.css">
+ <link rel="stylesheet" type="text/css" href="/shared/style/responsive.css" >
<!-- localization -->
<link rel="resource" type="application/l10n" href="/locales/locales.ini">
@@ -154,7 +155,7 @@ <h1 id="current-month-year">
</header>
<div id="progress-indicator">
- <img id="throbber" src="/style/ui/progress.png">
+ <div id="throbber"></div>
</div>
View
6 apps/calendar/style/building_blocks.css
@@ -130,7 +130,7 @@ body[role="application"] > nav > header {
z-index: 10;
height: 5rem;
color: #fff;
- background: url("building_blocks/drawer/images/ui/header.png") repeat-x left top;
+ background: url("building_blocks/drawer/images/ui/header.png") repeat-x left top / auto 100%;
}
body[role="application"] > nav > header:after {
@@ -206,9 +206,9 @@ body[role="application"] > nav > header .icon {
width: 3rem;
height: 3rem;
margin: 0 -1rem;
- background: transparent no-repeat center center;
text-indent: 100%;
white-space: nowrap;
+ background: transparent no-repeat center center / 3rem;
overflow: hidden;
position: relative;
height: 4.9rem;
@@ -295,4 +295,4 @@ body[role="application"] > nav .inner > ul > li > a {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
-}
+}
View
BIN  apps/calendar/style/building_blocks/drawer/images/icons/add.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/calendar/style/building_blocks/drawer/images/icons/add@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/calendar/style/building_blocks/drawer/images/icons/close.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/calendar/style/building_blocks/drawer/images/icons/close@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/calendar/style/building_blocks/drawer/images/icons/edit.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/calendar/style/building_blocks/drawer/images/icons/edit@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/calendar/style/building_blocks/drawer/images/icons/menu.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/calendar/style/building_blocks/drawer/images/icons/menu@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/calendar/style/building_blocks/drawer/images/icons/user.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/calendar/style/building_blocks/drawer/images/icons/user@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/calendar/style/building_blocks/drawer/images/ui/separator@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/calendar/style/building_blocks/drawer/images/ui/shadow-header.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/calendar/style/building_blocks/drawer/images/ui/shadow-header@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/calendar/style/building_blocks/drawer/images/ui/shadow.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/calendar/style/building_blocks/drawer/images/ui/shadow@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/calendar/style/building_blocks/input_areas/images/icons/clear.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/calendar/style/building_blocks/input_areas/images/icons/clear@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/calendar/style/building_blocks/input_areas/images/ui/shadow@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
5 apps/calendar/style/calendar.css
@@ -1,11 +1,13 @@
* {
-moz-box-sizing: border-box;
}
+html {
+ font-size: 10px;
+}
html, body {
margin: 0;
padding: 0;
- font-size: 10px;
height: 100%;
font-family: 'MozTT';
background: white;
@@ -13,7 +15,6 @@ html, body {
overflow: hidden;
}
-
h1,
h2,
h3,
View
34 apps/calendar/style/day_views.css
@@ -63,15 +63,15 @@
.day-events .container {
/* turn off calendar color bg */
background: white !important;
- border-width: 1px;
+ border-width: 0.1rem;
border-style: solid;
- border-left-width: 6px;
+ border-left-width: 0.6rem;
height: 100%;
padding: 0.8rem 1rem 2.2rem;
}
.day-events .event.has-alarms .container {
- background: #FFF url(/style/icons/alarm.png) no-repeat top right !important;
+ background: #FFF url(/style/icons/alarm.png) no-repeat top right / 3rem !important;
}
.day-events .hour .display-hour {
@@ -83,7 +83,7 @@
}
.day-events .event h5 {
- width: calc(100% - 1rem - 6px);
+ width: calc(100% - 1rem - 0.6rem);
min-height: 2.2rem;
padding-top: 0.6rem;
font-size: 1.9rem;
@@ -96,7 +96,7 @@
.day-events .event .details {
display: block;
top: 2.8rem;
- width: calc(100% - 1rem - 6px);
+ width: calc(100% - 1rem - 0.6rem);
min-height: 2.1rem;
padding-top: 0.8rem;
overflow: hidden;
@@ -116,16 +116,16 @@
/* overlap */
-.event[data-overlaps="1"] { padding-left: 6px; z-index: 11; }
-.event[data-overlaps="2"] { padding-left: 12px; z-index: 12; }
-.event[data-overlaps="3"] { padding-left: 18px; z-index: 13; }
-.event[data-overlaps="4"] { padding-left: 24px; z-index: 14; }
-.event[data-overlaps="5"] { padding-left: 30px; z-index: 15; }
-.event[data-overlaps="6"] { padding-left: 36px; z-index: 16; }
-.event[data-overlaps="7"] { padding-left: 42px; z-index: 17; }
-.event[data-overlaps="8"] { padding-left: 48px; z-index: 18; }
-.event[data-overlaps="9"] { padding-left: 54px; z-index: 19; }
-.event[data-overlaps="10"] { padding-left: 60px; z-index: 20; }
+.event[data-overlaps="1"] { padding-left: 0.6rem; z-index: 11; }
+.event[data-overlaps="2"] { padding-left: 1.2rem; z-index: 12; }
+.event[data-overlaps="3"] { padding-left: 1.8rem; z-index: 13; }
+.event[data-overlaps="4"] { padding-left: 2.4rem; z-index: 14; }
+.event[data-overlaps="5"] { padding-left: 3rem; z-index: 15; }
+.event[data-overlaps="6"] { padding-left: 3.6rem; z-index: 16; }
+.event[data-overlaps="7"] { padding-left: 4.2rem; z-index: 17; }
+.event[data-overlaps="8"] { padding-left: 4.8rem; z-index: 18; }
+.event[data-overlaps="9"] { padding-left: 5.4rem; z-index: 19; }
+.event[data-overlaps="10"] { padding-left: 6rem; z-index: 20; }
/* months day view */
@@ -143,8 +143,8 @@
height: calc(100% - 6.9rem);
position: absolute;
width: 100%;
- border-left: 1px solid #AAA;
- border-right: 1px solid #AAA;
+ border-left: 0.1rem solid #AAA;
+ border-right: 0.1rem solid #AAA;
display: none;
}
View
1  apps/calendar/style/forms.css
@@ -14,6 +14,7 @@ input, textarea {
select {
border: none;
background: transparent;
+ font-size: 1.2rem;
}
input[type="checkbox"] {
View
BIN  apps/calendar/style/icons/60/Calendar@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/calendar/style/icons/ActionIcons_30x30_back_nav.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/calendar/style/icons/ActionIcons_30x30_back_nav@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/calendar/style/icons/ActionIcons_30x30_done.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/calendar/style/icons/ActionIcons_30x30_done@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/calendar/style/icons/ActionIcons_30x30_forward_nav.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/calendar/style/icons/ActionIcons_30x30_forward_nav@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/calendar/style/icons/ActionIcons_30x30_refresh.png
Diff not rendered
View
BIN  apps/calendar/style/icons/ActionIcons_30x30_refresh@2x.png
Diff not rendered
View
BIN  apps/calendar/style/icons/ActionIcons_30x30_settings.png
Diff not rendered
View
BIN  apps/calendar/style/icons/ActionIcons_30x30_settings@2x.png
Diff not rendered
View
BIN  apps/calendar/style/icons/Calendar@2x.png
Diff not rendered
View
BIN  apps/calendar/style/icons/HeaderIcon_30x30_add@2x.png
Diff not rendered
View
BIN  apps/calendar/style/icons/HeaderIcon_30x30_close@2x.png
Diff not rendered
View
BIN  apps/calendar/style/icons/HeaderIcon_30x30_menu@2x.png
Diff not rendered
View
BIN  apps/calendar/style/icons/alarm@2x.png
Diff not rendered
View
BIN  apps/calendar/style/icons/checkmark@2x.png
Diff not rendered
View
BIN  apps/calendar/style/icons/update.png
Diff not rendered
View
14 apps/calendar/style/settings.css
@@ -14,7 +14,7 @@ body[data-path^='/create-account'] #time-views,
body[data-path^='/settings'] #time-views {
position: relative;
transform: translateX(80%);
- box-shadow: 1px 1px 5px 5px #222;
+ box-shadow: 0.1rem 0.1rem 0.5rem 0.5rem #222;
transition: transform 0.5s ease-in-out;
}
@@ -37,7 +37,7 @@ body[data-path^='/settings'] #time-views {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
- width: -moz-calc(100% - 20px);
+ width: -moz-calc(100% - 2rem);
height: 100%;
}
@@ -77,9 +77,9 @@ body[data-path^='/settings'] #time-views {
#settings > menu {
position: absolute;
- bottom: 0px;
- height: 40px;
- padding: 5px 0px;
+ bottom: 0;
+ height: 4rem;
+ padding: 0.5rem 0;
background-color: rgba(0, 0, 0, 0.3);
}
@@ -90,7 +90,7 @@ body[data-path^='/settings'] #time-views {
#settings .settings {
width: 5.5rem;
height: 4rem;
- background: transparent url('/style/icons/ActionIcons_30x30_settings.png') no-repeat center;
+ background: transparent url('/style/icons/ActionIcons_30x30_settings.png') no-repeat center / 3rem;
font-size: 0;
display: block;
}
@@ -110,7 +110,7 @@ body[data-path^='/settings'] #time-views {
#settings .calendars input[type="checkbox"]:checked + span {
width: 2.2rem;
height: 1.9rem;
- background: transparent url('/style/icons/checkmark.png') no-repeat;
+ background: transparent url('/style/icons/checkmark.png') no-repeat center / 1.4rem;
}
#settings .calendars input[type="checkbox"] + span {
View
21 apps/calendar/style/ui.css
@@ -1,8 +1,3 @@
-/* Device Layouts */
-
-@media screen and (max-width: 480px) {
-}
-
/* loading */
body.loading {
@@ -93,7 +88,7 @@ ol.link-list li:only-child a {
#progress-indicator {
position: absolute;
- top: 10%;
+ top: 6.9rem;
left: 0;
width: 100%;
height: 0.3rem;
@@ -108,6 +103,8 @@ ol.link-list li:only-child a {
}
#throbber {
+ height: 5.2rem;
+ background: url('ui/progress.png') repeat-x left bottom / 32rem !important;
animation: .5s throb infinite steps(12);
}
@@ -568,18 +565,6 @@ section[role="status"].active {
animation-duration: 1.5s;
}
-@media screen and (min-width: 481px) {
- html, body {
- font-size: 1.2rem;
- }
-}
-
-@media screen and (max-width: 480px) {
- html, body {
- font-size: 10px;
- }
-}
-
/* Hide on initial render to prevent flashing */
#settings {
visibility: hidden;
View
BIN  apps/calendar/style/ui/drawer_shadow@2x.png
Diff not rendered
View
BIN  apps/calendar/style/ui/shadow-header@2x.png
Diff not rendered
View
21 apps/calendar/style/week_view.css
@@ -181,13 +181,14 @@
position: relative;
}
-.weekday .event[data-overlaps="1"] { padding: 3px; }
-.weekday .event[data-overlaps="2"] { padding: 6px; }
-.weekday .event[data-overlaps="3"] { padding: 9px; }
-.weekday .event[data-overlaps="4"] { padding: 12px; }
-.weekday .event[data-overlaps="5"] { padding: 15px; }
-.weekday .event[data-overlaps="6"] { padding: 18px; }
-.weekday .event[data-overlaps="7"] { padding: 21px; }
-.weekday .event[data-overlaps="8"] { padding: 24px; }
-.weekday .event[data-overlaps="9"] { padding: 27px; }
-.weekday .event[data-overlaps="10"] { padding: 30px; }
+/* overlap */
+.weekday .event[data-overlaps="1"] { padding: 0.3rem; }
+.weekday .event[data-overlaps="2"] { padding: 0.6rem; }
+.weekday .event[data-overlaps="3"] { padding: 0.9rem; }
+.weekday .event[data-overlaps="4"] { padding: 1.2rem; }
+.weekday .event[data-overlaps="5"] { padding: 1.5rem; }
+.weekday .event[data-overlaps="6"] { padding: 1.8rem; }
+.weekday .event[data-overlaps="7"] { padding: 2.1rem; }
+.weekday .event[data-overlaps="8"] { padding: 2.4rem; }
+.weekday .event[data-overlaps="9"] { padding: 2.7rem; }
+.weekday .event[data-overlaps="10"] { padding: 3rem; }
Something went wrong with that request. Please try again.