Permalink
Browse files

Update AMD wrapper for templates. Create a separate distribution fold…

…er for AMD files. Ref #77
  • Loading branch information...
1 parent 225e027 commit d78524a25f549fa1bfcd121f6589ba52c1642e1c @powmedia committed Jun 29, 2012
@@ -0,0 +1,65 @@
+.bbf-jui-date input, .bbf-jui-datetime input {
+ width: 100px;
+ text-align: center;
+}
+
+ .bbf-jui-datetime input {
+ margin-right: 1em;
+ }
+
+ .bbf-jui-datetime select {
+ width: 50px;
+ text-align: center;
+ }
+
+
+
+.bbf-jui-list {
+ list-style-type: none;
+}
+
+ .bbf-jui-list ul {
+ border: 1px solid #ccc;
+ border-bottom: none;
+ max-height: 150px;
+ overflow: auto;
+ margin: 0;
+ padding: 0;
+ }
+
+ .bbf-jui-list li {
+ border-top: 1px solid #ccc;
+ border-bottom: 1px solid #ccc;
+ height: 16px;
+ background: #fff;
+ padding: 4px;
+ margin: 0;
+ list-style-type: none;
+ margin-top: -1px;
+ position: relative;
+
+ }
+ .bbf-jui-list .bbf-list-sortable li {
+ cursor: move;
+ }
+
+ .bbf-jui-list .bbf-list-actions {
+ position: absolute;
+ top: 2px;
+ right: 2px;
+ }
+
+ .bbf-jui-list .bbf-list-actions button {
+ width: 19px;
+ height: 19px;
+ }
+
+ .bbf-jui-list .bbf-list-add {
+ width: 100%;
+ height: 20px;
+ margin-top: -2px;
+ }
+
+ .bbf-jui-list .bbf-list-editor {
+ width: 98%;
+ }
@@ -0,0 +1,43 @@
+/* Date */
+.bbf-date .bbf-date {
+ width: 4em
+}
+
+.bbf-date .bbf-month {
+ width: 9em;
+}
+
+.bbf-date .bbf-year {
+ width: 5em;
+}
+
+
+/* DateTime */
+.bbf-datetime select {
+ width: 4em;
+}
+
+
+/* List */
+.bbf-list .bbf-add {
+ margin-top: -10px
+}
+
+.bbf-list li {
+ margin-bottom: 5px
+}
+
+.bbf-list .bbf-del {
+ margin-left: 4px
+}
+
+
+/* List.Modal */
+.bbf-list-modal {
+ cursor: pointer;
+ border: 1px solid #ccc;
+ width: 208px;
+ border-radius: 3px;
+ padding: 4px;
+ color: #555;
+}
@@ -0,0 +1,89 @@
+/**
+ * Requirements when customising templates:
+ * - Each template must have one 'parent' element tag.
+ * - "data-type" attributes are required.
+ * - The main placeholder tags such as the following are required: fieldsets, fields
+ */
+define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
+ var Form = Backbone.Form;
+
+
+ //TWITTER BOOTSTRAP TEMPLATES
+ //Requires Bootstrap 2.x
+ Form.setTemplates({
+
+ //HTML
+ form: '\
+ <form class="form-horizontal">{{fieldsets}}</form>\
+ ',
+
+ fieldset: '\
+ <fieldset>\
+ <legend>{{legend}}</legend>\
+ {{fields}}\
+ </fieldset>\
+ ',
+
+ field: '\
+ <div class="control-group field-{{key}}">\
+ <label class="control-label" for="{{id}}">{{title}}</label>\
+ <div class="controls">\
+ <div class="input-xlarge">{{editor}}</div>\
+ <div class="help-block">{{help}}</div>\
+ </div>\
+ </div>\
+ ',
+
+ nestedField: '\
+ <div class="field-{{key}}">\
+ <div title="{{title}}" class="input-xlarge">{{editor}}</div>\
+ <div class="help-block">{{help}}</div>\
+ </div>\
+ ',
+
+ list: '\
+ <div class="bbf-list">\
+ <ul class="unstyled clearfix">{{items}}</ul>\
+ <button type="button" class="btn bbf-add" data-action="add">Add</div>\
+ </div>\
+ ',
+
+ listItem: '\
+ <li class="clearfix">\
+ <div class="pull-left">{{editor}}</div>\
+ <button type="button" class="btn bbf-del" data-action="remove">&times;</button>\
+ </li>\
+ ',
+
+ date: '\
+ <div class="bbf-date">\
+ <select data-type="date" class="bbf-date">{{dates}}</select>\
+ <select data-type="month" class="bbf-month">{{months}}</select>\
+ <select data-type="year" class="bbf-year">{{years}}</select>\
+ </div>\
+ ',
+
+ dateTime: '\
+ <div class="bbf-datetime">\
+ <p>{{date}}</p>\
+ <p>\
+ <select data-type="hour" style="width: 4em">{{hours}}</select>\
+ :\
+ <select data-type="min" style="width: 4em">{{mins}}</select>\
+ </p>\
+ </div>\
+ ',
+
+ 'list.Modal': '\
+ <div class="bbf-list-modal">\
+ {{summary}}\
+ </div>\
+ '
+ }, {
+
+ //CLASSNAMES
+ error: 'error' //Set on the field tag when validation fails
+ });
+
+
+});
@@ -0,0 +1,134 @@
+/* Form */
+.bbf-form {
+ margin: 0;
+ padding: 0;
+ border: none;
+}
+
+
+/* Field */
+.bbf-field {
+ margin: 1em 0;
+ list-style-type: none;
+ position: relative;
+ clear: both;
+}
+
+ .bbf-field label {
+ float: left;
+ width: 25%;
+ }
+
+ .bbf-field .bbf-editor {
+ margin-left: 25%;
+ width: 74%;
+ }
+
+ .bbf-field input, .bbf-field textarea, .bbf-field select {
+ width: 100%;
+ }
+
+ .bbf-field .bbf-help {
+ margin-left: 25%;
+ width: 74%;
+ color: #999;
+ }
+
+ .bbf-field.bbf-error .bbf-editor {
+ outline: 1px solid red;
+ }
+
+
+/* Radio */
+.bbf-radio {
+ list-style-type: none;
+}
+
+ .bbf-radio input {
+ width: auto;
+ }
+
+ .bbf-radio label {
+ float: none;
+ }
+
+
+/* Checkboxes */
+.bbf-checkboxes {
+ list-style-type: none;
+}
+
+ .bbf-checkboxes input {
+ width: auto;
+ }
+
+ .bbf-checkboxes label {
+ float: none;
+ }
+
+
+/* List */
+.bbf-list ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+ .bbf-list .bbf-error {
+ border: 1px solid red;
+ }
+
+ .bbf-list li {
+ clear: both;
+ width: 100%;
+ }
+
+ .bbf-list li .bbf-editor-container {
+ margin-right: 2em;
+ }
+
+ .bbf-list li .bbf-remove {
+ float: right;
+ width: 2em;
+ }
+
+.bbf-list .bbf-actions {
+ text-align: center;
+ clear: both;
+}
+
+/* List.Modal */
+.bbf-list-modal {
+ cursor: pointer;
+ border: 1px solid #ccc;
+ width: 208px;
+ border-radius: 3px;
+ padding: 4px;
+ color: #555;
+}
+
+
+
+/* Date */
+.bbf-date .bbf-date {
+ width: 4em;
+}
+
+.bbf-date .bbf-month {
+ width: 9em;
+}
+
+.bbf-date .bbf-year {
+ width: 6em;
+}
+
+
+/* DateTime */
+.bbf-datetime .bbf-date-container {
+ float: left;
+ margin-right: 1em;
+}
+
+.bbf-datetime select {
+ width: 4em;
+}
Oops, something went wrong. Retry.

0 comments on commit d78524a

Please sign in to comment.