Mercurial > public > bravenewsurf

comparison bns_website/templates/bands/band_list.html @ 47:59dd574fcfff bands-experimental-ui

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Created a branch for band UI development. Took a first stab at a grid based approach.
author Chris Ridgway <ckridgway@gmail.com>
date Thu, 10 Nov 2011 23:09:15 -0600
parents f2cb9b2ec552
children 12a39a6f5247
comparison
equal deleted inserted replaced
46:51c01a3cb2f2 47:59dd574fcfff
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>
16 {% endblock %} 19 {% endblock %}
17 20
18 {% block content %} 21 {% block content %}
19 {% navbar 'bands' %} 22 {% navbar 'bands' %}
20 <h1>Bands</h1>
21 <p>This is too &quot;wall of text-y&quot;, so maybe break it up with band photos. And/or put a javascript slideshow of all the bands up here at the top.</p>
22 <dl>
23 {% for band in object_list %}
24 <dt><a href="{{ band.url }}">{{ band.name }}</a></dt>
25 <dd>{{ band.notes|linebreaksbr }}</dd>
26 {% endfor %}
27 </dl>
28 23
29 <p>And here is what it looks like as a jQuery accordion.</p> 24 <div class="hero-unit">
30 <div id="accordion"> 25 <h1>Band Name Here</h1>
31 {% for band in object_list %} 26 <span>
32 <h3><a href="#">{{ band.name }}</a></h3> 27 Click on a band logo below... TODO: Until a band is selected just cycle through the bands over time.
33 <div> 28 </span>
34 {{ band.notes|linebreaksbr }} 29 <p style="margin-top:1em"><a class="btn default" href="">Band Site</a></p>
35 <p style="margin-top:1em"><a class="btn default" href="{{ band.url }}">{{ band.name }} Website</a></p>
36 </div>
37 {% endfor %}
38 </div> 30 </div>
39 31
32 <div class="row">
33 {% for band in object_list %}
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>
41 </div>
42 {% endfor %}
43 </div>
44
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
40 {% endblock %} 53 {% endblock %}