Skip to content
Browse files

adding fancy-buttons

  • Loading branch information...
1 parent 3e252e6 commit 2ab699813891dee9a0d4aef333b8b91fd04907ba @igorgue committed Nov 21, 2009
Showing with 151 additions and 111 deletions.
  1. +94 −18 app.rb
  2. +2 −0 config.ru
  3. +0 −72 controllers/entries.rb
  4. +36 −0 media/css/buttons.css
  5. BIN media/images/button_bg.png
  6. +4 −3 views/edit.erb
  7. +5 −5 views/index.erb
  8. +3 −4 views/new.erb
  9. +4 −4 views/show.erb
  10. +1 −2 views/status_404.erb
  11. +2 −3 views/status_500.erb
View
112 app.rb
@@ -3,26 +3,102 @@
require 'sinatra'
require 'sequel'
-configure do
- DB = Sequel.sqlite('blog.db')
+module SinatraBlog
+ class App < Sinatra::Default
+ dir = File.dirname(File.expand_path(__FILE__))
- DB.create_table? :posts do
- primary_key :id
- varchar :title
- varchar :body
- end
+ set :public, "#{dir}/media"
+ set :static, true
- DB.create_table? :tags do
- primary_key :id
- varchar :title
- end
+ configure do
+ DB = Sequel.sqlite('blog.db')
- load "models/blog.rb"
-end
+ DB.create_table? :posts do
+ primary_key :id
+ varchar :title
+ varchar :body
+ end
-helpers do
- include Rack::Utils
- alias :unsafe :escape_html
-end
+ DB.create_table? :tags do
+ primary_key :id
+ varchar :title
+ end
+
+ load "models/blog.rb"
+ end
+
+ helpers do
+ include Rack::Utils
+ alias :unsafe :escape_html
+ end
+
+ # index
+ get '/' do
+ @posts = Post.all
+
+ erb :index
+ end
+
+ # new post form
+ get '/posts/new' do
+ erb :new
+ end
+
+ get '/posts/:id?' do
+ @post = Post.find :id => params[:id]
+
+ if @post
+ if params[:edit] == "true"
+ erb :edit
+ else
+ erb :show
+ end
+ else
+ redirect "/"
+ end
+ end
+
+ # create a new post
+ post '/posts' do
+ post = Post.find_or_create :title => params[:title], :body => params[:body]
-load 'controllers/entries.rb'
+ if post
+ redirect "/posts/#{post.id}"
+ else
+ redirect "/"
+ end
+ end
+
+ put '/posts/:id' do
+ post = Post.find :id => params[:id]
+
+ if post
+ post.title = params[:title]
+ post.body = params[:body]
+
+ post.save
+ end
+
+ redirect "/posts/#{params[:id]}"
+ end
+
+ delete '/posts/:id' do
+ post = Post.find :id => params[:id]
+
+ if post
+ post.destroy
+ end
+
+ redirect "/"
+ end
+
+ # error handling
+ error do
+ erb :status_500
+ end
+
+ not_found do
+ erb :status_404
+ end
+ end
+end
View
2 config.ru
@@ -0,0 +1,2 @@
+require "app"
+run SinatraBlog::App
View
72 controllers/entries.rb
@@ -1,72 +0,0 @@
-# controllers/entries.rb
-
-# index
-get '/' do
- @posts = Post.all
-
- erb :index
-end
-
-# new post form
-get '/posts/new' do
- erb :new
-end
-
-# edit post form
-get '/posts/edit/:id' do
- @post = Post.find :id => params[:id]
-
- if @post
- erb :edit
- else
- redirect "/"
- end
-end
-
-get '/posts/:id' do
- @post = Post.find :id => params[:id]
-
- if @post
- erb :show
- else
- redirect "/"
- end
-end
-
-put '/posts' do
- Post.find_or_create :title => params[:title], :body => params[:body]
-
- redirect "/"
-end
-
-post '/posts/:id' do
- post = Post.find :id => params[:id]
-
- if post
- post.title = params[:title]
- post.body = params[:body]
-
- post.save
- end
-
- redirect "/"
-end
-
-delete '/posts/:id' do
- post = Post.find :id => params[:id]
-
- if post
- post.destroy
- end
-
- redirect "/"
-end
-
-# error handling
-error do
- erb :status_500
-end
-
-not_found do
- erb :status_404
-end
View
36 media/css/buttons.css
@@ -0,0 +1,36 @@
+a.button, button, input.submit { font-family: "Lucida Grande", Lucida, Arial, sans_serif; background: url('/images/button_bg.png?1258822777') repeat-x bottom left; margin: 0; display: inline-block; cursor: pointer; text-decoration: none; border-style: solid; font-weight: bold; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 5px 18px; font-size: 18px; line-height: 21.6px; border-width: 1px; color: #fff; background-color: #444444; background: -webkit-gradient(linear, left top, left bottom, from(#989898), to(#4f4f4f), color-stop(0.1, #6a6a6a), color-stop(0.5, #3d3d3d), color-stop(0.5, #353535)); background: -moz-linear-gradient(left top, left bottom, from(#989898), to(#4f4f4f), color-stop(0.1, #6a6a6a), color-stop(0.5, #3d3d3d), color-stop(0.5, #353535)); text-shadow: #040404 1px 1px 1px; border-color: #303030; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 4px 14px; font-size: 14px; line-height: 16.8px; margin: 0 2px; vertical-align: middle; }
+a.button::-moz-focus-inner, button::-moz-focus-inner, input.submit::-moz-focus-inner { border: none; padding: 0; }
+a.button:focus, button:focus, input.submit:focus { outline: none; }
+a.button:active, button:active, input.submit:active { padding: 4px 17px; }
+a.button.disabled:active, button.disabled:active, input.submit.disabled:active { padding: 5px 18px; }
+a.button:active, button:active, input.submit:active { border-width: 2px; }
+a.button.disabled:active, button.disabled:active, input.submit.disabled:active { border-width: 1px; }
+a.button:hover, a.button:focus, button:hover, button:focus, input.submit:hover, input.submit:focus { color: #fff; background-color: #3c3c3c; background: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#474747), color-stop(0.1, #626262), color-stop(0.5, #353535), color-stop(0.5, #2d2d2d)); background: -moz-linear-gradient(left top, left bottom, from(#909090), to(#474747), color-stop(0.1, #626262), color-stop(0.5, #353535), color-stop(0.5, #2d2d2d)); text-shadow: black 1px 1px 1px; border-color: #282828; }
+a.button:active, button:active, input.submit:active { color: #fff; background-color: #353535; background: -webkit-gradient(linear, left top, left bottom, from(#898989), to(#404040), color-stop(0.1, #5b5b5b), color-stop(0.5, #2e2e2e), color-stop(0.5, #262626)); background: -moz-linear-gradient(left top, left bottom, from(#898989), to(#404040), color-stop(0.1, #5b5b5b), color-stop(0.5, #2e2e2e), color-stop(0.5, #262626)); text-shadow: black 1px 1px 1px; border-color: #212121; }
+a.button:active, button:active, input.submit:active { padding: 3px 13px; }
+a.button.disabled:active, button.disabled:active, input.submit.disabled:active { padding: 4px 14px; }
+a.button.light, button.light, input.submit.light { color: #fff; background-color: #bbbbbb; background: -webkit-gradient(linear, left top, left bottom, from(white), to(#c6c6c6), color-stop(0.1, #e1e1e1), color-stop(0.5, #b4b4b4), color-stop(0.5, #acacac)); background: -moz-linear-gradient(left top, left bottom, from(white), to(#c6c6c6), color-stop(0.1, #e1e1e1), color-stop(0.5, #b4b4b4), color-stop(0.5, #acacac)); text-shadow: #d4d4d4 1px 1px 1px; color: #333; border-color: #a7a7a7; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 4px 14px; font-size: 14px; line-height: 16.8px; }
+a.button.light:hover, a.button.light:focus, button.light:hover, button.light:focus, input.submit.light:hover, input.submit.light:focus { color: #fff; background-color: #b3b3b3; background: -webkit-gradient(linear, left top, left bottom, from(white), to(#bebebe), color-stop(0.1, #d9d9d9), color-stop(0.5, #acacac), color-stop(0.5, #a4a4a4)); background: -moz-linear-gradient(left top, left bottom, from(white), to(#bebebe), color-stop(0.1, #d9d9d9), color-stop(0.5, #acacac), color-stop(0.5, #a4a4a4)); text-shadow: #cccccc 1px 1px 1px; color: #333; border-color: #9f9f9f; }
+a.button.light:active, button.light:active, input.submit.light:active { color: #fff; background-color: #acacac; background: -webkit-gradient(linear, left top, left bottom, from(white), to(#b7b7b7), color-stop(0.1, #d2d2d2), color-stop(0.5, #a5a5a5), color-stop(0.5, #9d9d9d)); background: -moz-linear-gradient(left top, left bottom, from(white), to(#b7b7b7), color-stop(0.1, #d2d2d2), color-stop(0.5, #a5a5a5), color-stop(0.5, #9d9d9d)); text-shadow: #c6c6c6 1px 1px 1px; color: #333; border-color: #989898; }
+a.button.light:active, button.light:active, input.submit.light:active { padding: 3px 13px; }
+a.button.light.disabled:active, button.light.disabled:active, input.submit.light.disabled:active { padding: 4px 14px; }
+a.button.green, button.green, input.submit.green { color: #fff; background-color: #3ab700; background: -webkit-gradient(linear, left top, left bottom, from(#9ee080), to(#4fa328), color-stop(0.1, #66ce36), color-stop(0.5, #418621), color-stop(0.5, #3b7a1e)); background: -moz-linear-gradient(left top, left bottom, from(#9ee080), to(#4fa328), color-stop(0.1, #66ce36), color-stop(0.5, #418621), color-stop(0.5, #3b7a1e)); text-shadow: #123800 1px 1px 1px; border-color: #37721c; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 4px 14px; font-size: 14px; line-height: 16.8px; }
+a.button.green:hover, a.button.green:focus, button.green:hover, button.green:focus, input.submit.green:hover, input.submit.green:focus { color: #fff; background-color: #35a800; background: -webkit-gradient(linear, left top, left bottom, from(#95dd73), to(#499725), color-stop(0.1, #5fc430), color-stop(0.5, #3b7a1e), color-stop(0.5, #356e1b)); background: -moz-linear-gradient(left top, left bottom, from(#95dd73), to(#499725), color-stop(0.1, #5fc430), color-stop(0.5, #3b7a1e), color-stop(0.5, #356e1b)); text-shadow: #0d2900 1px 1px 1px; border-color: #316619; }
+a.button.green:active, button.green:active, input.submit.green:active { color: #fff; background-color: #309800; background: -webkit-gradient(linear, left top, left bottom, from(#8bd966), to(#438a22), color-stop(0.1, #59b72d), color-stop(0.5, #356d1b), color-stop(0.5, #2f6118)); background: -moz-linear-gradient(left top, left bottom, from(#8bd966), to(#438a22), color-stop(0.1, #59b72d), color-stop(0.5, #356d1b), color-stop(0.5, #2f6118)); text-shadow: #081800 1px 1px 1px; border-color: #2b5916; }
+a.button.green:active, button.green:active, input.submit.green:active { padding: 3px 13px; }
+a.button.green.disabled:active, button.green.disabled:active, input.submit.green.disabled:active { padding: 4px 14px; }
+a.button.blue, button.blue, input.submit.blue { color: #fff; background-color: #0059b7; background: -webkit-gradient(linear, left top, left bottom, from(#80afe0), to(#2864a3), color-stop(0.1, #3680ce), color-stop(0.5, #215386), color-stop(0.5, #1e4b7a)); background: -moz-linear-gradient(left top, left bottom, from(#80afe0), to(#2864a3), color-stop(0.1, #3680ce), color-stop(0.5, #215386), color-stop(0.5, #1e4b7a)); text-shadow: #001b38 1px 1px 1px; border-color: #1c4672; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 4px 14px; font-size: 14px; line-height: 16.8px; }
+a.button.blue:hover, a.button.blue:focus, button.blue:hover, button.blue:focus, input.submit.blue:hover, input.submit.blue:focus { color: #fff; background-color: #0051a8; background: -webkit-gradient(linear, left top, left bottom, from(#73a6dd), to(#255c97), color-stop(0.1, #3077c4), color-stop(0.5, #1e4a7a), color-stop(0.5, #1b436e)); background: -moz-linear-gradient(left top, left bottom, from(#73a6dd), to(#255c97), color-stop(0.1, #3077c4), color-stop(0.5, #1e4a7a), color-stop(0.5, #1b436e)); text-shadow: #001429 1px 1px 1px; border-color: #193e66; }
+a.button.blue:active, button.blue:active, input.submit.blue:active { color: #fff; background-color: #004a98; background: -webkit-gradient(linear, left top, left bottom, from(#669fd9), to(#22558a), color-stop(0.1, #2d71b7), color-stop(0.5, #1b446d), color-stop(0.5, #183c61)); background: -moz-linear-gradient(left top, left bottom, from(#669fd9), to(#22558a), color-stop(0.1, #2d71b7), color-stop(0.5, #1b446d), color-stop(0.5, #183c61)); text-shadow: #000c18 1px 1px 1px; border-color: #163759; }
+a.button.blue:active, button.blue:active, input.submit.blue:active { padding: 3px 13px; }
+a.button.blue.disabled:active, button.blue.disabled:active, input.submit.blue.disabled:active { padding: 4px 14px; }
+a.button.red, button.red, input.submit.red { color: #fff; background-color: #b70300; background: -webkit-gradient(linear, left top, left bottom, from(#e08280), to(#a32b28), color-stop(0.1, #ce3936), color-stop(0.5, #862321), color-stop(0.5, #7a201e)); background: -moz-linear-gradient(left top, left bottom, from(#e08280), to(#a32b28), color-stop(0.1, #ce3936), color-stop(0.5, #862321), color-stop(0.5, #7a201e)); text-shadow: #380100 1px 1px 1px; border-color: #721e1c; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 4px 14px; font-size: 14px; line-height: 16.8px; }
+a.button.red:hover, a.button.red:focus, button.red:hover, button.red:focus, input.submit.red:hover, input.submit.red:focus { color: #fff; background-color: #a80300; background: -webkit-gradient(linear, left top, left bottom, from(#dd7573), to(#972825), color-stop(0.1, #c43330), color-stop(0.5, #7a201e), color-stop(0.5, #6e1d1b)); background: -moz-linear-gradient(left top, left bottom, from(#dd7573), to(#972825), color-stop(0.1, #c43330), color-stop(0.5, #7a201e), color-stop(0.5, #6e1d1b)); text-shadow: #290100 1px 1px 1px; border-color: #661a19; }
+a.button.red:active, button.red:active, input.submit.red:active { color: #fff; background-color: #980300; background: -webkit-gradient(linear, left top, left bottom, from(#d96966), to(#8a2522), color-stop(0.1, #b7302d), color-stop(0.5, #6d1d1b), color-stop(0.5, #611a18)); background: -moz-linear-gradient(left top, left bottom, from(#d96966), to(#8a2522), color-stop(0.1, #b7302d), color-stop(0.5, #6d1d1b), color-stop(0.5, #611a18)); text-shadow: #180000 1px 1px 1px; border-color: #591716; }
+a.button.red:active, button.red:active, input.submit.red:active { padding: 3px 13px; }
+a.button.red.disabled:active, button.red.disabled:active, input.submit.red.disabled:active { padding: 4px 14px; }
+a.button.yellow, button.yellow, input.submit.yellow { color: #fff; background-color: #e6e600; background: -webkit-gradient(linear, left top, left bottom, from(#ebeba4), to(#cece2d), color-stop(0.1, #dbdb58), color-stop(0.5, #b1b127), color-stop(0.5, #a4a424)); background: -moz-linear-gradient(left top, left bottom, from(#ebeba4), to(#cece2d), color-stop(0.1, #dbdb58), color-stop(0.5, #b1b127), color-stop(0.5, #a4a424)); text-shadow: #676600 1px 1px 1px; border-color: #9b9b22; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 4px 14px; font-size: 14px; line-height: 16.8px; }
+a.button.yellow:hover, a.button.yellow:focus, button.yellow:hover, button.yellow:focus, input.submit.yellow:hover, input.submit.yellow:focus { color: #fff; background-color: #d6d600; background: -webkit-gradient(linear, left top, left bottom, from(#e8e896), to(#c1c12a), color-stop(0.1, #d8d84a), color-stop(0.5, #a4a424), color-stop(0.5, #979721)); background: -moz-linear-gradient(left top, left bottom, from(#e8e896), to(#c1c12a), color-stop(0.1, #d8d84a), color-stop(0.5, #a4a424), color-stop(0.5, #979721)); text-shadow: #575600 1px 1px 1px; border-color: #8e8e1f; }
+a.button.yellow:active, button.yellow:active, input.submit.yellow:active { color: #fff; background-color: #c8c800; background: -webkit-gradient(linear, left top, left bottom, from(#e6e68b), to(#b5b527), color-stop(0.1, #d5d540), color-stop(0.5, #989821), color-stop(0.5, #8b8b1e)); background: -moz-linear-gradient(left top, left bottom, from(#e6e68b), to(#b5b527), color-stop(0.1, #d5d540), color-stop(0.5, #989821), color-stop(0.5, #8b8b1e)); text-shadow: #484900 1px 1px 1px; border-color: #83831d; }
+a.button.yellow:active, button.yellow:active, input.submit.yellow:active { padding: 3px 13px; }
+a.button.yellow.disabled:active, button.yellow.disabled:active, input.submit.yellow.disabled:active { padding: 4px 14px; }
View
BIN media/images/button_bg.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
7 views/edit.erb
@@ -1,16 +1,17 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
-"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+ <link rel="stylesheet" href="/css/buttons.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<h1>Edit <%= @post.title %></h1>
<form action="/posts/<%= @post.id %>" method="post" accept-charset="utf-8">
+ <input type="hidden" name="_method" value="put">
<p>Title: <input name="title" type="text" value="<%= @post.title %>"></p>
<p>Body: <textarea name="body"><%= @post.body %></textarea></p>
- <p><input type="submit" value="Save"></p>
+ <button type="submit" class="green">save</button>
</form>
</body>
</html>
View
10 views/index.erb
@@ -1,8 +1,8 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
-"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+ <link rel="stylesheet" href="/css/buttons.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<h1>Superblog!</h1>
@@ -12,14 +12,14 @@
<h2><a href="/posts/<%= post.id %>"><%= post.title %></a></h2>
<p><%= unsafe post.body %></p>
- <form name="delete_<%= post.id %>" action="/posts/<%= post.id %>" method="post" accept-charset="utf-8">
+ <form name="delete" action="/posts/<%= post.id %>" method="post" accept-charset="utf-8">
<input type="hidden" name="_method" value="delete">
<input type="hidden" name="id" value="<%= post.id %>">
- <p><a href="javascript:document.delete_<%= post.id %>.submit()">✖ delete</a>?</p>
+ <button type="submit" value="delete">✖ delete</button>
</form>
<% end %>
<hr>
- <p>Add new entries <a href="/posts/new">here</a>.</p>
+ <p><a class="button green" href="/posts/new">+ new post</a></p>
</body>
</html>
View
7 views/new.erb
@@ -1,17 +1,16 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
-"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+ <link rel="stylesheet" href="/css/buttons.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<h1>Add new entry</h1>
<form action="/posts" method="post" accept-charset="utf-8">
- <input type="hidden" name="_method" value="put">
<p>Title: <input name="title" type="text" value="">
<p>Body: <textarea name="body" value=""></textarea>
- <p><input type="submit" value="Add"></p>
+ <p><button type="submit" class="green">save</button></p>
</form>
</body>
</html>
View
8 views/show.erb
@@ -1,8 +1,8 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
-"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+ <link rel="stylesheet" href="/css/buttons.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<h1><%= @post.title %></h1>
@@ -12,8 +12,8 @@
<form name="delete_<%= @post.id %>" action="/posts/<%= @post.id %>" method="post" accept-charset="utf-8">
<input type="hidden" name="_method" value="delete">
<input type="hidden" name="id" value="<%= @post.id %>">
- <p><a href="javascript:document.delete_<%= @post.id %>.submit()">✖ delete</a>?</p>
+ <button type="submit" value="delete">✖ delete</button>
</form>
- <p><a href="/posts/edit/<%= @post.id %>">edit</a>?</p>
+ <p><a class="button yellow" href="/posts/<%= @post.id %>?edit=true">edit</a></p>
</body>
</html>
View
3 views/status_404.erb
@@ -1,5 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
-"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
View
5 views/status_500.erb
@@ -1,11 +1,10 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
-"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
- <h1>Upps!</h1>
+ <h1>Uups!</h1>
<em><%= env['sinatra.error'].name %></em>
</body>
</html>

0 comments on commit 2ab6998

Please sign in to comment.
Something went wrong with that request. Please try again.