Merge pull request #903 from sghoweri/fix/fix-uikit-viewport-width

fix: workaround for the Pattern Lab UIKit viewport resizer in Safari or Firefox
pattern-lab · Jul 24, 2018 · 1f14270 · 1f14270
2 parents 2b70ff4 + a67275a
commit 1f14270
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img src='/patternlab.png' height="300" alt="Pattern Lab Logo" />
+  <img src='/patternlab.png' width="300" alt="Pattern Lab Logo" style="max-width: 100%;" />
 </p>
 
 # Pattern Lab

diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.0.1-alpha.23"></a>
+## [0.0.1-alpha.23](https://github.com/pattern-lab/patternlab-node/tree/master/packages/cli/compare/@pattern-lab/cli@0.0.1-alpha.22...@pattern-lab/cli@0.0.1-alpha.23) (2018-07-09)
+
+
+### Bug Fixes
+
+* **install:** copy dependencies ([1acef87](https://github.com/pattern-lab/patternlab-node/tree/master/packages/cli/commit/1acef87))
+
+
+
+
+
 <a name="0.0.1-alpha.22"></a>
 ## [0.0.1-alpha.22](https://github.com/pattern-lab/patternlab-node/tree/master/packages/cli/compare/@pattern-lab/cli@0.0.1-alpha.21...@pattern-lab/cli@0.0.1-alpha.22) (2018-07-06)
 

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@pattern-lab/cli",
   "description": "Command-line interface (CLI) for the @pattern-lab/core.",
-  "version": "0.0.1-alpha.22",
+  "version": "0.0.1-alpha.23",
   "bin": {
     "patternlab": "bin/patternlab.js"
   },

diff --git a/packages/edition-node-gulp/CHANGELOG.md b/packages/edition-node-gulp/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="2.0.0-alpha.15"></a>
+# [2.0.0-alpha.15](https://github.com/pattern-lab/patternlab-node/tree/master/packages/edition-node-gulp/compare/@pattern-lab/edition-node-gulp@2.0.0-alpha.14...@pattern-lab/edition-node-gulp@2.0.0-alpha.15) (2018-07-09)
+
+**Note:** Version bump only for package @pattern-lab/edition-node-gulp
+
+
+
+
+
 <a name="2.0.0-alpha.14"></a>
 # [2.0.0-alpha.14](https://github.com/pattern-lab/patternlab-node/tree/master/packages/edition-node-gulp/compare/@pattern-lab/edition-node-gulp@2.0.0-alpha.13...@pattern-lab/edition-node-gulp@2.0.0-alpha.14) (2018-07-06)
 

diff --git a/packages/edition-node-gulp/package.json b/packages/edition-node-gulp/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@pattern-lab/edition-node-gulp",
   "description": "The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.",
-  "version": "2.0.0-alpha.14",
+  "version": "2.0.0-alpha.15",
   "main": "gulpfile.js",
   "dependencies": {
-    "@pattern-lab/cli": "^0.0.1-alpha.22",
+    "@pattern-lab/cli": "^0.0.1-alpha.23",
     "@pattern-lab/core": "^3.0.0-alpha.16",
     "@pattern-lab/engine-mustache": "^2.0.0-alpha.8",
     "@pattern-lab/uikit-workshop": "^1.0.0-alpha.7",

diff --git a/packages/edition-node/CHANGELOG.md b/packages/edition-node/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="1.0.0-alpha.13"></a>
+# [1.0.0-alpha.13](https://github.com/pattern-lab/patternlab-node/tree/master/packages/edition-node/compare/@pattern-lab/edition-node@1.0.0-alpha.12...@pattern-lab/edition-node@1.0.0-alpha.13) (2018-07-09)
+
+
+### Features
+
+* **scripts:** namespace scripts ([3ecbb3e](https://github.com/pattern-lab/patternlab-node/tree/master/packages/edition-node/commit/3ecbb3e))
+
+
+
+
+
 <a name="1.0.0-alpha.12"></a>
 # [1.0.0-alpha.12](https://github.com/pattern-lab/patternlab-node/tree/master/packages/edition-node/compare/@pattern-lab/edition-node@1.0.0-alpha.11...@pattern-lab/edition-node@1.0.0-alpha.12) (2018-07-06)
 

diff --git a/packages/edition-node/package.json b/packages/edition-node/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@pattern-lab/edition-node",
   "description": "A pure wrapper around patternlab-node core, the default pattern engine, and supporting frontend assets.",
-  "version": "1.0.0-alpha.12",
+  "version": "1.0.0-alpha.13",
   "main": "patternlab-config.json",
   "dependencies": {
-    "@pattern-lab/cli": "^0.0.1-alpha.22",
+    "@pattern-lab/cli": "^0.0.1-alpha.23",
     "@pattern-lab/core": "^3.0.0-alpha.16",
     "@pattern-lab/engine-mustache": "^2.0.0-alpha.8",
     "@pattern-lab/uikit-workshop": "^1.0.0-alpha.7"

diff --git a/packages/uikit-workshop/dist/styleguide/css/pattern-lab.css b/packages/uikit-workshop/dist/styleguide/css/pattern-lab.css
@@ -862,6 +862,7 @@
 */
 .pl-c-viewport__iframe-wrapper {
   height: 100%;
+  width: 100%;
   position: relative;
   margin: 0 auto;
   -webkit-box-flex: 1;

diff --git a/packages/uikit-workshop/src/sass/scss/components/_viewport.scss b/packages/uikit-workshop/src/sass/scss/components/_viewport.scss
@@ -13,17 +13,17 @@
 * 1) This wrapper div occupies all remaining viewport space after PL's header
 */
 .pl-c-viewport {
-	display: flex;
-	flex-direction: column;
-	height: 100vh;
-	width: 100%;
-	position: relative;
-	top: $offset-top;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	z-index: 0;
-	overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+  position: relative;
+  top: $offset-top;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 0;
+  overflow: hidden;
 }
 
 /**
@@ -32,12 +32,12 @@
 * used in JS for manual viewport resizing purposes.
 */
 .pl-c-viewport__cover {
-	width: 100%;
-	height: 100%;
-	display: none;
-	position: absolute;
-	z-index: 20;
-	cursor: move;
+  width: 100%;
+  height: 100%;
+  display: none;
+  position: absolute;
+  z-index: 20;
+  cursor: move;
 }
 
 /**
@@ -46,80 +46,81 @@
 *    iframe and the manual resize handle
 */
 .pl-c-viewport__iframe-wrapper {
-	height: 100%;
-	position: relative;
-	margin: 0 auto;
-	flex: 1;
-	-webkit-overflow-scrolling: touch;
-	overflow-y: auto;
-	overflow-x: hidden;
+  height: 100%;
+  width: 100%; // bug fix for Safari and Firefox getting stuck calculating a width of 0px when the JS first kicks in
+  position: relative;
+  margin: 0 auto;
+  flex: 1;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+  overflow-x: hidden;
 
-	&.hay-mode {
-		transition: all 40s linear;
-	}
+  &.hay-mode {
+    transition: all 40s linear;
+  }
 }
 
 /**
 * Viewport iframe
 * 1) this is the actual <iframe>
 */
 .pl-c-viewport__iframe {
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	border: 0;
-	padding: 0;
-	margin: 0;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	background-color: $pl-color-white;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: $pl-color-white;
 
-	/**
+  /**
     * Hay Mode transition
     * 1) Hay Mode (disabled by default) starts with the smallest
     * viewport then slowly expands http://bradfrost.com/blog/post/ish-2-0/
     */
-	&.hay-mode {
-		transition: all 40s linear;
-	}
+  &.hay-mode {
+    transition: all 40s linear;
+  }
 }
 
 /**
 * Right pull container
 * 1) Container used for manual resizing
 */
 .pl-c-viewport__resizer {
-	position: absolute;
-	right: 0;
-	top: 0;
-	bottom: 0;
-	width: 14px;
-	margin: 0;
-	height: 100%;
-	cursor: ew-resize;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 14px;
+  margin: 0;
+  height: 100%;
+  cursor: ew-resize;
 }
 
 /**
 * Right pull
 * 1) This is the handle that lets the user resize the viewport
 */
 .pl-c-viewport__resizer-handle {
-	margin: 0;
-	width: 100%;
-	height: 100%;
-	background: $pl-color-gray-20;
-	transition: background $pl-animate-quick ease-out;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  background: $pl-color-gray-20;
+  transition: background $pl-animate-quick ease-out;
 
-	&:hover {
-		background: $pl-color-gray-50;
-	}
+  &:hover {
+    background: $pl-color-gray-50;
+  }
 
-	&:active {
-		cursor: move;
-		background: $pl-color-gray-70;
-	}
+  &:active {
+    cursor: move;
+    background: $pl-color-gray-70;
+  }
 }
 
 /**
@@ -128,5 +129,5 @@
 *    transition the width of the viewport
 */
 .vp-animate {
-	transition: width 0.8s ease-out;
+  transition: width 0.8s ease-out;
 }