Skip to content

Instantly share code, notes, and snippets.

@jeffposnick

jeffposnick/material_design_list.html

Last active August 29, 2015 14:08
Show Gist options
  • Save jeffposnick/a2978142dd2b7d3c8687 to your computer and use it in GitHub Desktop.
Save jeffposnick/a2978142dd2b7d3c8687 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
material_design_list.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="A Material Design card list built with Polymer.">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<!-- See https://www.chromestatus.com/feature/5398016231997440 -->
<meta name="theme-color" content="#0277db">
<title>Material Design Card List</title>
<!-- DON'T link to the polymer-project.org versions of these files in a real page!
Install these components locally using bower:
https://www.polymer-project.org/docs/start/getting-the-code.html#installing-components -->
<script src="//www.polymer-project.org/platform.js"></script>
<link rel="import" href="//www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="//www.polymer-project.org/components/core-icon-button/core-icon-button.html">
<!-- core-image isn't currently served off of polymer-project.org -->
<link rel="import" href="//rawgit.com/Polymer/core-image/master/core-image.html">
<link rel="import" href="//www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="//www.polymer-project.org/components/font-roboto/roboto.html">
<link rel="import" href="//www.polymer-project.org/components/paper-dialog/paper-dialog.html">
<link rel="import" href="//www.polymer-project.org/components/paper-dialog/paper-dialog-transition.html">
<link rel="import" href="//www.polymer-project.org/components/paper-item/paper-item.html">
<link rel="import" href="//www.polymer-project.org/components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="//www.polymer-project.org/components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="//www.polymer-project.org/components/paper-ripple/paper-ripple.html">
<style shim-shadowdom>
/* See http://phonegap-tips.com/articles/essential-phonegap-css-webkit-tap-highlight-color.html */
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
outline: 0;
}
body {
font-family: "RobotoDraft";
font-weight: 500;
background-color: #e0e0e0;
font-size: 16px;
}
body /deep/ core-toolbar {
background-color: #1a9ce2;
color: #ffffff;
}
paper-ripple {
z-index: 1;
}
#page-title {
font-size: 1.2em;
}
.card {
background-color: #ffffff;
border-radius: 2px;
/* Once https://github.com/Polymer/paper-shadow/issues/21
is resolved, use that instead of box-shadow. */
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
display: block;
height: 320px;
margin: 8px;
min-width: 200px;
position: relative;
width: 200px;
}
.card .item-image {
background-color: #323232;
height: 240px;
width: 100%;
}
.card .bottom-portion {
background-color: #ffffff;
margin-left: 8px;
margin-right: 8px;
position: relative;
}
.card .text {
width: 160px;
}
.card .top-text {
color: #212121;
max-height: 40px;
overflow-y: hidden;
}
.card .bottom-text {
color: #4d4d4d;
font-size: 0.8em;
height: 1.2em;
margin-top: 4px;
overflow-y: hidden;
}
.card paper-menu-button {
color: #bcbcbc;
position: absolute;
top: -4px;
right: -8px;
z-index: 2;
}
</style>
</head>
<body unresolved fullbleed layout vertical>
<template is="auto-binding" id="page-template">
<core-header-panel flex>
<core-toolbar>
<div id="page-title" flex>Page Title</div>
<core-icon-button icon="refresh"
on-tap="{{initializeItems}}">
</core-icon-button>
<core-icon-button icon="add"
on-tap="{{addNewItem}}">
</core-icon-button>
</core-toolbar>
<div fit layout horizontal wrap center-justified>
<template repeat="{{item in items}}">
<div class="card"
on-tap="{{handleCardTap}}">
<paper-ripple fit></paper-ripple>
<core-image class="item-image"
src="{{item.imageUrl}}"
preload
fade
sizing="contain">
</core-image>
<div class="bottom-portion">
<div class="text" layout vertical>
<div class="top-text">{{item.topText}}</div>
<div class="bottom-text">{{item.bottomText}}</div>
</div>
<!-- Tapping on this isn't implemented in this example. -->
<paper-menu-button icon="more-vert">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
<paper-item>Item 3</paper-item>
</paper-menu-button>
</div>
</div>
</template>
</div>
</core-header-panel>
</template>
<script>
var template = document.querySelector('#page-template');
var DEFAULT_ITEMS = [
{
topText: 'This is an item',
bottomText: 'Yes it is',
imageUrl: 'https://www.polymer-project.org/images/logos/p-logo.svg'
},
{
topText: 'This is an item with a particularly long title which goes on and on',
bottomText: 'The title will be cut off, as will this text',
imageUrl: 'https://www.polymer-project.org/images/logos/p-logo.svg'
},
{
topText: 'This is another item!',
bottomText: 'Exciting!',
imageUrl: 'https://www.polymer-project.org/images/logos/p-logo.svg'
},
];
template.initializeItems = function() {
template.items = DEFAULT_ITEMS.slice();
};
template.addNewItem = function() {
template.items.push({
topText: 'I\'m a new item',
bottomText: 'Try adding more!',
imageUrl: 'https://www.polymer-project.org/images/logos/p-logo.svg'
});
};
template.handleCardTap = function(e) {
// e.target.templateInstance.model.item contains the model
// for the card that was tapped.
console.log(e.target.templateInstance.model.item);
};
template.initializeItems();
</script>
</body>
</html>
@erickoledadevrel
Copy link

FYI, demo broken, due to cross-origin issue with polymer-project.org.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment