Add design fixes

* list-style now shows a disc * Index page shows "other" posts in correct way * Add scroll to post list and autoloading of more posts * Change view of listed post * Add errors to forms
mrDoktar · May 13, 2010 · f83b7ca · f83b7ca
1 parent ddb0cad
commit f83b7ca
Show file tree

Hide file tree

Showing 17 changed files with 1,102 additions and 42 deletions.
diff --git a/app/controllers/posts_controller.rb b/app/controllers/posts_controller.rb
@@ -1,12 +1,15 @@
 class PostsController < ApplicationController
 
   def index
-    @posts = Post.latest
+    @posts = Post.scoped
+    @posts = @posts.latest.limit(20).includes(:tags)
+    @posts = @posts.offset(params[:offset].to_i) if params[:offset]
+    render :partial => "listed_post", :collection => @posts.all if params[:list]
   end
 
   def show
     @post = Post.find_by_id(params[:id])
-    @posts = Post.latest - [@post]
+    @posts = Post.latest.limit(20).includes(:tags) - [@post]
   end
 
 end
diff --git a/app/views/admin/posts/_form.html.haml b/app/views/admin/posts/_form.html.haml
@@ -1,18 +1,17 @@
+- stylesheet "posts"
+- javascript "elastic"
+
 = form_for [:admin, @post] do |f|
   = f.label :title
-  %br
   = f.text_field :title
-  %br
   = f.label :tag_list
-  %br
   = f.text_field :tag_list
-  %br
   = f.label :body
-  %br
   = f.text_area :body
-  %br
   = f.label :published_on
-  %br
   = f.date_select :published_on
   %br
-  = f.submit "Save", :class => "button"
+  = f.submit "Save", :class => "button medium"
+
+:javascript
+  $('textarea#post_body').elastic();
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
@@ -13,7 +13,7 @@
     #header_container
       #header
         = image_tag "fade.png", :id => "fade"
-        = image_tag "logo.png", :id => "logo"
+        = link_to image_tag("logo.png", :id => "logo"), root_path
     #container
       #menu= yield :menu
       #content= yield

diff --git a/app/views/posts/_listed_post.html.haml b/app/views/posts/_listed_post.html.haml
@@ -8,10 +8,8 @@
       %h1= link_to listed_post.title, listed_post, :title => listed_post.title
       %span.detailed_info
         by
-        %span.focus Martin
-        - unless listed_post.tags.empty?
-          and tagged with
-          = tag_sentence(listed_post)
+        %span.focus= listed_post.user.full_name
+        = raw "(" + link_to("Comments", post_path(listed_post, :anchor => "disqus_thread")) + ")"
       .fadeout
   .text
     %p= truncate(strip_tags(textilize(listed_post.body)), :length => 150)
diff --git a/app/views/posts/_post.html.haml b/app/views/posts/_post.html.haml
@@ -1,12 +1,13 @@
 = stylesheet "coderay"
 
 - content_for(:menu) do
-  %p
-    = link_to "Write a new post", [:new, :admin, :post], :class => "button in_menu"
-    %br
-    = link_to "Edit this one", [:edit, :admin, post], :class => "button in_menu"
-    %br
-    = link_to "Delete this one", [:admin, post], :method => :delete, :confirm => "Are you sure?", :class => "button red in_menu"
+  - if current_user && current_user.admin
+    %p
+      = link_to "Write a new post", [:new, :admin, :post], :class => "button in_menu"
+      %br
+      = link_to "Edit this one", [:edit, :admin, post], :class => "button in_menu"
+      %br
+      = link_to "Delete this one", [:admin, post], :method => :delete, :confirm => "Are you sure?", :class => "button red in_menu"
 
 #title
   = image_tag "http://www.gravatar.com/avatar/eb8c26db448303abe1d2f5df15c2a0a5?s=70", :class => "profile_image"

diff --git a/app/views/posts/_posts_list.html.haml b/app/views/posts/_posts_list.html.haml
@@ -1,4 +1,5 @@
 - stylesheet "posts"
+- javascript "mousewheel", "jScrollPane"
 - unless @posts.empty?
   - javascript "posts"
 
@@ -13,4 +14,7 @@
     %button#patrik.button By Patrik
 
   %ul#posts
-    = render :partial => "listed_post", :collection => @posts
+    = render :partial => "listed_post", :collection => @posts
+    %li#loading_post
+      %h2 Loading more posts...
+      = image_tag "/images/loader.gif"
diff --git a/app/views/posts/index.html.haml b/app/views/posts/index.html.haml
@@ -1 +1,7 @@
-= render "posts_list"
+- content_for(:menu) do
+  %p
+    = link_to "Write a new post", [:new, :admin, :post], :class => "button in_menu"
+
+
+- content_for(:bottom) do
+  = render "posts_list"
diff --git a/config/routes.rb b/config/routes.rb
@@ -54,7 +54,7 @@
 
   # You can have the root of your site routed with "root"
   # just remember to delete public/index.html.
-  # root :to => "welcome#index"
+  root :to => "posts#index"
 
   # See how all your routes lay out with "rake routes"
 

diff --git a/public/images/loader.gif b/public/images/loader.gif
diff --git a/public/images/scroll_background.png b/public/images/scroll_background.png
diff --git a/public/javascripts/elastic.js b/public/javascripts/elastic.js
@@ -0,0 +1,117 @@
+/**
+*	@name							Elastic
+*	@descripton						Elastic is Jquery plugin that grow and shrink your textareas automaticliy
+*	@version						1.6.4
+*	@requires						Jquery 1.2.6+
+*
+*	@author							Jan Jarfalk
+*	@author-email					jan.jarfalk@unwrongest.com
+*	@author-website					http://www.unwrongest.com
+*
+*	@licens							MIT License - http://www.opensource.org/licenses/mit-license.php
+*/
+
+(function(jQuery){ 
+	jQuery.fn.extend({  
+		elastic: function() {
+
+			//	We will create a div clone of the textarea
+			//	by copying these attributes from the textarea to the div.
+			var mimics = [
+				'paddingTop',
+				'paddingRight',
+				'paddingBottom',
+				'paddingLeft',
+				'fontSize',
+				'lineHeight',
+				'fontFamily',
+				'width',
+				'fontWeight'];
+
+			return this.each( function() {
+
+				// Elastic only works on textareas
+				if ( this.type != 'textarea' ) {
+					return false;
+				}
+
+				var $textarea	=	jQuery(this),
+					$twin		=	jQuery('<div />').css({'position': 'absolute','display':'none','word-wrap':'break-word'}),
+					lineHeight	=	parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'),
+					minheight	=	parseInt($textarea.css('height'),10) || lineHeight*3,
+					maxheight	=	parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE,
+					goalheight	=	0,
+					i 			=	0;
+
+				// Opera returns max-height of -1 if not set
+				if (maxheight < 0) { maxheight = Number.MAX_VALUE; }
+
+				// Append the twin to the DOM
+				// We are going to meassure the height of this, not the textarea.
+				$twin.appendTo($textarea.parent());
+
+				// Copy the essential styles (mimics) from the textarea to the twin
+				var i = mimics.length;
+				while(i--){
+					$twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString()));
+				}
+
+
+				// Sets a given height and overflow state on the textarea
+				function setHeightAndOverflow(height, overflow){
+					curratedHeight = Math.floor(parseInt(height,10));
+					if($textarea.height() != curratedHeight){
+						$textarea.css({'height': curratedHeight + 'px','overflow':overflow});
+
+					}
+				}
+
+
+				// This function will update the height of the textarea if necessary 
+				function update() {
+
+					// Get curated content from the textarea.
+					var textareaContent = $textarea.val().replace(/&/g,'&amp;').replace(/  /g, '&nbsp;').replace(/<|>/g, '&gt;').replace(/\n/g, '<br />');
+
+					var twinContent = $twin.html();
+
+					if(textareaContent+'&nbsp;' != twinContent){
+
+						// Add an extra white space so new rows are added when you are at the end of a row.
+						$twin.html(textareaContent+'&nbsp;');
+
+						// Change textarea height if twin plus the height of one line differs more than 3 pixel from textarea height
+						if(Math.abs($twin.height()+lineHeight - $textarea.height()) > 3){
+
+							var goalheight = $twin.height()+lineHeight;
+							if(goalheight >= maxheight) {
+								setHeightAndOverflow(maxheight,'auto');
+							} else if(goalheight <= minheight) {
+								setHeightAndOverflow(minheight,'hidden');
+							} else {
+								setHeightAndOverflow(goalheight,'hidden');
+							}
+
+						}
+
+					}
+
+				}
+
+				// Hide scrollbars
+				$textarea.css({'overflow':'hidden'});
+
+				// Update textarea size on keyup
+				$textarea.keyup(function(){ update(); });
+
+				// And this line is to catch the browser paste event
+				$textarea.live('input paste',function(e){ setTimeout( update, 250); });				
+
+				// Run update once when elastic is initialized
+				update();
+
+			});
+
+        } 
+    }); 
+})(jQuery);