fix: update PL code viewer to open and resize as expected + animate much more performantly using CSS transforms; update existing JS logic to clean up inlined CSS styles when closing PL modal / code viewer panel

Author: sghoweri

packages/uikit-workshop/src/sass/scss/02-base/_body.scss

@@ -12,4 +12,7 @@
   padding: 0;
   background: $pl-color-gray-13;
   -webkit-text-size-adjust: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 }

packages/uikit-workshop/src/sass/scss/04-components/_modal.scss

@@ -7,7 +7,8 @@
  *    "show pattern info" is selected on the pattern detail screen.
  */
 .pl-c-modal {
-  display: none;
+  display: flex;
+  flex-direction: column;
   font-family: $pl-font;
   background: $pl-color-black;
   color: $pl-color-gray-20;
@@ -17,16 +18,21 @@
   left: 0;
   z-index: 5;
   width: 100%;
-  height: 50%;
-  transition: bottom 0.3s ease-out;
+  height: 0;
+  transition: transform 0.3s ease, height 0.3s ease;
+  transform: translate3d(0, 100%, 0);
+  pointer-events: none;
+  will-change: height, transform;
+  overflow: hidden;
 
   /**
      * Active modal
      */
   &.pl-is-active {
-    display: flex;
-    flex-direction: column;
-    bottom: 0;
+    transform: translate3d(0, 0, 0);
+    height: 50vh; // default height unless manually resized
+    transition: transform 0.3s ease;
+    pointer-events: auto;
   }
 }
 

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

@@ -15,7 +15,8 @@
 .pl-c-viewport {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  flex-direction: column;
+  height: auto;
   width: 100%;
   position: relative;
   top: $offset-top;
@@ -24,6 +25,14 @@
   right: 0;
   z-index: 0;
   overflow: hidden;
+  flex-grow: 1;
+  transition: height 0.3s ease;
+  transform: translate3d(0, 0, 0);
+  will-change: height;
+
+  @supports (position: sticky) {
+    top: 0;
+  }
 }
 
 /**

packages/uikit-workshop/src/scripts/components/modal-viewer.js

@@ -124,6 +124,7 @@ export const modalViewer = {
 
     //Remove active class to modal
     $('.pl-js-modal').removeClass('pl-is-active');
+    $('.pl-js-modal').removeAttr('style'); // remove inline height CSS
 
     // WIP: refactoring viewport panel to use CSS vars to resize
     // $('html').css('--pl-viewport-height', window.innerHeight - 32 + 'px');
@@ -145,6 +146,7 @@ export const modalViewer = {
    */
   hide: function() {
     $('.pl-js-modal').removeClass('pl-is-active');
+    $('.pl-js-modal').removeAttr('style'); // remove inline height CSS
 
     // WIP: refactoring viewport panel to use CSS vars to resize
     // $('html').css(