Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Styling

  • Loading branch information...
commit 8da228998ecab3b5dcdf9b1363b13265a1e85057 1 parent 89adc79
@halogenandtoast halogenandtoast authored
View
1  Gemfile
@@ -3,6 +3,7 @@ source 'https://rubygems.org'
gem 'rails', '3.2.2'
gem 'clearance'
gem 'paperclip'
+gem 'twitter-bootstrap-rails'
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
View
16 Gemfile.lock
@@ -43,6 +43,8 @@ GEM
coffee-script-source
execjs
coffee-script-source (1.2.0)
+ commonjs (0.2.0)
+ therubyracer (~> 0.9.9)
diesel (0.1.5)
railties
diff-lcs (1.1.3)
@@ -61,6 +63,13 @@ GEM
railties (>= 3.2.0, < 5.0)
thor (~> 0.14)
json (1.6.5)
+ less (2.0.9)
+ commonjs (~> 0.2.0)
+ therubyracer (~> 0.9.9)
+ less-rails (2.1.7)
+ actionpack (>= 3.1)
+ less (~> 2.0.7)
+ libv8 (3.3.10.4)
mail (2.4.3)
i18n (>= 0.4.0)
mime-types (~> 1.16)
@@ -123,11 +132,17 @@ GEM
rack (~> 1.0)
tilt (~> 1.1, != 1.3.0)
sqlite3 (1.3.5)
+ therubyracer (0.9.10)
+ libv8 (~> 3.3.10)
thor (0.14.6)
tilt (1.3.3)
treetop (1.4.10)
polyglot
polyglot (>= 0.3.1)
+ twitter-bootstrap-rails (2.0.3)
+ actionpack (>= 3.1)
+ less-rails (~> 2.1.6)
+ railties (>= 3.1)
tzinfo (0.3.32)
uglifier (1.2.3)
execjs (>= 0.3.0)
@@ -147,4 +162,5 @@ DEPENDENCIES
rspec-rails
sass-rails (~> 3.2.3)
sqlite3
+ twitter-bootstrap-rails
uglifier (>= 1.0.3)
View
1  app/assets/javascripts/application.js
@@ -12,4 +12,5 @@
//
//= require jquery
//= require jquery_ujs
+//= require twitter/bootstrap
//= require_tree .
View
4 app/assets/javascripts/bootstrap.js.coffee
@@ -0,0 +1,4 @@
+jQuery ->
+ $("a[rel=popover]").popover()
+ $(".tooltip").tooltip()
+ $("a[rel=tooltip]").tooltip()
View
3  app/assets/javascripts/dashboards.js.coffee
@@ -1,3 +1,6 @@
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
+
+$(document).ready ->
+ $("#shout_forms").collapse()
View
17 app/assets/stylesheets/bootstrap_and_overrides.css.less
@@ -0,0 +1,17 @@
+@import "twitter/bootstrap/bootstrap";
+@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');
+
+// 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;
View
4 app/assets/stylesheets/dashboards.css.scss
@@ -1,3 +1,7 @@
// Place all the styles related to the Dashboards controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
+
+.shout-toggle {
+ font-size: 20px;
+}
View
3  app/assets/stylesheets/shouts.css.scss
@@ -0,0 +1,3 @@
+.shout {
+ padding: 10px 15px
+}
View
41 app/views/dashboards/show.html.erb
@@ -1,15 +1,26 @@
-<h1>Dashboard</h1>
-Welcome <%= current_user.email %> - <%= link_to "Sign out", sign_out_path, method: :delete %>
-
-<%= form_for(@text_shout) do |form| %>
- <%= form.text_field :body, placeholder: "Shout here" %>
- <%= form.submit "Shout!" %>
-<% end %>
-<%= form_for(@photo_shout) do |form| %>
- <%= form.file_field :photo %>
- <%= form.submit "Shout!" %>
-<% end %>
-
-<div id="shouts">
- <%= render @shouts %>
-</div>
+<span class="row">
+ <span class="span3">
+ <h3><%= current_user.email %></h3>
+ <div id='shout_forms'>
+ <a href="#text_shout" class='shout-toggle' data-toggle="collapse" data-parent="#shout_forms">Shout with text</a>
+ <div class="accordion-body collapse in" id="text_shout">
+ <%= form_for(@text_shout, html: { class: "well form-inline" }) do |form| %>
+ <%= form.text_field :body, placeholder: "Shout here", class: "input-medium" %>
+ <%= form.submit "Shout!", class: "btn btn-primary" %>
+ <% end %>
+ </div>
+ <a href="#photo_shout" class='shout-toggle' data-toggle="collapse" data-parent="#shout_forms">Shout with a photo</a>
+ <div id="photo_shout" class="accordion-body collapse">
+ <%= form_for(@photo_shout, html: { class: "well form-inline" }) do |form| %>
+ <%= form.file_field :photo, class: "input-medium" %>
+ <%= form.submit "Shout!", class: "btn btn-primary" %>
+ <% end %>
+ </div>
+ </div>
+ </span>
+ <span class="span8">
+ <div id="shouts">
+ <%= render @shouts %>
+ </div>
+ </span>
+</span>
View
48 app/views/layouts/application.html.erb
@@ -1,18 +1,52 @@
<!DOCTYPE html>
-<html>
+<html lang="en">
<head>
+ <meta charset="utf-8">
<title>Shouter</title>
- <%= stylesheet_link_tag "application", :media => "all" %>
- <%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
+
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
+ <![endif]-->
+
+ <style>
+ body {
+ padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
+ }
+ </style>
+ <%= stylesheet_link_tag "application", :media => "all" %>
</head>
<body>
- <% flash.each do |key, value| -%>
- <div class="flash <%= key %>"><%= value %></div>
- <% end -%>
+ <div class="navbar navbar-fixed-top">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="brand" href="/">Shouter</a>
+ <div class="container nav-collapse">
+ <ul class="nav pull-right">
+ <% if signed_in? %>
+ <li><%= link_to "Sign out", sign_out_path, method: :delete %></li>
+ <% else %>
+ <li><%= link_to "Sign in", sign_in_path %></li>
+ <li><%= link_to "Sign up", sign_up_path %></li>
+ <% end %>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
- <%= yield %>
+ <div class="container">
+ <div class="content">
+ <div class="row">
+ <div class="span12">
+ <%= yield %>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <%= javascript_include_tag "application" %>
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.