From 166b88a7cee8988ef1503b0920eb230e9baa08ba Mon Sep 17 00:00:00 2001
From: Kyle Mahan <kyle.mahan@gmail.com>
Date: Wed, 28 Jan 2015 10:37:25 -0800
Subject: [PATCH] Add ajaxy pager

---
 woodwind/static/style.css      | 18 ++++++++++---
 woodwind/static/style.css.map  |  2 +-
 woodwind/static/style.scss     | 17 +++++++++++-
 woodwind/templates/feed.jinja2 | 48 +++++++++++++++++++++++++---------
 4 files changed, 67 insertions(+), 18 deletions(-)

diff --git a/woodwind/static/style.css b/woodwind/static/style.css
index 5afef26..84ca7b0 100644
--- a/woodwind/static/style.css
+++ b/woodwind/static/style.css
@@ -369,6 +369,17 @@ header, main {
 header {
   margin-bottom: 1em; }
 
+.pager {
+  text-align: center;
+  margin: 1em 0; }
+  .pager a {
+    padding: 0.5em;
+    background-color: #353129;
+    color: #ECEBF0;
+    border: 1px solid #ECEBF0;
+    border-radius: 4px;
+    display: inline-block; }
+
 article {
   margin-bottom: 2em;
   box-shadow: 0 0 2px #687D77;
@@ -376,18 +387,19 @@ article {
   padding: 0.5em; }
   article img {
     max-width: 100%; }
-  article > header {
+  article header {
     color: #484A47;
     border-bottom: 1px solid #687D77;
     margin-bottom: 0.5em; }
-    article > header img {
+    article header img {
       max-width: 64px;
       max-height: 64px;
       margin-left: -85px;
       float: left;
       border-radius: 4px; }
   article footer {
-    margin-top: 0.5em; }
+    margin-top: 0.5em;
+    margin-bottom: 0; }
   article h1 {
     font-size: 1.2em;
     font-weight: bold; }
diff --git a/woodwind/static/style.css.map b/woodwind/static/style.css.map
index 449da29..5427025 100644
--- a/woodwind/static/style.css.map
+++ b/woodwind/static/style.css.map
@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
 "sources": ["normalize.scss","style.scss"],
 "names": [],
 "file": "style.css"
diff --git a/woodwind/static/style.scss b/woodwind/static/style.scss
index e21caff..c8d4522 100644
--- a/woodwind/static/style.scss
+++ b/woodwind/static/style.scss
@@ -30,6 +30,20 @@ header {
     margin-bottom: 1em;
 }
 
+.pager {
+    text-align: center;
+    margin: 1em 0;
+
+    a {
+        padding: 0.5em;
+        background-color: $armadillo;
+        color: $athens-gray;
+        border: 1px solid $athens-gray;
+        border-radius: 4px;
+        display: inline-block;
+    }
+}
+
 
 article {
     margin-bottom: 2em;
@@ -41,7 +55,7 @@ article {
         max-width: 100%;
     }
 
-    &> header {
+    header {
         img {
             max-width: 64px;
             max-height: 64px;
@@ -56,6 +70,7 @@ article {
 
     footer {
         margin-top: 0.5em;
+        margin-bottom: 0;
     }
 
     h1 {
diff --git a/woodwind/templates/feed.jinja2 b/woodwind/templates/feed.jinja2
index bd15c92..707c85d 100644
--- a/woodwind/templates/feed.jinja2
+++ b/woodwind/templates/feed.jinja2
@@ -1,4 +1,26 @@
 {% extends "base.jinja2" %}
+{% block head %}
+
+<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
+<script>
+
+function attachListener() {
+    $("#older-link").click(function(evt) {
+        evt.preventDefault();
+        $.get(this.href, function(result) {
+            $(".pager").replaceWith(
+              $("article,.pager", $(result)));
+            attachListener();
+        });
+    });
+}
+
+$(attachListener);
+
+</script>
+
+{% endblock head %}
+
 {% block header %}
   {% if current_user.is_authenticated() %}
     <form action="{{ url_for('.subscribe') }}" method="POST">
@@ -7,8 +29,8 @@
     </form>
   {% endif %}
 {% endblock header %}
-{% block body %}
 
+{% block body %}
 
   {% for entry in entries %}
     <article>
@@ -39,22 +61,22 @@
           <button type="submit">Like</button>
         </form>
         <!--
-           <form action="{{ current_user.micropub_endpoint }}" method="POST">
-             <input type="hidden" name="access_token" value="{{current_user.access_token}}"/>
-             <input type="hidden" name="h" value="entry"/>
-             <input type="hidden" name="in-reply-to" value="{{ entry.permalink }}"/>
-             <textarea name="content"></textarea>
-             <button type="submit">Reply</button>
-           </form>
-           -->
-
+            <form action="{{ current_user.micropub_endpoint }}" method="POST">
+              <input type="hidden" name="access_token" value="{{current_user.access_token}}"/>
+              <input type="hidden" name="h" value="entry"/>
+              <input type="hidden" name="in-reply-to" value="{{ entry.permalink }}"/>
+              <textarea name="content"></textarea>
+              <button type="submit">Reply</button>
+            </form>
+            -->
       </footer>
-
-      
     </article>
   {% endfor %}
 
   {% if entries %}
-    <a href="{{ url_for(request.endpoint, page=page+1)}}">Older</a>
+    <div class="pager">
+      <a id="older-link" href="{{ url_for(request.endpoint, page=page+1)}}">Older</a>
+    </div>
   {% endif %}
+
 {% endblock body %}