From 85ce83a3fa1a6d084035babd4c7fc49c4f1e90f7 Mon Sep 17 00:00:00 2001
From: luxagraf <sng@luxagraf.net>
Date: Mon, 21 Mar 2016 10:23:54 -0400
Subject: finished up bird app basics. Pretty much works now. Just need builder
 to write it out

---
 design/sass/_birds.scss            | 12 ++++++++++--
 design/templates/details/bird.html | 16 +++++++++++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

(limited to 'design')

diff --git a/design/sass/_birds.scss b/design/sass/_birds.scss
index 36b6114..9b712cc 100644
--- a/design/sass/_birds.scss
+++ b/design/sass/_birds.scss
@@ -21,8 +21,16 @@
     font-style: italic;
 }
 .birds {
-    h2, h3 { font-weight: 400;}
-    h2 { margin-bottom: 0;}
+    article {
+        @include constrain_narrow;
+    }
+    audio { width: 100%;}
+    .audio-figure { 
+        margin-top: 2em;
+        margin-bottom: 2em;
+    }
+    article h2, h3 { font-weight: 400;}
+    article h2 { margin-bottom: 0;}
     h3 {
         margin-top: 0;
     }
diff --git a/design/templates/details/bird.html b/design/templates/details/bird.html
index 070a921..5140c96 100644
--- a/design/templates/details/bird.html
+++ b/design/templates/details/bird.html
@@ -1,4 +1,5 @@
 {% extends 'base.html' %}
+{% load get_image_by_size %}
 {% block extrahead %}
 <style>
 #detail-map-canvas { height: 100%;}
@@ -10,13 +11,22 @@
 <article>
 <h1>{{object.common_name}}</h1>
 <h2 class="sci">{{object.scientific_name}}</h2>
-<h3 class="sci">Class {{object.bird_class.scientific_name}} ({{object.bird_class}})</h3>
-<p id="endnode">Seen by {% for person in sighting.seen_by.all %}<a href="/birds/{{person}}/">{{person}}</a>{%if forloop.last %}{%else%}{% if forloop.revcounter == 2 %}, and {%else%}, {%endif%}{%endif%}{%endfor%}</p>
-{% if recording.audio %}
+<h3 class="sci">Family {{object.bird_class.scientific_name}} ({{object.bird_class}})</h3>
+{% for image in sighting.images.all %}
+<img class="picfull" sizes="(max-width: 680px) 100vw, (min-width: 681) 680px"
+     srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{size}}w{% if forloop.last%},"{%else%}, {%endif%}{%if forloop.last%}
+     src="{% get_image_by_size image size %}"{%endif%}{%endfor%} alt="{{image.alt}} ({{sighting.bird.scientific_name}}) photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}Scott Gilbertson{%endif%}">
+{%endfor%}
+
+<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>
+
+<p id="endnode">Seen at {{sighting.location}}, {{sighting.location.comma_name}}  in {{sighting.date|date:"M Y"}} by {% for person in sighting.seen_by.all %}<a href="/birds/{{person}}/">{{person}}</a>{%if forloop.last %}{%else%}{% if forloop.revcounter == 2 %}, and {%else%}, {%endif%}{%endif%}{%endfor%}</p>
+{% if recording.audio %}
 {%endif%}
 </article>
 </main>
-- 
cgit v1.2.3