Paginate Blog and Dynamicly Loaded

traeblain · Jan 5, 2012 · 2227574 · 2227574
1 parent dbf6fe8
commit 2227574
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 10 deletions.
diff --git a/content/index.html b/content/index.html
@@ -3,6 +3,9 @@
 extends: listing.j2
 default_block: blog
 listable: false
-id: blog
+id: index
 comments: false
----
+paginator:
+  sorter: time
+  size: 15
+---
diff --git a/content/media/css/site.less b/content/media/css/site.less
@@ -484,17 +484,17 @@ pre {
   }
 }
 
-body.blog {
+body.index {
   article {
     .grid_10;
     position: relative;
-    max-height: 30px;
+    max-height: 35px;
     &:first-child {
       margin-top: 30px;
     }
     h1 {
       font-size: @textheight * 1.2;
-      line-height: @textheight * 1.2;
+      line-height: @textheight * 1.75;
       border-bottom: none;
       .grid_6;
       padding: 0;
@@ -505,6 +505,8 @@ body.blog {
       z-index: 10;
       text-overflow: ellipsis-word;
       white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     time {
       font-size: @textheight - 4;
@@ -522,10 +524,10 @@ body.blog {
       text-align: right;
       padding: 0;
       opacity: 0;
-      height: @textheight - 6;
+      height: @textheight - 1;
       position: absolute;
       z-index: 9;
-      top: @textheight - 1;
+      top: @textheight;
       li {
         display: inline-block;
         a {
@@ -582,6 +584,45 @@ body.about {
   }
 }
 
+/* Page Links */
+.nextlist, .prevlist {
+  display: block;
+  text-shadow: @tcolor 1px 1px 2px;
+  font-size: @textheight * 1.5;
+  font-family: @arimo;
+}
+.nextlist {
+  float: right;
+  margin: 20px @columnWidth 0 0;
+}
+.prevlist {
+  float: left;
+  margin: 20px 0 0 @columnWidth;
+}
+a.dynload {
+  float: none;
+  .grid_8;  
+  text-align: center;
+  padding: 6px 0;
+  font-size: @textheight;
+  margin: 10px auto 0;
+  border: 2px solid @pcolor;
+  border-radius: 12px;
+  &:hover {
+    border: 2px solid @bcolor;
+  }
+}
+.addon {
+  .grid_8;
+  margin: 10px auto 0;
+  text-align: center;
+  font-size: @textheight * 1.5;
+  color: @tcolor;
+  border-top: 1px dotted @tcolor;
+  padding: 10px 0;
+}
+
+
 /* Footer */
 footer {
   font-size: @textheight - 2;

diff --git a/content/media/js/tmb.js b/content/media/js/tmb.js
@@ -66,4 +66,31 @@ $(function() {
   sticky_relocate();
   $(window).scroll(title_appear);
   title_appear();
-});
+});
+
+var pageNum = 2;
+
+$(function() {
+  $('.nextlist').text('Show More Posts');
+  $('.nextlist').addClass('dynload');
+  $('section').delegate('.nextlist', 'click', function() {
+    var toLoad = $(this).attr('href')+ ' #main article';
+    pageNum++;
+    var divName = 'page' + pageNum;
+    $('.nextlist').remove();
+    $('.clearall').remove();
+    $('#main').append('<div id="' + divName + '" class="addon">...One Moment Please...</div>');
+     $('#' + divName).load(toLoad, function(response, status, xhr) {
+       if (status == "error") {
+         $('.addon').text('No More Posts...Don\'t Hate Me...');
+         $('#main').append('<div class="clearall"></div>');         
+       } else {
+         $('#main').append('<a class="nextlist dynload" href="/page' + pageNum + '/">Show More Posts</a>');
+         $('#main').append('<div class="clearall"></div>');
+         $('#' + divName + ' article').unwrap();
+         $('time').timeago();
+       }
+     });
+    return false;
+  });
+});
diff --git a/layout/listing.j2 b/layout/listing.j2
@@ -3,13 +3,15 @@
 {% block main %}
 {% block page_title %}<!-- <h1 class="title">{{ resource.meta.title }}</h1> -->{% endblock %}
 
-{% for res in resource.node.walk_resources_sorted_by_time() %}
+{% for res in resource.page.posts %}
 
     {{ render_excerpt(res) }}
 
     <!-- <div class="readmore"><a href="{{ content_url(latest.url) }}">Continue reading&hellip;</a></div> -->
     <!-- <div class="horz">&nbsp;</div> -->
 
 {% endfor %}
+{% if resource.page.previous %}<a class="prevlist" href="/{{ resource.page.previous.resource.url -}}">Newer Posts</a>{% endif %}
+{% if resource.page.next %}<a class="nextlist" href="/{{ resource.page.next.resource.url -}}">Older Posts</a>{% endif %}
 <div class="clearall"></div>
-{% endblock %}
+{% endblock %}