@polymer/app-layout - npm Package Compare versions

Comparing version 0.10.6-pre.3 to 3.0.0-pre.1

package.json

 {
   "name": "@polymer/app-layout",
   "flat": true,
-  "version": "0.10.6-pre.3",
+  "version": "3.0.0-pre.1",
   "description": "A set of layout elements for your app",
@@ -14,12 +14,12 @@ "contributors": [
   },
-  "license": "SEE LICENSE IN https://polymer.github.io/LICENSE.txt",
+  "license": "https://polymer.github.io/LICENSE.txt",
   "homepage": "https://github.com/PolymerElements/app-layout",
   "dependencies": {
-    "@polymer/iron-flex-layout": "preview",
-    "@polymer/iron-media-query": "preview",
-    "@polymer/iron-resizable-behavior": "preview",
-    "@polymer/iron-scroll-target-behavior": "preview",
-    "@polymer/polymer": "preview"
+    "@polymer/iron-flex-layout": "^3.0.0-pre.1",
+    "@polymer/iron-media-query": "^3.0.0-pre.1",
+    "@polymer/iron-resizable-behavior": "^3.0.0-pre.1",
+    "@polymer/iron-scroll-target-behavior": "^3.0.0-pre.1",
+    "@polymer/polymer": "^3.0.0-pre.1"
   },
   "devDependencies": {}
 }

README.md

@@ -9,3 +9,3 @@ # App Layout [![Build Status](https://travis-ci.org/PolymerElements/app-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/app-layout) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/app-layout)
   <template>
-    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
     <link rel="import" href="app-drawer/app-drawer.html">
@@ -15,48 +15,51 @@ <link rel="import" href="app-header/app-header.html">
     <link rel="import" href="demo/sample-content.html">
+    <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
     <link rel="import" href="../iron-icons/iron-icons.html">
     <link rel="import" href="../paper-icon-button/paper-icon-button.html">
     <link rel="import" href="../paper-progress/paper-progress.html">
-    <style is="custom-style">
-      html, body {
-        margin: 0;
-        font-family: 'Roboto', 'Noto', sans-serif;
-        -webkit-font-smoothing: antialiased;
-        background: #f1f1f1;
-        max-height: 368px;
-      }
-      app-toolbar {
-        background-color: #4285f4;
-        color: #fff;
-      }
+    <custom-style>
+      <style is="custom-style">
+        html, body {
+          margin: 0;
+          font-family: 'Roboto', 'Noto', sans-serif;
+          -webkit-font-smoothing: antialiased;
+          background: #f1f1f1;
+          max-height: 368px;
+        }
+        app-toolbar {
+          background-color: #4285f4;
+          color: #fff;
+        }
 
-      paper-icon-button {
-        --paper-icon-button-ink-color: white;
-      }
+        paper-icon-button {
+          --paper-icon-button-ink-color: white;
+        }
 
-      paper-icon-button + [main-title] {
-        margin-left: 24px;
-      }
-      paper-progress {
-        display: block;
-        width: 100%;
-        --paper-progress-active-color: rgba(255, 255, 255, 0.5);
-        --paper-progress-container-color: transparent;
-      }
-      app-header {
-        @apply(--layout-fixed-top);
-        color: #fff;
-        --app-header-background-rear-layer: {
-          background-color: #ef6c00;
-        };
-      }
-      app-drawer {
-        --app-drawer-scrim-background: rgba(0, 0, 100, 0.8);
-        --app-drawer-content-container: {
-          background-color: #B0BEC5;
+        paper-icon-button + [main-title] {
+          margin-left: 24px;
         }
-      }
-      sample-content {
-        padding-top: 64px;
-      }
-    </style>
+        paper-progress {
+          display: block;
+          width: 100%;
+          --paper-progress-active-color: rgba(255, 255, 255, 0.5);
+          --paper-progress-container-color: transparent;
+        }
+        app-header {
+          @apply --layout-fixed-top;
+          color: #fff;
+          --app-header-background-rear-layer: {
+            background-color: #ef6c00;
+          };
+        }
+        app-drawer {
+          --app-drawer-scrim-background: rgba(0, 0, 100, 0.8);
+          --app-drawer-content-container: {
+            background-color: #B0BEC5;
+          }
+        }
+        sample-content {
+          padding-top: 64px;
+        }
+      </style>
+    </custom-style>
     <next-code-block></next-code-block>
@@ -110,4 +113,2 @@ </template>
 
-- [app-scrollpos-control](/app-scrollpos-control) - A manager for saving and restoring the scroll position when multiple pages are sharing the same document scroller.
-
 - [app-toolbar](/app-toolbar) - A horizontal toolbar containing items that can be used for label, navigation, search and actions.
@@ -143,8 +144,12 @@
 As more screen space is available, side navigation can transform into tabs.
-([Demo](https://polymerelements.github.io/app-layout/patterns/transform-navigation/index.html) - [Source](/patterns/transform-navigation/x-app.html))
+([Demo](https://www.webcomponents.org/element/PolymerElements/app-layout/demo/patterns/transform-navigation/index.html) - [Source](/patterns/transform-navigation/x-app.html))
 
 - **Expand Card:**
 Content cards may expand to take up more horizontal space.
-([Demo](https://polymerelements.github.io/app-layout/patterns/expand-card/index.html) - [Source](/patterns/expand-card/index.html))
+([Demo](https://www.webcomponents.org/element/PolymerElements/app-layout/demo/patterns/expand-card/index.html) - [Source](/patterns/expand-card/index.html))
 
+- **Material Design Responsive Toolbar:**
+Toolbar changes its height and padding to adapt mobile screen size.
+([Demo](https://www.webcomponents.org/element/PolymerElements/app-layout/demo/patterns/md-responsive-toolbar/index.html) - [Source](/patterns/md-responsive-toolbar/index.html))
+
 ## Users
@@ -154,10 +159,86 @@
 
+- [Youtube Web](https://www.youtube.com/new)
 - [Google I/O 2016](https://events.google.com/io2016/)
+- [Polymer project site](https://www.polymer-project.org/summit)
 - [Polymer summit](https://www.polymer-project.org/summit)
-- [Pica](https://frankiefu.github.io/pica/)
+- [Shop](https://shop.polymer-project.org)
+- [News](https://news.polymer-project.org)
+- [webcomponents.org](https://www.webcomponents.org/)
+- [Chrome Status](https://www.chromestatus.com/)
+- [Project Fi](https://fi.google.com/about/)
+- [NASA Open Source Software](https://code.nasa.gov/)
 
 ## Tools and References
 
-- [Responsive App Layout](https://www.polymer-project.org/1.0/toolbox/app-layout)
-- [Polymer App Toolbox](https://www.polymer-project.org/1.0/toolbox/)
+- [Polymer App Toolbox](https://www.polymer-project.org/2.0/toolbox/)
 - [Material Design Adaptive UI Pattern](https://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-patterns)
+
+## Changes in App Layout 2.0
+
+- Distribution is now done with slots, so things have changed because of that,
+
+  ##### app-drawer-layout
+  **1.x**
+  ```
+  <app-drawer-layout>
+    <app-drawer>...</app-drawer>
+    <div>content</div>
+  </app-drawer-layout>
+  ```
+  **2.0**
+  ```
+  <app-drawer-layout>
+    <app-drawer slot="drawer">...</app-drawer>
+    <div>content</div>
+  </app-drawer-layout>
+  ```
+
+  ##### app-header-layout
+  **1.x**
+  ```
+  <app-header-layout>
+    <app-header>...</app-header>
+    <div>content</div>
+  </app-header-layout>
+  ```
+  **2.0**
+  ```
+  <app-header-layout>
+    <app-header slot="header">...</app-header>
+    <div>content</div>
+  </app-header-layout>
+  ```
+
+  ##### app-box
+  **1.x**
+  ```
+  <app-box effects="...">
+    <img background ...>
+  </app-box>
+  ```
+  **2.0**
+  ```
+  <app-box effects="...">
+    <img slot="background" ...>
+  </app-box>
+  ```
+
+- In `app-drawer-layout`, the `drawer-toggle` element needs to be manually hidden
+when `app-drawer-layout` is not in narrow layout. To add this, add the following CSS rule where
+`app-drawer-layout` is used:
+
+  ```css
+  app-drawer-layout:not([narrow]) [drawer-toggle] {
+    display: none;
+  }
+  ```
+- In `app-drawer-layout`, if you specify a value for `--app-drawer-width`, that value must be
+accessible by both `app-drawer` and `app-drawer-layout`. This can be done by defining the value
+on the `:host` that contains <app-drawer-layout> (or `html` if outside a shadow root):
+
+  ```css
+  :host {
+    --app-drawer-width: 300px;
+  }
+  ```
+- `app-scrollpos-control` has been removed from App Layout in favor of using multiple scrolling regions to preserve the scroll position. In terms of UX, [`document.rootScroller`](https://github.com/bokand/NonDocumentRootScroller) is a new web platform API that will allow non-document scroll to hide the address bar on mobile.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1423578

increased by1137.17%

Number of package files

144

increased by554.55%

Lines of code

18249

increased byInfinity%

Number of lines in readme file

240

increased by50.94%

Dependency changes

• + Added@polymer/iron-flex-layout@3.0.1(transitive)

• + Added@polymer/iron-media-query@3.0.1(transitive)

• + Added@polymer/iron-resizable-behavior@3.0.1(transitive)

• + Added@polymer/iron-scroll-target-behavior@3.0.1(transitive)

• + Added@polymer/polymer@3.5.2(transitive)

• + Added@webcomponents/shadycss@1.11.2(transitive)

• - Removed@polymer/iron-flex-layout@1.3.1-pre.3(transitive)

• - Removed@polymer/iron-media-query@1.0.8-pre.3(transitive)

• - Removed@polymer/iron-resizable-behavior@1.0.5-pre.3(transitive)

• - Removed@polymer/iron-scroll-target-behavior@1.1.1-pre.3(transitive)

• Updated@polymer/iron-flex-layout@^3.0.0-pre.1

• Updated@polymer/iron-media-query@^3.0.0-pre.1

• Updated@polymer/iron-resizable-behavior@^3.0.0-pre.1

• Updated@polymer/iron-scroll-target-behavior@^3.0.0-pre.1

• Updated@polymer/polymer@^3.0.0-pre.1