Provides some basic application layout templates
Home Page: http://polymerelements.github.io/app-layout-templates/
Use the application layout templates provided and start building responsive applications.
If you select device view, tablet style, and resize your window to 1000x900, the tablet is larger than visible area. Its top and bottom are cut off, and it looks like something is broken. If you make the window smaller, tablet shrinks fully into view.
I see at https://github.com/PolymerElements/app-layout-templates/blob/master/nav-list-detail/src/x-app.html#L38 there is a function call [[_computeListWidth(_isMobile)]] ; how does it know the value of isMobile, who populates it? I don't see any media-query hence am confused.
Hi,
I have tried to run the layouts on my computer. When I run the nav-list-detail example layout, I get something like:
The drawer is opened permanently, on the left and there is no menu icon.
Anybody has this same issue?
(it seems like this project have not been updated for a while)
Nothing is rendered in Internet Explorer 11.
The console shows plenty of:
Unable to get property 'nodeType' of undefined or null reference
The example is rendered, not a blank page.
Page is blank and the console has several of these:
Unable to get property 'nodeType' of undefined or null reference
Navigate to http://polymerelements.github.io/app-layout-templates/index.html with Internet Explorer 11.
IE 11
I tried to make a New List Layout base on 1.0.3 and looks nice but the screen refreshes and the routing is lost.
Can someone fix it and make it avaiable as a layout?
I will pass the changed code, and to use ir you just need to replaces and add some files.
index.html
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Polymer Starter Kit" />
<title>Polymer Starter Kit</title>
<link rel="import" href="elements/elements.html">
</head>
<!--
Left Nav + List + Detail
-->
<html lang="">
<body unresolved class="layout vertical">
<span id="browser-sync-binding"></span>
<template is="dom-bind" id="app">
<paper-drawer-panel id="paperDrawerPanel" responsive-width="1280px">
<div class="nav" drawer>
<!-- Nav Content -->
<!-- Drawer Toolbar -->
<paper-toolbar id="drawerToolbar">
<span class="paper-font-title">Menu</span>
</paper-toolbar>
<!-- Drawer Content -->
<paper-menu class="list" attr-for-selected="data-route" selected="{{route}}" on-iron-select="onMenuSelect">
<a data-route="list" href="/list">
<iron-icon icon="list"></iron-icon>
<span>List View</span>
</a>
<a data-route="home" href="/">
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
<a data-route="users" href="/users">
<iron-icon icon="info"></iron-icon>
<span>Users</span>
</a>
<a data-route="contact" href="/contact">
<iron-icon icon="mail"></iron-icon>
<span>Contact</span>
</a>
</paper-menu>
</div>
<paper-drawer-panel id="mainDrawerPanel" class="main-drawer-panel" main responsive-width="600px"
drawer-width="[[_computeListWidth(_isMobile)]]" drawer-toggle-attribute="list-toggle"
narrow="{{_isMobile}}"
right-drawer>
<paper-scroll-header-panel class="list-panel" main
condenses keep-condensed-header>
<!-- List Toolbar -->
<paper-toolbar id="mainToolbar" class="tall">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="flex"></span>
<!-- Toolbar icons -->
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
<!-- Application name -->
<div class="middle middle-container center horizontal layout">
<div class="app-name">Polymer Starter Kit</div>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container center horizontal layout">
<div class="bottom-title paper-font-subhead">The future of the web today</div>
</div>
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="list">
<paper-menu class="list" on-iron-activate="_listTap">
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
<paper-item></paper-item>
</paper-menu>
</section>
<section data-route="home">
<paper-material elevation="1">
<my-greeting></my-greeting>
<p class="paper-font-subhead">You now have:</p>
<my-list></my-list>
<p class="paper-font-body2">Looking for more Web App layouts? Check out our <a href="https://github.com/PolymerElements/app-layout-templates">layouts</a> collection. You can also <a href="http://polymerelements.github.io/app-layout-templates/">preview</a> them live.</p>
</paper-material>
<paper-material elevation="1">
<p class="paper-font-body2">This is another card.</p>
</paper-material>
<paper-material elevation="1" class="paper-font-body2">
<h1 id="license">License</h1>
<p>Everything in this repo is BSD style license unless otherwise specified.</p>
</paper-material>
</section>
<section data-route="users">
<paper-material elevation="1">
<h2 class="paper-font-display2">Users</h2>
<p>This is the users section</p>
<a href="/users/Rob">Rob</a>
</paper-material>
</section>
<section data-route="user-info">
<paper-material elevation="1">
<h2 class="paper-font-display2">
User:<span>{{params.name}}</span>
</h2>
<div>This is <span>{{params.name}}</span>'s section</div>
</paper-material>
</section>
<section data-route="contact">
<paper-material elevation="1">
<h2 class="paper-font-display2">Contact</h2>
<p>This is the contact section</p>
</paper-material>
</section>
</iron-pages>
</div>
</paper-scroll-header-panel>
<paper-header-panel class="content-panel" drawer>
<!-- Main Toolbar -->
<paper-toolbar>
<paper-icon-button icon="arrow-back" list-toggle></paper-icon-button>
</paper-toolbar>
<!-- Main Content -->
<div class="content">
</div>
</paper-header-panel>
</paper-drawer-panel>
</paper-drawer-panel>
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<script src="scripts/app-list.js"></script>
<!-- endbuild-->
</body>
</html>
app-list.js
/*
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
(function(document) {
'use strict';
// Grab a reference to our auto-binding template
// and give it some initial binding values
// Learn more about auto-binding templates at http://goo.gl/Dx1u2g
var app = document.querySelector('#app');
app._computeListWidth = function(isMobile) {
// when in mobile screen size, make the list be 100% width to cover the whole screen
return isMobile ? '100%' : '66%';
};
app._listTap = function() {
this.$.mainDrawerPanel.openDrawer();
};
})(document);
routing.html
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<script src="../../bower_components/page/page.js"></script>
<script>
window.addEventListener('WebComponentsReady', function() {
// We use Page.js for routing. This is a Micro
// client-side router inspired by the Express router
// More info: https://visionmedia.github.io/page.js/
page('/', function () {
app.route = 'home';
});
page('/users', function () {
app.route = 'users';
});
page('/list', function () {
app.route = 'list';
});
page('/users/:name', function (data) {
app.route = 'user-info';
app.params = data.params;
});
page('/contact', function () {
app.route = 'contact';
});
// add #! before urls
page({
hashbang: true
});
});
</script>
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.