design/templates/details/national-parks.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

{% extends 'base.html' %}
{% load typogrify_tags %}
{% block pagetitle %}Luxagraf | Projects | National Parks {% endblock %}
{% block metadescription %}{% endblock %}
{% block extrahead %}
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script type="text/javascript">
        if (typeof L === "undefined") {
            document.write(unescape("%3Cscript src='/media/js/leaflet-0.7.3/leaflet.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
     <style>
         #map-canvas img{ border: none;}
     </style>
{% endblock %}

{%block bodyid%}id="projects-detail"{%endblock%}	

{% block htmlclass %}class="dark"{% endblock %}
				
{% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr;</li>
        <li><a href="/projects/" title="luxagraf projects page" itemprop="url"><span itemprop="title">Projects</span></a> &rarr;</li>
        <li>National Parks</li>
    </ul>
    <section>
        <h1 class="hide">The National Parks Project</h1>{% for object in object_list %}    
        <article id="park-{{forloop.counter}}" class="park">
            <h1>{{object.name}}</h1>
            <div class="figure">
                <img src="{{object.image.url}}" alt="{{object.name}}" width="{{object.image_width}}" height="{{object.image_height}}" />
            </div>
            <div class="legend">
                <h2>{{object.tag_line}}</h2>
                <ul class="buttons">
                    <li><a href="{{object.post.get_absolute_url}}" title="{{object.post.title}}">Read Journal</a></li>
                    {%if object.gallery%}<li><a href="{{object.gallery.get_absolute_url}}" title="Photos of {{object.unit_name}}">View Photos</a></li>{%endif%}
                    <li><a href="#" class="map-link" data-latitude="{{object.mpoly.centroid.y}}" data-longitude="{{object.mpoly.centroid.x}}" data-zoom="{{object.zoom}}" data-id="{{object.id}}">Map</a></li>
                    <li><a href="#" id="more-{{forloop.counter}}" class="more-link" title="More about {{object.unit_name}}">More</a></li>
                </ul>
                <dl class="meta" style="visibility: hidden;">
                    <dt>Visited:</dt>
                    <dd>{{object.date_visited_begin|date:"m/d/y"}} - {{object.date_visited_end|date:"m/d/y"}}</dd>
                    <dt>State:</dt>
                    <dd>{{object.state}}</dd>
                    <dt>Size:</dt>
                    <dd>{{object.size}} sq miles</dd>
                    <dt>Cost:</dt>
                    <dd>${{object.fee}} / ${{object.camping_fee}} (entry/camping)</dd>
                    <dt>Link:</dt>
                    <dd>{{object.url|urlize}}</dd>
                </dl>
            </div>
        </article>{% endfor %}
    </section>
{% endblock %}
{% block js %}
    <script type="text/javascript" src="/media/js/jquery.js"></script>
    <script type="text/javascript" src="/media/js/natparks.min.js" ></script>
{% endblock %}