Mercurial > public > bravenewsurf

comparison bns_website/templates/bands/band_list.html @ 52:12a39a6f5247 bands-experimental-ui

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
This is a simple change to just make every band it's own hero box. Next up is to try the slider box approach.
author Chris Ridgway <ckridgway@gmail.com>
date Sun, 13 Nov 2011 21:20:13 -0600
parents 59dd574fcfff
children 98cc19041d8f
comparison
equal deleted inserted replaced
47:59dd574fcfff 52:12a39a6f5247
11 <script type="text/javascript"> 11 <script type="text/javascript">
12 $(function() { 12 $(function() {
13 $("#accordion").accordion({active: false}); 13 $("#accordion").accordion({active: false});
14 }); 14 });
15 </script> 15 </script>
16 <style>
17 .hero-unit { height: 200px; }
18 </style>
19 {% endblock %} 16 {% endblock %}
20 17
21 {% block content %} 18 {% block content %}
22 {% navbar 'bands' %} 19 {% navbar 'bands' %}
23 20
21
22 {% for band in object_list %}
24 <div class="hero-unit"> 23 <div class="hero-unit">
25 <h1>Band Name Here</h1> 24 <h1>{{ band.name }}</h1>
26 <span> 25 <div class="row">
27 Click on a band logo below... TODO: Until a band is selected just cycle through the bands over time. 26 <div class="span10">
28 </span> 27 <br/>
29 <p style="margin-top:1em"><a class="btn default" href="">Band Site</a></p> 28 <span>{{ band.notes }}</span>
30 </div> 29 <p style="margin-top:1em"><a class="btn default" href="">Band Site</a></p>
31 30 </div>
32 <div class="row"> 31 <div class="span4">
33 {% for band in object_list %} 32 <img src="http://placehold.it/200x200&text={{ band.name|escapejs }}">
34 <div class="span-one-third">
35 <div id="{{ band.name }}" class="band-logo">
36 <img src="http://placehold.it/300x100&text={{ band.name|escapejs }}">
37 <span class="band-name" hidden="hidden">{{ band.name }}</span>
38 <span class="band-notes" hidden="hidden">{{ band.notes|linebreaksbr }}</span>
39 <span class="band-url" hidden="hidden">{{ band.url }}</span>
40 </div> 33 </div>
41 </div> 34 </div>
42 {% endfor %} 35
43 </div> 36 </div>
44 37 {% endfor %}
45 <script>
46 $("div.band-logo").click(function() {
47 $("div.hero-unit").find("h1").text($(this).find("span.band-name").text());
48 $("div.hero-unit").find("span").text($(this).find("span.band-notes").text());
49 $("div.hero-unit").find("a").attr("href", $(this).find("span.band-url").text());
50 })
51 </script>
52 38
53 {% endblock %} 39 {% endblock %}