Skip to content

Instantly share code, notes, and snippets.

@simonh1000

simonh1000/app.html

Last active August 29, 2015 14:05
Show Gist options
  • Save simonh1000/2703bea57fbb69f80bba to your computer and use it in GitHub Desktop.
Save simonh1000/2703bea57fbb69f80bba to your computer and use it in GitHub Desktop.
Download ZIP
Polymer tabbed SPA
Raw
app.html
<!doctype html>
<html>
<head>
<title>AF Mobile polymer</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="./bower_components/platform/platform.js"></script>
<!link rel="import" href="./bower_components/font-roboto/roboto.html">
<link rel="import"
href="./bower_components/core-header-panel/core-header-panel.html">
<link rel="import"
href="./bower_components/core-pages/core-pages.html">
<link rel="import"
href="./bower_components/core-toolbar/core-toolbar.html">
<link rel="import"
href="./bower_components/paper-tabs/paper-tabs.html">
<link rel="import"
href="./bower_components/paper-input/paper-input.html">
<link rel="import"
href="./bower_components/google-map/google-map.html">
<link rel="import" href="resto-list.html">
<link rel="import" href="resto-card.html">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
@media (min-width: 481px) {
#tabs {
width: 200px;
}
.container {
width: 400px;
}
}
.container {
width: 80%;
margin: 50px auto;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
core-toolbar {
background: #5b3751;
color: white;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
core-pages div {
padding: 10px;
/*background-color: #ddd;*/
}
#mapHolder {
height: 100%;
}
google-map {
display: block;
height: 500px;
}
</style>
</head>
<body unresolved>
<core-scaffold>
<core-header-panel>
<core-toolbar>
<text-span>
AF Mobile
</text-span>
<paper-input></paper-input>
</core-toolbar>
<core-toolbar>
<paper-tabs id="tabs" selected="list" self-end>
<paper-tab name="criteria">Criteria</paper-tab>
<paper-tab name="list">List</paper-tab>
<paper-tab name="map">Map</paper-tab>
</paper-tabs>
</core-toolbar>
<core-pages selected="list" valueattr="hash">
<div hash="criteria" class="container" >
Page 1
</div>
<div hash="list" class="container" layout vertical center>
<resto-list show="all"></resto-list>
</div>
<div id="mapHolder" hash="map">
<google-map latitude="37.77493" longitude="-122.41942"></google-map>
</div>
</core-pages>
</core-header-panel>
</core-scaffold>
<script>
var tabs = document.querySelector('paper-tabs');
var pages = document.querySelector('core-pages');
tabs.addEventListener('core-select', function() {
console.log("Selected: " + tabs.selected);
pages.selected = tabs.selected;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment