Removed position fixed from pattern-info panel. Relatively positioned so it pushes entire page/pattern above it so not obstructing

frostyweather · frostyweather · commit d9c58add9896 · 2018-01-10T16:42:52.000-05:00
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ node_modules/*
 src/bower_components/*
 .sass-cache/*
 .DS_Store
+/.eslintignore
diff --git a/dist/styleguide/css/pattern-lab.css b/dist/styleguide/css/pattern-lab.css
@@ -70,7 +70,7 @@
 \*------------------------------------*/
 /**
 * The HTML and body elements for the Pattern Lab shell.
-* 1)These exist indepenedent of any project-specific styles
+* 1) These exist indepenedent of any project-specific styles
 * 2) Styled as IDs to avoid collisions with user <body> tag
 */
 .pl-c-body {
@@ -824,13 +824,22 @@
 * 1) This wrapper div occupies all remaining viewport space after PL's header
 */
 .pl-c-viewport {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  height: 100vh;
   width: 100%;
-  position: fixed;
+  position: relative;
   top: 2rem;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 0;
+  overflow: hidden;
 }
 
 /**
@@ -881,11 +890,11 @@
   left: 0;
   right: 0;
   background-color: #fff;
-  /**
-  * 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
+      * 1) Hay Mode (disabled by default) starts with the smallest
+      * viewport then slowly expands http://bradfrost.com/blog/post/ish-2-0/
+      */
 }
 .pl-c-viewport__iframe.hay-mode {
   -webkit-transition: all 40s linear;
@@ -897,8 +906,11 @@
 * 1) Container used for manual resizing
 */
 .pl-c-viewport__resizer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
   width: 14px;
-  float: right;
   margin: 0;
   height: 100%;
   cursor: move;
@@ -1121,7 +1133,7 @@
     #PATTERN INFO
 \*------------------------------------*/
 /**
- * 1) Pattern info contains two sidy-by-side panels that
+ * 1) Pattern info contains two side-by-side panels that
  *    house a pattern's information, such as title, lineage,
  *    code, annotations, and more.
  */
@@ -1226,7 +1238,7 @@
  * 1) Right panel that displays the pattern's code (found in _tabs.scss)
  * 2) Using a sibling selector because the pattern info isn't always present.
  *    The sibling selector allows the code panel to occupy the full width of 
- *    the 
+ *    the modal
  * 1) Cap the height of the code panel in the modal
  */
 @media all and (min-width: 53em) {
@@ -1382,7 +1394,7 @@
     #TABS
 \*------------------------------------*/
 /**
- * 1) Tabs contain a set of horintally-arranged tabs
+ * 1) Tabs contain a set of horizontally-arranged tabs
  *    with accompanying panels. When a tab link is clicked
  *    the corresponding panel becomes visible
  */
@@ -1765,7 +1777,7 @@
 
 /**
  * Annotations Title
- * Says the world "Annotations" 
+ * Says the word "Annotations" 
  */
 .pl-c-annotations__title {
   font-size: 1.2rem !important;
@@ -1834,34 +1846,35 @@
     #MODAL
 \*------------------------------------*/
 /**
- * 1) The modal slides up from the bottom of the viewport when 
+ * 1) The modal slides up from the bottom of the viewport when
  *    "show pattern info" is selected on the pattern detail screen.
  */
 .pl-c-modal {
+  display: none;
   font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
   background: #000;
   color: #ccc;
-  position: fixed;
+  position: relative;
   top: auto;
-  bottom: -50%;
+  bottom: 0;
   left: 0;
   z-index: 5;
   width: 100%;
   height: 50%;
+  -webkit-transition: bottom 0.3s ease-out;
+          transition: bottom 0.3s ease-out;
+  	/**
+       * Active modal
+       */
+}
+.pl-c-modal.pl-is-active {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  -webkit-transition: bottom 0.3s ease-out;
-          transition: bottom 0.3s ease-out;
-  /**
-   * Active modal
-   */
-}
-.pl-c-modal.pl-is-active {
   bottom: 0;
 }
 
@@ -1886,10 +1899,10 @@
   z-index: 2;
   -webkit-transition: all 0.1s ease-out;
           transition: all 0.1s ease-out;
-  /**
-   * Modal close button inside active modal
-   * 1) Move modal button outside of the modal window
-   */
+  	/**
+       * Modal close button inside active modal
+       * 1) Move modal button outside of the modal window
+       */
 }
 .pl-c-modal__close-btn:hover, .pl-c-modal__close-btn:focus {
   background: #222;
@@ -2041,7 +2054,7 @@
     #VISIBILITY
 \*------------------------------------*/
 /**
-* Visibilly hidden but still accessible to screen readers
+* Visibly hidden but still accessible to screen readers
 */
 .is-vishidden {
   position: absolute !important;
@@ -2063,7 +2076,7 @@
  * Using Twitter Typeahead to autocomplete pattern
  * searches. https://twitter.github.io/typeahead.js/
  * 1) Wrapped in pl-c-header to contain styles for projects that 
- *    might be using Typeahead in their own projects
+ *    might already be using Typeahead
 */
 .pl-c-header {
   /**
@@ -2321,7 +2334,7 @@ pre.line-numbers > code {
 }
 
 /*------------------------------------*\
-    #VENDOR
+    #THEMES
 \*------------------------------------*/
 /*------------------------------------*\
     #LIGHT THEME
@@ -2445,11 +2458,7 @@ pre.line-numbers > code {
 \*------------------------------------*/
 /**
  * A theme that adjusts the density of the PL UI.
- * Options are comapct (default), cozy, and comfortable
- */
-/**
- * A theme that adjusts the density of the PL UI.
- * Options are default (compact), cozy, and comfortable
+ * Options are compact (default), cozy, and comfortable
  */
 .pl-c-body--theme-density-cozy {
   /**
diff --git a/dist/styleguide/js/patternlab-pattern.js b/dist/styleguide/js/patternlab-pattern.js
@@ -99,7 +99,7 @@ window.addEventListener("message", receiveIframeMessage, false);
  * Licensed under the MIT license
  *
  * Helps handle the initial iFrame source. Parses a string to see if it matches
- * an expected pattern in Pattern Lab. Supports Pattern Labs fuzzy pattern partial
+ * an expected pattern in Pattern Lab. Supports Pattern Lab's fuzzy pattern partial
  * matching style.
  *
  */
@@ -459,7 +459,7 @@ var modalStyleguide = {
 	 */
 	close: function (patternPartial) {
 
-		// not that the modal viewer is no longer active
+		// note that the modal viewer is no longer active
 		modalStyleguide.active[patternPartial] = false;
 
 		// hide the modal, look at info-panel.js
diff --git a/dist/styleguide/js/patternlab-viewer.js b/dist/styleguide/js/patternlab-viewer.js
@@ -190,7 +190,7 @@ try {
  * Licensed under the MIT license
  *
  * Helps handle the initial iFrame source. Parses a string to see if it matches
- * an expected pattern in Pattern Lab. Supports Pattern Labs fuzzy pattern partial
+ * an expected pattern in Pattern Lab. Supports Pattern Lab's fuzzy pattern partial
  * matching style.
  *
  */
@@ -446,7 +446,7 @@ var modalViewer = {
 			$('.pl-js-pattern-info-toggle').html("Hide Pattern Info");
 		}
 
-		// make sure the modal viewer is not viewable, it's alway hidden by default. the pageLoad event determines when it actually opens
+		// make sure the modal viewer is not viewable, it's always hidden by default. the pageLoad event determines when it actually opens
 		modalViewer.hide();
 
 		// review the query strings in case there is something the modal viewer is supposed to handle by default
@@ -503,7 +503,7 @@ var modalViewer = {
 
 		var obj;
 
-		// not that the modal viewer is no longer active
+		// note that the modal viewer is no longer active
 		DataSaver.updateValue('modalActive', 'false');
 		modalViewer.active = false;
 
@@ -529,7 +529,7 @@ var modalViewer = {
 	},
 
 	/**
-	 * insert the copy for the modal window. if it's meant to be sent back to the iframe do do
+	 * insert the copy for the modal window. if it's meant to be sent back to the iframe, do that.
 	 * @param  {String}       the rendered template that should be inserted
 	 * @param  {String}       the patternPartial that the rendered template is related to
 	 * @param  {Boolean}      if the refresh is of a view-all view and the content should be sent back
diff --git a/src/sass/scss/components/_modal.scss b/src/sass/scss/components/_modal.scss
@@ -3,80 +3,83 @@
 \*------------------------------------*/
 
 /**
- * 1) The modal slides up from the bottom of the viewport when 
+ * 1) The modal slides up from the bottom of the viewport when
  *    "show pattern info" is selected on the pattern detail screen.
  */
 .pl-c-modal {
-    font-family: $pl-font;
-    background: $pl-color-black;
-    color: $pl-color-gray-20;
-    position: fixed;
-    top: auto;
-    bottom: -50%;
-    left: 0;
-    z-index: 5;
-    width: 100%;
-    height: 50%;
-    display: flex;
-    flex-direction: column;
-    transition:  bottom 0.3s ease-out;
+	display: none;
+	font-family: $pl-font;
+	background: $pl-color-black;
+	color: $pl-color-gray-20;
+	position: relative;
+	top: auto;
+	bottom: 0;
+	left: 0;
+	z-index: 5;
+	width: 100%;
+	height: 50%;
+	transition: bottom 0.3s ease-out;
 
-    /**
+	/**
      * Active modal
      */
-    &.pl-is-active {
-        bottom: 0;
-    }
+	&.pl-is-active {
+		display: flex;
+		flex-direction: column;
+		bottom: 0;
+	}
 }
 
 /**
  * Modal close button
  * 1) Closes the modal popup
  */
 .pl-c-modal__close-btn {
-    font-size: 70%;
-    background: $pl-color-black;
-    color: $pl-color-gray-50;
-    border: 0;
-    border-radius: $pl-border-radius-med $pl-border-radius-med 0 0;
-    display: inline-block;
-    padding: 0.5rem 0.5rem 0.3rem;
-    margin: 0;
-    text-decoration: none;
-    cursor: pointer;
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    z-index: 2;
-    transition: all $pl-animate-quick ease-out;
+	font-size: 70%;
+	background: $pl-color-black;
+	color: $pl-color-gray-50;
+	border: 0;
+	border-radius: $pl-border-radius-med $pl-border-radius-med 0 0;
+	display: inline-block;
+	padding: 0.5rem 0.5rem 0.3rem;
+	margin: 0;
+	text-decoration: none;
+	cursor: pointer;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	z-index: 2;
+	transition: all $pl-animate-quick ease-out;
 
-    &:hover, &:focus {
-        background: $pl-color-gray-87;
-        color: $pl-color-white;
-    }
+	&:hover,
+	&:focus {
+		background: $pl-color-gray-87;
+		color: $pl-color-white;
+	}
 
-    &:focus, &:active {
-        outline: 1px dotted $pl-color-gray-50;
-        outline-offset: -2px;
-    }
+	&:focus,
+	&:active {
+		outline: 1px dotted $pl-color-gray-50;
+		outline-offset: -2px;
+	}
 
-    /**
+	/**
      * Modal close button inside active modal
      * 1) Move modal button outside of the modal window
      */
-    .pl-c-modal.pl-is-active & {
-        bottom: 100%; /* 1 */
-    }
+	.pl-c-modal.pl-is-active & {
+		bottom: 100%; /* 1 */
+	}
 }
 
 /**
  * Close button icon
  * 1) Displayed as an e
  */
 .pl-c-modal__close-btn-icon {
-    width: 12px;
-    height: 12px;
-    color: currentColor;
-    fill: currentColor;
-    transition: fill $pl-animate-quick ease-out;
-}
+	width: 12px;
+	height: 12px;
+	color: currentColor;
+	fill: currentColor;
+	transition: fill $pl-animate-quick ease-out;
+}
diff --git a/src/sass/scss/components/_viewport.scss b/src/sass/scss/components/_viewport.scss
