Moved to the bootstrap-sass gem, lot's of styling issues fixed

Gemfile

@@ -10,6 +10,7 @@ gem 'rails', '3.2.11'
 group :assets do
   gem 'sass-rails',   '~> 3.2.3'
 #  gem 'coffee-rails', '~> 3.2.1'
+  gem 'bootstrap-sass'
 
   # See https://github.com/sstephenson/execjs#readme for more supported runtimes
   gem 'therubyracer', :platforms => :ruby
@@ -17,6 +18,21 @@ group :assets do
   gem 'uglifier', '>= 1.2.2'
 end
 
+group :development, :test do
+  gem 'pry'
+  gem 'sqlite3'
+  gem 'thin'
+  gem 'rspec-rails', '2.11.0'
+end
+
+group :production do
+  gem 'mysql2'
+end
+
+group :test do
+  gem 'capybara', '1.1.2'
+end
+
 gem 'will_paginate'
 gem 'paperclip', '~> 3.0'
 gem 'jquery-rails'
@@ -34,15 +50,4 @@ gem 'acts_as_commentable_with_threading'
 gem 'prawn'
 gem 'prawn_rails'
 gem 'gravtastic'
-group :development, :test do
+
-  gem 'pry'
-  gem 'sqlite3'
-  gem 'thin'
-  gem 'rspec-rails', '2.11.0'
-end
-group :production do
-  gem 'mysql2'
-end
-group :test do
-  gem 'capybara', '1.1.2'
-end

Gemfile.lock

@@ -38,6 +38,8 @@ GEM
     awesome_nested_set (2.1.6)
       activerecord (>= 3.0.0)
     bcrypt-ruby (3.0.1)
+    bootstrap-sass (2.3.2.0)
+      sass (~> 3.2)
     builder (3.0.4)
     cancan (1.6.10)
     capybara (1.1.2)
@@ -213,6 +215,7 @@ PLATFORMS
 DEPENDENCIES
   acts_as_commentable_with_threading
   bcrypt-ruby (~> 3.0.0)
+  bootstrap-sass
   cancan
   capybara (= 1.1.2)
   cocoon

app/assets/javascripts/application.js

@@ -17,5 +17,5 @@
 //= require jquery-ui-timepicker-addon
 //= require jquery.dataTables
 //= require cocoon
-//= require bootstrap.min
+//= require bootstrap
 //= require osem

app/assets/javascripts/bootstrap.js.coffee

@@ -1,4 +0,0 @@
-jQuery ->
-  $("a[rel=popover]").popover()
-  $(".tooltip").tooltip()
-  $("a[rel=tooltip]").tooltip()

app/assets/javascripts/home.js.coffee

@@ -1,3 +0,0 @@
-# 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/

app/assets/stylesheets/application.css

@@ -1,5 +1,5 @@
 /*
- *= require bootstrap.min
+ *= require strap-on.css.scss
  *= require formtastic-bootstrap
  *= require osem
  *= require jquery-ui-1.9.2.custom

app/assets/stylesheets/osem.css

@@ -1,34 +1,43 @@
-html, body,.container,.content {
+ /* Sticky footer styles
+ -------------------------------------------------- */
+ html,
+ body {
     height: 100%;
+    /* The html and body elements cannot have any padding or margin. */
 }
 
-#push,
+/* Wrapper for page content to push down footer */
-#footer {
-    height: 60px;
-}
-
-.well {
-    background-color: white;
-    border: 1px solid #299A0B;
-}
-.container, .content {
-    position: relative;
-}
-#inner-content {
-    padding-top: 60px;
-}
-
 #wrap {
     min-height: 100%;
     height: auto !important;
     height: 100%;
+    /* Negative indent footer by it's height */
     margin: 0 auto -60px;
 }
 
+/* Set the fixed height of the footer here */
+#push,
 #footer {
-    position: relative;
+    height: 60px;
-    background-color: #ffffff;
 }
+#footer {
+   background-color: #f5f5f5;
+}
+
+/* Lastly, apply responsive CSS fixes as necessary */
+@media (max-width: 767px) {
+    #footer {
+      margin-left: -20px;
+      margin-right: -20px;
+      padding-left: 20px;
+      padding-right: 20px;
+  }
+}
+
+.container#messages {
+    padding-top: 60px;
+}
+
 .navbar-inner {
     background: #299a0b; /* Old browsers */
     background: -moz-linear-gradient(top,  #299a0b 0%, #299a0b 100%); /* FF3.6+ */
@@ -67,10 +76,6 @@ html, body,.container,.content {
     float:none;
 }
 
-.center-text {
-    text-align: center
-}
-
 textarea {
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */

app/assets/stylesheets/strap-on.css.scss

@@ -0,0 +1,2 @@
+@import "bootstrap";
+@import "bootstrap-responsive";

app/views/conference_registration/register.html.haml

@@ -1,15 +1,14 @@
-.container-fluid
+.row
-  .row-fluid
   .span12
-      %h3.pull-left
+    %h3
       Registration for
       = @conference.title
-  - if @person.proposal_count(@conference) > 0
+- if @person.proposal_count(@conference) > 0
-    .row-fluid
+  .row
     .span12
       %i
         Please note: Registration is not automatically performed for speakers.  If you're scheduled to speak at the conference, you still need to register!
-  .row-fluid
+.row
   .span12
     = semantic_form_for(@registration, :url => register_conference_path(@conference.short_title), :html => { :method => :put }) do |f|
       = f.inputs :name => "Your Details" do
@@ -23,7 +22,6 @@
             = reg.input :supporter_level, :as => :select, :collection => @conference.supporter_levels
             = reg.input :code, :label => "Confirmation or registration code (if applicable)"
             %span#supporter-link.help-block
-
         = f.input :attending_with_partner, :label => false
         = f.input :using_affiliated_lodging, :label => false
         = f.input :handicapped_access_required, :label => false

app/views/devise/registrations/new.html.haml

@@ -1,5 +1,5 @@
 .container
-  %h2.center-text
+  %h2.text-center
     Sign Up
   .row-fluid
     .well.span3.offset2

app/views/devise/sessions/new.html.haml

@@ -1,5 +1,5 @@
 .container
-  %h2.center-text
+  %h2.text-center
     Sign In
   .row-fluid
     .well.span3.offset2

app/views/home/index.html.erb

@@ -0,0 +1,51 @@
+<div class="row">
+  <div class="span12">
+    <h2 class="text-center">Upcoming Conferences</h2>
+  </div>
+</div>
+
+<% @conferences.each do |conference| %>
+<div class="row-fluid well" style="margin-top: 30px; background: #f5f5f5;">
+  <div clas="span12">
+    <div class="row">
+      <div class="span4 text-center">
+        <%= image_tag conference.logo(:original) %>
+      </div>
+
+      <div class="span6">
+        <h3>
+          <%= conference.title %>
+          <br>
+          <span class="muted"><%= conference.date_range_string %></span>
+        </h3>
+        <p>
+          <small>
+            <%= link_to conference.venue.name, conference.venue.website, :target => "_new" %>
+            ,
+            <%= link_to conference.venue.address, "http://maps.google.com/maps?q=#{conference.venue.address}", :target => "_new" %>
+          </small>
+          <%= simple_format(conference.venue.description, class: 'lead') %>
+      </div>
+      <div class="span2">
+        <ul class="nav nav-tabs nav-stacked">
+        <% if conference.registration_open? %>
+          <%- if conference.user_registered?(current_user) %>
+            <li><%= link_to "Modify Registration", register_conference_path(conference.short_title) %></li>
+          <%- else %>
+            <li><%= link_to "Register", register_conference_path(conference.short_title) %></li>
+          <% end %>
+        <% end %>
+        <li><%= link_to "Schedule", conference_schedule_path(conference.short_title) %></li>
+        <%- if !current_user.nil? && current_user.person.proposal_count(conference) > 0 %>
+          <li><%= link_to "View My Proposals", conference_proposal_index_path(conference.short_title) %></li>
+        <%- elsif conference.cfp_open? %>
+          <li><%= link_to "Submit Proposal", conference_proposal_index_path(conference.short_title) %></li>
+        <% end %>
+        </ul>
+        </div>
+      </div>
+
+  </div>
+</div>
+<% end %>
+

app/views/home/index.html.haml

@@ -1,38 +0,0 @@
-.container-fluid
-  %h1.center-text{:style => "padding-bottom: 30px"}
-    Upcoming Conferences
-  - @conferences.each do |conference|
-    .well
-      .row-fluid
-        .span3
-          = image_tag conference.logo(:original)
-        .span9
-          %h2.center-text
-            = conference.title
-          %h4.center-text
-            = conference.date_range_string
-          .center-text
-            %i
-              %a= link_to conference.venue.name, conference.venue.website, :target => "_new"
-              ,
-              %a= link_to conference.venue.address, "http://maps.google.com/maps?q=#{conference.venue.address}", :target => "_new"
-      .row-fluid
-        .span12
-          .center-text
-            = simple_format(conference.venue.description)
-      .row-fluid{:style => "padding-top: 30px;"}
-        .span4
-          - if conference.registration_open?
-            - if conference.user_registered?(current_user)
-              = link_to "Modify Registration", register_conference_path(conference.short_title), :class => "btn btn-success btn-large"
-            - else
-              = link_to "Register", register_conference_path(conference.short_title), :class => "btn btn-success btn-large"
-          - else
-            %b Registration is closed.
-        .span4
-          = link_to "Schedule", conference_schedule_path(conference.short_title), :class => "btn btn-success btn-large"
-        .span4
-          - if !current_user.nil? && current_user.person.proposal_count(conference) > 0
-            = link_to "View My Proposals", conference_proposal_index_path(conference.short_title), :class => "btn btn-success btn-large pull-right"
-          - elsif conference.cfp_open?
-            = link_to "Submit Proposal", conference_proposal_index_path(conference.short_title), :class => "btn btn-success btn-large pull-right"

app/views/layouts/admin.html.haml

@@ -11,17 +11,31 @@
     = csrf_meta_tags
     = yield(:head)
     %body
+    #wrap
       .navbar.navbar-fixed-top
         .navbar-inner
           .container-fluid
             = render 'layouts/admin_navigation'
-    .container
+      .container#messages
-      .content
+        .row
-        #wrap
-          #inner-content
-            .row-fluid
-              .span12#flash-bar
-                = render 'layouts/messages'
-            .row-fluid
           .span12
+            = render 'layouts/messages'
+            %noscript
+              :css
+                #content {
+                  display: none;
+                }
+              %h2
+                JavaScript is not enabled
+              %p
+                OSEM requires JavaScript to be enabled to function. Please turn on JavaScript in your browser's settings and reload the page to continue.
+      .container#content
         = yield
+        #push
+    #footer
+      .container
+        %p.muted.credit.text-center
+          OSEM is (C) 2013
+          = link_to "Matt Barringer", "http://incoherent.de"
+          and released under the GPL.  You can get the source code from
+          = link_to "Github.", "https://github.com/mbarringer/osem"

app/views/layouts/application.html.haml

@@ -11,33 +11,30 @@
     = csrf_meta_tags
     = yield(:head)
   %body
+    #wrap
       .navbar.navbar-fixed-top
         .navbar-inner
           .container-fluid
             = render 'layouts/navigation'
-    .container
+      .container#messages
-      .content
+        .row
-        #wrap
-          #inner-content
-            .row-fluid
           .span12
             = render 'layouts/messages'
-            .row-fluid
             %noscript
               :css
-                   #yield-span {
+                #content {
                   display: none;
                 }
               %h2
                 JavaScript is not enabled
               %p
                 OSEM requires JavaScript to be enabled to function. Please turn on JavaScript in your browser's settings and reload the page to continue.
-              .span12#yield-span
+      .container#content
         = yield
         #push
     #footer
       .container
-            %p.muted.credit.center-text{:style => "font-size: 10px;"}
+        %p.muted.credit.text-center
           OSEM is (C) 2013
           = link_to "Matt Barringer", "http://incoherent.de"
           and released under the GPL.  You can get the source code from

app/views/proposal/_form.html.haml

@@ -1,4 +1,6 @@
-.tabbable
+.row
+  .span12
+    .tabbable
       %ul.nav.nav-tabs
         %li.active
           = link_to "Proposal", "#proposal-content", "data-toggle"=>"tab"
@@ -9,8 +11,7 @@
           = render 'proposal/proposal_form'
         #attachment-content.tab-pane
           .span12
-        = form_for EventAttachment.new, :url => conference_proposal_event_attachment_index_path(@conference.short_title, @event),
+            = form_for EventAttachment.new, :url => conference_proposal_event_attachment_index_path(@conference.short_title, @event), :html => { :multipart => true, :id => "fileupload"  } do |f|
-                                        :html => { :multipart => true, :id => "fileupload"  } do |f|
               %table.table.table-striped
                 %thead
                   %th

app/views/proposal/new.html.haml

@@ -1,5 +1,6 @@
-.container
+.row
-  .row
   .span12
     = simple_format(@conference.call_for_papers.description)
+.row
+  .span12
     = render 'proposal_form'

app/views/proposal/show.html.haml

@@ -1,44 +1,51 @@
-.row-fluid
+.row
-  .span3
-    = image_tag @event.submitter.gravatar_url(:size => 200), :class => "img-rounded"
-    %h3
-      = @event.submitter.public_name
-      - if @event.submitter.company
-        %br
-        %span.muted= @event.submitter.company
-    -if @event.submitter.biography
-      %p= @event.submitter.biography
-  .span9
-    .row-fluid
   .span12
-        %h3.muted
-          Video coming soon! Meanwhile...
-    .row-fluid
-      .span12.flexvideo
-        %iframe{:width=>"560", :height=>"315", :frameborder=>"0", :allowfullscreen=>"true", :src=>"http://www.youtube.com/embed/Eiv4e5ZxTmg"}
-    .row-fluid
-      .span8
     %h2
       = @event.title
       - if @event.subtitle
         %br
         %span.muted
           = @event.subtitle
+.row-fluid
+  .span3
     %p
       = simple_format(@event.abstract)
-      .span4
     %dl
-          %dt Speaker:
-          %dd= @event.submitter.public_name
       %dt Date:
       %dd= @event.start_time.strftime("%Y %B %e")
+      %dt Conference:
+      %dd= @event.conference.title
       - if @event.language
         %dt Language:
         %dd= @event.language
-          %dt Conference:
-          %dd= @event.conference.title
       - if @event.track_id
         %dt Track:
         %dd
           %span.label
             = @event.track.name
+  .span9
+    .row-fluid
+      .span12
+        -unless @event.video_id
+          %h5.text-error
+            No video of the event yet, sorry! Meanwhile...
+    .row-fluid
+      .span12.flexvideo
+        -if @event.video_id
+          %iframe{:width=>"560", :height=>"315", :frameborder=>"0", :allowfullscreen=>"true", :src=>"http://www.youtube.com/embed/#{@event.video_id}?rel=0"}
+        -else
+          %iframe{:width=>"560", :height=>"315", :frameborder=>"0", :allowfullscreen=>"true", :src=>"http://www.youtube.com/embed/Eiv4e5ZxTmg?rel=0"}
+    .row-fluid
+      .span12
+        = image_tag @event.submitter.gravatar_url(:size => 200), :class => "img-rounded pull-right"
+        %h3
+          by
+          = @event.submitter.public_name
+          - if @event.submitter.company
+            %br
+            %span.muted
+              from
+              = @event.submitter.company
+        -if @event.submitter.biography
+          = simple_format(@event.submitter.biography)
+

config/environments/development.rb

@@ -29,9 +29,11 @@ Osem::Application.configure do
   # with SQLite, MySQL, and PostgreSQL)
   config.active_record.auto_explain_threshold_in_seconds = 0.5
 
+  # Do not compress assets
   config.assets.compress = false
-  config.assets.compile = true
 
   # Expands the lines which load the assets
+  config.assets.debug = true
+
   config.action_mailer.default_url_options = { :host => 'localhost:3000' }
 end