Merge pull request #1301 from adopted-ember-addons/full-screen-snapshots

allow full-screen snapshots

addon/components/paper-backdrop.hbs

@@ -1,5 +1,6 @@
 {{! template-lint-disable no-invalid-interactive }}
 <md-backdrop
+  {{lock-body}}
   {{on "click" (fn this.sendClickAction @onClick)}}
   {{on "touchEnd" (fn this.sendClickAction @onClick)}}
   {{css-transition
@@ -13,4 +14,12 @@
   style={{if @fixed 'position:fixed;'}}
   ...attributes>
   {{yield}}
-</md-backdrop>
+</md-backdrop>
+
+{{!-- TODO once we move to a v2 addon we should be able to import a style properly here. I added this to prevent us needing to mess with complicated style build systems --}}
+{{!-- template-lint-disable no-forbidden-elements --}}
+<style>
+  .ember-paper-lockbody {
+    overflow: hidden;
+  }
+</style>

addon/components/paper-sidenav-container.js

@@ -1,17 +1,14 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */
+/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
 /**
  * @module ember-paper
  */
 import Component from '@ember/component';
 
-import { htmlSafe } from '@ember/template';
-
 /**
  * @class PaperSidenavContainer
  * @extends Ember.Component
  */
 export default Component.extend({
   classNames: ['flex', 'layout-row'],
   attributeBindings: ['style'],
-  style: htmlSafe('overflow: hidden')
 });

addon/modifiers/lock-body.js

@@ -0,0 +1,16 @@
+import { modifier } from 'ember-modifier';
+
+const LOCK_BODY_CLASS = 'ember-paper-lockbody';
+
+export default modifier(
+  function lockBody(/*element /*, positional, named*/) {
+    document.querySelector('body').classList.add(LOCK_BODY_CLASS);
+
+    return () => {
+      document.querySelector('body').classList.remove(LOCK_BODY_CLASS);
+    };
+  },
+  {
+    eager: false,
+  }
+);

app/modifiers/lock-body.js

@@ -0,0 +1 @@
+export { default } from 'ember-paper/modifiers/lock-body';

tests/dummy/app/styles/app.scss

@@ -10,29 +10,9 @@ $accent: 'pink';
  * Needed styles to set correct widths.
  */
 
-body {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-body.ember-application {
-  flex-direction: row;
-  flex: 1;
-  display: flex;
-}
-
-body > div.ember-view {
-  flex-direction: row;
-  flex: 1;
-  display: flex;
-}
-
-.site-nav-container {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+md-sidenav.md-locked-open {
+  position: sticky !important;
+  height: 100vh;
 }
 
 md-toolbar.md-warn {