diff options
| -rw-r--r-- | app/utils/widgets.py | 11 | ||||
| -rw-r--r-- | config/base_urls.py | 1 | ||||
| -rw-r--r-- | design/sass/_house.scss | 29 | ||||
| -rw-r--r-- | design/sass/_writing_details.scss | 101 | ||||
| -rw-r--r-- | design/templates/details/for-sale-412-holman-ave.html | 85 | ||||
| -rw-r--r-- | design/templates/lib/img_cluster.html | 2 |
6 files changed, 139 insertions, 90 deletions
diff --git a/app/utils/widgets.py b/app/utils/widgets.py index 83ac256..170cc88 100644 --- a/app/utils/widgets.py +++ b/app/utils/widgets.py @@ -126,10 +126,15 @@ def parse_image(s): caption = False exif = False cluster_class = None + extra = None + if cl[0] == 'cluster': + cluster_class = cl[1] + try: + extra = cl[2] + except: + pass if len(cl) > 1: css_class = cl[0] - if css_class == 'cluster': - cluster_class = cl[1] if cl[1] == 'caption': caption = True if cl[1] == 'exif': @@ -143,7 +148,7 @@ def parse_image(s): print('caption'+str(caption)) else: css_class = cl[0] - c = Context({'image': i, 'caption': caption, 'exif': exif, 'cluster_class': cluster_class}) + c = Context({'image': i, 'caption': caption, 'exif': exif, 'cluster_class': cluster_class, 'extra':extra}) return render_to_string("lib/img_%s.html" % css_class, c) diff --git a/config/base_urls.py b/config/base_urls.py index 0f63a75..d911c5f 100644 --- a/config/base_urls.py +++ b/config/base_urls.py @@ -77,4 +77,5 @@ urlpatterns += [ static.serve, {'document_root': settings.STATIC_ROOT, } ), + url(r'^house-test.html$', static.serve, kwargs={'path': 'house-test.html', 'document_root': settings.PROJ_ROOT + 'site/'}) ] diff --git a/design/sass/_house.scss b/design/sass/_house.scss index b3afcc0..b830cb2 100644 --- a/design/sass/_house.scss +++ b/design/sass/_house.scss @@ -1,12 +1,31 @@ $blue: #39deea; .house .map img { background: none !important;} -.house .map { float: left;} +.house .map { + height:234px; + width:100%; + margin-bottom: 8px; + @include breakpoint(gamma){ + float: left; + max-width: 33%; + } + @include breakpoint(delta){ + max-width: 44%; + } + @include breakpoint(epsilon){ + max-width: 50.5%; + } +} +.house #gmap_canvas { + height:234px; + max-width:100%; +} .house main { @include constrain_wide;} .house .picwide { background: none; max-width: 100%; - margin: 0; + margin-left: 0; + margin-right: 0; @include breakpoint(epsilon){ width: 1280px; } @@ -59,7 +78,9 @@ $blue: #39deea; .fsubhed { @extend %clearfix; @include constrain(1140px); + clear: both; margin-top: 6em; + margin-bottom: 6em; h2 { margin-top: 0; float: left; @@ -85,5 +106,7 @@ $blue: #39deea; a, a:visited, a:hover { color: $blue; } - +} +.house .image-cluster { + margin-bottom: 3em; } diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss index 0fc6a62..37c7c8f 100644 --- a/design/sass/_writing_details.scss +++ b/design/sass/_writing_details.scss @@ -366,50 +366,81 @@ figure.picwide img.picwide { @include constrain_wide; @extend %clearfix; margin-bottom: 1em; + max-width: 100%; + p { + max-width: 100%; + margin-top: 0; + margin-bottom: 0; + } + img { width: 100%; padding: 0; + max-width: 100%; } - div img { - float: left; - width: 100%; - padding: 0; - margin: 0 6px 6px 0; + .picwide { + margin-bottom: 0; + } + .pic66 { + max-width: 63.9%; } - div a:last-of-type { - img { - margin-right: 0; + @include breakpoint(beta-2) { + .picwide { + padding: 0; + margin-bottom: 0; + max-width: 100%; + width: 100%; + background: none; + } + .row-2 { + a:last-of-type img{ + float: right; + } + } + .row-right .pic25 { + max-width: 49%; + } + .pic25 { + max-width: 24.5%; } } - .picwide { - margin: 0; - padding: 0; - max-width: 100%; - width: 100%; - background: none; + @include breakpoint(beta) { + div img { + width: 100%; + padding: 0; + margin: 0 6px 6px 0; + } + div a:last-of-type { + img { + margin-right: 0; + } + } + .pic5 { + max-width: 49.5%; + margin: 0 6px 6px 0; + float: left; + } + .pic25 { + max-width: 50%; + } + .row-3 .pic33 { + max-width: 32.3%; + } } - .row-right { - float: right; + @include breakpoint(gamma) { + .row-right { + float: right; + } + .row-3 .pic33 { + max-width: 32.6%; + } } -} -.pic66 { - max-width: 63.9%; -} -.pic33 { - max-width: 35.5%; -} -.row-3 .pic33 { - max-width: 33%; -} -.pic5 { - max-width: 50.6%; - margin: 0 6px 6px 0; -} -.row-right .pic25 { - max-width: 49.5%; -} -.pic25 { - max-width: 24.5%; + @include breakpoint(epsilon) { + .row-3 .pic33 { + max-width: 32.8%; + } + } + } .embed-wrapper { diff --git a/design/templates/details/for-sale-412-holman-ave.html b/design/templates/details/for-sale-412-holman-ave.html index 5d1a2a7..4a8205c 100644 --- a/design/templates/details/for-sale-412-holman-ave.html +++ b/design/templates/details/for-sale-412-holman-ave.html @@ -1,58 +1,47 @@ -{% extends 'base.html' %} {% load typogrify_tags %} -{% block pagetitle %}Luxagraf | {{object.title}}{% endblock %} -{% block metadescription %}{{object.meta_description}}{% endblock %} -{%block htmlclass%}class="single house"{%endblock%} -{%block bodyid%}id="{{object.title|lower}}"{%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> - <li>{{object.title}}</li> - </ul> +<!DOCTYPE html> +<html class="single house" dir="ltr" lang="en-US"> + +<head> + <title>Luxagraf | For Sale: 412 Holman Ave, Athens, GA</title> + <meta charset="utf-8"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content=""> + <meta name="author" content="Scott Gilbertson"> + <!--[if IE]> + <script src="/js/html5css3ie.min.js"></script> + <![endif]--> + <link rel="stylesheet" href="/media/screenv8.css" media="screen"> + <!--[if IE]> + <link rel="stylesheet" + href="/media/css/ie.css" + media="screen"> + <![endif]--> + <link rel="manifest" href="manifest.json"> + <meta property="fb:pages" content="900822029969349"/> + +</head> +body id="for sale: 412 holman ave, athens, ga"> + <div class="wrapper"> <main> <article class="h-entry hentry post--article" itemscope="" itemtype="http://schema.org/Article"> <h1 class="">For Sale: 412 Holman Ave, Athens, GA</h1> {{object.body_html|safe|smartypants|widont}} </article> </main> -{% endblock %} -{% block js %} <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwtF_4OvkTKl058VEHrwezMJS2gYXNys4&callback=initMap" type="text/javascript"></script> -<script type="text/javascript"> -function initMap(){ - var myOptions = { - zoom:17, - center:new google.maps.LatLng(33.957897,-83.40810199999999), - mapTypeId: google.maps.MapTypeId.ROADMAP - }; - map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions); - marker = new google.maps.Marker({ - map: map,position: new google.maps.LatLng(33.957897, -83.40810199999999) - }); - infowindow = new google.maps.InfoWindow({content:"<b>For Sale</b><br/>412 Holman Ave<br/>30606 Athens" }); - google.maps.event.addListener(marker, "click", function(){ - infowindow.open(map,marker); - }); - infowindow.open(map,marker); -} -google.maps.event.addDomListener(window, 'load', init_map); -</script> +<script type="text/javascript">function initMap(){var myOptions={zoom:17,center:new google.maps.LatLng(33.957897,-83.40810199999999),mapTypeId:google.maps.MapTypeId.ROADMAP};map=new google.maps.Map(document.getElementById("gmap_canvas"),myOptions);marker=new google.maps.Marker({map:map,position:new google.maps.LatLng(33.957897,-83.40810199999999)});infowindow=new google.maps.InfoWindow({content:"<b>For Sale</b><br/>412 Holman Ave<br/>30606 Athens"});google.maps.event.addListener(marker,"click",function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window,'load',init_map);</script> <script src="/media/js/lightbox.js" type="text/javascript"></script> -<script> -var opts= { - //nextOnClick: false, - captions: true, - onload: function(){ - var im = document.getElementById("jslghtbx-contentwrapper"); - var link = im.appendChild(document.createElement('a')) - link.href = im.firstChild.src; - link.innerHTML= "open "; - link.target = "_blank"; - link.setAttribute('class', 'p-link'); - im.appendChild(link); - } -}; -var lightbox = new Lightbox(); -lightbox.load(opts); -</script> +<script>var opts={captions:true,onload:function(){var im=document.getElementById("jslghtbx-contentwrapper");var link=im.appendChild(document.createElement('a')) +link.href=im.firstChild.src;link.innerHTML="open ";link.target="_blank";link.setAttribute('class','p-link');im.appendChild(link);}};var lightbox=new Lightbox();lightbox.load(opts);</script> -{% endblock %} + +<!-- Piwik --> +<script type="text/javascript">var _paq=_paq||[];_paq.push(["disableCookies"]);_paq.push(['trackPageView']);_paq.push(['enableLinkTracking']);(function(){var u="//stats.luxagraf.net/";_paq.push(['setTrackerUrl',u+'piwik.php']);_paq.push(['setSiteId',1]);var d=document,g=d.createElement('script'),s=d.getElementsByTagName('script')[0];g.type='text/javascript';g.async=true;g.defer=true;g.src=u+'piwik.js';s.parentNode.insertBefore(g,s);})();</script> +<noscript><p><img src="//stats.luxagraf.net/piwik.php?idsite=1" style="border:0;" alt="" data-pagespeed-url-hash="2487254587"/></p></noscript> +<!-- End Piwik Code --> + + +</body> +</html> diff --git a/design/templates/lib/img_cluster.html b/design/templates/lib/img_cluster.html index b1ed854..9fdd64f 100644 --- a/design/templates/lib/img_cluster.html +++ b/design/templates/lib/img_cluster.html @@ -1 +1 @@ -{% load get_image_by_size %}<a href="{%get_image_by_size image "original"%} " title="view larger image"><img class="{{cluster_class}}" src="{% for size in image.sizes.all%}{%if size.name == cluster_class %}{% get_image_by_size image size.name %}{%endif%}{%endfor%}" alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}></a> +{% load get_image_by_size %}<a href="{%get_image_by_size image "original"%} " title="view larger image"><img class="{{cluster_class}} {%if extra%}{{extra}}{%endif%}" src="{% for size in image.sizes.all%}{%if size.name == cluster_class %}{% get_image_by_size image size.name %}{%endif%}{%endfor%}" alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}></a> |