voluntary 0.2.2 → 0.2.3

data/CHANGELOG.md

@@ -0,0 +1,88 @@
+## unreleased ##
+
+## 0.2.3 (March 15, 2015) ##
+
+*   #16 Implements scope liked_by for likeables.
+*   #45 Rewrite of API base controller and initialization of API V1 routes.
+*   Introduces Likeable.likes_or_dislikes_for.
+*   Introduces new window function jquery_ui_tabs_initialization.
+*   #37 Integrates selectize plugin. Used at new tournament form of competition product.
+*   Make .remote_modal_link click handler work with other elements than links through data attribute url.
+*   Disables closing of modal on pressing escape key.
+*   Introduces modal JavaScript response partial. See protip https://coderwall.com/p/eu9sqa/multi-step-form-wizard-responses-for-ajax-modals-and-html-requests
+*   Option to yield sidebar in application layout.
+*   Introduces User#best_available_name.
+*   #26 Add event handler for toggleable checkboxes.
+*   Sets GitHub ribbon to voluntary repository in application layout which can be overridden in each product through controller method voluntary_application_repository_path.
+*   #20 #23 #32 #33 #34 Adds JavaScript Plugin CompetitiveList used at music metadata enrichment music year in review top albums and songs.
+*   Adds jquery.multisortable.js used at music metadata enrichment music year in review top albums and songs.
+*   #19 Adds Twitter Bootstrap datetime picker. 
+*   Implements shared twitter bootstrap layout 'boolean control group'.
+*   Sets width of #bootstrap_modal to 800px.
+*   Implements shared twitter bootstrap layout partials 'control_group' ...
+*   Implements new option :namespace for Voluntary::ShowHelper#show_actions.
+
+## 0.2.2 (February 5, 2015) ##
+
+*   #17 Show progress spinner gif for Ajax tabs.
+*   Implements option to render custom breadcrumbs.
+*   Makes stylesheets and javascripts of application layout variable.
+*   Adds new view helper name_with_apostrophe.
+*   Yield page title and search in application layout.
+*   Disable scrolling in modal windows because of autocomplete lists cut off before.
+*   Sets global font size from 10px to 12px.
+*   Fixes ui tab paging links. Implements remote links and remote modal link handler.
+*   #14 last.fm authentication.
+*   #13 Facebook authentication.
+*   #12 Google authentication.
+
+## 0.2.1 (January 6, 2015) ##
+
+*   Small changes not worth mentioning.
+
+## 0.2.0 (March 22, 2014) ##
+
+*   Rails 4 upgrade.
+*   Adds new resource organization.
+*   after initialize callback for authorization ability.rb
+*   after_resource_has_many callback for main navigation
+*   Several bugfixes and small features.
+
+## 0.1.0 (October 13, 2013) ##
+
+*   voluntary_translation support with new model column.
+
+## 0.1.0.rc4 (September 9, 2013) ##
+
+*   Select product in /workflow/user/products/:product_id/areas/:id
+
+## 0.1.0.rc3 (September 6, 2013) ##
+
+*   Fixes invalid user update form by initializing presenter.
+
+## 0.1.0.rc2 (July 31, 2013) ##
+
+*   Support nesting of areas. #1 
+  
+## 0.1.0.rc1 (June 7, 2013) ##
+
+*   Updates twitter bootstrap and jquery ui.
+*   Removes rails_info dependency.
+*   Paints navigation black and more responsive.
+*   Allow mixin of cancan authorization abilities in products and client applications.
+*   Several small bug fixes and cleanup.
+*   Removes "twitter" (auth) dependencies
+
+## 0.0.3 (November 19, 2012) ##
+
+*   Adds vendor_extensions to gem specification's directories.
+
+## 0.0.2 (November 19, 2012) ##
+
+*   Fixes some bugs regarding integration of product engines.
+
+*   Adds product dummy generator.
+
+## 0.0.1 (November 11, 2012) ##
+
+*   Initial version.

data/README.rdoc

@@ -12,7 +12,7 @@ Run this in your console:
 
   rvm --create use 1.9.3@your_crowdsourcing_platform_name
   gem update bundler
-  gem install rails -v 3.2.14 --no-rdoc --no-ri  
+  gem install rails -v 4.0.13 --no-rdoc --no-ri  
   rails new your_crowdsourcing_platform_name
   cd your_crowdsourcing_platform_name
 
@@ -74,9 +74,9 @@ Run this in your console:
   bundle install
   # change config/boot.rb to require bundler like here: https://github.com/volontariat/voluntary_scholarship/blob/master/dummy/config/boot.rb
   # change database names to #{product_name}_#{environment} and customize user credentials in config/database.yml
-  # add gitignore file from voluntary: https://github.com/volontariat/voluntary/blob/master/.gitignore
   bundle exec rake db:create:all && bundle exec rails g voluntary:product_dummy # confirm all overwrite questions except of Gemfile
   cd ..
+  # add gitignore file from voluntary: https://github.com/volontariat/voluntary/blob/master/.gitignore
   rails g migration add_product_name_product
   # fill migration file with template: https://github.com/volontariat/voluntary_scholarship/blob/master/db/migrate/20140306201232_add_scholarship_product.rb
   cd dummy

data/app/assets/javascripts/voluntary/application.js

@@ -2,5 +2,8 @@
 //= require jquery_ujs
 //= require jquery-ui-bootstrap
 //= require twitter/bootstrap
+//= require bootstrap-datetimepicker
 //= require jquery.tokeninput
+//= require selectize
+//= require competitive_list
 //= require_tree .

data/app/assets/javascripts/voluntary/base.js.coffee

@@ -5,33 +5,37 @@ $(document).ready ->
 
   $( '.accordions' ).each (k, v) ->
     $(v).accordion({ autoHeight: false });
-    
-  $('.tabs').each (k, v) ->
-    $(v).tabs
-      autoHeight: false
-      beforeActivate: (event, ui) ->
-        unless ui.newTab.find('a').attr('href').indexOf('#') == 0
-          ui.newTab.find('.ajax_spinner').show()
-          ui.newPanel.empty()
-          
-      beforeLoad: (event, ui) ->
-        ui.jqXHR.error ->
+  
+  window.jquery_ui_tabs_initialization = ->  
+    $('.tabs').each (k, v) ->
+      $(v).tabs
+        autoHeight: false
+        beforeActivate: (event, ui) ->
+          unless ui.newTab.find('a').attr('href').indexOf('#') == 0
+            ui.newTab.find('.ajax_spinner').show()
+            ui.newPanel.empty()
+            
+        beforeLoad: (event, ui) ->
+          ui.jqXHR.error ->
+            unless ui.tab.find('a').attr('href').indexOf('#') == 0
+              ui.tab.find('.ajax_spinner').hide()
+            
+            json = null
+            
+            try
+              json = jQuery.parseJSON(ui.jqXHR.responseText)
+            catch e
+            
+            error = if json && json['error'] then json['error'] else 'Something went wrong'
+            
+            ui.panel.html error
+      
+        load: (event, ui) ->
           unless ui.tab.find('a').attr('href').indexOf('#') == 0
             ui.tab.find('.ajax_spinner').hide()
-          
-          json = null
-          
-          try
-            json = jQuery.parseJSON(ui.jqXHR.responseText)
-          catch e
-          
-          error = if json && json['error'] then json['error'] else 'Something went wrong'
-          
-          ui.panel.html error
-    
-      load: (event, ui) ->
-        unless ui.tab.find('a').attr('href').indexOf('#') == 0
-          ui.tab.find('.ajax_spinner').hide()
+            window.jquery_ui_tabs_initialization()
+            
+  window.jquery_ui_tabs_initialization()
     
   $(document).on "click", ".ui-tabs-panel .pagination a", (event) ->
     event.preventDefault()
@@ -82,6 +86,8 @@ $(document).ready ->
   $( ".datepicker" ).each (k, v) ->
     $(v).datepicker({ dateFormat: "yy-mm-dd", changeYear: true, yearRange: "c-100:c+10" });
     
+  $('.datetime_picker').datetimepicker()
+    
   $(document.body).on "click", ".remote_links", (event) ->
     $this = $(this)
     
@@ -93,13 +99,26 @@ $(document).ready ->
   $(document.body).on "click", ".remote_modal_link", (event) ->
     $this = $(this)
     
-    $.ajax(url: $this.attr('href'), type: "GET", dataType: "html").success (data) ->
+    url = if $this.data('url') then $this.data('url') else $this.attr('href')
+    
+    $.ajax(url: url, type: "GET", dataType: "html").success (data) ->
       $('#bootstrap_modal').html(data)
-      $('#bootstrap_modal').modal('show')
+      $('#bootstrap_modal').modal(show: true, keyboard: false)
       
     event.preventDefault()
     
   $(document.body).on "click", "#close_bootstrap_modal_button", (event) ->
     $('#bootstrap_modal').modal('hide')
     event.preventDefault()
-    
+
+  $(document.body).on "click", "#toggle_checkboxes_checkbox", (event) ->
+    if $('.toggleable_checkbox:checked').length == 0
+      $('.toggleable_checkbox').prop('checked', true)
+    else
+      $('.toggleable_checkbox').prop('checked', false)
+      
+  $('.bootstrap_tooltip').tooltip()
+
+  $('.selectize_select').selectize
+    create: true,
+    sortField: 'text'

data/app/assets/javascripts/voluntary/lib/jquery.multisortable.js

@@ -0,0 +1,254 @@
+/**
+ * jquery.multisortable.js - v0.2
+ * https://github.com/shvetsgroup/jquery.multisortable
+ *
+ * Author: Ethan Atlakson, Jay Hayes, Gabriel Such, Alexander Shvets
+ * Last Revision 3/16/2012
+ * multi-selectable, multi-sortable jQuery plugin
+ */
+
+!function($) {
+
+  $.fn.multiselectable = function(options) {
+    if (!options) {
+      options = {}
+    }
+    options = $.extend({}, $.fn.multiselectable.defaults, options);
+
+    function mouseDown(e) {
+      var item = $(this),
+        parent = item.parent(),
+        myIndex = item.index();
+
+      var prev = parent.find('.multiselectable-previous');
+      // If no previous selection found, start selecting from first selected item.
+      prev = prev.length ? prev : $(parent.find('.' + options.selectedClass)[0]).addClass('multiselectable-previous');
+      var prevIndex = prev.index();
+
+      if (e.ctrlKey || e.metaKey) {
+        if (item.hasClass(options.selectedClass)) {
+          item.removeClass(options.selectedClass).removeClass('multiselectable-previous')
+          if (item.not('.child').length) {
+            item.nextUntil(':not(.child)').removeClass(options.selectedClass);
+          }
+        }
+        else {
+          parent.find('.multiselectable-previous').removeClass('multiselectable-previous');
+          item.addClass(options.selectedClass).addClass('multiselectable-previous')
+          if (item.not('.child').length) {
+            item.nextUntil(':not(.child)').addClass(options.selectedClass);
+          }
+        }
+      }
+
+      if (e.shiftKey) {
+        var last_shift_range = parent.find('.multiselectable-shift');
+        last_shift_range.removeClass(options.selectedClass).removeClass('multiselectable-shift');
+
+        var shift_range;
+        if (prevIndex < myIndex) {
+          shift_range = item.prevUntil('.multiselectable-previous').add(prev).add(item);
+        }
+        else if (prevIndex > myIndex) {
+          shift_range = item.nextUntil('.multiselectable-previous').add(prev).add(item);
+        }
+        shift_range.addClass(options.selectedClass).addClass('multiselectable-shift');
+      }
+      else {
+        parent.find('.multiselectable-shift').removeClass('multiselectable-shift');
+      }
+
+      if (!e.ctrlKey && !e.metaKey && !e.shiftKey) {
+        parent.find('.multiselectable-previous').removeClass('multiselectable-previous');
+        if (!item.hasClass(options.selectedClass)) {
+          parent.find('.' + options.selectedClass).removeClass(options.selectedClass);
+          item.addClass(options.selectedClass).addClass('multiselectable-previous');
+          if (item.not('.child').length) {
+            item.nextUntil(':not(.child)').addClass(options.selectedClass);
+          }
+        }
+      }
+
+      options.mousedown(e, item);
+    }
+
+    function click(e) {
+      if ( $(this).is('.ui-draggable-dragging') ) {
+        return;
+      }
+
+      var item = $(this), parent = item.parent();
+
+      // If item wasn't draged and is not multiselected, it should reset selection for other items.
+      if (!e.ctrlKey && !e.metaKey && !e.shiftKey) {
+        parent.find('.multiselectable-previous').removeClass('multiselectable-previous');
+        parent.find('.' + options.selectedClass).removeClass(options.selectedClass);
+        item.addClass(options.selectedClass).addClass('multiselectable-previous');
+        if (item.not('.child').length) {
+          item.nextUntil(':not(.child)').addClass(options.selectedClass);
+        }
+      }
+
+      options.click(e, item);
+    }
+
+    return this.each(function() {
+      var list = $(this);
+
+      if (!list.data('multiselectable')) {
+        list.data('multiselectable', true)
+          .delegate(options.items, 'mousedown', mouseDown)
+          .delegate(options.items, 'click', click)
+          .disableSelection();
+      }
+    })
+  };
+
+  $.fn.multiselectable.defaults = {
+    click: function(event, elem) {},
+    mousedown: function(event, elem) {},
+    selectedClass: 'selected',
+    items: 'li'
+  };
+
+
+  $.fn.multisortable = function(options) {
+    if (!options) {
+      options = {}
+    }
+    var settings = $.extend({}, $.fn.multisortable.defaults, options);
+
+    function regroup(item, list) {
+      if (list.find('.' + settings.selectedClass).length > 0) {
+        var myIndex = item.data('i');
+
+        var itemsBefore = list.find('.' + settings.selectedClass).filter(function() {
+          return $(this).data('i') < myIndex
+        }).css({
+            position: '',
+            width: '',
+            left: '',
+            top: '',
+            zIndex: ''
+          });
+
+        item.before(itemsBefore);
+
+        var itemsAfter = list.find('.' + settings.selectedClass).filter(function() {
+          return $(this).data('i') > myIndex
+        }).css({
+            position: '',
+            width: '',
+            left: '',
+            top: '',
+            zIndex: ''
+          });
+
+        item.after(itemsAfter);
+
+        setTimeout(function() {
+          itemsAfter.add(itemsBefore).addClass(settings.selectedClass);
+        }, 0);
+      }
+    }
+
+    return this.each(function() {
+      var list = $(this);
+
+      //enable multi-selection
+      list.multiselectable({
+        selectedClass: settings.selectedClass,
+        click: settings.click,
+        items: settings.items,
+        mousedown: settings.mousedown
+      });
+
+      //enable sorting
+      options.cancel = settings.items + ':not(.' + settings.selectedClass + ')';
+      options.placeholder = settings.placeholder;
+      options.start = function(event, ui) {
+        if (ui.item.hasClass(settings.selectedClass)) {
+          var parent = ui.item.parent();
+
+          //assign indexes to all selected items
+          parent.find('.' + settings.selectedClass).each(function(i) {
+            $(this).data('i', i);
+          });
+
+          // adjust placeholder size to be size of items
+          var height = parent.find('.' + settings.selectedClass).length * ui.item.outerHeight();
+          ui.placeholder.height(height);
+        }
+
+        settings.start(event, ui);
+      };
+
+      options.stop = function(event, ui) {
+        regroup(ui.item, ui.item.parent());
+        settings.stop(event, ui);
+      };
+
+      options.sort = function(event, ui) {
+        var parent = ui.item.parent(),
+          myIndex = ui.item.data('i'),
+          top = parseInt(ui.item.css('top').replace('px', '')),
+          left = parseInt(ui.item.css('left').replace('px', ''));
+
+        // fix to keep compatibility using prototype.js and jquery together
+        $.fn.reverse = Array.prototype._reverse || Array.prototype.reverse
+
+        var height = 0;
+        $('.' + settings.selectedClass, parent).filter(function() {
+          return $(this).data('i') < myIndex;
+        }).reverse().each(function() {
+            height += $(this).outerHeight();
+            $(this).css({
+              left: left,
+              top: top - height,
+              position: 'absolute',
+              zIndex: 1000,
+              width: ui.item.width()
+            })
+          });
+
+        height = ui.item.outerHeight();
+        $('.' + settings.selectedClass, parent).filter(function() {
+          return $(this).data('i') > myIndex;
+        }).each(function() {
+            var item = $(this);
+            item.css({
+              left: left,
+              top: top + height,
+              position: 'absolute',
+              zIndex: 1000,
+              width: ui.item.width()
+            });
+
+            height += item.outerHeight();
+          });
+
+        settings.sort(event, ui);
+      };
+
+      options.receive = function(event, ui) {
+        regroup(ui.item, ui.sender);
+        settings.receive(event, ui);
+      };
+
+      list.sortable(options).disableSelection();
+    })
+  };
+
+  $.fn.multisortable.defaults = {
+    start: function(event, ui) {},
+    stop: function(event, ui) {},
+    sort: function(event, ui) {},
+    receive: function(event, ui) {},
+    click: function(event, elem) {},
+    mousedown: function(event, elem) {},
+    selectedClass: 'selected',
+    placeholder: 'placeholder',
+    items: 'li'
+  };
+
+}(jQuery);

data/app/assets/stylesheets/voluntary/application.css

@@ -13,6 +13,8 @@
  *= require token-input-facebook
  *= require twitter/bootstrap
  *= require jquery-ui-bootstrap
+ *= require selectize
+ *= require selectize.bootstrap2
  *= require 'voluntary/bootstrap_and_overrides'
  *= require 'voluntary/base'
  */

data/app/assets/stylesheets/voluntary/base.css.sass

@@ -63,4 +63,10 @@ html, body, div
   
 .likes_and_dislikes_table td
   background-color: transparent !important
-  border-top: 0px !important
+  border-top: 0px !important
+  
+.multisortable li.selected
+  outline: 1px solid red
+  
+.selectize-input
+  width: 216px

data/app/assets/stylesheets/voluntary/bootstrap_and_overrides.css.sass

@@ -1,4 +1,5 @@
 @import "twitter/bootstrap/responsive"
+@import 'bootstrap-datetimepicker'
 
 .list-striped 
   li:nth-child(odd)
@@ -11,4 +12,7 @@
   overflow-y: visible
   
 .scrollable-modal-body
-  overflow-y: auto
+  overflow-y: auto
+  
+#bootstrap_modal
+  width: 800px !important

data/app/controllers/concerns/voluntary/v1/base_controller.rb

@@ -8,7 +8,8 @@ module Voluntary
         rescue_from ActiveRecord::RecordNotFound, with: :not_found
         rescue_from Mongoid::Errors::DocumentNotFound, with: :not_found
         
-        helper_method :parent, :application_navigation, :navigation_product_path, :navigation_product_name, :voluntary_application_stylesheets, :voluntary_application_javascripts
+        helper_method :parent, :application_navigation, :navigation_product_path, :navigation_product_name, :voluntary_application_stylesheets
+        helper_method :voluntary_application_javascripts, :voluntary_application_repository_path
       end
       
       def voluntary_application_stylesheets
@@ -18,6 +19,10 @@ module Voluntary
       def voluntary_application_javascripts
         ['voluntary/application', 'application'] 
       end
+      
+      def voluntary_application_repository_path
+        'volontariat/voluntary'
+      end
           
       def parent
         @parent

data/app/controllers/voluntary/api/v1/base_controller.rb

@@ -0,0 +1,11 @@
+module Voluntary
+  module Api
+    module V1
+      class BaseController < ActionController::Base #ActionController::Metal
+        #include ActionController::Rendering        # enables rendering
+        #include ActionController::MimeResponds     # enables serving different content types like :xml or :json
+        #include AbstractController::Callbacks      # callbacks for your authentication logic
+      end
+    end
+  end
+end

data/app/helpers/voluntary/show_helper.rb

@@ -53,11 +53,11 @@ module Voluntary
       end
     end
     
-    def show_actions
+    def show_actions(options = {})
       result  = content_tag :dt, raw('&nbsp')
       result += content_tag :dd, render(
         partial: 'shared/resource/actions', locals: { 
-          type: root_model_class_name(resource).tableize, resource: resource 
+          type: root_model_class_name(resource).tableize, resource: resource, namespace: options[:namespace] 
         }
       )
        

data/app/models/concerns/likeable.rb

@@ -8,9 +8,20 @@ module Likeable
     has_many :likers, class_name: 'User', through: :likes, source: :user
     has_many :dislikes, -> { where(positive: false) }, class_name: 'Like', dependent: :delete_all, as: :target
     has_many :dislikers, class_name: 'User', through: :dislikes, source: :user
+    
+    scope :liked_by, ->(user_id) do
+      select('music_videos.*, likes.created_at AS liked_at').joins('RIGHT JOIN likes ON likes.positive = 1 AND likes.target_type = "MusicVideo" AND likes.target_id = music_videos.id').
+      where('likes.user_id = ? AND music_videos.id IS NOT NULL', user_id)
+    end
   end
   
   def update_likes_counter
     self.class.where(id: self.id).update_all likes_count: self.likes.count, dislikes_count: self.dislikes.count
   end
+  
+  module ClassMethods
+    def likes_or_dislikes_for(user, ids)
+       user.likes_or_dislikes.for_targets(name, ids).index_by(&:target_id)
+    end
+  end
 end

data/app/models/user.rb

@@ -101,6 +101,10 @@ class User < ActiveRecord::Base
     [first_name, last_name].join(' ')
   end
   
+  def best_available_name
+    lastfm_user_name || full_name
+  end
+  
   private
   
   def set_main_role

data/app/views/layouts/application.html.erb

@@ -13,6 +13,10 @@
   
   <%= render 'layouts/shared/navigation' %>
   
+  <% if voluntary_application_repository_path.present? %>
+  <a href="https://github.com/<%= voluntary_application_repository_path %>"><img style="position: absolute; top: 41px; right: 0; border: 0; z-index: 100;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
+  <% end %>
+  
   <section id="dialog">
     <img alt="Ajax-loader-small" class="hide " id="dialog_body_spinner" src="<%=image_path('voluntary/spinner.gif')%>"/>
     <div id="dialog_body"/>
@@ -27,7 +31,7 @@
     </div>
 <% end %>    
     <div class="row-fluid">
-<% if sidenav(@sidenav_links_count).present? || content_for?(:search) %>
+<% if sidenav(@sidenav_links_count).present? || content_for?(:search) || content_for?(:sidebar) %>
       <div class="span9">
         <% if content_for?(:breadcrumbs) %>
           <div class="nav">
@@ -43,6 +47,8 @@
         <%= yield :search %>
         
         <%= sidenav(@sidenav_links_count) %>
+        
+        <%= yield :sidebar %>
       </div>
 <% else %>
       <div class="span12">

data/app/views/shared/_modal_javascript_response.js.erb

@@ -0,0 +1,31 @@
+<% namespace ||= nil %>
+<% message = flash[:notice].present? ? flash[:notice].clone : nil %>
+<% flash.delete(:notice) %>
+<% message = flash[:alert].present? ? flash[:alert].clone : message %>
+<% flash.delete(:alert) %>
+<% ajax_data ||= {} %>
+<% ajax_method ||= :get %>
+
+<% if @path.present? %>
+  $.ajax({ url: "<%= @path %>", data: <%= raw ajax_data.to_json %>, type: "<%= ajax_method.to_s.upcase %>", dataType: "script"}).done(function(data) {
+    eval(data);
+    <%= message.present? ? raw('alert("' + message + '");') : '' %>
+  })
+  .fail(function(data) {
+    <%= message.present? ? raw('alert("' + message + '");') : '' %>
+    alert("Failed to load <%= @path %>!");
+  });
+<% elsif @template.present? %>
+  $("#bootstrap_modal").html("<%= escape_javascript(
+    render(
+      partial: 'shared/layouts/twitter_bootstrap/modal', 
+      locals: { 
+        title: title, 
+        body: render(template: "#{namespace}#{@template}.html")  
+      }
+    ) 
+  ) %>");
+  <%= message.present? ? raw('alert("' + message + '");') : '' %>
+<% elsif message.present? %>
+  <%= message.present? ? raw('alert("' + message + '");') : '' %>
+<% end %>

data/app/views/shared/layouts/twitter_bootstrap/_control_group.html.erb

@@ -0,0 +1,11 @@
+<% id ||= field.match(/id="([^"]*)"/)[1] %>
+<% required ||= false %>
+<% required_class = required ? ' required' : ' optional' %>
+<div class="control-group string<%= required_class %> <%= id %>">
+  <label for="<%= id %>" class="string<%= required_class %> control-label">
+    <% if required %><abbr title="required">*</abbr><% end %> <%= label %>
+  </label>
+  <div class="controls">
+    <%= field %>
+  </div>
+</div>