diff options
Diffstat (limited to 'design')
| -rw-r--r-- | design/sass/_inbox.scss | 55 | ||||
| -rw-r--r-- | design/templates/admin/photos/luxgallery/change_form.html | 134 | ||||
| -rw-r--r-- | design/templates/archives/gallery_list.html | 57 | ||||
| -rw-r--r-- | design/templates/details/photo_gallery.html | 2 |
4 files changed, 247 insertions, 1 deletions
diff --git a/design/sass/_inbox.scss b/design/sass/_inbox.scss index 7f44753..f74fc31 100644 --- a/design/sass/_inbox.scss +++ b/design/sass/_inbox.scss @@ -13,3 +13,58 @@ margin-top: 3em; @include constrain_wide; } + +.photo-gallery { + margin: 0 auto; + margin-top: 1.5em; + position: relative; + width: 100%; /* for IE 6 */ + img { + width: 100%; + max-width: 100%; + padding: 0; + } + h4 { + font-weight: 500; + margin: .5em 0; + letter-spacing: 1px; + font-size: 2em; + } + time { display: inline; } + a { color: inherit;} + @include breakpoint(alpha) { + div { + position: absolute; + bottom: 28%; + left: .35em; + text-align: left; + } + time { + margin-left: .5em; + } + h4 { + font-size: 2.75em; + margin-bottom: 0; + } + p { + line-height: 1.3; + max-width: 80%; + margin-left: .25em; + @include fontsize(18); + } + } + @include breakpoint(beta) { + div { + bottom: 22%; + } + } + @include breakpoint(gamma) { + div { + bottom: 20%; + } + p { + max-width: 40%; + } + @include constrain_wide; + } +} diff --git a/design/templates/admin/photos/luxgallery/change_form.html b/design/templates/admin/photos/luxgallery/change_form.html new file mode 100644 index 0000000..448d415 --- /dev/null +++ b/design/templates/admin/photos/luxgallery/change_form.html @@ -0,0 +1,134 @@ +{% extends "admin/base_site.html" %} +{% load i18n admin_urls admin_static admin_modify %} + +{% block extrahead %}{{ block.super }} +<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script> +{{ media }} +<script> +if (!$) { + $ = django.jQuery; +} +$(function(){ + $('#id_images').css('width', '400px').css('height', '400px'); + $('#id_images option').each(function(){ + $(this).attr('style', 'background: url({{MEDIA_URL}}images/galleries/thumb/'+$(this).text()+') no-repeat; background-size: 70px 70px; height: 80px; padding-left: 80px; line-height: 80px;'); + }); +}); +</script> + +{% endblock %} + +{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}" />{% endblock %} + +{% block coltype %}colM{% endblock %} + +{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-form{% endblock %} + +{% if not is_popup %} +{% block breadcrumbs %} +<div class="breadcrumbs"> +<a href="{% url 'admin:index' %}">{% trans 'Home' %}</a> +› <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a> +› {% if has_change_permission %}<a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>{% else %}{{ opts.verbose_name_plural|capfirst }}{% endif %} +› {% if add %}{% trans 'Add' %} {{ opts.verbose_name }}{% else %}{{ original|truncatewords:"18" }}{% endif %} +</div> +{% endblock %} +{% endif %} + +{% block content %}<div id="content-main"> +{% block object-tools %} +{% if change %}{% if not is_popup %} + <ul class="object-tools"> + {% block object-tools-items %} + <li> + {% url opts|admin_urlname:'history' original.pk|admin_urlquote as history_url %} + <a href="{% add_preserved_filters history_url %}" class="historylink">{% trans "History" %}</a> + </li> + {% if has_absolute_url %}<li><a href="{{ absolute_url }}" class="viewsitelink">{% trans "View on site" %}</a></li>{% endif %} + {% endblock %} + </ul> +{% endif %}{% endif %} +{% endblock %} +<form {% if has_file_field %}enctype="multipart/form-data" {% endif %}action="{{ form_url }}" method="post" id="{{ opts.model_name }}_form" novalidate>{% csrf_token %}{% block form_top %}{% endblock %} +<div> +{% if is_popup %}<input type="hidden" name="{{ is_popup_var }}" value="1" />{% endif %} +{% if to_field %}<input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}" />{% endif %} +{% if save_on_top %}{% block submit_buttons_top %}{% submit_row %}{% endblock %}{% endif %} +{% if errors %} + <p class="errornote"> + {% if errors|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %} + </p> + {{ adminform.form.non_field_errors }} +{% endif %} + +{% block field_sets %} +{% for fieldset in adminform %} + {% include "admin/includes/fieldset.html" %} +{% endfor %} +{% endblock %} + +{% block after_field_sets %}{% endblock %} + +{% block inline_field_sets %} +{% for inline_admin_formset in inline_admin_formsets %} + {% include inline_admin_formset.opts.template %} +{% endfor %} +{% endblock %} + +{% block after_related_objects %}{% endblock %} + +{% block submit_buttons_bottom %}{% submit_row %}{% endblock %} + +{% block admin_change_form_document_ready %} + <script type="text/javascript"> + (function($) { + $(document).ready(function() { + $('.add-another').click(function(e) { + e.preventDefault(); + var event = $.Event('django:add-another-related'); + $(this).trigger(event); + if (!event.isDefaultPrevented()) { + showAddAnotherPopup(this); + } + }); + $('.related-lookup').click(function(e) { + e.preventDefault(); + var event = $.Event('django:lookup-related'); + $(this).trigger(event); + if (!event.isDefaultPrevented()) { + showRelatedObjectLookupPopup(this); + } + }); + $('body').on('click', '.related-widget-wrapper-link', function(e) { + e.preventDefault(); + if (this.href) { + var event = $.Event('django:show-related', {href: this.href}); + $(this).trigger(event); + if (!event.isDefaultPrevented()) { + showRelatedObjectPopup(this); + } + } + }); + $('body').on('change', '.related-widget-wrapper select', function(e) { + var event = $.Event('django:update-related'); + $(this).trigger(event); + if (!event.isDefaultPrevented()) { + updateRelatedObjectLinks(this); + } + }); + $('.related-widget-wrapper select').trigger('change'); + + {% if adminform and add %} + $('form#{{ opts.model_name }}_form :input:visible:enabled:first').focus() + {% endif %} + }); + })(django.jQuery); + </script> +{% endblock %} + +{# JavaScript for prepopulated fields #} +{% prepopulated_fields_js %} + +</div> +</form></div> +{% endblock %} diff --git a/design/templates/archives/gallery_list.html b/design/templates/archives/gallery_list.html new file mode 100644 index 0000000..1ae8696 --- /dev/null +++ b/design/templates/archives/gallery_list.html @@ -0,0 +1,57 @@ +{% extends 'base.html' %} +{% load get_image_size %} +{% load typogrify_tags %} +{% load pagination_tags %} + +{% block pagetitle %}Luxagraf | {% if region %}Photo Galleries: Images from {{region.name|title|smartypants|safe}}{%else%}Photo Galleries: Images from Around the World {%endif%} Page {{page}}{% endblock %} +{% block metadescription %}{% if region %}Photo Galleries from {{region.name|title|smartypants|safe}}{%else%}Photo Galleries: Images from Around the World {%endif%} Page {{page}}{% endblock %} + +{%block extrahead%} +<style> + @media screen and (min-width: 38em){ + {% autopaginate object_list 24 %} {% for object in object_list %} + {%if object.caption_style%} +#image-{{forloop.counter}} .gallery-text { + {{object.caption_style}} +} + {%endif%} + {%endfor%} +</style> +{%endblock%} + +{%block bodyid%}id="photo-archive"{%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> →</li> + {% if region %}{%if region.name == 'United States'%} <li><a href="/photos/" title="See all Photos" itemprop="url"><span itemprop="title">Photos</span></a> →</li> + <li>the United States</li>{%else%}<li><a href="/photos/" title="See all Photos" itemprop="url"><span itemprop="title">Photos</span></a> →</li> <li>{{region.name|title|smartypants|safe}}{%endif%}{%else%}<li>{% if is_private %}<a href="/photos/">Photos</a> →</li>{%else%}<li>Photos </li>{%endif%}{%endif%} + {% if is_private %}<li>Private</li>{%endif%} + </ul> + <main role="main"> + <h1 class="hide">{% if region %}Photographs from {{region.name|title|smartypants|safe}}{%else%}Photographs from Around the World {%endif%}</h1> + {% autopaginate object_list 24 %}{% for object in object_list %} + <article id="image-{{forloop.counter}}" class="photo-gallery"> + <a href="{{object.get_absolute_url}}" title="view images from {{ object.title }}"> + <img sizes="(max-width: 1140px) 100vw" + srcset="{% get_image_size object.thumb 'small' %} 720w, + {% get_image_size object.thumb 'medium' %} 1140w, + {% get_image_size object.thumb 'large' %} 2280w," + src="{% get_image_size object.thumb 'medium' %}" alt="{{object.title}}" ></a> + <div class="gallery-text"> + <h4>{{object.title}}</h4> + <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> – + <span class="p-location h-adr adr post--location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> + {% if object.location.state.country.name == "United States" %}<span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/photos/united-states/" title="all galleries from the United States">{{object.location.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.location.state.country.slug}}/" title="travel writing from {{object.location.state.country.name}}">{{object.state.country.name}}</a>{%endif%} + <span style="display: none;" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates"> + <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data> + <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data> + </span> + </span> + {%if object.description%}<p>{{object.description|safe|smartypants|widont}}</p>{%endif%} + </div> + </article>{% endfor %} + </ul> + </main> + <nav class="pagination">{% paginate %} + </nav> +{% endblock %} diff --git a/design/templates/details/photo_gallery.html b/design/templates/details/photo_gallery.html index b991ba2..d34f4e4 100644 --- a/design/templates/details/photo_gallery.html +++ b/design/templates/details/photo_gallery.html @@ -24,7 +24,7 @@ </ul> <p class="directions">Use left/right arrow keys to navigate through photos</p> <main id="slides" class="image-gallery--wrapper"> - <h1 class="hide">Photos from {{object.title}}</h1>{%for photo in object.image.all reversed %} + <h1 class="hide">Photos from {{object.title}}</h1>{%for photo in object.images.all reversed %} <article id="image-{{forloop.counter}}"> <h6><a href="#image-{{forloop.counter}}" class="permalink" title="link to this image">∞ {{forloop.counter|number_to_word}} ∞</a></h6> <figure class="fig"> |