diff options
Diffstat (limited to 'design')
| -rw-r--r-- | design/sass/_birds.scss | 12 | ||||
| -rw-r--r-- | design/templates/details/bird.html | 16 |
2 files changed, 23 insertions, 5 deletions
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}}">© {{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> |