Adding bootstrap

jackgill · May 28, 2012 · b78d331 · b78d331
1 parent 52e20bf
commit b78d331
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 30 deletions.
diff --git a/Gemfile b/Gemfile
@@ -11,6 +11,7 @@ group :assets do
   gem 'sass-rails', "  ~> 3.2.3"
   gem 'coffee-rails', "~> 3.2.1"
   gem 'uglifier', '>= 1.0.3'
+  gem 'twitter-bootstrap-rails'
 end
 
 group :test do

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -38,6 +38,7 @@ GEM
       coffee-script-source
       execjs
     coffee-script-source (1.2.0)
+    commonjs (0.2.6)
     daemons (1.1.8)
     erubis (2.7.0)
     eventmachine (0.12.10)
@@ -50,6 +51,12 @@ GEM
       railties (>= 3.2.0.beta, < 5.0)
       thor (~> 0.14)
     json (1.6.5)
+    less (2.2.1)
+      commonjs (~> 0.2.6)
+    less-rails (2.2.3)
+      actionpack (>= 3.1)
+      less (~> 2.2.0)
+    libv8 (3.3.10.4)
     mail (2.4.1)
       i18n (>= 0.4.0)
       mime-types (~> 1.16)
@@ -96,6 +103,8 @@ GEM
       tilt (~> 1.1, != 1.3.0)
     sqlite3 (1.3.5)
     sqlite3 (1.3.5-x86-mingw32)
+    therubyracer (0.10.1)
+      libv8 (~> 3.3.10)
     thin (1.3.1)
       daemons (>= 1.0.9)
       eventmachine (>= 0.12.6)
@@ -107,6 +116,11 @@ GEM
       polyglot (>= 0.3.1)
     turn (0.9.2)
       ansi
+    twitter-bootstrap-rails (2.0.8)
+      actionpack (>= 3.1)
+      less-rails (~> 2.2.2)
+      railties (>= 3.1)
+      therubyracer (~> 0.10.1)
     tzinfo (0.3.31)
     uglifier (1.2.3)
       execjs (>= 0.3.0)
@@ -126,4 +140,5 @@ DEPENDENCIES
   sqlite3
   thin
   turn
+  twitter-bootstrap-rails
   uglifier (>= 1.0.3)
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -6,4 +6,5 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require twitter/bootstrap
 //= require_tree .
diff --git a/app/assets/javascripts/bootstrap.js.coffee b/app/assets/javascripts/bootstrap.js.coffee
@@ -0,0 +1,4 @@
+jQuery ->
+  $("a[rel=popover]").popover()
+  $(".tooltip").tooltip()
+  $("a[rel=tooltip]").tooltip()
diff --git a/app/assets/stylesheets/bootstrap_and_overrides.css.less b/app/assets/stylesheets/bootstrap_and_overrides.css.less
@@ -0,0 +1,29 @@
+@import "twitter/bootstrap/bootstrap";
+body { padding-top: 10px; }
+
+@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)
+@fontAwesomeEotPath: asset-path('fontawesome-webfont.eot');
+@fontAwesomeWoffPath: asset-path('fontawesome-webfont.woff');
+@fontAwesomeTtfPath: asset-path('fontawesome-webfont.ttf');
+@fontAwesomeSvgzPath: asset-path('fontawesome-webfont.svgz');
+@fontAwesomeSvgPath: asset-path('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;
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -7,38 +7,71 @@
   <%= csrf_meta_tags %>
 </head>
 <body>
+	<div class="container">
+		<div class="row">
+			<!-- <div class="span2"> --> <!--Start sidebar content-->
+				<!--
+			  <ul class="nav nav-list">
+				  <li class="nav-header">
+				    <%= link_to "Search for a Spot", :controller => :availabilities, :action => :search %>
+				  </li>
+				  <li class="nav-header">
+				    <%= link_to "View Requests", :controller => :requests, :action => :results %>
+				  </li>
+				  <li class="nav-header">
+				    <%= link_to "Rent Your Spot", :controller => :spots, :action => :yours %>
+				  </li>
+				  <li class="nav-header">
+				    <%= link_to "Request a Spot", :controller => :requests, :action => :new %>
+				  </li>
+				  <li class="nav-header">
+				    <%= link_to "User Dashboard", :controlller => :home, :action => :dashboard %>
+				  </li>
+			  </ul>
+			  -->
+			<!-- </div> --> <!-- End sidebar content -->
+
+			<div class="span10"> <!-- Start body content -->
+
+				<% if flash[:notice] -%>
+					<div id="notice"><%= flash[:notice] %></div>
+				  <% end %>
 
-  <% if flash[:notice] -%>
-  <div id="notice"><%= flash[:notice] %></div>
-  <% end -%>
+				  <div id="header"> <!-- Start header -->
+
+					  <div class="left">
+						  <%= link_to "Home", :controller => "home", :action => "index" %>
+
+						  <% if @user && @user.is_admin %>
+							| <%= link_to "Admin", :controller => "admin", :action => "index" %>
+						  <% end %>
+
+						  <% if @building != nil %>
+							| Your current building is <%=@building.name%>.
+                               <% if @user == nil %>
+								 <%= link_to "Change", :controller => "home", :action => "building" %>
+                               <% else %>
+								 <%= link_to "Change", :controller => "users", :action => "edit", :id => @user.id %>
+							  <% end %>
+                          <% end %>
+					  </div>
+
+					  <div class="right">
+						  Welcome, 
+						<% if session[:user_id] && session[:user_id] != :logged_out && @user%>
+						  <%= link_to get_name(@user), :controller => 'users', :action => 'show', :id => @user.id %>
+						  <%= link_to "Log out", :controller => "account", :action => :logout %>
+					  <% else %>
+						<%= get_name(@user) %>
+						<%= link_to "Log in", :controller => "account", :action => :login %>
+						  <% end %>
+						</div>
+				  </div> <!-- End header -->
 
-  <div id="header">
-	<div class="left">
-	  <%= link_to "Home", :controller => "home", :action => "index" %>
-	  <% if @user && @user.is_admin %>
-	    | <%= link_to "Admin", :controller => "admin", :action => "index" %>
-	  <% end %>
-	  <% if @building != nil %>
-	  | Your current building is <%=@building.name%>.
-	  <% if @user == nil %>
-	   <%= link_to "Change", :controller => "home", :action => "building" %>
-	  <% else %>
-	  <%= link_to "Change", :controller => "users", :action => "edit", :id => @user.id %>
-	  <% end %>
-	  <% end %>
+				  <%= yield %>
+
+			</div> <!-- end body content -->
+		</div>
 	</div>
-	<div class="right">
-		Welcome, 
-	<% if session[:user_id] && session[:user_id] != :logged_out && @user%>
-	<%= link_to get_name(@user), :controller => 'users', :action => 'show', :id => @user.id %>
-	<%= link_to "Log out", :controller => "account", :action => :logout %>
-	<% else %>
-	<%= get_name(@user) %>
-	<%= link_to "Log in", :controller => "account", :action => :login %>
-	<% end %>
-	</div>
-  </div>
-
-  <%= yield %>
 </body>
 </html>
diff --git a/dev-notes.org b/dev-notes.org
@@ -524,3 +524,7 @@ move to logging in w/ email address
 ** TODO examine moving some of the listing/availability/transaction creation logic into the models
 ** TODO need transaction reminder notifications
 ** scratch
+Front end strategy:
+1. Use bootstrap.
+2. Add some basic styling with bootstrap components
+3. Lay the foundation for a decent custom design