hobo_bootstrap 2.0.0.pre1

data/README.md

@@ -0,0 +1,201 @@
+hobo_bootstrap
+==============
+<hr/>
+
+This is a theme for Hobo 1.4 (http://www.hobocentral.net) that implements the Bootstrap library (http://twitter.github.com/bootstrap/).
+
+[![index][1]][1]
+[![login][2]][2]
+
+
+
+Install instructions
+====================
+<hr/>
+
+Add this to your Gemfile
+
+    gem "hobo_bootstrap", :git => "git://github.com/suyccom/hobo_bootstrap.git"
+    gem 'will_paginate-bootstrap'
+    group :assets do
+      # ... Other stuff ... #
+      gem 'compass_twitter_bootstrap', :git => 'git://github.com/wyuenho/compass-twitter-bootstrap'
+      gem 'compass-rails'
+    end
+{.ruby}
+
+Run bundle to get the gems
+
+    bundle
+
+Rename front.css to front.scss so you can bootstrap and hobo_bootstrap like this:
+
+    /*
+     * This is the stylesheet manifest file for the front subsite (which
+     * is your whole application if you don't have any subsites).  Files
+     * or plugins referenced from here or placed in the front/ directory
+     * will be included.
+     *
+     *= require_self
+     *= require application
+     *= require hobo_rapid
+     *= require hobo_jquery
+     *= require hobo_jquery_ui
+     *= require jquery-ui/redmond
+     *= require hobo_bootstrap
+     *= require hobo_bootstrap_docs
+     *= require hobo_bootstrap_responsive
+     *= require_tree ./front
+    */
+    @import "compass_twitter_bootstrap";
+{.css}
+
+Load bootstrap javascripts in app/assets/front.js, for example:
+
+    //= require bootstrap-all
+{.javascript}
+
+Alternatively, you could require bootstrap-collapse and bootstrap-alert, since those are the only two javascript components that this theme currently requires.   However, we do plan on supporting more in the future.
+
+Change the theme in app/views/taglibs/front_site.dryml:
+
+    <include gem='hobo_bootstrap'/>
+{.dryml}
+
+
+
+
+
+Two main menu options
+=====================
+<hr/>
+
+By default, hobo_bootstrap puts every option in the top menu, like this:
+
+[![top_menu][3]][3]
+
+
+But you can also use a sub menu, like the one in the bootstrap documentation:
+[![sub_menu][4]][4]
+
+In order to enable the sub meny, add these lines to your front_site.dryml:
+
+    <extend tag="page">
+      <old-page merge nav-location="sub">
+    </extend>
+{.dryml}
+
+
+
+
+Responsive template
+===================
+<hr/>
+
+This theme includes the bootstrap responsive CSS, which makes it work nicely with mobile phones. For example:
+
+[![responsive][5]][5]
+
+
+
+Complex forms
+=============
+<hr/>
+
+By default, forms only have one column. But many you need more complex forms. Take a look at these examples:
+
+**Two columns example**
+
+[![two_columns][6]][6]
+
+    <new-page>
+      <form:>
+        <field-list: columns="2"/>
+      </form:>
+    </new-page>
+{.dryml}
+
+**Three columns, aside and double sized fields**
+
+[![three_columns_complex][7]][7]
+
+    <new-page content-size="9">
+      <aside:>
+        Hola! Soy el aside :)
+      </aside:>
+      <form:>
+        <field-list: replace>
+          <field-list size="9" columns="3" fields="name, end_date, codigo_postal"/>
+          <div class="row columns">
+            <div class="span6">
+              <single-field-list fields="description"/>
+            </div>
+            <div class="span3">
+              <single-field-list fields="responsable"/>
+            </div>
+          </div>
+          <div class="row columns">
+            <div class="span6">
+              <single-field-list fields="description"/>
+            </div>
+            <div class="span3">
+              <single-field-list fields="responsable"/>
+            </div>
+          </div>
+          <div class="row columns">
+            <div class="span9">
+              <single-field-list fields="description"/>
+            </div>
+          </div>
+          <div class="row columns">
+            <div class="span3">
+              <single-field-list fields="description"/>
+            </div>
+            <div class="span6">
+              <single-field-list fields="responsable"/>
+            </div>
+          </div>
+          <div class="row columns">
+            <div class="span3">
+              <single-field-list fields="description"/>
+            </div>
+            <div class="span3">
+              <single-field-list fields="responsable"/>
+            </div>
+            <div class="span3">
+              <single-field-list fields="responsable"/>
+            </div>
+          </div>
+        </field-list:>
+      </form:>
+    </new-page>
+{.dryml}
+
+
+
+Demo app
+========
+<hr/>
+
+I have been using a demo application to test this theme (the screenshots come from it). It has:
+* Examples of complex forms (1/2/3 columns, aside, double sized fields...)
+* Rspec "human driven" tests for the responsive CSS (they automatically resize your window and wait for you to clic on "OK" if it looks fine)
+* Examples of Jquery File Upload (http://blueimp.github.com/jQuery-File-Upload/).
+
+You can download and take a look at it on https://github.com/suyccom/sgagility
+
+
+Notes
+=====
+<hr/>
+
+Right now, you still need to keep "hobo_clean" in your Gemfile if you want to use the Ajax search enabled by default in Hobo.
+
+
+  [1]: https://github.com/suyccom/hobo_bootstrap/raw/master/screenshots/index.png
+  [2]: https://github.com/suyccom/hobo_bootstrap/raw/master/screenshots/login.png
+  [3]: https://github.com/suyccom/hobo_bootstrap/raw/master/screenshots/top_menu.png
+  [4]: https://github.com/suyccom/hobo_bootstrap/raw/master/screenshots/sub_menu.png
+  [5]: https://github.com/suyccom/hobo_bootstrap/raw/master/screenshots/responsive.png
+  [6]: https://github.com/suyccom/hobo_bootstrap/raw/master/screenshots/two_columns.png
+  [7]: https://github.com/suyccom/hobo_bootstrap/raw/master/screenshots/three_columns_complex.png

data/VERSION

@@ -0,0 +1 @@
+2.0.0.pre1

data/hobo_bootstrap.gemspec

@@ -0,0 +1,29 @@
+name = File.basename( __FILE__, '.gemspec' )
+version = File.read(File.expand_path('../VERSION', __FILE__)).strip
+require 'date'
+
+Gem::Specification.new do |s|
+
+  s.authors = ['Ignacio Huerta']
+  s.email = 'ignacio@ihuerta.net'
+  s.homepage = 'https://github.com/suyccom/hobo_bootstrap'
+  s.rubyforge_project = 'hobo'
+  s.summary = 'A bootstrap based theme for Hobo'
+  s.description = 'A bootstrap based theme for Hobo'
+
+  s.add_runtime_dependency('hobo', ["~> #{version}"])
+  s.add_runtime_dependency "compass_twitter_bootstrap", "~> 2.0.3"
+  s.add_runtime_dependency "compass-rails", "~> 1.0.3"
+  s.add_runtime_dependency "will_paginate-bootstrap", "~> 0.2.1"
+
+  s.files = `git ls-files -x #{name}/* -z`.split("\0")
+
+  s.name = name
+  s.version = version
+  s.date = Date.today.to_s
+
+  s.required_rubygems_version = ">= 1.3.6"
+  s.rdoc_options = ["--charset=UTF-8"]
+  s.require_paths = ["lib", "vendor", "taglibs"]
+
+end

data/lib/hobo_bootstrap.rb

@@ -0,0 +1,20 @@
+# Sub dependencies written in the gemspec are not loaded by default:
+#   http://stackoverflow.com/questions/6960078
+# We need to require them here, so we can load the JS from bootstrap
+require 'compass_twitter_bootstrap'
+require 'compass-rails'
+require 'will_paginate-bootstrap'
+
+module HoboBootstrap
+
+  VERSION = File.read(File.expand_path('../../VERSION', __FILE__)).strip
+  @@root = Pathname.new File.expand_path('../..', __FILE__)
+  def self.root; @@root; end
+
+  EDIT_LINK_BASE = "https://github.com/iox/hobo/edit/bootstrap_template/hobo_bootstrap"
+
+  require 'hobo_bootstrap/railtie' if defined?(Rails)
+
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/hobo_bootstrap/railtie.rb

@@ -0,0 +1,6 @@
+require 'hobo_bootstrap'
+require 'rails'
+module HoboBootstrap
+  class Railtie < Rails::Railtie
+  end
+end

data/taglibs/buttons.dryml

@@ -0,0 +1,8 @@
+<!-- Add some bootstrap classes to submit buttons -->
+<def tag="submit" attrs="label, image">
+  <input if="&image" type="image" src="&image" merge-attrs class="image-button submit-button"/>
+  <else>
+    <input type="submit" value="#{label}" merge-attrs class="btn btn-primary button submit-button"/>
+  </else>
+</def>
+

data/taglibs/card.dryml

@@ -0,0 +1,7 @@
+<!-- `<card>` with bootstrap styling -->
+<def tag="card" polymorphic>
+  <div class="card well" param="default" merge-attrs>
+    <header param/>
+    <div param="body" if="&all_parameters[:body]"/>
+  </div>
+</def>

data/taglibs/delete_button.dryml

@@ -0,0 +1,3 @@
+<extend tag="delete-button">
+  <old-delete-button class="btn" merge/>
+</extend>

data/taglibs/edit_page.dryml

@@ -0,0 +1,5 @@
+<extend tag="edit-page">
+  <old-edit-page: merge>
+    <delete-button: class="pull-right"/>
+  </old-edit-page:>
+</extend>

data/taglibs/flash_message.dryml

@@ -0,0 +1,13 @@
+<!-- Renders a Rails flash message with bootstrap style
+
+### Attributes
+
+- `type`: chooses which flash message to display and also the box style.   The default is `notice`.   `error`, `success` and `info` also have styling.
+ -->
+<def tag="flash-message" attrs="type">
+  <% type = type ? type.to_sym : :notice -%>
+  <div class="alert alert-#{type}" if="&flash[type]" merge-attrs>
+    <a class="close" data-dismiss="alert" href="#" param="close">×</a>
+    <span param="default"><%= flash[type] %></span>
+  </div>
+</def>

data/taglibs/forms.dryml

@@ -0,0 +1,183 @@
+<!--<def tag="field-list">-->
+<!--  <feckless-fieldset class="horizontal" merge/>-->
+<!--</def>-->
+
+
+
+
+
+
+
+
+<def tag="field-list">
+  <bootstrap-fields merge/>
+</def>
+
+<def tag="bootstrap-fields" attrs="size, columns, tag, no-edit, required, no-blanks">
+  <% tag ||= scope.in_form ? "input" : "view"; no_edit ||= "skip" -%>
+  <% required ||= "" ; required = comma_split(required.gsub('-', '_')) -%>
+  <div merge-attrs="&attributes - attrs_for(:with_fields)">
+    <legend param if="&all_parameters[:legend]" />
+    <with-fields-grouped merge-attrs="&attributes & attrs_for(:with_fields)" size="&size" columns="&columns">
+
+    <% field_name = this_field_name
+       input_attrs = {:no_edit => no_edit} if tag == "input" && no_edit == "disable"
+       field_method = scope.field_name.to_s.sub('?', '').gsub('.', '-')
+       id_for_this = param_name_for_this.gsub('[', '_').gsub(']', '')
+    -%>
+      <div
+         class="control-group #{'required' if required.include?(scope.field_name)}" 
+         unless="&(tag == 'input' && no_edit == 'skip' && !can_edit?) || (tag == 'view' && no_blanks && this.blank?)"
+         param="#{field_method}-field">
+
+        <label class="control-label" for="&id_for_this" param="#{field_method}-label" unless="&field_name.blank?">
+          <%= field_name %>
+        </label>
+
+        <div class="controls">
+          <do param="#{field_method}-view">
+            <do param="view"><call-tag tag="&tag" param="#{field_method}-tag" merge-attrs="&input_attrs"/></do>
+          </do>
+          <p param="#{field_method}-help" class="help-block" if="&tag.to_sym == :input && !this_field_help.blank?">
+            <%= this_field_help %>
+          </p>
+        </div>
+
+      </div>
+    </with-fields-grouped>
+  </div>
+</def>
+
+
+<extend tag="form">
+  <old-form: class="form-horizontal" merge>
+    <actions: class="form-actions"/>
+  </old-form:>
+</extend>
+
+
+
+
+
+
+
+
+
+<!--
+Like `<with-fields>`, but groups fields into columns in a bootstrap-friendly fashion.
+
+### Attributes
+
+Supports all attributes supported by `<with-fields>` plus:
+
+- size: # of columns in the grid system.  Default is 12
+- columns: # of columns.  Default is 1.
+
+-->
+<def tag="with-fields-grouped" attrs="size, columns, force-all"><%
+  field_names = with_fields_helper(attributes)
+  field_names = field_names.select {|f| can_view?(this, f)} unless force_all
+  columns = 1 unless columns
+  columns = columns.to_i
+  size = 12 unless size
+  size = size.to_i
+  span_size = size / columns
+  field_names_groups = field_names.in_groups(columns, false)
+  row_classes = "row"
+  row_classes += " columns" if columns > 1
+  %><div class="#{row_classes}"> <%
+  field_names_groups.each do |field_names_group|
+    %> <div class="span#{span_size}"> <%
+    field_names_group.each do |field|
+      %><set-scoped field-name="&field"><%
+      if field == "this"
+        %><do param="default"/><%
+      else
+        %><with field="&field"><do param="default"/></with><%
+      end
+      %></set-scoped><%
+    end
+    %> </div> <%
+  end 
+  %> </div>
+</def>
+
+<!-- This tag is used in multiple column forms, when you need a double sized field (address for example) that is still aligned with the rest -->
+<def tag="single-field-list" attrs="tag, no-edit, required, no-blanks">
+  <% tag ||= scope.in_form ? "input" : "view"; no_edit ||= "skip" -%>
+  <% required ||= "" ; required = comma_split(required.gsub('-', '_')) -%>
+  <legend param if="&all_parameters[:legend]" />
+  <with-fields merge-attrs="&attributes & attrs_for(:with_fields)">
+  
+  <% field_name = this_field_name
+     input_attrs = {:no_edit => no_edit} if tag == "input" && no_edit == "disable"
+     field_method = scope.field_name.to_s.sub('?', '').gsub('.', '-')
+     id_for_this = param_name_for_this.gsub('[', '_').gsub(']', '')
+  -%>
+    <div 
+      class="control-group #{'required' if required.include?(scope.field_name)}" 
+      unless="&(tag == 'input' && no_edit == 'skip' && !can_edit?) || (tag == 'view' && no_blanks && this.blank?)" 
+      param="#{field_method}-field">
+      
+      <label class="control-label" for="&id_for_this" param="#{field_method}-label" unless="&field_name.blank?">
+        <%= field_name %>
+      </label>
+      
+      <div class="controls">
+        <do param="#{field_method}-view">
+          <do param="view"><call-tag tag="&tag" param="#{field_method}-tag" merge-attrs="&input_attrs"/></do>
+        </do>
+        <p param="#{field_method}-help" class="help-block" if="&tag.to_sym == :input && !this_field_help.blank?">
+          <%= this_field_help %>
+        </p>
+      </div>
+      
+    </div>
+  </with-fields>
+</def>
+
+
+<!-- This field list creates a field list in just one line using -->
+<def tag="one-line-field-list" attrs="tag, no-edit, required, no-blanks">
+  <% tag ||= scope.in_form ? "input" : "view"; no_edit ||= "skip" -%>
+  <% required ||= "" ; required = comma_split(required.gsub('-', '_')) -%>
+  <legend param if="&all_parameters[:legend]" />
+  <with-fields merge-attrs="&attributes & attrs_for(:with_fields)">
+  
+    <% field_name = this_field_name
+       input_attrs = {:no_edit => no_edit} if tag == "input" && no_edit == "disable"
+       field_method = scope.field_name.to_s.sub('?', '').gsub('.', '-')
+       id_for_this = param_name_for_this.gsub('[', '_').gsub(']', '')
+    -%>
+
+    <do param="#{field_method}-view">
+      <do param="view">
+        <call-tag tag="&tag" placeholder="&field_name" param="#{field_method}-tag" merge-attrs="&input_attrs"/>
+      </do>
+    </do>
+    <p param="#{field_method}-help" class="help-block" if="&tag.to_sym == :input && !this_field_help.blank?">
+      <%= this_field_help %>
+    </p>
+      
+  </with-fields>
+</def>
+
+
+
+
+<def tag="one-line-form" attrs="fields">
+  <div class="row">
+    <div class="span12">
+      <form class="inline-form well" merge-attrs>
+        <field-list: replace>
+          <one-line-field-list fields="&fields"/>
+        </field-list:>
+        <actions: replace>
+          <button class="btn btn-primary" type="submit">
+            +
+          </button>
+        </actions:>
+      </form>
+    </div>
+  </div>
+</def>