diff options
| -rw-r--r-- | app/notes/models.py | 9 | ||||
| -rw-r--r-- | design/config.rb | 2 | ||||
| -rw-r--r-- | design/sass/_480.sass | 55 | ||||
| -rw-r--r-- | design/sass/_768.sass | 32 | ||||
| -rw-r--r-- | design/templates/archives/notes.html | 16 | ||||
| -rw-r--r-- | design/templates/archives/notes_date.html | 40 | ||||
| -rw-r--r-- | design/templates/base.html | 2 | ||||
| -rw-r--r-- | design/templates/details/note.html | 15 |
8 files changed, 117 insertions, 54 deletions
diff --git a/app/notes/models.py b/app/notes/models.py index 0a9e5c6..00b9e33 100644 --- a/app/notes/models.py +++ b/app/notes/models.py @@ -1,20 +1,20 @@ ''' -TODO: - +TODO: 2) test urlize with markdown links 3) parse out markdown wrapped links for twitter 4) CSS 6) Write JavaScript to automatically place map on current location ''' +import json import datetime from django.contrib.gis.db import models from django.template.defaultfilters import slugify from django.utils.html import urlize -from django import forms from django.db.models.signals import post_save from django.dispatch import receiver from django.conf import settings +import requests from locations.models import Location from twython import Twython @@ -96,8 +96,6 @@ class Note(models.Model): super(Note, self).save() -import requests -import json @receiver(post_save, sender=Note) def post_save_events(sender, instance, **kwargs): #if kwargs["created"]: @@ -125,6 +123,7 @@ def post_save_events(sender, instance, **kwargs): post_save.disconnect(post_save_events, sender=Note) instance.save() post_save.connect(post_save_events, sender=Note) + sender.build() def write_note(sender, instance, **kwargs): diff --git a/design/config.rb b/design/config.rb index 159874e..e194907 100644 --- a/design/config.rb +++ b/design/config.rb @@ -3,7 +3,7 @@ project_type = :stand_alone http_path = "/" css_dir = "../site/media" sass_dir = "sass" -images_dir = "../site/media" +images_dir = "../site/media/img" javascripts_dir = "../site/media" #output_style = :compressed output_style = :expanded diff --git a/design/sass/_480.sass b/design/sass/_480.sass index bcc6890..5bef89e 100644 --- a/design/sass/_480.sass +++ b/design/sass/_480.sass @@ -6,13 +6,13 @@ header[role="banner"] margin: 0 auto text-align: center h1 - background: url('../img/tree.png') 0 0 no-repeat + background: url('/media/img/tree.png') 0 0 no-repeat text-indent: -9999px width: 151px height: 84px margin: 0 auto h2 - background: url('../img/text-centered.png') 0 0 no-repeat + background: url('/media/img/text-centered.png') 0 0 no-repeat text-indent: -9999px width: 184px height: 54px @@ -200,6 +200,43 @@ article[role="main"] letter-spacing: 1px p font-size: 1em + + +//**************** Notes Structure ************************ + +.notes .h-entry + border: none + padding: 0 + margin-top: 3em + &:after + margin-top: 3em + height: 1px + visibility: visible + background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0)) + &:last-child:after + background: none + +.notes .e-content + a + color: $orange +.notes .u-url + font-family: sans-serif +.notes .twitter + font-size: .75em + a:after + content: "\2219" + margin-left: .25em + padding-right: .35em + padding-left: .35em + a:last-child:after + content: "" +.month--header + font-size: .75em + margin: 0 + letter-spacing: 1px + text-transform: uppercase + border-bottom: 1px dotted rgba(0,0,0,0.2) + //******************* Footer ********************** @@ -251,9 +288,9 @@ footer:after, .archive article:after, #archive:after, article[role="main"] heade &:visited color: white h1 - background: url('../img/tree.png') left -84px no-repeat + background: url('/media/img/tree.png') left -84px no-repeat h2 - background: url('../img/text-centered.png') 0 -60px no-repeat + background: url('/media/img/text-centered.png') 0 -60px no-repeat header[role="banner"] border-bottom: #cccccc 1px solid article[role="main"] @@ -290,7 +327,7 @@ footer:after, .archive article:after, #archive:after, article[role="main"] heade z-index: 2000 margin: 0 padding: 0 - background: url("../img/mapbg-dark.png") no-repeat top left + background: url("/media/img/mapbg-dark.png") no-repeat top left .map-wrapper width: 400px height: 328px @@ -302,7 +339,7 @@ footer:after, .archive article:after, #archive:after, article[role="main"] heade right: -30px bottom: 40px z-index: 2000 - background: url("../img/parkbg.png") no-repeat top left + background: url("/media/img/parkbg.png") no-repeat top left font: normal .9em/25px unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif dl margin-top: 45px @@ -356,9 +393,9 @@ footer:after, .archive article:after, #archive:after, article[role="main"] heade color: #ccc header[role="banner"] h1 - background: url('../img/tree.png') left -168px no-repeat + background: url('/media/img/tree.png') left -168px no-repeat h2 - background: url('../img/text-centered.png') 0 -121px no-repeat + background: url('/media/img/text-centered.png') 0 -121px no-repeat nav[role="navigation"] border-top: 1px #ccc dotted border-bottom: 1px #ccc dotted @@ -402,4 +439,4 @@ footer:after, .archive article:after, #archive:after, article[role="main"] heade border-top: #ccc 1px dotted border-bottom: #ccc 1px dotted p - color: #ccc
\ No newline at end of file + color: #ccc diff --git a/design/sass/_768.sass b/design/sass/_768.sass index 2b89230..f9ff3f1 100644 --- a/design/sass/_768.sass +++ b/design/sass/_768.sass @@ -14,7 +14,7 @@ width: 160px margin-top: -12px h2 - background: url('../img/text.png') 0 0 no-repeat + background: url('/media/img/text.png') 0 0 no-repeat margin-top: 5px float: left nav[role="navigation"] @@ -202,6 +202,30 @@ font-size: 1.6em line-height: 1.2em font-weight: normal + + + .notes + main h1 + float: none + margin-bottom: 1em + width: 100% + main + max-width: 600px + margin: 0 auto + article footer + margin-top: 1em + article p + float: none + .twitter + float: right + padding-top: 1em + .permalink + main + margin-top: 5em + #license + text-align: center + float: none + //map #map-canvas height: 400px @@ -226,7 +250,7 @@ .dark header[role="banner"] h2 - background: url('../img/text.png') 0 -61px no-repeat + background: url('/media/img/text.png') 0 -61px no-repeat .park position: relative @@ -304,7 +328,7 @@ header[role="banner"] border-bottom: 1px #ccc solid h2 - background: url('../img/text.png') 0 -121px no-repeat + background: url('/media/img/text.png') 0 -121px no-repeat h6 display: block text-align: center @@ -396,7 +420,7 @@ z-index: 2000 margin: 0 padding: 0 - background: url("../img/mapbg.png") no-repeat top left + background: url("/media/img/mapbg.png") no-repeat top left .map-wrapper width: 400px diff --git a/design/templates/archives/notes.html b/design/templates/archives/notes.html index 21f27b5..1ac4d29 100644 --- a/design/templates/archives/notes.html +++ b/design/templates/archives/notes.html @@ -3,7 +3,7 @@ {% load html5_datetime %} {% block pagetitle %} Notes | luxagraf {% endblock %} {% block metadescription %} The LongHandPixels Blog Archive, covering HTML, CSS and other web nerdery.{% endblock %} -{%block bodyid%}class="archive" id="blog-archive"{%endblock%} +{%block bodyid%}class="archive notes" id="notes-archive"{%endblock%} {% block primary %} <ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> @@ -17,19 +17,19 @@ <div class="p-name e-content"> {{object.link_twitter_names|safe|amp|smartypants|urlizetrunc:45 }} </div> - <footer>{% if object.location %} + <footer> + <p class="meta"> + <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M Y"}}</time></a> + </p>{% if object.twitter_id %} <p class="h-adr meta location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <span class="p-region">{{object.state_name}}</span>, <span class="p-country-name">{{object.location.state.country.name}}</span> <data class="p-latitude" value="{{object.latitude}}"></data> <data class="p-longitude" value="{{object.longitude}}"></data> - </p>{% endif %} - <p class="meta"> - <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M Y"}}</time></a> - </p>{% if object.twitter_id %} - <p class="meta"> - <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">Twitter</a> + </p>{% endif %}{% if object.location %} + <p class="meta twitter"> + View on <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">Twitter</a> <a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a> <a href="https://twitter.com/intent/retweet?tweet_id={{object.twitter_id}}">Retweet</a> <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a> diff --git a/design/templates/archives/notes_date.html b/design/templates/archives/notes_date.html index 9ac1c0e..aabd996 100644 --- a/design/templates/archives/notes_date.html +++ b/design/templates/archives/notes_date.html @@ -3,10 +3,10 @@ {% load html5_datetime %} {% load month_number_to_name %} {% block pagetitle %} Notes Published in {% if month %}{{month|month_number_to_name}}{%endif%} {{year}} | luxagraf{% endblock %} -{% block bodyid %}class="archive" id="archive-{% if month %}{{month|month_number_to_name}}{%endif%}{{year}}"{%endblock%} +{% block bodyid %}class="archive notes" id="archive-{% if month %}{{month|month_number_to_name}}{%endif%}{{year}}"{%endblock%} {% block primary %}<ul class="bl crumbs" 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><a href="/notes/" itemprop="url"><span itemprop="title">Notes</span> →</li> + <li><a href="/notes/" itemprop="url"><span itemprop="title">Notes</span></a> →</li> <li>{% if month %}<a href="/notes/{{year}}/" title="Notes published in {{year}}" itemprop="url">{%endif%}<span itemprop="title">{{year}}</span>{% if month %}</a> →{%endif%}</li> {% if month %}<li itemprop="title">{{month|month_number_to_name}}</li>{%endif%} </ul> @@ -16,19 +16,19 @@ <div class="p-name e-content"> {{object.link_twitter_names|safe|urlizetrunc:45|amp|smartypants }} </div> - <footer>{% if object.location %} + <footer> + <p class="meta"> + <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M Y"}}</time></a> + </p>{% if object.location %} <p class="h-adr meta location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <span class="p-region">{{object.state_name}}</span>, <span class="p-country-name">{{object.location.state.country.name}}</span> <data class="p-latitude" value="{{object.latitude}}"></data> <data class="p-longitude" value="{{object.longitude}}"></data> - </p>{% endif %} - <p class="meta"> - <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M Y"}}</time></a> - </p>{% if object.twitter_id %} - <p class="meta"> - <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">Twitter</a> + </p>{% endif %}{% if object.twitter_id %} + <p class="meta twitter"> + <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a> <a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a> <a href="https://twitter.com/intent/retweet?tweet_id={{object.twitter_id}}">Retweet</a> <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a> @@ -37,27 +37,26 @@ </article> {% endfor %} {% else %} -<ul class="entry-list">{% regroup object_list by date_created.month as entries_by_month %}{% for month in entries_by_month %} - <span class="entry-list-month">{{ month.list.0.date_created|date:"F Y" }}</span> - {% for object in month.list %} - +{% regroup object_list by date_created.month as entries_by_month %}{% for month in entries_by_month %} + <section> + <h2 class="month--header">{{ month.list.0.date_created|date:"F Y" }}</h2>{% for object in month.list|dictsortreversed:"date_created" %} <article class="h-entry"> <div class="p-name e-content"> {{object.link_twitter_names|safe|amp|smartypants|urlizetrunc:45 }} </div> - <footer>{% if object.location %} + <footer> + <p class="meta"> + <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M Y"}}</time></a> + </p>{% if object.location %} <p class="h-adr meta location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <span class="p-region">{{object.state_name}}</span>, <span class="p-country-name">{{object.location.state.country.name}}</span> <data class="p-latitude" value="{{object.latitude}}"></data> <data class="p-longitude" value="{{object.longitude}}"></data> - </p>{% endif %} - <p class="meta"> - <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M Y"}}</time></a> - </p>{% if object.twitter_id %} - <p class="meta"> - <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">Twitter</a> + </p>{% endif %}{% if object.twitter_id %} + <p class="meta twitter"> + <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a> <a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a> <a href="https://twitter.com/intent/retweet?tweet_id={{object.twitter_id}}">Retweet</a> <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a> @@ -65,6 +64,7 @@ </footer> </article> {% endfor %} + </section> {% endfor %} </ul> {% endif %} diff --git a/design/templates/base.html b/design/templates/base.html index 4e4e82b..98be112 100644 --- a/design/templates/base.html +++ b/design/templates/base.html @@ -15,7 +15,7 @@ title="Luxagraf RSS feed" href="https://luxagraf.net/rss/"> {%block stylesheet%}<link rel="stylesheet" - href="/media/css/stylesv6.css" + href="/media/stylesv6.css" media="screen">{%endblock%} <!--[if IE]> <link rel="stylesheet" diff --git a/design/templates/details/note.html b/design/templates/details/note.html index fab554c..f0d5cb0 100644 --- a/design/templates/details/note.html +++ b/design/templates/details/note.html @@ -12,24 +12,26 @@ <meta name="geo.placename" content="{% if object.location.country.name == "United States" %}{{object.location.name|smartypants|safe}}, {{object.state.name}}{%else%}{{object.location.name|smartypants|safe}}, {{object.country.name}}{%endif%}"> <meta name="geo.region" content="{{object.country.iso2}}{%if object.state.code != '' %}-{{object.state.code}}{%endif%}"> {%endblock%} - +{% block bodyid %}class="archive notes permalink" id="archive-{% if month %}{{month|month_number_to_name}}{%endif%}{{year}}"{%endblock%} + {% block primary %} + <main role="main"> <article class="h-entry"> <div class="p-name e-content"> {{object.link_twitter_names|safe|amp|smartypants|urlizetrunc:45 }} </div> - <footer>{% if object.location %} + <footer> + <p class="meta"> + <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M Y"}}</time></a> + </p>{% if object.location %} <p class="h-adr meta location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <span class="p-region">{{object.state_name}}</span>, <span class="p-country-name">{{object.location.state.country.name}}</span> <data class="p-latitude" value="{{object.latitude}}"></data> <data class="p-longitude" value="{{object.longitude}}"></data> - </p>{% endif %} - <p class="meta"> - <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M Y"}}</time></a> - </p>{% if object.twitter_id %} + </p>{% endif %}{% if object.twitter_id %} <p class="meta"> <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">Twitter</a> <a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a> @@ -51,4 +53,5 @@ </ul> </nav>{%endwith%}{%endwith%} </article> +</main> {% endblock %} |