Commit 0cb52f17

mo k <mo@mokhan.ca>
2013-02-10 04:30:05
try to improve the tagit css
1 parent 1f12e5f
Changed files (3)
app
assets
views
vendor
assets
stylesheets
app/assets/stylesheets/application.css.scss
@@ -5,5 +5,5 @@
  *= require colorbox
  *= require jquery.fileupload-ui
  *= require_self
- *= require_tree . 
+ *= require_tree .
 */
app/views/creations/_form.html.erb
@@ -3,11 +3,7 @@
     $(function(){
       var all_tags = [ <% ActsAsTaggableOn::Tag.all.map(&:name).each { |item| %> '<%= item %>', <% } %> ];
       $('.tooltip-item').tooltip();
-      $('#tags').tagit({
-        availableTags: all_tags,
-        singleField: true,
-        singleFieldNode: $('#tag-fields')
-      });
+      $('#tags').tagit({ availableTags: all_tags });
     });
   </script>
 <% end %>
@@ -61,11 +57,10 @@
     <div class="control-group">
       <div class="controls">
         <% if @creation.present? %>
-           <input name="creation_tags" id="tag-fields" value="<% @creation.tags.map(&:name).each { |item| %><%= item %>,<% } %>" type="hidden" />
+           <input name="creation_tags" id="tags" value="<% @creation.tags.map(&:name).each { |item| %><%= item %>,<% } %>" />
         <% else %>
-          <input name="creation_tags" id="tag-fields" value="" type="hidden" />
+          <input name="creation_tags" id="tags" value="" />
         <% end %>
-        <ul id="tags"></ul>
       </div>
     </div>
     <div class="form-actions">
vendor/assets/stylesheets/jquery.tagit.css
@@ -0,0 +1,67 @@
+ul.tagit {
+    padding: 1px 5px;
+    overflow: auto;
+    margin-left: inherit; /* usually we don't want the regular ul margins. */
+    margin-right: inherit;
+}
+ul.tagit li {
+    display: block;
+    float: left;
+    margin: 2px 5px 2px 0;
+}
+ul.tagit li.tagit-choice {    
+    position: relative;
+    line-height: inherit;
+}
+
+ul.tagit li.tagit-choice-read-only { 
+    padding: .2em .5em .2em .5em; 
+} 
+
+ul.tagit li.tagit-choice-editable { 
+    padding: .2em 18px .2em .5em; 
+} 
+
+ul.tagit li.tagit-new {
+    padding: .25em 4px .25em 0;
+}
+
+ul.tagit li.tagit-choice a.tagit-label {
+    cursor: pointer;
+    text-decoration: none;
+}
+ul.tagit li.tagit-choice .tagit-close {
+    cursor: pointer;
+    position: absolute;
+    right: .1em;
+    top: 50%;
+    margin-top: -8px;
+    line-height: 17px;
+}
+
+/* used for some custom themes that don't need image icons */
+ul.tagit li.tagit-choice .tagit-close .text-icon {
+    display: none;
+}
+
+ul.tagit li.tagit-choice input {
+    display: block;
+    float: left;
+    margin: 2px 5px 2px 0;
+}
+ul.tagit input[type="text"] {
+    -moz-box-sizing:    border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing:         border-box;
+
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+
+    border: none;
+    margin: 0;
+    padding: 0;
+    width: inherit;
+    background-color: inherit;
+    outline: none;
+}