Proj: Massive design overhaul to simplify code

Cut out Sass syntax, deleted old CSS rules, changed HTML to use
fewer lists and more cascading instead of specific rules. Still requires
compiling with sass to strip comments and compress, but would in theory
work on its own.

Reduced CSS file size by 2/3

2 files changed, 90 insertions, 0 deletions

diff --git a/app/sightings/templates/sightings/ap_detail.html b/app/sightings/templates/sightings/ap_detail.html
new file mode 100644
index 0000000..72c3666
--- /dev/null
+++ b/app/sightings/templates/sightings/ap_detail.html
@@ -0,0 +1,57 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{% block extrahead %}
+<style>
+#detail-map-canvas { height: 100%;}
+</style>
+{% endblock %}
+{% block bodyid %}class="detail center"{%endblock%}
+{% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %}
+{% block primary %}<main>
+    <article class="content">
+        <header class="post-header">
+            <h1 class="p-name post-title" itemprop="headline">{{object.common_name}}</h1>
+            <h2 class="post-subtitle post-subtitle-line">{{object.scientific_name}}</h2>
+            <h3 class="post-smcaps">Family {{object.apclass.scientific_name}} ({{object.apclass}})</h3>
+        </header>
+    <div class="post-body">
+        {% if object.body_html %}{{object.body_html|safe|smartypants|widont}}{%endif%}
+        {%if recording %}
+        <div class="audio-figure">
+            <audio autoplay="autoplay" controls="controls">  
+                <source src="/media/{{recording.audio}}" />  
+            </audio> 
+            <small>Audio recorded by {{recording.recorder}} on {{recording.pub_date|date:"F j, Y"}} in {{recording.location}}. <a href="{{recording.link}}">&copy; {{recording.copyright}}</a></small>
+        </div>
+        {%endif%}
+        {% if field_notes %}
+        <h4>Field Notes</h4>{% for note in field_notes %}
+        {{note.body_html|safe|smartypants}}
+        <p class="post-subtitle-segundo">&ndash; <a href="{{note.sighting.location.get_absolute_url}}">{{note.sighting.location}}</a>, {{note.sighting.location.comma_name}}, {{note.sighting.pub_date|date:"M Y"}}</p>
+        <hr />
+        {%endfor%}
+        {%endif%}
+        <div>
+        <h5 class="hedtinycaps">Seen at</h5>
+        <ul class="list-sm">{%for sight in sighting %}
+            <li><a href="{{sight.location.get_absolute_url}}">{{sight.location}}</a>, {{sight.location.comma_name}}, {{sight.pub_date|date:"M Y"}}</li>
+        {%endfor%}</ul>
+        </div>
+    </div>
+</article>
+</main>
+{% endblock %}
+
+{% block js %}
+<script src="/media/js/leaflet-master/leaflet-mod.js"></script>
+<script src="/media/js/detail.js"></script>
+<script type="text/javascript">
+sightings = [];
+{% for s in sighting %}
+sightings.push(['{{s.latitude}}', '{{s.longitude}}']);
+{% endfor %}
+window.onload = function() {
+    createBirdMap({% for s in sighting %}{% if forloop.first %}{{s.latitude}},{{s.longitude}}{%endif%}{%endfor%}, 5, { type:'point', lat:'{{sighting.latitude}}', lon:'{{sighting.longitude}}'}, sightings); return false;
+}
+</script>
+{% endblock %}
diff --git a/app/sightings/templates/sightings/sighting_list.html b/app/sightings/templates/sightings/sighting_list.html
new file mode 100644
index 0000000..0264bda
--- /dev/null
+++ b/app/sightings/templates/sightings/sighting_list.html
@@ -0,0 +1,33 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{% load pagination_tags %}
+
+{% block pagetitle %}Luxagraf | Plants and Animals seen {% if region %}in {{region.name|title|smartypants|safe}}{%else%}by {{user}}{%endif%}{% if page != "1" %} -- Page {{page}}{%endif%}{% endblock %}
+{% block metadescription %}Plants and Animals  seen {% if region %} in {{region.name|title|smartypants|safe}}{%else%}by {{user}}{%endif%} Page {{page}}{% endblock %}
+{% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %}
+{% block primary %}
+    <main class="archive-grid">{% autopaginate object_list 24%}
+    <h1 class="hide">Plants and Animals seen {% if region %}in {%if region.name == 'United States'%}the United States{%else%}{{region.name|title|smartypants|safe}}{%endif%}{%else%} by {{user}}{%endif%}</h1> {% for object in object_list %}
+    <article class="archive-grid-card">{% if object.ap.image%} 
+            <div class="post--image">
+                <a href="{{object.ap.get_absolute_url}}" title="{{object.ap}}">
+                    {% include "lib/img_archive.html" with image=object.ap.image  %}
+                </a>
+            </div>{% endif %}
+            <h2 class="card-hed-smit"><a href="{{object.ap.get_absolute_url}}" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.ap}}{%endif%}">{{object.ap|safe|smartypants|widont}} (<span class="sci">{{object.ap.scientific_name}}</span>)</a></h2>
+            <time class="card-smcaps" datetime="{{object.pub_date|date:'c'}}">Last Seen: {{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+            <div class="card-dek">
+                <span class="card-smcaps" itemscope itemtype="http://schema.org/Place">
+                    {% if object.country_name == "United States" %}<span class="p-locality locality">{{object.location_name|smartypants|safe}}</span>, {{object.state_name}}, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location_name|smartypants|safe}}</span>, {{object.country_name}}</a>{%endif%}
+                </span>
+            </div>
+        </article> {% endfor %}
+    </main>
+    <nav aria-label="page navigation" class="pagination">
+    {% paginate %}
+    </nav>
+{% endblock %}
+
+
+
+{% block js %}<script src="/media/js/hyphenate.min.js" type="text/javascript"></script>{% endblock%}