Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Skinned devices don't have their sizes divided by their css pixel ratio. #741

Closed
wants to merge 1 commit into from

1 participant

@brentlintner

An example is: The Z10 would be sized to its device pixel dimensions by
by default, even if there was a css pixel ratio defined in its file.

This also caused devices with skins (and how they were
originally styled) to break, so all CSS for each skin was updated. Now,
they only use padding to set themselves.

Note: Renamed the method in resizer.js to something more appropriate,
since formatSkin really did not make sense for what it was doing.

This fixes GitHub Issue:

https://github.com/blackberry/Ripple-UI/issues/653

@brentlintner brentlintner Skinned devices don't have their sizes divided by their css pixel ratio.
An example is: The Z10 would be sized to its device pixel dimensions by
by default, even if there was a css pixel ratio defined in its file.

This also caused devices with skins (and how they were
originally styled) to break, so all CSS for each skin was updated. Now,
they only use padding to set themselves.

Note: Renamed the method in resizer.js to something more appropriate,
since formatSkin really did not make sense for what it was doing.

This fixes GitHub Issue:

https://github.com/blackberry/Ripple-UI/issues/653
ef0d9a2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 8, 2013
  1. @brentlintner

    Skinned devices don't have their sizes divided by their css pixel ratio.

    brentlintner authored
    An example is: The Z10 would be sized to its device pixel dimensions by
    by default, even if there was a css pixel ratio defined in its file.
    
    This also caused devices with skins (and how they were
    originally styled) to break, so all CSS for each skin was updated. Now,
    they only use padding to set themselves.
    
    Note: Renamed the method in resizer.js to something more appropriate,
    since formatSkin really did not make sense for what it was doing.
    
    This fixes GitHub Issue:
    
    https://github.com/blackberry/Ripple-UI/issues/653
This page is out of date. Refresh to see the latest.
View
10 lib/client/devices/Bold9700/skin.css
@@ -17,15 +17,13 @@
Bold9700 (561x1009) offset (40x181)*/
.viewport-wrapper-Bold9700 {
- width: 480px;
- height: 360px;
border: none;
}
.menu-button-wrapper-Bold9700{
position: relative;
display: inline-block;
- margin: 30px 0 0 85px;
+ margin: 25px 0 0 90px;
width: 100px;
height: 80px;
cursor: pointer;
@@ -42,12 +40,10 @@
.device-wrapper-Bold9700 {
position: relative;
- padding: 181px 0 0 40px;
- width: 521px;
- height: 828px;
+ padding: 182px 37px 473px 40px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Bold9700.png') no-repeat;
+ background: url('images/Bold9700.png') top center no-repeat;
}
View
8 lib/client/devices/Bold9900/skin.css
@@ -17,8 +17,6 @@
Bold9900 (726x1258) offset (41x196)*/
.viewport-wrapper-Bold9900 {
- width: 640px;
- height: 480px;
border: none;
}
@@ -42,12 +40,10 @@
.device-wrapper-Bold9900 {
position: relative;
- padding: 196px 0 0 41px;
- width: 685px;
- height: 1062px;
+ padding: 196px 41px 600px 41px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Bold9900.png') no-repeat;
+ background: url('images/Bold9900.png') top center no-repeat;
}
View
8 lib/client/devices/Curve9300/skin.css
@@ -17,8 +17,6 @@
Curve9300 (373x674) offset (27x119)*/
.viewport-wrapper-Curve9300 {
- width: 320px;
- height: 240px;
border: none;
}
@@ -42,12 +40,10 @@
.device-wrapper-Curve9300 {
position: relative;
- padding: 119px 0 0 27px;
- width: 346px;
- height: 555px;
+ padding: 121px 23px 315px 27px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Curve9300.png') no-repeat;
+ background: url('images/Curve9300.png') top center no-repeat;
}
View
8 lib/client/devices/Curve9350-9360-9370/skin.css
@@ -17,8 +17,6 @@
Curve9350-9360-9370 (560x998) offset (42x172)*/
.viewport-wrapper-Curve9350-9360-9370 {
- width: 480px;
- height: 360px;
border: none;
}
@@ -42,12 +40,10 @@
.device-wrapper-Curve9350-9360-9370 {
position: relative;
- padding: 172px 0 0 42px;
- width: 518px;
- height: 826px;
+ padding: 173px 37px 480px 42px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Curve9350-9360-9370.png') no-repeat;
+ background: url('images/Curve9350-9360-9370.png') top center no-repeat;
}
View
8 lib/client/devices/Pearl9100/skin.css
@@ -17,8 +17,6 @@
Pearl9100 (455x969) offset (47x139)*/
.viewport-wrapper-Pearl9100 {
- width: 360px;
- height: 400px;
border: none;
}
@@ -42,12 +40,10 @@
.device-wrapper-Pearl9100 {
position: relative;
- padding: 139px 0 0 47px;
- width: 408px;
- height: 830px;
+ padding: 139px 44px 440px 47px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Pearl9100.png') no-repeat;
+ background: url('images/Pearl9100.png') top center no-repeat;
}
View
18 lib/client/devices/Playbook/skin.css
@@ -17,38 +17,32 @@
Playbook Skin (860x1278) offset (128x130)*/
.viewport-wrapper-landscape-Playbook {
- height: 600px;
- width: 1024px;
border: none;
}
.device-wrapper-landscape-Playbook {
position: relative;
- padding: 130px 0 0 127px;
- height: 732px;
- width: 1153px;
+ padding: 122px 152px 154px 154px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Playbook_landscape.png') no-repeat;
+ background: url('images/Playbook.png') top center no-repeat;
+ background-size: 855px;
}
.viewport-wrapper-Playbook {
- height: 1024px;
- width: 600px;
border: none;
}
.device-wrapper-Playbook {
position: relative;
- padding: 128px 0 0 130px;
- width: 732px;
- height: 1153px;
+ padding: 128px 127px 125px 127px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Playbook.png') no-repeat;
+ background: url('images/Playbook_landscape.png') top center no-repeat;
+ background-size: 1274px;
}
View
14 lib/client/devices/Q10/skin.css
@@ -17,30 +17,24 @@
Q10 (848x1552) offset (268x84)*/
.viewport-wrapper-Q10 {
- width: 720px;
- height: 720px;
border: none;
}
.device-wrapper-Q10 {
position: relative;
- padding: 258px 0 0 86px;
- width: 792px;
- height: 1285px;
+ padding: 125px 89px 280px 97px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Q10.png') no-repeat;
- background-size: 886px;
+ background: url('images/Q10.png') top center no-repeat;
+ background-size: 429px;
}
.viewport-wrapper-landscape-Q10 {
- width: 720px;
- height: 720px;
border: none;
}
#document {
- border-radius: 7px;
+ border-radius: 4px;
}
View
9 lib/client/devices/Style9670/skin.css
@@ -17,8 +17,6 @@
Style9670 (520x1338) offset (78x137)*/
.viewport-wrapper-Style9670 {
- width: 360px;
- height: 400px;
border: none;
}
@@ -42,12 +40,11 @@
.device-wrapper-Style9670 {
position: relative;
- padding: 137px 0 0 80px;
- width: 440px;
- height: 1201px;
+ padding: 130px 72px 810px 80px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Style9670.png') no-repeat;
+ background: url('images/Style9670.png') top center no-repeat;
+ background-size: 509px;
}
View
18 lib/client/devices/Torch9800/skin.css
@@ -18,21 +18,19 @@
Torch9800 Skin (444x779) offset (40x142)*/
.viewport-wrapper-Torch9800 {
- width: 360px;
- height: 480px;
border: none;
}
.device-wrapper-Torch9800 {
position: relative;
- padding: 142px 0 0 40px;
- width: 404px;
- height: 637px;
+ padding: 142px 40px 170px 40px;
margin: 0 auto;
+ width: 55px;
+ height: 65px;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Torch9800.png') no-repeat;
+ background: url('images/Torch9800.png') top center no-repeat;
}
.menu-button-wrapper-Torch9800 {
@@ -55,21 +53,17 @@
.viewport-wrapper-landscape-Torch9800 {
margin: -99px 0 0 103px;
- width: 480px;
- height: 360px;
border: none;
}
.device-wrapper-landscape-Torch9800 {
position: relative;
- padding: 142px 0 0 40px;
- width: 739px;
- height: 302px;
+ padding: 142px 258px 40px 40px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Torch9800_landscape.png') no-repeat;
+ background: url('images/Torch9800_landscape.png') top center no-repeat;
}
.menu-button-wrapper-landscape-Torch9800{
View
16 lib/client/devices/Torch9810/skin.css
@@ -18,21 +18,17 @@
Torch9810 Skin (591x1048) offset (55x191)*/
.viewport-wrapper-Torch9810 {
- width: 480px;
- height: 640px;
border: none;
}
.device-wrapper-Torch9810 {
position: relative;
- padding: 191px 0 0 55px;
- width: 536px;
- height: 857px;
+ padding: 190px 53px 236px 55px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Torch9810.png') no-repeat;
+ background: url('images/Torch9810.png') top center no-repeat;
}
.menu-button-wrapper-Torch9810 {
@@ -54,21 +50,17 @@
}
.viewport-wrapper-landscape-Torch9810 {
- width: 640px;
- height: 480px;
border: none;
}
.device-wrapper-landscape-Torch9810 {
position: relative;
- padding: 55px 0 0 191px;
- width: 857px;
- height: 536px;
+ padding: 56px 213px 55px 188px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Torch9810_landscape.png') no-repeat;
+ background: url('images/Torch9810_landscape.png') top center no-repeat;
}
.menu-button-wrapper-landscape-Torch9810{
View
16 lib/client/devices/Torch9860-9850/skin.css
@@ -18,21 +18,17 @@
Torch 9860-9850 Skin (602x1149) offset (59x159)*/
.viewport-wrapper-Torch9860-9850 {
- width: 480px;
- height: 800px;
border: none;
}
.device-wrapper-Torch9860-9850 {
position: relative;
- padding: 159px 0 0 59px;
- width: 543px;
- height: 990px;
+ padding: 159px 56px 202px 59px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Torch9860-9850.png') no-repeat;
+ background: url('images/Torch9860-9850.png') top center no-repeat;
}
.menu-button-wrapper-Torch9860-9850 {
@@ -55,21 +51,17 @@
.viewport-wrapper-landscape-Torch9860-9850 {
margin: -99px 0 0 103px;
- width: 800px;
- height: 480px;
border: none;
}
.device-wrapper-landscape-Torch9860-9850 {
position: relative;
- padding: 159px 0 0 60px;
- width: 1089px;
- height: 443px;
+ padding: 158px 296px 60px 64px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Torch9860-9850_landscape.png') no-repeat;
+ background: url('images/Torch9860-9850_landscape.png') top center no-repeat;
}
.menu-button-wrapper-landscape-Torch9860-9850 {
View
18 lib/client/devices/Z10/skin.css
@@ -17,41 +17,33 @@
Z10 (848x1552) offset (268x84)*/
.viewport-wrapper-Z10 {
- width: 768px;
- height: 1280px;
border: none;
}
.device-wrapper-Z10 {
position: relative;
- padding: 283px 0 0 99px;
- width: 848px;
- height: 1552px;
+ padding: 128px 46px 135px 47px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
- background: url('images/Z10.png') no-repeat;
- background-size: 973px;
+ background: url('images/Z10.png') center top no-repeat;
+ background-size: 437px;
}
.viewport-wrapper-landscape-Z10 {
- width: 1280px;
- height: 768px;
border: none;
}
.device-wrapper-landscape-Z10 {
position: relative;
- padding: 106px 0 0 284px;
- width: 1552px;
- height: 848px;
+ padding: 48px 140px 35px 126px;
margin: 0 auto;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
background: url('images/Z10-Landscape.png') no-repeat;
- background-size: 1867px;
+ background-size: 832px;
}
#document {
View
6 lib/client/resizer.js
@@ -75,7 +75,7 @@ function _getDimensions(device, orientation) {
};
}
-function _formatSkin(containers, dimensions) {
+function sizeDevice(containers, dimensions) {
containers.device.div.style.width = (dimensions.deviceWidth + 4) + "px";
containers.device.div.style.height = (dimensions.deviceHeight + 4) + "px";
@@ -117,9 +117,7 @@ _self = {
dimensions = _getDimensions(device, orientation);
- if (!device.skin) {
- _formatSkin(containers, dimensions);
- }
+ sizeDevice(containers, dimensions);
window.devicePixelRatio = dimensions.cssPixelRatio;
Something went wrong with that request. Please try again.