diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/archives/projects.html | 9 | ||||
| -rw-r--r-- | templates/base.html | 5 | ||||
| -rw-r--r-- | templates/details/national-parks.html | 124 | ||||
| -rw-r--r-- | templates/details/photo_galleries.html | 417 | ||||
| -rw-r--r-- | templates/includes/map_entry_list.html | 2 |
5 files changed, 226 insertions, 331 deletions
diff --git a/templates/archives/projects.html b/templates/archives/projects.html index cdefc1f..4abdf59 100644 --- a/templates/archives/projects.html +++ b/templates/archives/projects.html @@ -12,12 +12,15 @@ <li>Projects</li> </ul> <h1 class="hide">Projects</h1> + <div class="top"><p class="col">These are a few of the things that I use to inspire myself to do more. Everything, even the boring town you live in now, is amazing when viewed from the proper perspective. </p> + + <p class="col two">The projects on luxagraf are more or less goals I've created in effort to get my body in motion, because the difference between the mundane and the amazing is often simply motion. To move is to do, and to do is to live.</p></div> {%for project in object_list %} - <ul> - <li class="project-tease"> + <ul class="project-tease"> + <li> <dl> <dt> - <a href="{{project.get_absolute_url}}"><h4 class="proj">{{project.title|safe}}</h4> {{project.subtitle|safe}}</a> + <a href="{{project.get_absolute_url}}"><h4>{{project.title|safe}}</h4> {{project.subtitle|safe}}</a> </dt> <dd>{{project.lede|safe}}</dd> </dl> diff --git a/templates/base.html b/templates/base.html index 68a1942..bbe8b1c 100644 --- a/templates/base.html +++ b/templates/base.html @@ -20,7 +20,10 @@ href="{{media_url}}css/base.css" type="text/css" media="screen"> - + <link rel="stylesheet" + href="{{media_url}}css/print.css" + type="text/css" + media="print"> {%block stylesheet%}{%endblock%} <!--[if lte IE 7]><link rel="stylesheet" href="http://luxagraf.net/media/css/ie.css" type="text/css" media="screen, projection"><![endif]--> diff --git a/templates/details/national-parks.html b/templates/details/national-parks.html new file mode 100644 index 0000000..d9aabc3 --- /dev/null +++ b/templates/details/national-parks.html @@ -0,0 +1,124 @@ +{% extends 'base.html' %} +{% load typogrify %} +{% block pagetitle %}Luxagraf | Projects | National Parks {% endblock %} +{% block metadescription %}{% endblock %} + +{% block extrahead %}<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> + +<script src="http://documentcloud.github.com/underscore/underscore-min.js" type="text/javascript"></script> + +<link rel="stylesheet" + href="http://127.0.0.1:8000/media/css/dark.css" + type="text/css" + media="screen"> + +{% endblock %} + + +{%block bodyid%}id="projects"{%endblock%} + +{% block bodyevents %}onload="initialize()"{% endblock %} + +{% block primary %} +<article> + <ul id="breadcrumbs"> + <li><a href="/" title="luxagraf homepage">Home</a> →</li> + <li><a href="/projects/" title="luxagraf projects page">Projects</a> →</li> + <li>National Parks</li> + </ul> + + <ul id="parks"> + {% for object in object_list %} + <li> + <div class="figure"> + <img src="{{object.image.url}}" alt="{{object.title}}" /> + </div> + <h4>{{object.unit_name}} {{object.type}}</h4> + <div class="legend"> + <div class="desc"> + <h5>{{object.tag_line}}</h5> + <div>{{object.dek|safe}} + <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%} + </ul> + </div> + <dl> + <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>Cost:</dt> + <dd>${{object.fee}} / ${{object.camping_fee}} (camping)</dd> + <dt>Website:</dt> + <dd>{{object.url|urlize}}</dd> + </dl> + </div> + + <div class="map" id="map-canvas-{{forloop.counter}}"> + </div> + </div> + + </li> + {% endfor %} + </ul> + +</article> + +{% endblock %} + +{% block js %} +<script type="text/javascript"> +function createPolygons(areajson, bounds){ + var coords = areajson.coordinates; + var polygons = _(coords).reduce([], function(memo_n, n) { + var polygonpaths = _(n).reduce(new google.maps.MVCArray(), function(memo_o, o) { + var polygoncords = _(o).reduce(new google.maps.MVCArray(), function(memo_p, p) { + var mylatlng = new google.maps.LatLng(p[1], p[0]); + if(bounds){ + bounds.extend(mylatlng); + } + memo_p.push(mylatlng); + return memo_p; + }); + memo_o.push(polygoncords); + return memo_o; + }); + var polygon = new google.maps.Polygon({ + paths: polygonpaths, + strokeColor: "#201a11", + strokeOpacity: 0.8, + strokeWeight: 2, + fillColor: "#201a11", + fillOpacity: 0.35 + }); + memo_n.push(polygon); + return memo_n; + }); + return polygons; +} +function initialize() { + {% for object in object_list %} + var latlng = new google.maps.LatLng({{object.mpoly.centroid.y}},{{object.mpoly.centroid.x}}); + var myOptions = { + zoom: {{object.zoom}}, + center: latlng, + disableDefaultUI: true, + navigationControl: true, + navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, + + mapTypeId: google.maps.MapTypeId.TERRAIN + + }; + var map = new google.maps.Map(document.getElementById("map-canvas-{{forloop.counter}}"), myOptions); + var poly = createPolygons({{object.mpoly.geojson|safe}}); + for (i=0;i<=poly.length-1;i++) { + poly[i].setMap(map); + + } + {% endfor %} + } + + +</script> +{%endblock%} diff --git a/templates/details/photo_galleries.html b/templates/details/photo_galleries.html index e1964e0..bd4c185 100644 --- a/templates/details/photo_galleries.html +++ b/templates/details/photo_galleries.html @@ -1,345 +1,110 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> +<!DOCTYPE html> +<html lang="en"> <head> <title>Luxagraf | Photos | {{object.set_title}}</title> - <meta http-equiv="content-type" content="text/html; charset=UTF-8"> - <meta http-equiv="imagetoolbar" content="false"> - <meta name="description" content=""> - <meta name="keywords" content=""> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <style> - -html { - /* Moz */ - height: 100%; -} -.wrapper { - width: 960px; - margin: 0 auto; -} -/* BEGIN GALLERIA STYLE */ -.galleria{list-style:none;width:200px} -.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 6px 10px 0;border: 3px #2a2a2a solid;} -.galleria li a{display:none} -.galleria li div{position:absolute;display:none;top:0;left:180px} -.galleria li div img{cursor:pointer} -.galleria li.active {border: 3px #b6b6b6 solid;} -.galleria li.active div img,.galleria li.active div{display:block} -.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto} -.galleria li .caption{display:block;padding-top:.5em} -* html .galleria li div span{width:400px} /* MSIE bug */ - -*{margin:0;padding:0} -body{padding:20px;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;} -h1{font-family:Georgia,"Times New Roman",Times,Serif;text-transform:uppercase;font-size:15px;font-weight: normal} -h2 a {font-family:Georgia,"Times New Roman",Times,Serif;font-size:12px;font-weight: normal; font-style:italic; color: #b6b6b6; text-decoration: none;} -a:hover{color:#b53a04;} -.caption{font-family:Georgia,"Times New Roman",Times,Serif;font-style:italic;color:#887;} -.demo{position:relative;margin-top:2em;} -/*.gallery_show{width:702px;margin:0 auto;}*/ -.gallery_show{height:90px;margin:0;} -.gallery_show li{width:75px;height:75px;border:3px double #111;margin: 2px;background:#000;} -.gallery_show li div{left:240px} -.gallery_show li div .caption{font:italic 0.7em/1.4 georgia,serif;} - -#main_image{margin:0 auto 20px auto;height:640px;width:960px;} -#main_image img{margin-bottom:1px;} - -.nav{padding-bottom:10px;text-align:center;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;} - - - - - -/* Menu ----------------------------- */ - -.clearit { - margin: 0; - padding: 0; - height: 0; - clear: both; -} -/* start jcarousel */ -/** - * This <div> element is wrapped by jCarousel around the list - * and has the classname "jcarousel-container". - */ -.jcarousel-container { - position: relative; -} - -.jcarousel-clip { - z-index: 2; - padding: 0; - margin: 0; - overflow: hidden; - position: relative; -} - -.jcarousel-list { - z-index: 1; - overflow: hidden; - position: relative; - top: 0; - left: 0; - margin: 0; - padding: 0; -} - -.jcarousel-item { - float: left; - list-style: none; - /* We set the width/height explicitly. No width/height causes infinite loops. */ - width: 75px; - height: 75px; -} - -/** - * The buttons are added dynamically by jCarousel before - * the <ul> list (inside the <div> described above) and - * have the classnames "jcarousel-next" and "jcarousel-prev". - */ -.jcarousel-next { - z-index: 3; - display: none; -} - -.jcarousel-prev { - z-index: 3; - display: none; -} - -/* end jcarousel */ - - -/* start tango jcarousel */ -.jcarousel-skin-tango.jcarousel-container { - -moz-border-radius: 5px; - margin: 0 auto; -} - -.jcarousel-skin-tango.jcarousel-container-horizontal { - width: 960px; - padding: 10px 40px; -} + <!--[if IE]> + <script src="http://media.luxagraf.net/js/html5.js"></script> + <![endif]--> -.jcarousel-skin-tango.jcarousel-container-vertical { - width: 75px; - height: 245px; - padding: 40px 20px; -} -.jcarousel-skin-tango .jcarousel-clip-horizontal { - width: 960px; - height: 75px; -} + <link rel="alternate" + type="application/rss+xml" + title="RSS 2.0" + href="http://feeds2.feedburner.com/luxagraf/blog"> -.jcarousel-skin-tango .jcarousel-clip-vertical { - width: 75px; - height: 245px; -} -.jcarousel-skin-tango .jcarousel-item { - width: 65px; - height: 65px; - border: 3px #2a2a2a solid; -} - -.jcarousel-skin-tango .jcarousel-item-horizontal { - margin-right: 8px; -} - -.jcarousel-skin-tango .jcarousel-item-vertical { - margin-bottom: 10px; -} - -.jcarousel-skin-tango .jcarousel-item-placeholder { - background: #000; - color: #fff; -} - -/** - * Horizontal Buttons - */ -.jcarousel-skin-tango .jcarousel-next-horizontal { - position: absolute; - top: 22px; - right: 10px; - width: 20px; - height: 53px; - cursor: pointer; - background: url({{media_url}}img/slideshow-arrow-right.png) no-repeat 0 0; -} - -.jcarousel-skin-tango .jcarousel-next-horizontal:hover { - background-position: -20px 0; -} + <link rel="stylesheet" + href="{{media_url}}css/photos.css" + type="text/css" + media="screen"> + + -.jcarousel-skin-tango .jcarousel-prev-horizontal { - position: absolute; - top: 22px; - left: 10px; - width: 20px; - height: 53px; - cursor: pointer; - background: url({{media_url}}img/slideshow-arrow-left.png) no-repeat -20px 0; -} + <link rel="shortcut icon" + href="http://media.luxagraf.net/img/favicon.ico" + type="image/vnd.microsoft.icon"> -.jcarousel-skin-tango .jcarousel-prev-horizontal:hover { - background-position: 0 0; -} -#controls {width: 60px; margin: 5px auto 0;} -.play { - width: 57px; - height: 32px; - background: url({{media_url}}img/play.png) 0 0 no-repeat; -} + <link rel="apple-touch-icon" + href="http://media.luxagraf.net/img/luxagrafiphoneicon.png"> -.play:hover { background: url({{media_url}}img/play.png) -57px 0 no-repeat; } + <meta name="author" content="luxagraf"> + <meta name="description" + content="Slideshow: Photos from {{object.set_title}}"> + <meta name="keywords" + content="photos, slideshow, {{object.set_title}}"> + <meta name="copyright" + content="Licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License"> -.pause { - width: 57px; - height: 32px; - background: url({{media_url}}img/pause.png) 0 0 no-repeat;; -} -.pause:hover { - background: url({{media_url}}img/pause.png) -57px 0 no-repeat; -} - </style> - <script type="text/javascript" src="http://media.luxagraf.net/js/jquery.js"></script> + + <script type="text/javascript" src="/media/js/jquery.js"></script> + <script type="text/javascript" src="/media/js/jquery.cycle.pack.js"></script> + <script type="text/javascript" src="/media/js/jquery.jcarousel.pack.js"></script> + <script type="text/javascript" src="/media/js/slideshow.pack.js" ></script> + <!-- if you'd like to see a non-packed version of my slideshow script, see this file: http://media.luxagraf.net/js/slideshow.js (requires jquery, jcarousel and cycle) --> + <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> - <script type="text/javascript" src="http://media.luxagraf.net/js/combo.pack.js"></script> </head> <body> -<h1>Luxagraf, photos from: {{object.set_title}}</h1> -<h2><a href="/photos/1/">« Back to galleries</a></h2> -<div id="controls"> - <div id="toggle" class="pause"></div> - </div> + <div id="wrapper"> + <ul id="breadcrumbs"> + <li><a href="/" title="luxagraf homepage">Home</a> →</li> + <li><a href="/photos/" title="luxagraf photos">Photos</a> → </li> + <li>{{object.set_title}}</li> + </ul> + <ul id="instructions"> + <li>Hover image to pause,</li> + <li> ← & → to navigate</li> + </ul> -<div id="wrapper"> - <div id="main_image"></div> - <div id="images" style="height:90px; white-space:nowrap;"> - <ul id="mycarousel" class="jcarousel-skin-tango"> - {%for photo in object.photos.all reversed %} - <li><img src="{{photo.get_local_slideshow_url}}" alt="{{photo.title}}" title="{%ifequal photo.description 'None' %}{%else%}{{photo.description|striptags}}{%endifequal%}"></li> - {% endfor %} + <ul id="slides"> + {%for photo in object.photos.all reversed %} + <li class="bigimg" id="{{photo.get_local_slideshow_url}}" style="height: {{photo.slideshowimage_height}}px; width:{{photo.slideshowimage_width}}px; margin-top:{{photo.slideshowimage_margintop}}px; margin-left:{{photo.slideshowimage_marginleft}}px;"> + <div class="figure"> + <img src="{{photo.get_local_slideshow_url}}" alt="{{photo.title}}" title="{{photo.title}}" class="imgs" height="{{photo.slideshowimage_height}}px" width="{{photo.slideshowimage_width}}px" /> + </div> + <div class="legend"> + <div class="caption"> + <h5>{{photo.title}} <span>{{photo.exif_date|date:"M j, Y"}}</span></h5> + {%if photo.description %} + <p>{{photo.description|safe}}</p> + {%endif%} + </div> + + <div class="photo-options"> + <a class="map-link" href="#" title="{{photo.lat}},{{photo.lon}},{{photo.title}}">Map</a> + <a href="#" class="exif-link" title="{{photo.id}}">Camera</a> + </div> + <div class="clear"></div> + </div> + <div class="meta" style="display: none;"> + <dl> + <dt>Camera:</dt> + <dd>{% ifequal photo.exif_make 'Canon'%}{{photo.exif_model}}{%endifequal%}{% ifequal photo.exif_model 'DMC-LX2'%}{{photo.exif_make}} {{photo.exif_model}}{%endifequal%}{%ifequal photo.exif_model 'DMC-GF1' %}<a href="http://amzn.to/cLQozJ" title="Buy on Amazon">{{photo.exif_make}} {{photo.exif_model}}</a>{%endifequal%}</dd> + <dt>Lens: </dt> + <dd>{%ifequal photo.exif_lens 'LUMIX G VARIO 14-45/F3.5-5.6' %}<a href="http://amzn.to/azIr5w" title="buy the {{photo.exif_lens}} on Amazon">{{photo.exif_lens}}</a>{%endifequal%}{%ifequal photo.exif_lens 'LUMIX G 20/F1.7' %}<a href="http://amzn.to/daMYOm" title="buy the {{photo.exif_lens}} on Amazon">{{photo.exif_lens}}</a>{%endifequal%}{%ifequal photo.exif_lens '' %}Built-in{%endifequal%}</dd> + <dt>Exposure</dt> + <dd>{{photo.exif_exposure}}</dd> + <dt>Aperture</dt> + <dd>{{photo.exif_aperture}}</dd> + <dt>Focal Length: </dt> + <dd>{{photo.exif_focal_length}}</dd> + <dt>ISO: </dt> + <dd>{{photo.exif_iso}}</dd> + <dt>Comments: </dt> + <dd><a href="{{photo.flickr_link}}" title="View this Photo on Flickr.com">View on Flickr</a></dd> + </dl> + </div> + </li> + {% endfor %} </ul> </div> -</div> - <script type="text/javascript"> -//<![CDATA[ - $(document).ready(function(){ - - $('.jcarousel-skin-tango').addClass('gallery_show'); // adds new class name to maintain degradability - - $('ul.gallery_show').galleria({ - history : true, // activates the history object for bookmarking, back-button etc. - clickNext : true, // helper for making the image clickable - insert : '#main_image', // the containing selector for our main image - onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes - - // fade in the image & caption - image.css('display','none').fadeIn(200); - caption.css('display','none').fadeIn(200); - - // fetch the thumbnail container - var _li = thumb.parents('li'); - - // fade out inactive thumbnail - _li.siblings().children('img.selected').fadeTo(100,0.6); - - // fade in active thumbnail - thumb.fadeTo('fast',1).addClass('selected'); - - // add a title for the clickable image - image.attr('title','Next image >>'); - - $('#main_image').trigger('img_change'); - - }, - onThumb : function(thumb) { // thumbnail effects goes here - - // fetch the thumbnail container - var _li = thumb.parents('li'); - - // if thumbnail is active, fade all the way. - var _fadeTo = _li.is('.active') ? '1' : '0.6'; - - // fade in the thumbnail when finished loading - thumb.css({display:'none',opacity:_fadeTo}).fadeIn(500); - - // hover effects - thumb.hover( - function() { thumb.fadeTo('fast',1); }, - function() { _li.not('.active').children('img').fadeTo('fast',0.6); } // don't fade out if the parent is active - ) - } - - }); - // - jQuery('#mycarousel').jcarousel({ - scroll: 12, - initCallback: mycarousel_initCallback - }); - - $.hotkeys.add('left', function(){$.galleria.prev();}); - $.hotkeys.add('right', function(){$.galleria.next();}); - - $(function() { - var firstItem = $('ul.galleria li:first').addClass('active').find('img').addClass('selected'); - $.galleria.activate(firstItem.attr('src')); - $('ul.galleria li:first').remove() - - var active = false; - var gal = jQuery('#controls'); - $(function() { - if (!active) { - active = !active; - gal.everyTime('5s', 'slideshow', function() { - $.galleria.next(); - }); - } - }) - $('#toggle').bind("click", function() { - var gal = jQuery('#controls'); - if ($(this).attr("class") == "play") { - $(this).attr("class", "pause"); - if (!active) { - active = !active; - $.galleria.next(); - gal.everyTime('5s', 'slideshow', function() { - $.galleria.next(); - }); - } - } else { - $(this).attr("class", "play"); - if (active) { - active = !active; - gal.stopTime('slideshow'); - } - } - }); - - }); - - - }); - - function mycarousel_initCallback(carousel) { - jQuery('#main_image').bind('img_change',function() { - var num = parseInt((jQuery('.caption').text()).split(":",1)[0])-1; - var ntext = (jQuery('.caption').text()).split(":")[1]; - if (ntext == 'undefined') { - ntext='' - } - jQuery('.caption').text(ntext); - carousel.scroll(num); - return false; - }); - }; -//]]> - </script> </body> + </html> + + + + + diff --git a/templates/includes/map_entry_list.html b/templates/includes/map_entry_list.html index 0ec0729..b0d956a 100644 --- a/templates/includes/map_entry_list.html +++ b/templates/includes/map_entry_list.html @@ -59,7 +59,7 @@ markerOptions = { clickable:true, draggable:false, icon:tinyIcon}; marker_therell_be = new GMarker(point_therell_be, markerOptions); map.addOverlay(marker_therell_be); - marker_therell_be.info_window_content = '<div class="infowin"><h4>(There'll Be) Peace in the Valley<\/h4><span class="date blok">April 24, 2010 (Death Valley, California)<\/span><p><img src="http://images.luxagraf.net/post-thumbnail/2010/deathvalley.jpg" height="100" alt="(There'll Be) Peace in the Valley" style="float: left; border: #000 10px solid; margin-right: 8px; margin-bottom: 4px; height: 100px;" \/>Sometimes you ignore the places close to home because, well, there\x27s always next weekend. Which is why I never made it Death Valley in the twenty\x2Dfive years I lived in California. It took being all the way across the country to get me out to Death Valley. Which might explain why I actually got up before dawn just to watch the sunrise at Zabriskie Point. <a href="/2010/apr/24/death-valley/">Read it »<\/a><\/p><\/div>' + marker_therell_be.info_window_content = '<div class="infowin"><h4>(There'll Be) Peace in the Valley<\/h4><span class="date blok">April 24, 2010 (Death Valley, California)<\/span><p><img src="http://127.0.0.1:8000/images/post-thumbnail/2010/deathvalley.jpg" height="100" alt="(There'll Be) Peace in the Valley" style="float: left; border: #000 10px solid; margin-right: 8px; margin-bottom: 4px; height: 100px;" \/>Sometimes you ignore the places close to home because, well, there\x27s always next weekend. Which is why I never made it Death Valley in the twenty\x2Dfive years I lived in California. It took being all the way across the country to get me out to Death Valley. Which might explain why I actually got up before dawn just to watch the sunrise at Zabriskie Point. <a href="/2010/apr/24/death-valley/">Read it »<\/a><\/p><\/div>' marker_therell_be.bindInfoWindowHtml(marker_therell_be.info_window_content, {maxWidth:400}); GEvent.addListener(marker_therell_be, "click", function() { map.panTo(point_therell_be, 2); |