Collection edit fixes

apps/bandwagon/templates/bandwagon/edit_contributors.html

@@ -45,8 +45,8 @@
     </thead>
     <tbody>
       <tr>
-        <td colspan="4">
-          <input id="contributor-ac" class="long" data-src="{{ url('users.ajax') }}"
+        <td colspan="4" class="input">
+          <input id="contributor-ac" class="long placeholder" data-src="{{ url('users.ajax') }}"
                  data-owner="{{ collection.owner_id }}"
                  placeholder="{{ _('Enter the email address of the contributor to add') }}" />
           <button id="contributor-ac-button">

apps/bandwagon/templates/bandwagon/includes/addedit.html

@@ -12,17 +12,9 @@
       <label>{{ form.slug.label|safe }}</label>
       {% set username = collection.author_username if collection else amo_user.username %}
       {% set slug_base = url('collections.user', username)|absolutify %}
-      <span id="slug_edit">
-      {{ slug_base }}
-      {{ form.slug|safe }}
-      </span>
+      <span id="slug_edit"><span>{{ slug_base }}</span>{{ form.slug|safe }}</span>
       <span id="slug_readonly">
-        {{ slug_base }}
-          <span id="slug_value">
-            {% if collection and collection.slug %}
-              {{ collection.slug }}
-            {% endif %}
-          </span>
+        {{ slug_base }}<span id="slug_value">{% if collection and collection.slug %}{{ collection.slug }}{% endif %}</span>
         <a id="edit_slug" href="#">{{ _('Edit') }}</a>
       </span>
     </p>

apps/bandwagon/templates/bandwagon/includes/addon_selector.html

@@ -22,8 +22,8 @@
     </thead>
     <tbody>
       <tr>
-        <td colspan="4">
-          <input id="addon-ac" placeholder="{{ _('Enter the name of the add-on to include') }}" class="long" data-src="{{ url('search.ajax') }}" />
+        <td colspan="4" class="input">
+          <input id="addon-ac" placeholder="{{ _('Enter the name of the add-on to include') }}" class="long placeholder" data-src="{{ url('search.ajax') }}" />
           <button id="addon-select">
             {{ _('Add to Collection') }}
           </button>
@@ -39,7 +39,7 @@
             <textarea name="addon_comment">{{ comments[addon.id] }}</textarea>
           </p>
         </td>
-        <td>{{ addon.created }}</td>
+        <td>{{ addon.added }}</td>
         <td><a title="{{ _('Add a comment') }}" class="comment">{{ _('Comment') }}</a></td>
         <td class="remove"><a title="{{ _('Remove this add-on from the collection') }}" class="remove">{{ _('Remove') }}</a></td>
       </tr>

media/css/zamboni/zamboni.css

@@ -2486,6 +2486,30 @@ label > .optional {
     height: 6em;
 }
 
+#id_slug {
+    border-left: 0;
+}
+#id_slug:focus {
+    outline: 0;
+}
+.collection-add-dropdown #id_slug {
+    text-align:right;
+    display:inline-block;
+}
+#slug_edit span {
+    border: 1px solid #5875A0;
+    border-right:0;
+    padding: 2px 2px 2px 5px;
+    background: #eee;
+}
+
+#slug_edit span, #slug_readonly {
+    color: #888;
+}
+#slug_value {
+    color: #222;
+}
+
 #collection-form-slug,
 #clear-recents {
     font-size: .9em;
@@ -2496,12 +2520,10 @@ label > .optional {
     margin-right: 1em;
 }
 
-#collections-new {
-    width: 400px;
-}
 .collections-details #id_name {
     display: block;
-    width: 99%;
+    -moz-box-sizing: border-box;
+    width: 100%;
 }
 
 #ajax_collections_list {
@@ -2590,6 +2612,18 @@ label > .optional {
     z-index: 0;
 }
 
+.tab-wrapper .content h3 {
+    display: none;
+}
+
+.tab-wrapper .content p {
+    margin-top: 2em;
+}
+
+input.placeholder {
+    color: #ccc;
+}
+
 table#addons-list, table#contributors-list {
     width: 100%;
 }
@@ -2617,9 +2651,10 @@ td.remove {
 .ui-state-hover {
     background-color: #e4f5fb;
 }
-#addons-list tbody tr:first-child,
-#contributors-list tbody tr:first-child {
+td.input {
     background: #B5D9E5;
+    padding-top: .5em;
+    padding-bottom: .4em;
 }
 #addons-list h3 {
     line-height: 36px;
@@ -2870,7 +2905,12 @@ a.outlink:hover {
 .widgets a.widget.ajax-loading,
 .widgets .widget.ajax-loading > a,
 .widgets > a.widget.ajax-loading:hover,
+input.ui-autocomplete-loading,
 .widgets > .widget.ajax-loading > a:hover {
    background-image: url(../../img/zamboni/loading-white.gif);
+   background-repeat: no-repeat;
    background-position: left bottom;
 }
+input.ui-autocomplete-loading {
+    background-position: right center;
+}

media/js/zamboni/collections.js

@@ -457,10 +457,12 @@ if ($('body.collections-contributors')) {
         var email = $('#contributor-ac').val();
         var src = $('#contributor-ac').attr('data-src');
         var my_id = $('#contributor-ac').attr('data-owner');
-
+        $('#contributor-ac').addClass("ui-autocomplete-loading");
         // TODO(potch): Add a fancy failure case.
         $.get(src, {q: email}, function(d) {
 
+            $('#contributor-ac').removeClass("ui-autocomplete-loading");
+
             // TODO(potch): gently yell at user if they add someone twice.
             if ($('input[name=contributor][value='+d.id+']').length == 0 &&
                 my_id != d.id) {
@@ -539,7 +541,7 @@ $(document).ready(function () {
         }
     }
 
-    $('#details-edit form').delegate('#id_name', 'keyup', slugify)
+    $('#details-edit form, .collection-create form').delegate('#id_name', 'keyup', slugify)
         .delegate('#id_name', 'blur', slugify)
         .delegate('#edit_slug', 'click', show_slug_edit)
         .delegate('#id_slug', 'change', function() {