creating a post with styling

Gemfile

@@ -8,6 +8,7 @@ gem 'sinatra-mongoid', :require => 'sinatra/mongoid'
 gem "bson_ext"
 gem "omniauth"
 gem "omniauth-facebook"
+gem "time-ago-in-words", "~> 0.1.2"
 
 group :development do
   gem "awesome_print"

Gemfile.lock

@@ -87,6 +87,7 @@ GEM
       eventmachine (>= 0.12.6)
       rack (>= 1.0.0)
     tilt (1.3.3)
+    time-ago-in-words (0.1.2)
     tzinfo (0.3.32)
     xpath (0.1.4)
       nokogiri (~> 1.3)
@@ -108,4 +109,5 @@ DEPENDENCIES
   sinatra-mongoid
   slim
   thin
+  time-ago-in-words (~> 0.1.2)
   yard

app.rb

@@ -3,6 +3,7 @@
 require 'omniauth-facebook'
 require 'slim'
 require 'mongoid'
+require 'time-ago-in-words'
 
 require_relative 'routes/init'
 require_relative 'helpers/init'

assets/application.sass

@@ -1,8 +1,14 @@
+*
+  box-sizing: border-box
+
 body
-  padding-top: 40px
+  padding-top: 50px
 
 #header
   color: #444
+  position: fixed
+  box-shadow: 0px 1px 3px 3px #CCC
+
   h2
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
     float: left
@@ -20,10 +26,38 @@ body
       border: #AAA solid 1px
 
 #new-post
-  margin: 10px 20px
   text-align: center
   textarea
     width: 99%
   button
     width: 100%
 
+#posts
+  span
+    color: #666
+  img
+    height: 25px
+    display: inline
+    border: #CCC solid 1px
+    margin-right: 5px
+  p
+    border-bottom: 1px solid rgba(200, 200, 200, 0.4)
+    -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1)
+    -moz-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1)
+    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1)
+    -webkit-border-radius: 5px
+    -moz-border-radius: 5px
+    border-radius: 5px
+    font-size: 1.2em
+    margin: 10px 25px
+    padding: 20px
+    color: #666
+  .timestamp
+    float: right
+    font-size: 0.7em
+  hr
+    display: block
+    clear: both
+    height: 0
+    border-top: 1px solid #CCC
+    border-bottom: 1px solid #DDD

helpers/init.rb

@@ -1 +1 @@
-require_relative 'helper1'
+# require_relative 'time'

models/init.rb

@@ -1,2 +1,2 @@
 require_relative 'user'
-require_relative 'picture'
+require_relative 'post'

models/post.rb

@@ -1,5 +1,6 @@
 class Post
   include Mongoid::Document
+  include Mongoid::Timestamps
   field :body, type: String
-  embeds :user
+  embeds_one :user
 end

models/user.rb

@@ -2,6 +2,5 @@ class User
   include Mongoid::Document
   field :uid, type: String
   field :name, type: String
-  field :image_url, type: String
   embedded_in :Post
 end

public/css/application.css

@@ -1,8 +1,13 @@
+* {
+  box-sizing: border-box; }
+
 body {
-  padding-top: 40px; }
+  padding-top: 50px; }
 
 #header {
-  color: #444444; }
+  color: #444444;
+  position: fixed;
+  box-shadow: 0px 1px 3px 3px #cccccc; }
   #header h2 {
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
     float: left; }
@@ -13,15 +18,44 @@ body {
       text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
       font-size: 1.1em;
       top: 3px;
-      position: relative; }
+      position: relative;
+      margin-right: 5px; }
     #header .user-info img {
       height: 23px;
       border: #aaaaaa solid 1px; }
 
 #new-post {
-  margin: 10px 20px;
   text-align: center; }
   #new-post textarea {
     width: 99%; }
   #new-post button {
     width: 100%; }
+
+#posts span {
+  color: #666666; }
+#posts img {
+  height: 25px;
+  display: inline;
+  border: #cccccc solid 1px;
+  margin-right: 5px; }
+#posts p {
+  border-bottom: 1px solid rgba(200, 200, 200, 0.4);
+  -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  font-size: 1.2em;
+  margin: 10px 25px;
+  padding: 20px;
+  color: #666666; }
+#posts .timestamp {
+  float: right;
+  font-size: 0.7em; }
+#posts hr {
+  display: block;
+  clear: both;
+  height: 0;
+  border-top: 1px solid #cccccc;
+  border-bottom: 1px solid #dddddd; }

routes/posts.rb

@@ -1,12 +1,14 @@
 class MyApp < Sinatra::Base
 
   get '/posts' do
-    puts session[:uid]
+    @posts = Post.all(sort: [[ :created_at, :desc ]])
     slim :post_index
   end
 
   post '/posts' do
-    p params
+    user = session['user'].merge({:uid=>session[:uid]})
+    @post = Post.create(:body=>params["post"], :user=>user)
+    redirect '/posts'
   end
 
 end

views/post_index.slim

@@ -2,6 +2,17 @@
   form action='/posts' method='POST'
     textarea type='text' name='post'
     button.btn.btn-primary SHARE
-= session[:uid]
-p = session[:user].to_json
 
+#posts
+  - @posts.each do |post|
+    .post
+      span 
+        image src="#{post.user.image}"
+        = "#{post.user.name} said "
+        i = post.created_at.ago_in_words
+      p.post
+        = post.body
+      span.timestamp
+        = post.created_at
+      .clearfix
+      hr