Add initial styles to application and posts

* Add default CRUD support to post resource * Create initial application layout styles * Add styles to posts
mrDoktar · May 11, 2010 · d27594e · d27594e
1 parent a10ebfc
commit d27594e
Show file tree

Hide file tree

Showing 18 changed files with 499 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,6 @@
 db/*.sqlite3
 log/*.log
 tmp/**/*
+public/stylesheets/posts.css
+public/stylesheets/buttons.css
+public/stylesheets/application.css
diff --git a/app/controllers/posts_controller.rb b/app/controllers/posts_controller.rb
@@ -1,2 +1,44 @@
 class PostsController < ApplicationController
+
+  def index
+    @posts = Post.latest
+  end
+
+  def new
+    @post = Post.new
+  end
+
+  def create
+    @post = Post.new(params[:post])
+    if @post.save
+      redirect_to @post
+    else
+      render "new"
+    end
+  end
+
+  def show
+    @post = Post.find_by_id(params[:id])
+  end
+
+  def edit
+    @post = Post.find_by_id(params[:id])
+  end
+
+  def update
+    @post = Post.find_by_id(params[:id])
+
+    if @post.update_attributes(params[:post])
+      redirect_to @post
+    else
+      render "edit"
+    end
+  end
+
+  def destroy
+    @post = Post.find_by_id(params[:id])
+    @post.destroy unless @post.nil?
+    redirect_to posts_path
+  end
+
 end
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
@@ -3,7 +3,7 @@
 %html
   %head
     %title Blog in 15
-    = stylesheet_link_tag :all
+    = stylesheet_link_tag "reset", "application"
     = yield :stylesheet
     = javascript_include_tag "jquery", "rails", "application"
     = yield :javascript

diff --git a/app/views/posts/_form.html.haml b/app/views/posts/_form.html.haml
@@ -0,0 +1,14 @@
+= form_for @post do |f|
+  = f.label :title
+  %br
+  = f.text_field :title
+  %br
+  = f.label :body
+  %br
+  = f.text_area :body
+  %br
+  = f.label :published_on
+  %br
+  = f.date_select :published_on
+  %br
+  = f.submit "Save"
diff --git a/app/views/posts/edit.html.haml b/app/views/posts/edit.html.haml
@@ -0,0 +1,2 @@
+%h1 Edit post
+= render "form"
diff --git a/app/views/posts/index.html.haml b/app/views/posts/index.html.haml
@@ -0,0 +1,22 @@
+= stylesheet "posts", "buttons"
+= javascript "posts"
+#post_type_selector
+  %button#all.button.active Everyting
+  %button#blogs.button Only blogs
+
+%ul#posts
+  - @posts.each do |post|
+    %li.post.blog{:"data-id" => post.id}
+      .info
+        .date
+          .day= post.published_on.strftime("%d")
+          .month=  post.published_on.strftime("%b")
+          .year=  post.published_on.strftime("%y")
+        .title
+          %h1= link_to post.title, post
+          %span.link= post_url post
+          .fadeout
+      .text
+        %p= truncate(strip_tags(post.body), :length => 120)
+%p
+  = link_to "Write a new post", new_post_path, :class => "button blue"
diff --git a/app/views/posts/new.html.haml b/app/views/posts/new.html.haml
@@ -0,0 +1,2 @@
+%h1 Create a new post
+= render "form"
diff --git a/app/views/posts/show.html.haml b/app/views/posts/show.html.haml
@@ -0,0 +1,8 @@
+%h1= @post.title
+%span= @post.published_on
+%p 
+  ~ @post.body
+
+%p
+  = link_to "Edit", [:edit, @post]
+  = link_to "See all posts", posts_path
diff --git a/public/fonts/League-Gothic.otf b/public/fonts/League-Gothic.otf
diff --git a/public/fonts/OFLGoudyStM-Italic.otf b/public/fonts/OFLGoudyStM-Italic.otf
diff --git a/public/fonts/OFLGoudyStM.otf b/public/fonts/OFLGoudyStM.otf
diff --git a/public/fonts/Prociono-Regular.otf b/public/fonts/Prociono-Regular.otf
diff --git a/public/images/fadeout.png b/public/images/fadeout.png
diff --git a/public/javascripts/posts.js b/public/javascripts/posts.js
@@ -0,0 +1,17 @@
+$(function() {
+  var $buttons = $("#all, #blogs");
+  $buttons.click(function(){
+    $buttons.removeClass("active");
+    $(this).addClass("active");
+    switch(this.id) {
+      case "blogs":
+        $("li.blog").slideDown("slow");
+        $("li:not(.blog)").slideUp("slow");
+      break;
+      default:
+        $("li.item").slideDown("slow");
+      break;
+    }
+  });
+
+});
diff --git a/public/stylesheets/reset.css b/public/stylesheets/reset.css
@@ -0,0 +1,8 @@
+/*
+Copyright (c) 2010, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.com/yui/license.html
+version: 3.1.1
+build: 47
+*/
+html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
@@ -0,0 +1,67 @@
+@font-face
+  font-family: "Sorts MG Italic"
+  src: url('/fonts/OFLGoudyStM-Italic.otf') format('opentype')
+
+@font-face
+  font-family: "Sorts MG"
+  src: url('/fonts/OFLGoudyStM.otf') format('opentype')
+
+@font-face 
+  font-family: "Prociono"
+  src: url('/fonts/Prociono-Regular.otf') format('opentype')
+
+@font-face
+  font-family: "League Gothic"
+  src: url('/fonts/League-Gothic.otf') format('opentype')
+
+body
+  font-size: 0.75%
+
+html > body
+  font: 14px / 1.5 Helvetica, Arial, sans-serif
+  line-height: 1.5em
+  padding: 1.5em
+//  background: url('/images/baseline.jpg')
+
+h1
+  font-family: "League Gothic"
+  letter-spacing: 0.05em
+  font-size: 2.5em
+  line-height: 0.6em
+  margin-bottom: 0.6em
+  font-weight: normal
+  color: #303030
+
+h2
+  font-family: "League Gothic"
+  letter-spacing: 0.05em
+  font-size: 1.71428571428571428571em
+  line-height: .875em
+  margin-bottom: .875em
+  font-weight: normal
+  color: #303030
+
+h5
+  position: absolute
+  top: -1.3em
+  z-index: 9999
+  padding: 0pt 0.2em
+  margin-left: 1em
+  color: #999
+  font-size: 0.9em
+  font-weight: normal
+
+p
+  font-size: 1em
+  line-height: 1.5em
+  margin-bottom: 1.5em
+
+.hidden
+  display: none
+
+.lefty
+  float: left
+  margin-right: .35714285714285714285em
+  -moz-border-radius: 2px
+  border: 1px solid black
+  -moz-box-shadow: 0px 2px 3px #5D5D5D