speedo 0.3.4 → 0.4.0

data/app/assets/javascripts/speedo.js

@@ -1,5 +1,5 @@
 //= require jquery-ui
-//= require speedo/bootstrap
+//= require bootstrap
 //= require speedo/chosen.jquery
 //= require speedo/jquery.autoSuggest
 //= require speedo/jquery.autogrow

data/app/assets/javascripts/swim.js.coffee

@@ -1,9 +1,4 @@
 $ ->
-  # For Web-app mode, uncomment this (and the CSS in speedo/layout.css.scss) to make the cols fill the browser
-  # $('.col1, .col2, .col3').css('height',$(window).height() - $('.main_nav').outerHeight() - $('.branding').outerHeight() - 60 + 'px')
-  # $(window).resize ->
-  #   $('.col1, .col2, .col3').css('height',$(window).height() - $('.main_nav').outerHeight() - $('.branding').outerHeight() - 60 + 'px')
-
   $('.tip').livequery ->
     $(@).tooltip()
 
@@ -17,11 +12,14 @@ $ ->
     $(@).chosen()
 
   $('input, textarea').livequery ->
-    $(@).placeholder()
+    $(@).not('input[type=password]').placeholder()
 
   $("select, input:checkbox, input:radio, input:file").livequery ->
     $(@).not('.hidden').not('.chzn').not('.bare').uniform()
 
+  $("form").livequery ->
+    $(@).preventDoubleSubmission()
+
   $('input[type=date]').livequery ->
     $(@).not('.bare').datepicker
       numberOfMonths:  2
@@ -51,3 +49,16 @@ $ ->
         { "bSortable": false, "aTargets": [ -1 ] } 
       ]
       # "bJQueryUI": true # Use jQueryUI styling
+
+
+jQuery.fn.preventDoubleSubmission = ->
+  $form = $(this)
+  $form.bind "submit", (e) ->
+    if $form.data("submitted") is true
+      e.preventDefault()
+    else
+      $form.data "submitted", true
+      $form.find('input[type=submit], button').attr('disabled', 'disabled')
+  $form.ajaxComplete ->
+    $form.data "submitted", false
+    $form.find('input[type=submit], button').removeAttr('disabled')

data/app/assets/stylesheets/speedo/base.css.scss

@@ -2,11 +2,14 @@
 * {
   @include box-sizing(border-box);
 }
-body {
-  color: $text;
+html {
   background: $bg;
+}
+body {
   font-size:12px;
   line-height:1.231;
+  color: $text;
+  background: $bg;
 }
 a, a:visited:not(.btn), .link  { 
   color: $link; 
@@ -44,7 +47,7 @@ input:not(.btn), textarea {
 }
 footer {
   position:relative;
-  margin:-1.8em 10px 0 0;   /* So it appears at the bottom of the right column and is not lost in web-app mode */
+  margin:-1em 10px 0 0;   /* So it appears within #main */
   float: right;
   font-size: 0.8em;
   opacity:0.5;

data/app/assets/stylesheets/speedo/plugins.css.scss

@@ -1,8 +1,9 @@
 /* Error messages */
 .flash {
   position:relative;
+  border:1px solid rgba(0,0,0,0.1);
+  border-width:1px 0;
   padding:0.5em 2em;
-  box-shadow:0 2px 2px #999;
   font-size:1.5em;
   text-align:center;
   text-shadow:-1px -1px 1px #FFFFFF, 1px 1px 1px rgba(0, 0, 0, 0.3);

data/app/assets/stylesheets/speedo/speedo.css.scss

@@ -1,14 +1,13 @@
 @import 'bootstrap';
+@import 'bootstrap-responsive';
 @import 'autoSuggest';
 @import 'chosen';
 @import 'jquery.dataTables';
 @import 'jquery-ui-1.8.18.custom';
 @import 'uniform.default';
-@import 'bourbon';
 
 @import 'speedo/theme';
 @import 'speedo/base';
-@import 'speedo/layout';
 @import 'speedo/plugins';
 @import 'speedo/helpers';
 

data/app/assets/stylesheets/speedo/theme.css.scss

@@ -8,55 +8,13 @@ $bggreen:     #e3fde4;
 $bgblue:      #bcf;
 $bgyellow:    #ffc;
 $bgred:       #f99;
-/* Column background colors, layout.css */
-$maincolbg:   #fff;
-$leftcolbg:   #f6f6f6;
-$rightcolbg:  #fafafa;
+/* Main column background color, below */
+$mainbg:   #fff;
 
-
-.branding {
-  padding:5px 0;
-  background:#eee;
-  .logo {
-    float: left;
-    margin-left:2%;
-    img {
-      display:block;
-      height: 40px;
-    }
-  }
-  .user {
-    float:right;
-    margin:10px 2% 0;
-    a {
-    }
-    .user-name {
-    }
-    .user-logout {
-    }
-  }
-}
-
-
-.main_nav {
-  padding:5px 0;
-  background:#eee;
-  .search {
-    margin-right:10px;
-  }
-  .home {
-    margin-left:10px;
-  }
-  a {
-    display:inline-block; zoom:1;*display:inline;
-    padding:0.2em 0.5em;
-    background:#ccc;
-    @include border-radius(0.3em);
-    &:hover {
-      background:#ddd;
-    }
-    &.active {
-      @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.5));
-    }
-  }
+#main {
+  margin:0 -20px 20px;
+  border-radius:1em;
+  padding:20px;
+  box-shadow:0 0px 5px 1px #999;
+  background: $mainbg;
 }

data/app/views/layouts/speedo/_navbar.html.haml

@@ -0,0 +1,23 @@
+.navbar
+  .navbar-inner
+    .container
+      = link_to image_tag('speedo/logo.png'), root_url, class: 'brand'
+      %a.btn.btn-navbar{data: {toggle:"collapse", target:".nav-collapse"} }
+        - 3.times do
+          %span.icon-bar
+      %form.navbar-search.pull-right
+        %input{type: 'search', name: 'search[name]', placeholder: 'Search', results: 5, autosave: 'site_search', class: 'search-query'}
+      .nav-collapse.collapse
+        %ul.nav
+          %li.active= link_to 'Home', root_url, {class: 'active home'}
+          %li= link_to 'Section1', root_url
+          %li= link_to 'Section2', root_url
+          %li= link_to 'Section3', root_url
+          %li= link_to 'Section4', root_url
+        %ul.nav.pull-right
+          - if @user_signed_in
+            %li= link_to 'current_user.name', 'account_url', class: 'user_name'
+            %li= link_to 'Logout', 'destroy_user_session_url', class: 'user_logout'
+          - else
+            %li= link_to 'Sign in', 'new_user_session_path', rel: 'sign_in'
+            %li= link_to 'Sign up', 'new_user_registration_path', rel: 'sign_up'

data/app/views/layouts/speedo/application.html.haml

@@ -24,52 +24,17 @@
   %body
     %noscript
       #noscript_warning This site works best with JavaScript enabled. Some features may not be available
-    #wrapper.clearfix
-      %header.branding.clearfix
-        = link_to image_tag('speedo/logo.png'), root_url, class: 'logo'
-
-        .user
-          - if @user_signed_in
-            = link_to 'current_user.name', 'account_url', class: 'user_name'
-            |
-            = link_to 'Logout', 'destroy_user_session_url', class: 'user_logout'
-          - else
-            = link_to 'Sign in', 'new_user_session_path', rel: 'sign_in'
-            or
-            = link_to 'Sign up', 'new_user_registration_path', rel: 'sign_up'
-            
-      %nav.main_nav.clearfix
-        %form.right.search
-          %input{type: 'search', name: 'search[name]', placeholder: 'Search', results: 5, autosave: 'site_search'}
-
-        = link_to 'Home', root_url, {class: 'active home'}
-        = link_to 'Section1', root_url
-        = link_to 'Section2', root_url
-        = link_to 'Section3', root_url
-        = link_to 'Section4', root_url
-
-
-      - if flash[:success]
-        .flash.success= flash[:success]
-      - if flash[:notice]
-        .flash.notice= flash[:notice]
-      - if flash[:alert]
-        .flash.alert= flash[:alert]
-      - if flash[:error]
-        .flash.error= flash[:error]
-      .colmask{class: @col_layout || @col_layout = 'leftcol'} 
-        -# options: leftcol, rightcol, threecol, onecol
-        .colmid
-          .colleft
-            .col1
-              = yield
-            .col2
-              = yield :left_col
-            .col3
-              = yield :right_col
-      = yield :popups
-      %footer
-        Copyright © 
-        = Time.now.year 
-        = link_to 'CrankApps', 'http://www.crankapps.com', target: '_blank'
+    #wrapper
+      = render 'layouts/speedo/navbar'
+      .container
+        #main
+          - [:success, :notice, :alert, :error].each do |f|
+            - if flash[f]
+              .flash{class: f}= flash[f]
+          = yield
+          = yield :popups
+          %footer
+            Copyright © 
+            = Time.now.year 
+            = link_to 'CrankApps', 'http://www.crankapps.com', target: '_blank'
 

data/app/views/speedo/home/examples.html.haml

@@ -1,102 +1,102 @@
-- @col_layout = 'threecol'
-
-%h1 Forms with Uniform, AutoGrowing, AutoSuggesting - h1
-= semantic_form_for 'speedo' do |f|
-  / = f.semantic_errors
-  = f.inputs do
-    .row-fluid
-      = f.input 'Title', placeholder: 'Type your title', wrapper_html: {class: 'span6'}
-      = f.input 'Name', wrapper_html: {class: 'span6'}
-    = f.input 'Singer', input_html: { class: 'autoSuggest' }
-    = f.input 'Description', as: :text, input_html: { placeholder: 'AutoGrowing', class: 'autogrow tip', :rows => 2, title: 'Tip: you can type what you like, and this will get bigger to fit!', data: {placement: 'bottom'} }
-    = f.input 'Attachment', as: :file, required: false
-    = f.input 'Select', as: :select, include_blank: false, hint: 'Just select one!'
-    = f.input 'Are you real?', as: :radio, wrapper_html: { class: 'inline_choices' }
-    = f.input 'Which do you own?', as: :check_boxes, collection: ['Speedo','Swim Short','Bikini']
+.row
+  .span3
+    %h2 Left Col
+    %button.btn.spin_me Start spinner
+    %script
+      $('.spin_me').toggle(function() {
+      $(this).spin('large','#0090D5');
+      }, function() {
+      $(this).spin(false);
+      });
+
+  .span6
+    %h1 Forms with Uniform, AutoGrowing, AutoSuggesting - h1
+    = semantic_form_for 'speedo' do |f|
+      / = f.semantic_errors
+      = f.inputs do
+        .row-fluid
+          = f.input 'Title', placeholder: 'Type your title', wrapper_html: {class: 'span6'}
+          = f.input 'Name', wrapper_html: {class: 'span6'}
+        = f.input 'Singer', input_html: { class: 'autoSuggest' }
+        = f.input 'Description', as: :text, input_html: { placeholder: 'AutoGrowing', class: 'autogrow tip', :rows => 2, title: 'Tip: you can type what you like, and this will get bigger to fit!', data: {placement: 'bottom'} }
+        = f.input 'Attachment', as: :file, required: false
+        = f.input 'Select', as: :select, include_blank: false, hint: 'Just select one!'
+        = f.input 'Are you real?', as: :radio, wrapper_html: { class: 'inline_choices' }
+        = f.input 'Which do you own?', as: :check_boxes, collection: ['Speedo','Swim Short','Bikini']
   
-  %hr
-  %h2 Buttons - h2
-  = f.actions do
-    = f.action :submit, label: 'Submit', as: :button, button_html: { class: 'btn left' }
-    = f.action :cancel, label: 'Cancel', as: :link, button_html: { class: 'btn btn-danger left' }
-  .btn-group
-    %button.btn.btn-success
-      %i.icon-plus.icon-white
-      Plus icon
-    %button.btn
-      %i.icon-cog
-      Cog icon
-    %button.btn.btn-danger
-      %i.icon-remove.icon-white
-      Remove icon
-  = link_to 'Bootstrap buttons docs', 'http://twitter.github.com/bootstrap/base-css.html#buttons', target: '_blank'
-
-%hr
-%h3 Sortable dataTable - h3
-%table.dataTable
-  %thead
-    %tr
-      %th Name
-      %th Username
-  %tbody
-    %tr
-      %td Sally
-      %td gurlsally
-    %tr
-      %td Dave
-      %td davieboy
-    %tr
-      %td Hilary
-      %td hermahili
-
-%hr
-%h4 Inputs with bonuses - h4
-%select.chzn{style: 'width:200px'}
-  %option Canada
-  %option UK
-  %option USA
-
-%br
-%input{type: :date, placeholder: 'yy-mm-dd'}
-
-%hr
-%h5 Lists - h5
-%ul
-  %li This is a list:
-  %li no margin 
-  %li or padding 
-  %li or bullets
-  %li (you'll need to add them back when you need 'em)
-
-%hr
-%h6 Time - h6
-%pre.ib %time.ago{datetime: Time.now.iso8601}
-results in telling us when this page was loaded:
-%time.ago.notice.flash.tip{datetime: Time.now.iso8601, title: Time.now.to_s(:long)}
-%p Note: make sure you use iso8601 or you'll get errors!
-
-
-
-
-
-
-= content_for :left_col do
-  %h2 Left Col
-  %button.btn.spin_me Start spinner
-  %script
-    $('.spin_me').toggle(function() {
-    $(this).spin('large','#0090D5');
-    }, function() {
-    $(this).spin(false);
-    });
-
-= content_for :right_col do
-  %h3 Right Col
-  %a.btn{href: '#modal', data: {toggle: 'modal', backdrop: 'static'}} Modal
-  %br
-  %button.btn{data: {toggle: 'modal', target: '#popup'}} Popup Help!
-  %br
-  = link_to 'External Popup', '/', class: 'btn', data: {toggle: 'modal', target: '#external'}
+      %hr
+      %h2 Buttons - h2
+      = f.actions do
+        = f.action :submit, label: 'Submit', as: :button, button_html: { class: 'btn left' }
+        = f.action :cancel, label: 'Cancel', as: :link, button_html: { class: 'btn btn-danger left' }
+      .btn-group
+        %button.btn.btn-success
+          %i.icon-plus.icon-white
+          Plus icon
+        %button.btn
+          %i.icon-cog
+          Cog icon
+        %button.btn.btn-danger
+          %i.icon-remove.icon-white
+          Remove icon
+      = link_to 'Bootstrap buttons docs', 'http://twitter.github.com/bootstrap/base-css.html#buttons', target: '_blank'
+
+    %hr
+    %h3 Sortable dataTable - h3
+    %table.dataTable
+      %thead
+        %tr
+          %th Name
+          %th Username
+      %tbody
+        %tr
+          %td Sally
+          %td gurlsally
+        %tr
+          %td Dave
+          %td davieboy
+        %tr
+          %td Hilary
+          %td hermahili
+
+    %hr
+    %h4 Inputs with bonuses - h4
+    %select.chzn{style: 'width:200px'}
+      %option Canada
+      %option UK
+      %option USA
+
+    %br
+    %input{type: :date, placeholder: 'yy-mm-dd'}
+
+    %hr
+    %h5 Lists - h5
+    %ul
+      %li This is a list:
+      %li no margin 
+      %li or padding 
+      %li or bullets
+      %li (you'll need to add them back when you need 'em)
+
+    %hr
+    %h6 Time - h6
+    %pre.ib %time.ago{datetime: Time.now.iso8601}
+    results in telling us when this page was loaded:
+    %time.ago.notice.flash.tip{datetime: Time.now.iso8601, title: Time.now.to_s(:long)}
+    %p Note: make sure you use iso8601 or you'll get errors!
+
+
+
+
+
+
+  .span3
+    %h3 Right Col
+    %a.btn{href: '#modal', data: {toggle: 'modal', backdrop: 'static'}} Modal
+    %br
+    %button.btn{data: {toggle: 'modal', target: '#popup'}} Popup Help!
+    %br
+    = link_to 'External Popup', '/', class: 'btn', data: {toggle: 'modal', target: '#external'}
 
 
 = content_for :popups do

data/lib/generators/speedo/install_generator.rb

@@ -23,10 +23,20 @@ module Speedo
           end
         end
       end
+      
+      def navbar
+        template 'app/views/layouts/speedo/_navbar.html.haml', 
+                 'app/views/layouts/_navbar.html.haml'
+        if_file 'app/views/layouts/application.html.haml' do |path|
+          if File.read(path).match /render 'layouts\/speedo\/navbar'/
+            gsub_file path, /render 'layouts\/speedo\/navbar'/, "render 'layouts/navbar'"
+          end
+        end
+      end
 
       # app/assets/stylesheets/speedo.css.scss
       def copy_stylesheets
-        css = ['speedo','base','layout','plugins','theme','helpers']
+        css = ['speedo','base','plugins','theme','helpers']
         css.each do |file|
           copy_file "app/assets/stylesheets/speedo/#{file}.css.scss", 
                     "app/assets/stylesheets/speedo/#{file}.css.scss"

data/lib/speedo/version.rb

@@ -1,3 +1,3 @@
 module Speedo
-  VERSION = "0.3.4"
+  VERSION = "0.4.0"
 end

data/lib/speedo.rb

@@ -5,6 +5,7 @@ require 'haml'
 require 'coffee-script'
 require 'formtastic'
 require 'formtastic-bootstrap'
+require 'bootstrap-sass'
 
 module Speedo
 end