Skip to content

Instantly share code, notes, and snippets.

@jgato

jgato/pipe_line_details

Last active August 29, 2015 14:09
Show Gist options
  • Save jgato/125ac1e97a537d017817 to your computer and use it in GitHub Desktop.
Save jgato/125ac1e97a537d017817 to your computer and use it in GitHub Desktop.
Download ZIP
pipe_line_details
Raw
pipe_line_details
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="https://www.polymer-project.org/components/core-scroll-header-panel/demos/sample-content.html">
<link rel="import" href="http://www.polymer-project.org/components/core-list/core-list.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-tabs/paper-tabs.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icon-button/core-icon-button.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icon/core-icon.html">
<link rel="import" href="http://www.polymer-project.org/components/core-item/core-item.html">
<link rel="import" href="http://www.polymer-project.org/components/core-card/core-card.html">
<link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer-tutorial/master/post-service/post-service.html">
<style shim-shadowdom>
#section {
height: 5000px;
background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
}
html, body {
height: 100%;
}
body {
margin: 0;
font-family: sans-serif;
color: #333;
}
core-scroll-header-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* background for toolbar when it is at its full size */
core-scroll-header-panel::shadow #headerBg {
background-image: url(http://afun4u.com/wp-content/uploads/2014/05/32.jpg);
}
/* background for toolbar when it is condensed */
core-scroll-header-panel::shadow #condensedHeaderBg {
background-color: #255A75
;
}
core-toolbar {
color: #f1f1f1;
fill: #f1f1f1;
background-color: transparent;
}
.title {
-webkit-transform-origin: 0;
transform-origin: 0;
font-size: 40px;
}
.content {
padding: 8px;
background-color: #eee;
}
list-test, .content {
overflow: hidden;
}
</style>
</head>
<body unresolved>
<polymer-element name="list-test" layout vertical attributes="data">
<script>
Polymer('list-test', {
});
</script>
</polymer-element>
<core-scroll-header-panel headermargin="128" condenses headerheight="192" id="core_scroll_header_panel">
<core-toolbar id="core_toolbar" class="tall">
<core-icon-button icon="arrow-back" id="core_icon_button"></core-icon-button>
<div id="div" flex></div>
<core-icon-button icon="search" id="core_icon_button1"></core-icon-button>
<core-icon-button icon="more-vert" id="core_icon_button2"></core-icon-button>
<div id="div1" class="bottom indent">AirBus Pipe Line</div>
</core-toolbar>
<div class="content">
<div style="border: 1px solid #bebebe; padding: 16px; margin: 16px; border-radius: 5px; background-color: #fff; color: #555;"><div style="display: inline-block; height: 64px; width: 64px; border-radius: 50%; background: #ddd; line-height: 64px; font-size: 30px; color: #666; text-align: center;">DHL </div>
<div id="header" style="position:relative;text-align:right;"> <core-icon-button icon="more-vert" id="core_icon_button2" >Edit</core-icon-button>
</div>
<div style="font-size: 22px; padding: 8px 0 16px; color: #888;">Development of mechanisms to minimize risks.</div>
<div style="font-size: 16px; padding-bottom: 8px;">It will address a global supply chain for Airbus, an aerospace manufacturer which
imports parts for aircrafts from different parts of the world. In this demonstrator, we consider suppliers located in
the United States (US)</div>
</div>
<div class="content">
<div style="border: 1px solid #bebebe; padding: 16px; margin: 16px; border-radius: 5px; background-color: #fff; color: #555;"><div style="display: inline-block; height: 64px; width: 64px; border-radius: 50%; background: #ddd; line-height: 64px; font-size: 30px; color: #666; text-align: center;">P</div>
<div id="header" style="position:relative;text-align:right;"> <core-icon-button icon="more-vert" id="core_icon_button2" >Edit</core-icon-button>
</div>
<div style="font-size: 22px; padding: 8px 0 16px; color: #888;">Participants in the supply chain</div>
<div>
<core-item id="core_item12" src="https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/location-24-512.png" label="GPS" horizontal center layout></core-item>
<core-item id="core_item13" src="https://cdn1.iconfinder.com/data/icons/healthcare-and-medicine-simplicity/512/time_sheduled-512.png" label="ETA" horizontal center layout></core-item>
<core-item id="core_item14" src="http://cdn.flaticon.com/png/256/16789.png" label="Temperature" horizontal center layout></core-item>
</div>
</div>
<div class="content">
<div style="border: 1px solid #bebebe; padding: 16px; margin: 16px; border-radius: 5px; background-color: #fff; color: #555;"><div style="display: inline-block; height: 64px; width: 64px; border-radius: 50%; background: #ddd; line-height: 64px; font-size: 30px; color: #666; text-align: center;">E</div>
<div style="font-size: 22px; padding: 8px 0 16px; color: #888;">Events supported by the supply chain</div>
<div id="header" style="position:relative;text-align:right;"> <core-icon-button icon="more-vert" id="core_icon_button2" >Edit</core-icon-button>
</div>
<div>
<core-item id="core_item11" icon="settings" src="https://cdn3.iconfinder.com/data/icons/black-easy/512/538474-user_512x512.png" label="DHL" horizontal center layout></core-item>
<core-item id="core_item11" icon="settings" src="https://cdn3.iconfinder.com/data/icons/black-easy/512/538474-user_512x512.png" label="P&G" horizontal center layout></core-item>
<core-item id="core_item11" icon="settings" src="https://cdn3.iconfinder.com/data/icons/black-easy/512/538474-user_512x512.png" label="ZLC" horizontal center layout></core-item>
</div>
</div>
<div class="content">
<div style="border: 1px solid #bebebe; padding: 16px; margin: 16px; border-radius: 5px; background-color: #fff; color: #555;"><div style="display: inline-block; height: 64px; width: 64px; border-radius: 50%; background: #ddd; line-height: 64px; font-size: 30px; color: #666; text-align: center;">P</div>
<div style="font-size: 22px; padding: 8px 0 16px; color: #888;">Supply chain visualizer</div>
<div id="header" style="position:relative;text-align:right;"> <core-icon-button icon="more-vert" id="core_icon_button2" >Edit</core-icon-button>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</core-scroll-header-panel>
<script>
// custom transformation: scale header's title
var titleStyle = document.querySelector('.title').style;
addEventListener('core-header-transform', function(e) {
var d = e.detail;
var m = d.height - d.condensedHeight;
var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);
titleStyle.transform = titleStyle.webkitTransform =
'scale(' + scale + ') translateZ(0)';
});
</script>
<script>
var t = document.querySelector('list-test');
t.data = [];
for (i=0; i< 30; i++) {
t.data.push({name: 'Bob'});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment