Merge pull request pattern-lab#1132 from pattern-lab/feature/hide-res…

…izer-when-full-screen Update Pattern Lab's iframe resizer UI to be hidden when iframe is full width
quelltexterin · Mar 23, 2020 · 5e142b1 · 5e142b1
2 parents 76495da + ce383ad
commit 5e142b1
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size/pl-viewport-size.js b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size/pl-viewport-size.js
@@ -48,15 +48,15 @@ class ViewportSize extends BaseLitComponent {
 
   updated() {
     if (this.viewport && this.viewport.bodySize) {
-      this.em = Math.floor(this.px - 40 * this.bodySize);
+      this.em = Math.floor(this.px * this.bodySize);
     }
   }
 
   render() {
     if (!window.__PRERENDER_INJECTED) {
       return html`
         <form class="pl-c-viewport-size" method="post" action="#">
-          <span class="pl-c-viewport-size__input">${this.px - 40}px</span
+          <span class="pl-c-viewport-size__input">${this.px}px</span
           >&nbsp;/&nbsp;
           <span class="pl-c-viewport-size__input">${this.em}em</span>
         </form>

diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.scss
@@ -82,8 +82,8 @@ pl-iframe {
   min-width: 240px;
   max-width: 100vw;
   background: $pl-viewport-bg;
-  padding-right: $pl-resizer-width;
-  padding-left: $pl-resizer-width;
+  padding-right: 0;
+  padding-left: 0;
   // box-shadow: 0 3px 6px rgba(21,22,25,.16), 0 3px 6px rgba(21,22,25,.23);
 
   &.hay-mode {
@@ -153,7 +153,7 @@ pl-iframe {
 .pl-c-viewport__resizer {
   position: absolute;
   width: $pl-resizer-width;
-  right: 0;
+  right: $pl-resizer-width * -1;
   top: 0;
   bottom: 0;
   margin: 0;