Permalink
Browse files

twitter bootstrap! [#6]Beautify app's look'n'feel

  • Loading branch information...
1 parent e453920 commit 9df348aa520049f6f7b2428a507286c9e4d10c8e @rkononov rkononov committed Sep 20, 2012
View
@@ -9,10 +9,12 @@ gem 'sqlite3'
gem 'iron_worker_ng'
+
# Gems used only for assets and not required
# in production environments by default.
group :assets do
- gem 'sass-rails', '~> 3.2.3'
+ gem 'twitter-bootstrap-rails'
+ gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
View
@@ -37,6 +37,7 @@ GEM
coffee-script-source
execjs
coffee-script-source (1.3.3)
+ commonjs (0.2.6)
erubis (2.7.0)
execjs (1.4.0)
multi_json (~> 1.0)
@@ -53,6 +54,11 @@ GEM
railties (>= 3.1.0, < 5.0)
thor (~> 0.14)
json (1.7.5)
+ less (2.2.2)
+ commonjs (~> 0.2.6)
+ less-rails (2.2.3)
+ actionpack (>= 3.1)
+ less (~> 2.2.0)
libv8 (3.3.10.4)
mail (2.4.4)
i18n (>= 0.4.0)
@@ -109,6 +115,11 @@ GEM
treetop (1.4.10)
polyglot
polyglot (>= 0.3.1)
+ twitter-bootstrap-rails (2.1.3)
+ actionpack (>= 3.1)
+ less-rails (~> 2.2.3)
+ railties (>= 3.1)
+ therubyracer (~> 0.10.2)
tzinfo (0.3.33)
uglifier (1.3.0)
execjs (>= 0.3.0)
@@ -126,4 +137,5 @@ DEPENDENCIES
sass-rails (~> 3.2.3)
sqlite3
therubyracer
+ twitter-bootstrap-rails
uglifier (>= 1.0.3)
@@ -12,4 +12,5 @@
//
//= require jquery
//= require jquery_ujs
+//= require twitter/bootstrap
//= require_tree .
@@ -0,0 +1,4 @@
+jQuery ->
+ $("a[rel=popover]").popover()
+ $(".tooltip").tooltip()
+ $("a[rel=tooltip]").tooltip()
@@ -0,0 +1,32 @@
+@import "twitter/bootstrap/bootstrap";
+body {
+ padding-top: 60px;
+}
+
+@import "twitter/bootstrap/responsive";
+
+// Set the correct sprite paths
+@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
+@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');
+
+// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
+// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
+// have the proper paths. So for now we use the absolute path.
+@fontAwesomeEotPath: '/assets/fontawesome-webfont.eot';
+@fontAwesomeWoffPath: '/assets/fontawesome-webfont.woff';
+@fontAwesomeTtfPath: '/assets/fontawesome-webfont.ttf';
+@fontAwesomeSvgPath: '/assets/fontawesome-webfont.svg';
+
+// Font Awesome
+@import "fontawesome";
+
+// Your custom LESS stylesheets goes here
+//
+// Since bootstrap was imported above you have access to its mixins which
+// you may use and inherit here
+//
+// If you'd like to override bootstrap's own variables, you can do so here as well
+// See http://twitter.github.com/bootstrap/less.html for their names and documentation
+//
+// Example:
+// @linkColor: #ff0000;
@@ -1,11 +1,11 @@
<h1>Manage your codes</h1>
<h3>Worker files to upload</h3>
-<table border="1">
+<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
- <td>File Name</td>
- <td>Action</td>
+ <th>File Name</th>
+ <th>Action</th>
</tr>
</thead>
@@ -18,16 +18,16 @@
<h3>List of existed codes:</h3>
<% if !@codes.empty? %>
- <table border="1">
+ <table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
- <td>Code Name</td>
- <td>Created at</td>
- <td>Latest change</td>
- <td>Revision</td>
- <td>Actions</td>
- <td>Queue!</td>
- <td>Schedule!</td>
+ <th>Code Name</th>
+ <th>Created at</th>
+ <th>Latest change</th>
+ <th>Revision</th>
+ <th>Actions</th>
+ <th>Queue!</th>
+ <th>Schedule!</th>
</tr>
</thead>
@@ -1,11 +1,11 @@
<h1>Revisions</h1>
-<table border="1">
+<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
- <td>Code Name</td>
- <td>Created at</td>
- <td>Revision</td>
- <td>Runtime</td>
+ <th>Code Name</th>
+ <th>Created at</th>
+ <th>Revision</th>
+ <th>Runtime</th>
</tr>
</thead>
@@ -2,44 +2,44 @@
<h3>Mailer Worker</h3>
This is simple worker that just send email via worker (don't forget to set proper mailer configuration in config_development.yml)
-<%= form_tag(send_email_custom_examples_path) do %>
- <%= label_tag(:email) %>
- <%= text_field_tag(:email, 'email@email.com') %>
- <%= label_tag(:message) %>
- <%= text_field_tag(:message, 'sample message') %>
- <%= submit_tag("Send Email!") %>
-<% end %>
+<div>
+ <%= form_tag(send_email_custom_examples_path, :class => 'form-inline') do %>
+
+ <%= text_field_tag(:email, 'email@email.com') %>
+ <%= text_field_tag(:message, 'sample message') %>
+ <%= submit_tag("Send Email!", :class => 'btn btn-primary') %>
+ <% end %>
+</div>
<h3>Attributes Worker</h3>
This worker show how to pass and parse different data types to worker
-<%= form_tag(attribute_worker_custom_examples_path) do %>
- <table>
- <tr>
- <td><%= label_tag(:fixnum_arg) %></td>
- <td><%= text_field_tag(:fixnum_arg, '10') %></td>
- </tr>
- <tr>
- <td><%= label_tag(:floatnum_arg) %></td>
- <td><%= text_field_tag(:floatnum_arg, '10.3333') %></td>
- </tr>
- <tr>
- <td><%= label_tag(:array_arg) %></td>
- <td><%= text_field_tag(:array_arg, '10,2,3,4') %></td>
- </tr>
- <tr>
- <td><%= label_tag(:string_arg) %></td>
- <td><%= text_field_tag(:string_arg, 'Hey this is string') %></td>
- </tr>
- <tr>
- <td><%= label_tag(:hash_arg) %></td>
- <td><%= text_field_tag(:hash_arg, '{ "user" : { "name" : { "first" : "Bob", "last" : "Smith" } } }') %></td>
- </tr>
- <tr>
- <td><%= label_tag(:time_arg) %></td>
- <td><%= text_field_tag(:time_arg,Time.now) %></td>
- </tr>
- <tr>
- <td colspan="2"><%= submit_tag("Send to worker!") %></td>
- </tr>
- </table>
+<%= form_tag(attribute_worker_custom_examples_path, :class => "form-horizontal") do %>
+ <div class="control-group">
+ <%= label_tag(:fixnum_arg, nil, :class => 'control-label') %>
+ <%= text_field_tag(:fixnum_arg, '10', :class => 'controls') %>
+ </div>
+ <div class="control-group">
+ <%= label_tag(:floatnum_arg, nil, :class => 'control-label') %>
+ <%= text_field_tag(:floatnum_arg, '10.3333', :class => 'controls') %>
+ </div>
+ <div class="control-group">
+ <%= label_tag(:array_arg, nil, :class => 'control-label') %>
+ <%= text_field_tag(:array_arg, '10,2,3,4', :class => 'controls') %>
+ </div>
+ <div class="control-group">
+ <%= label_tag(:string_arg, nil, :class => 'control-label') %>
+ <%= text_field_tag(:string_arg, 'Hey this is string', :class => 'controls') %>
+ </div>
+ <div class="control-group">
+ <%= label_tag(:hash_arg, nil, :class => 'control-label') %>
+ <%= text_field_tag(:hash_arg, '{ "user" : { "name" : { "first" : "Bob", "last" : "Smith" } } }', :class => 'controls') %>
+ </div>
+ <div class="control-group">
+ <%= label_tag(:time_arg, nil, :class => 'control-label') %>
+ <%= text_field_tag(:time_arg, Time.now, :class => 'controls') %>
+ </div>
+ <div class="control-group">
+ <%= label_tag(:queue_the_task, nil, :class => 'control-label') %>
+ <%= submit_tag("Send to worker!", :class => 'controls btn btn-primary') %>
+ </div>
<% end %>
@@ -1,14 +1,81 @@
<!DOCTYPE html>
-<html>
-<head>
- <title>IronWorker Rails 101 example</title>
- <%= stylesheet_link_tag "application", :media => "all" %>
- <%= javascript_include_tag "application" %>
- <%= csrf_meta_tags %>
-</head>
-<body>
-
-<%= yield %>
-
-</body>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title><%= content_for?(:title) ? yield(:title) : "App" %></title>
+ <%= csrf_meta_tags %>
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
+ <![endif]-->
+
+ <%= stylesheet_link_tag "application", :media => "all" %>
+
+ <!-- For third-generation iPad with high-resolution Retina display: -->
+ <!-- Size should be 144 x 144 pixels -->
+ <%= favicon_link_tag 'images/apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144' %>
+
+ <!-- For iPhone with high-resolution Retina display: -->
+ <!-- Size should be 114 x 114 pixels -->
+ <%= favicon_link_tag 'images/apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %>
+
+ <!-- For first- and second-generation iPad: -->
+ <!-- Size should be 72 x 72 pixels -->
+ <%= favicon_link_tag 'images/apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %>
+
+ <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+ <!-- Size should be 57 x 57 pixels -->
+ <%= favicon_link_tag 'images/apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %>
+
+ <!-- For all other devices -->
+ <!-- Size should be 32 x 32 pixels -->
+ <%= favicon_link_tag 'images/favicon.ico', :rel => 'shortcut icon' %>
+ </head>
+ <body>
+
+ <div class="navbar navbar-fixed-top">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </a>
+ <a class="brand" href="/">Home</a>
+ <div class="container nav-collapse">
+ <ul class="nav">
+ <li><%= link_to "Codes", "/codes" %></li>
+ <li><%= link_to "Tasks", "/tasks" %></li>
+ <li><%= link_to "Schedules", "/schedules" %></li>
+ <li><%= link_to "Examples", "/custom_examples" %></li>
+ </ul>
+ </div><!--/.nav-collapse -->
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+ <div class="content">
+ <div class="row">
+ <div class="span9">
+ <%= yield %>
+ </div>
+ </div><!--/row-->
+ </div><!--/content-->
+
+ <footer>
+ <p>&copy; Iron.io 2012</p>
+ </footer>
+
+ </div> <!-- /container -->
+
+ <!-- Javascripts
+ ================================================== -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <%= javascript_include_tag "application" %>
+
+ </body>
</html>
Oops, something went wrong.

0 comments on commit 9df348a

Please sign in to comment.