From d9c58add989614a7fedf36150de574225125da04 Mon Sep 17 00:00:00 2001 From: Ian Frost Date: Wed, 10 Jan 2018 16:42:52 -0500 Subject: [PATCH 01/12] Removed position fixed from pattern-info panel. Relatively positioned so it pushes entire page/pattern above it so not obstructing --- .gitignore | 1 + dist/styleguide/css/pattern-lab.css | 77 ++++++++------- dist/styleguide/js/patternlab-pattern.js | 4 +- dist/styleguide/js/patternlab-viewer.js | 8 +- src/sass/scss/components/_modal.scss | 105 ++++++++++---------- src/sass/scss/components/_viewport.scss | 119 ++++++++++++----------- 6 files changed, 167 insertions(+), 147 deletions(-) diff --git a/.gitignore b/.gitignore index 9c2b9c9..9b3a267 100644 --- 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 index e61a22e..67fc145 100644 --- 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 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,20 +1846,28 @@ #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; @@ -1855,13 +1875,6 @@ -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 index d154895..3469777 100644 --- 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 index 06c2c19..a826dce 100644 --- 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 index 05f0605..e32e442 100644 --- a/src/sass/scss/components/_modal.scss +++ b/src/sass/scss/components/_modal.scss @@ -3,30 +3,31 @@ \*------------------------------------*/ /** - * 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; + } } /** @@ -34,39 +35,41 @@ * 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 */ + } } /** @@ -74,9 +77,9 @@ * 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; -} \ No newline at end of file + 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 index 6c0c9a1..cf51aa0 100644 --- a/src/sass/scss/components/_viewport.scss +++ b/src/sass/scss/components/_viewport.scss @@ -13,13 +13,17 @@ * 1) This wrapper div occupies all remaining viewport space after PL's header */ .pl-c-viewport { - width: 100%; - position: fixed; - top: $offset-top; - bottom: 0; - left: 0; - right: 0; - z-index: 0; + 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; } /** @@ -28,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; } /** @@ -42,16 +46,16 @@ * iframe and the manual resize handle */ .pl-c-viewport__iframe-wrapper { - height: 100%; - position: relative; - margin: 0 auto; - -webkit-overflow-scrolling: touch; - overflow-y: auto; - overflow-x: hidden; + height: 100%; + position: relative; + margin: 0 auto; + -webkit-overflow-scrolling: touch; + overflow-y: auto; + overflow-x: hidden; - &.hay-mode { - transition: all 40s linear; - } + &.hay-mode { + transition: all 40s linear; + } } /** @@ -59,26 +63,26 @@ * 1) this is the actual