Hello. I'm in the middle of developing a music portal site. I decided to
try using Polymer to be able to factor out part of the code. One page have
various categories of music and shows albums that come from that category.
I'm using the Bootstrap "jumbotron" element to highlight each category.
What I've done so far looks great on Firefox and Internet Explorer but it
goes haywire when I use Chrome. I would think the opposite would be true.
Anyway, here's what I did. I have a database that sends a JSON document
over sample albums, cover art, title and artist name to the webpage. I've
created two Polymer elements, album-element and albumcat-element. The
"albumcat-element" is the jumbotron itself. It uses the "album-element" to
format each element. I noticed that I had to include the bootstrap css and
js files in each Polymer element document in order for things to look even
halfway decent on Chrome. (I did NOT have to do that for Firefox). And
yes, I'm running the latest version of Chrome. I checked to be sure. So
here's the code.
albumcat-element.html
<link rel="import" href="../components/polymer/polymer.html"/>
<link rel="import" href="./album-element.html"/>
<link href="../../css/bootstrap.min.css"/>
<link href="../../css/bootstrap-responsive.min.css"/>
<link href="../../css/web2py_bootstrap.css"/>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<polymer-element name="albumcat-element" attributes="albumlist header
backcolor">
<template>
<style>
.title1 {
text-align : center;
font-size: 56px;
}
.title2 {
text-align : center;
font-size: 30px;
color: red;
}
.jumbotron {
background-color: {{backcolor}};
border-style: solid;
border-bottom-color: black;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
</style>
<div class="jumbotron">
<div class="container">
<p class="title1">{{header}}</p>
<p class="title2">Click On Album To Preview</p>
<div class="row">
<template repeat="{{album in albumlist}}">
<album-element link = "{{album.link}}" artist =
"{{album.artist}}" album = "{{album.title}}" cover="{{album.cover}}">
</album-element>
</template>
</div>
</div>
</div>
</template>
<script>
Polymer({
// These default values are overridden
// by the user's attribute values.
header : "Music Category",
albumlist : [],
backcolor: "lightgrey"
});
</script>
</polymer-element>
album-element.html
<link rel="import" href="../components/polymer/polymer.html">
<link href="../../css/bootstrap.min.css"/>
<link href="../../css/bootstrap-responsive.min.css"/>
<link href="../../css/web2py_bootstrap.css"/>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/jquery.js"></script>
<polymer-element name="album-element" attributes="link artist album cover">
<template>
<style>
.albumlabel {
text-align : left
}
</style>
<div class="col-xs-6 col-md-3">
<a href="{{link}}">
<content select="img"></content>
<img src="{{cover}}" class="img-responsive img-rounded"/>
</a>
<h5 class="albumlabel">{{album}}<br/>
<small class="albumlabel">{{artist}}</small>
</h5>
</div>
</template>
<script>
Polymer({
// These default values are overridden
// by the user's attribute values.
link : "#",
artist : "sample artist",
album : "sample title",
cover : ""
});
</script>
</polymer-element>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/d6b95265-1514-4c70-9ebf-2c3dd8db4937%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
