Skip to content

Commit 1f14270

Browse files
bmuenzenmeyerbmuenzenmeyer
authored
Merge pull request #903 from sghoweri/fix/fix-uikit-viewport-width
fix: workaround for the Pattern Lab UIKit viewport resizer in Safari or Firefox
2 parents 2b70ff4 + a67275a commit 1f14270

File tree

9 files changed

+104
-69
lines changed

9 files changed

+104
-69
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<p align="center">
2-
<img src='/patternlab.png' height="300" alt="Pattern Lab Logo" />
2+
<img src='/patternlab.png' width="300" alt="Pattern Lab Logo" style="max-width: 100%;" />
33
</p>
44

55
# Pattern Lab

‎packages/cli/CHANGELOG.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,18 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
<a name="0.0.1-alpha.23"></a>
7+
## [0.0.1-alpha.23](https://github.com/pattern-lab/patternlab-node/tree/master/packages/cli/compare/@pattern-lab/[email protected]...@pattern-lab/[email protected]) (2018-07-09)
8+
9+
10+
### Bug Fixes
11+
12+
* **install:** copy dependencies ([1acef87](https://github.com/pattern-lab/patternlab-node/tree/master/packages/cli/commit/1acef87))
13+
14+
15+
16+
17+
618
<a name="0.0.1-alpha.22"></a>
719
## [0.0.1-alpha.22](https://github.com/pattern-lab/patternlab-node/tree/master/packages/cli/compare/@pattern-lab/[email protected]...@pattern-lab/[email protected]) (2018-07-06)
820

‎packages/cli/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@pattern-lab/cli",
33
"description": "Command-line interface (CLI) for the @pattern-lab/core.",
4-
"version": "0.0.1-alpha.22",
4+
"version": "0.0.1-alpha.23",
55
"bin": {
66
"patternlab": "bin/patternlab.js"
77
},

‎packages/edition-node-gulp/CHANGELOG.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,15 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
<a name="2.0.0-alpha.15"></a>
7+
# [2.0.0-alpha.15](https://github.com/pattern-lab/patternlab-node/tree/master/packages/edition-node-gulp/compare/@pattern-lab/[email protected]...@pattern-lab/[email protected]) (2018-07-09)
8+
9+
**Note:** Version bump only for package @pattern-lab/edition-node-gulp
10+
11+
12+
13+
14+
615
<a name="2.0.0-alpha.14"></a>
716
# [2.0.0-alpha.14](https://github.com/pattern-lab/patternlab-node/tree/master/packages/edition-node-gulp/compare/@pattern-lab/[email protected]...@pattern-lab/[email protected]) (2018-07-06)
817

‎packages/edition-node-gulp/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"name": "@pattern-lab/edition-node-gulp",
33
"description": "The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.",
4-
"version": "2.0.0-alpha.14",
4+
"version": "2.0.0-alpha.15",
55
"main": "gulpfile.js",
66
"dependencies": {
7-
"@pattern-lab/cli": "^0.0.1-alpha.22",
7+
"@pattern-lab/cli": "^0.0.1-alpha.23",
88
"@pattern-lab/core": "^3.0.0-alpha.16",
99
"@pattern-lab/engine-mustache": "^2.0.0-alpha.8",
1010
"@pattern-lab/uikit-workshop": "^1.0.0-alpha.7",

‎packages/edition-node/CHANGELOG.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,18 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
<a name="1.0.0-alpha.13"></a>
7+
# [1.0.0-alpha.13](https://github.com/pattern-lab/patternlab-node/tree/master/packages/edition-node/compare/@pattern-lab/[email protected]...@pattern-lab/[email protected]) (2018-07-09)
8+
9+
10+
### Features
11+
12+
* **scripts:** namespace scripts ([3ecbb3e](https://github.com/pattern-lab/patternlab-node/tree/master/packages/edition-node/commit/3ecbb3e))
13+
14+
15+
16+
17+
618
<a name="1.0.0-alpha.12"></a>
719
# [1.0.0-alpha.12](https://github.com/pattern-lab/patternlab-node/tree/master/packages/edition-node/compare/@pattern-lab/[email protected]...@pattern-lab/[email protected]) (2018-07-06)
820

‎packages/edition-node/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"name": "@pattern-lab/edition-node",
33
"description": "A pure wrapper around patternlab-node core, the default pattern engine, and supporting frontend assets.",
4-
"version": "1.0.0-alpha.12",
4+
"version": "1.0.0-alpha.13",
55
"main": "patternlab-config.json",
66
"dependencies": {
7-
"@pattern-lab/cli": "^0.0.1-alpha.22",
7+
"@pattern-lab/cli": "^0.0.1-alpha.23",
88
"@pattern-lab/core": "^3.0.0-alpha.16",
99
"@pattern-lab/engine-mustache": "^2.0.0-alpha.8",
1010
"@pattern-lab/uikit-workshop": "^1.0.0-alpha.7"

‎packages/uikit-workshop/dist/styleguide/css/pattern-lab.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -862,6 +862,7 @@
862862
*/
863863
.pl-c-viewport__iframe-wrapper {
864864
height: 100%;
865+
width: 100%;
865866
position: relative;
866867
margin: 0 auto;
867868
-webkit-box-flex: 1;

‎packages/uikit-workshop/src/sass/scss/components/_viewport.scss

Lines changed: 64 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@
1313
* 1) This wrapper div occupies all remaining viewport space after PL's header
1414
*/
1515
.pl-c-viewport {
16-
display: flex;
17-
flex-direction: column;
18-
height: 100vh;
19-
width: 100%;
20-
position: relative;
21-
top: $offset-top;
22-
bottom: 0;
23-
left: 0;
24-
right: 0;
25-
z-index: 0;
26-
overflow: hidden;
16+
display: flex;
17+
flex-direction: column;
18+
height: 100vh;
19+
width: 100%;
20+
position: relative;
21+
top: $offset-top;
22+
bottom: 0;
23+
left: 0;
24+
right: 0;
25+
z-index: 0;
26+
overflow: hidden;
2727
}
2828

2929
/**
@@ -32,12 +32,12 @@
3232
* used in JS for manual viewport resizing purposes.
3333
*/
3434
.pl-c-viewport__cover {
35-
width: 100%;
36-
height: 100%;
37-
display: none;
38-
position: absolute;
39-
z-index: 20;
40-
cursor: move;
35+
width: 100%;
36+
height: 100%;
37+
display: none;
38+
position: absolute;
39+
z-index: 20;
40+
cursor: move;
4141
}
4242

4343
/**
@@ -46,80 +46,81 @@
4646
* iframe and the manual resize handle
4747
*/
4848
.pl-c-viewport__iframe-wrapper {
49-
height: 100%;
50-
position: relative;
51-
margin: 0 auto;
52-
flex: 1;
53-
-webkit-overflow-scrolling: touch;
54-
overflow-y: auto;
55-
overflow-x: hidden;
49+
height: 100%;
50+
width: 100%; // bug fix for Safari and Firefox getting stuck calculating a width of 0px when the JS first kicks in
51+
position: relative;
52+
margin: 0 auto;
53+
flex: 1;
54+
-webkit-overflow-scrolling: touch;
55+
overflow-y: auto;
56+
overflow-x: hidden;
5657

57-
&.hay-mode {
58-
transition: all 40s linear;
59-
}
58+
&.hay-mode {
59+
transition: all 40s linear;
60+
}
6061
}
6162

6263
/**
6364
* Viewport iframe
6465
* 1) this is the actual <iframe>
6566
*/
6667
.pl-c-viewport__iframe {
67-
position: absolute;
68-
height: 100%;
69-
width: 100%;
70-
border: 0;
71-
padding: 0;
72-
margin: 0;
73-
top: 0;
74-
bottom: 0;
75-
left: 0;
76-
right: 0;
77-
background-color: $pl-color-white;
68+
position: absolute;
69+
height: 100%;
70+
width: 100%;
71+
border: 0;
72+
padding: 0;
73+
margin: 0;
74+
top: 0;
75+
bottom: 0;
76+
left: 0;
77+
right: 0;
78+
background-color: $pl-color-white;
7879

79-
/**
80+
/**
8081
* Hay Mode transition
8182
* 1) Hay Mode (disabled by default) starts with the smallest
8283
* viewport then slowly expands http://bradfrost.com/blog/post/ish-2-0/
8384
*/
84-
&.hay-mode {
85-
transition: all 40s linear;
86-
}
85+
&.hay-mode {
86+
transition: all 40s linear;
87+
}
8788
}
8889

8990
/**
9091
* Right pull container
9192
* 1) Container used for manual resizing
9293
*/
9394
.pl-c-viewport__resizer {
94-
position: absolute;
95-
right: 0;
96-
top: 0;
97-
bottom: 0;
98-
width: 14px;
99-
margin: 0;
100-
height: 100%;
101-
cursor: ew-resize;
95+
position: absolute;
96+
right: 0;
97+
top: 0;
98+
bottom: 0;
99+
width: 14px;
100+
margin: 0;
101+
height: 100%;
102+
cursor: ew-resize;
102103
}
103104

104105
/**
105106
* Right pull
106107
* 1) This is the handle that lets the user resize the viewport
107108
*/
108109
.pl-c-viewport__resizer-handle {
109-
margin: 0;
110-
width: 100%;
111-
height: 100%;
112-
background: $pl-color-gray-20;
113-
transition: background $pl-animate-quick ease-out;
110+
margin: 0;
111+
width: 100%;
112+
height: 100%;
113+
background: $pl-color-gray-20;
114+
transition: background $pl-animate-quick ease-out;
114115

115-
&:hover {
116-
background: $pl-color-gray-50;
117-
}
116+
&:hover {
117+
background: $pl-color-gray-50;
118+
}
118119

119-
&:active {
120-
cursor: move;
121-
background: $pl-color-gray-70;
122-
}
120+
&:active {
121+
cursor: move;
122+
background: $pl-color-gray-70;
123+
}
123124
}
124125

125126
/**
@@ -128,5 +129,5 @@
128129
* transition the width of the viewport
129130
*/
130131
.vp-animate {
131-
transition: width 0.8s ease-out;
132+
transition: width 0.8s ease-out;
132133
}

0 commit comments

Comments
 (0)