Added Bootstrap 3 support

.env.example

@@ -9,4 +9,4 @@ MAILGUN_DOMAIN=myawesomeapp.mailgun.org
 MAILGUN_PASSWORD=smtp_pass
 MAILGUN_USERNAME=postmaster@myawesomeapp.mailgun.org
 MAILGUN_API_KEY=key-mailgunapikey
-SECRET_TOKEN=secrettoken
+SECRET_TOKEN=secrettoken

Gemfile

@@ -18,7 +18,7 @@ gem 'aws-sdk'
 gem 'active_model_serializers'
 
 # Front-end
-gem 'bootstrap-sass', '2.1'
+gem 'bootstrap-sass', '~> 3.0.2.0'
 gem 'jquery-rails'
 gem 'jquery-ui-rails'
 

Gemfile.lock

@@ -50,7 +50,8 @@ GEM
       nokogiri (>= 1.4.4)
       uuidtools (~> 2.1)
     bcrypt-ruby (3.0.1)
-    bootstrap-sass (2.1.0.0)
+    bootstrap-sass (3.0.2.1)
+      sass (~> 3.2)
     builder (3.0.4)
     capybara (2.1.0)
       mime-types (>= 1.16)
@@ -241,7 +242,7 @@ DEPENDENCIES
   active_model_serializers
   asset_sync
   aws-sdk
-  bootstrap-sass (= 2.1)
+  bootstrap-sass (~> 3.0.2.0)
   capybara
   ckeditor
   coffee-rails (~> 3.2.1)

app/assets/javascripts/admin.js.coffee

@@ -99,7 +99,7 @@ Crowdhoster.admin =
 
     $('#reward-add').on 'click', (e) ->
       e.preventDefault()
-      $('#rewards ul').append('<li><table class="table"><tr><th>Reward</th><th>Number Claimed</th><th>Delete?</th></tr><tr><td><label>Minimum Contribution To Claim</label><div class="currency"><input name="reward[][price]" type="text" /><span style="position:absolute">$</span></div><label>Title</label><input name="reward[][title]" type="text" /><br/><label>Image URL (optional)</label><input placeholder="http://www.host.com/image.jpg" name="reward[][image_url]" type="text" /><br/><label>Description</label><textarea name="reward[][description]"></textarea><br/><label>Estimated Delivery Date (i.e. May 2013)</label><input name="reward[][delivery_date]" type="text" /><br/><label>Number Available (leave blank if unlimited)</label><input name="reward[][number]" type="text" /><label>Collect shipping address for this reward?</label><input name="reward[][collect_shipping_flag]" type="checkbox" checked /><label>Display number of reward claimed after campaign has ended?</label><input name="reward[][include_claimed]" type="checkbox" checked  /></td><td>0</td><td><input type="checkbox" name="reward[][delete]" value="delete"/></td></tr></table></li>')
+      $('#rewards ul').append('<li><table class="table"><tr><th>Reward</th><th>Number Claimed</th><th>Delete?</th></tr><tr><td><label>Minimum Contribution To Claim</label><div class="currency input-group"><span class="input-group-addon">$</span><input name="reward[][price]" type="text" /></div><label>Title</label><input name="reward[][title]" type="text" /><br/><label>Image URL (optional)</label><input placeholder="http://www.host.com/image.jpg" name="reward[][image_url]" type="text" /><br/><label>Description</label><textarea name="reward[][description]"></textarea><br/><label>Estimated Delivery Date (i.e. May 2013)</label><input name="reward[][delivery_date]" type="text" /><br/><label>Number Available (leave blank if unlimited)</label><input name="reward[][number]" type="text" /><label>Collect shipping address for this reward?</label><input name="reward[][collect_shipping_flag]" type="checkbox" checked /><label>Display number of reward claimed after campaign has ended?</label><input name="reward[][include_claimed]" type="checkbox" checked  /></td><td>0</td><td><input type="checkbox" name="reward[][delete]" value="delete"/></td></tr></table></li>')
 
     $('.faq.sortable').sortable
       stop: (e, ui) ->

app/assets/stylesheets/admin.css.scss

@@ -23,6 +23,18 @@
   }
 
   #admin_website, #admin_campaigns {
+
+    /* Setting width for forms without additional divs for columns */
+
+    .input-group .form-control {
+      width: 37.5%;
+    }
+
+    .form-control {
+      width: 40%;
+    }
+
+    /* Done setting form widths */
 
     fieldset {
       margin-bottom: 30px;
@@ -40,7 +52,7 @@
 
       .explanation {
         float: right;
-        width: 400px;
+        width: 40%;
       }
 
       .explanation.inline {
@@ -54,8 +66,10 @@
       }
 
       label {
-        margin-bottom: 15px;
+        display: block;
+        margin-bottom: 8px;
         font-size: 18px;
+        font-weight: 300;
       }
 
       label.inline {
@@ -65,30 +79,12 @@
 
     .additional_info_input {
       margin-top: 20px;
-      textarea {
-        width: 360px;
-      }
     }
 
     #preset-amount, #min-amount {
       margin-left: 20px;
     }
 
-    .currency {
-      position: relative;
-
-      input {
-        padding-left: 24px;
-        width: 192px;
-      }
-
-      span {
-        position: absolute;
-        top: 5px;
-        left: 10px;
-      }
-    }
-
     #rewards {
       .reference {
         margin: 20px 0px;
@@ -132,18 +128,16 @@
         vertical-align: middle;
         cursor: move;
 
-        textarea {
-          width: 400px;
-          max-width: 400px;
-          margin-bottom: 0px;
-        }
-
         .faq-delete {
           opacity: 0.5;
           &:hover {
             opacity: 1;
           }
         }
+        .form-control {
+          display: inline-block;
+          margin-right: 1%;
+        }
       }
     }
 

app/assets/stylesheets/campaigns.css.scss

@@ -2,25 +2,26 @@
   width: 100%;
   padding: 50px 0;
 
-  .main_content {
-    width: 560px;
-    float: left;
-    h3 {
-      margin: 0px 0px 30px;
-      color: #4b4b4b;
-      a {
-        color: #4b4b4b;
-        text-decoration: none;
-        &:hover {
-          text-decoration: none;
-        }
+  h3 {
+  margin: 0px 0px 30px;
+  text-align: center;
+  color: #4b4b4b;
+  a {
+    color: #4b4b4b;
+    text-decoration: none;
+    &:hover {
+      text-decoration: none;
       }
     }
+  }
+
+  .main_content {
 
     .checkout_block {
-      background-color: #ffffff;
-      padding: 30px;
-      margin-bottom: 0px;
+      margin-bottom: 15px;
+      label {
+        font-weight: 300;
+      }
     }
 
     p {
@@ -40,18 +41,7 @@
 
     .amount_input {
       position: relative;
-      display: inline-block;
-
-      input {
-        padding-left: 24px;
-        width: 200px;
-      }
 
-      span {
-        position: absolute;
-        top: 5px;
-        left: 10px;
-      }
     }
 
     #reward_select {
@@ -67,11 +57,12 @@
               display: inline;
               float: left;
               margin-left: 10px;
+              margin-right: 10px;   
               font-weight: bold;
             }
             .reward_description {
-              margin-left: 120px;
-              width: 320px;
+              margin-left: 20%;
+              width: 70%;
               p {
                 font-size: 14px;
                 margin: 0px;
@@ -99,10 +90,7 @@
               }
             }
             .reward_edit {
-              display: block;
-              position: absolute;
-              top: 15px;
-              right: 25px;
+              display: inline-block;
             }
           }
           &.active {
@@ -121,7 +109,7 @@
     }
 
     .btn {
-      margin-top: 20px;
+      margin-top: 15px;
     }
 
     h4 {
@@ -136,11 +124,7 @@
     }
 
     fieldset {
-      display: inline-block;
-    }
-
-    #fullname, #email, #address_one, #address_two, #additional_info{
-      width: 480px;
+      display: block;
     }
 
     .billing_address {
@@ -179,13 +163,11 @@
   }
 
   .sidebar {
-    float: right;
-    width: 345px;
 
     .crowdtilt-powered {
-      margin-bottom: 34px;
+      margin-bottom: 30px;
       img {
-        float: right;
+        max-width: 317px;
       }
     }
 
@@ -227,10 +209,7 @@
   }
 
   .confirmation_sidebar {
-    float: left;
     background: white;
-    margin-left: 20px;
-    width: 315px;
     p {
       font-size: 14px;
     }

app/assets/stylesheets/main.css.scss

@@ -6,10 +6,9 @@
 
 /* Top level layout sections */
 @import "navbar";
-@import "flash";
 
 /* Non-customizable section styles */
 @import "devise";
 @import "admin";
 @import "campaigns";
-@import "users";
+@import "users";

app/assets/stylesheets/navbar.css.scss

@@ -1,8 +1,12 @@
 #navbar {
-  .navbar-inner {
+  .navbar {
     min-height: 30px;
   }
 
+  .navbar-left > li {
+    float: left;
+  }
+
   .navbar .nav > li > a {
     padding: 5px 15px;
     display: inline-block;
@@ -18,18 +22,15 @@
     vertical-align: bottom;
   }
 
+  .navbar-btn {
+    margin-top: 4px;
+    margin-bottom: 0px;
+    margin-right: 8px;
+  }
+
   .status {
-    color: white;
-    margin-top: 5px;
-    border-radius: 5px;
+    margin-top: 7px;
     margin-right:8px;
-    padding: 0px 10px;
-  }
-  .status.red {
-    background-color: red;
-  }
-  .status.green {
-    background-color: green;
   }
 
 }