Bug 574291, collection detail pages styling

apps/access/helpers.py

@@ -6,6 +6,6 @@ import acl
 
 @register.function
 @jinja2.contextfunction
-def check_ownership(context, object, require_owner):
+def check_ownership(context, object, require_owner=False):
     return acl.check_ownership(context['request'], object,
                                require_owner=require_owner)

apps/bandwagon/models.py

@@ -140,6 +140,14 @@ class Collection(amo.models.ModelBase):
         return reverse('collections.vote',
                        args=[self.author_nickname, self.slug, 'down'])
 
+    def edit_url(self):
+        return reverse('collections.edit',
+                       args=[self.author_nickname, self.slug])
+
+    def delete_url(self):
+        return reverse('collections.delete',
+                       args=[self.author_nickname, self.slug])
+
     @property
     def author_nickname(self):
         return self.author.nickname if self.author else 'anonymous'
@@ -236,7 +244,7 @@ class Collection(amo.models.ModelBase):
 
     @caching.cached_method
     def publishable_by(self, user):
-        return bool(self.users.filter(pk=user.id))
+        return bool(self.owned_by(user) or self.users.filter(pk=user.id))
 
     @staticmethod
     def transformer(collections):

apps/bandwagon/templates/bandwagon/ajax_new.html

@@ -1,4 +1,4 @@
-<div id="collections-new">
+<div id="collections-new" class='collections-details'>
   <h3>{{ _('Start a New Collection') }}</h3>
 
   <form>

apps/bandwagon/templates/bandwagon/barometer.html

@@ -3,13 +3,12 @@
     <input class="{{ up_class }}" value="{{ c.upvotes }}" type="submit"
            title="{{ up_title }}"/>
   </form>
-
   <form method="post" class="downvote" action="{{ down_action }}">
     <input class="{{ down_class }}" value="{{ c.downvotes }}" type="submit"
            title="{{ down_title }}">
   </form>
-  {# L10n: Link to remove a collection vote #}
   <a class="{{ cancel_class }}" href="#" title="{{ cancel_title }}">{{ _('Remove') }}</a>
+  {# L10n: Link to remove a collection vote #}
   {% if user.is_anonymous() %}
     <div class="collection-rate-dropdown install-note">
       <div class="collection-rate-login">

apps/bandwagon/templates/bandwagon/collection_detail.html

@@ -7,8 +7,6 @@
 {% block bodyclass %}inverse{% endblock %}
 
 {% block content %}
-<div class="primary">
-<header>
   {% with crumbs = [(url('collections.list'), _('Collections')), (None, c.name)] %}
     {% if c.author %}
       {% do crumbs.insert(1, (url('collections.user', c.author.nickname), c.author.display_name)) %}
@@ -24,15 +22,14 @@
       {% endif %}
     </h2>
     {% if collection.author %}
-    <h4 class="author">
+    <h4 class='author'>
       {% trans users=users_list([collection.author]) %}
         by {{ users }}
       {% endtrans %}
     </h4>
     {% endif %}
   </hgroup>
-</header>
+<div class="primary">
-
 <div class="featured">
   <div class="featured-inner object-lead">
     <div class="meta">
@@ -40,10 +37,10 @@
         <li>{{ barometer(collection) }}</li>
         <li class="followers">
           {% trans p=c.subscribers, num=c.subscribers|numberfmt %}
-            {{ num }} follower {% pluralize %} {{ num }} followers
+            <span>{{ num }}</span> follower {% pluralize %} <span>{{ num }}</span> followers
           {% endtrans %}
         </li>
-        <li>{{ _('Updated {0}')|f(c.modified) }}</li>
+        <li>{{ _('Updated {0}')|f(c.modified|datetime) }}</li>
         {% if perms.view_stats %}
         <li>
           <a href="{{ remora_url('/statistics/collection/' + c.uuid) }}">
@@ -52,42 +49,62 @@
         {% endif %}
       </ul>
     </div>
-    <h3>{{ _('About this Collection') }}</h3>
+    <div class='object-details'>
-    {% if c.description %}
+      <h3>{{ _('About this Collection') }}</h3>
-      <p>{{ c.description }}</p>
+      {% if c.description %}
-    {% elif c.type == amo.COLLECTION_MOBILE %}
+        <p>{{ c.description }}</p>
-      <p>{{ _('Add-ons synced to my Mobile Firefox using the Add-on Collector') }}</p>
+      {% elif c.type == amo.COLLECTION_MOBILE %}
-    {% endif %}
+        <p>{{ _('Add-ons synced to my Mobile Firefox using the Add-on Collector') }}</p>
+      {% endif %}
+      <p class="highlight collection-admin">
+        {{ _('More Options:') }}
+        {% if c.publishable_by(user) %}
+          <a class="edit" href="{{ c.edit_url() }}">{{ _('Edit Collection') }}</a>
+          {% if collection.owned_by(user) %}
+            <a class="delete" href="{{ c.delete_url() }}">{{ _('Delete Collection') }}</a>
+          {% endif %}
+        {% endif %}
+      </p>
+    </div>
   </div>
 </div>
 
-<div class="separated-listing">
+{% cache addons.object_list %}
-  <h3>
+  {% if c.all_personas %}
-    {% trans num=addons.paginator.count %}
+    <div class='collections-personas'>
-      {{ num }} Add-on in this Collection
+      <h3>
-    {% pluralize %}
+        {% trans num=addons.paginator.count %}
-      {{ num }} Add-ons in this Collection
+          {{ num }} Persona in this Collection
-    {% endtrans %}
+        {% pluralize %}
-  </h3>
+          {{ num }} Personas in this Collection
-  <form class="item-sort go" action="">
+        {% endtrans %}
-    <label for="sortby">{{ _('Sort by:') }}</label>
+      </h3>
-    <select id="sortby" name="{{ filter.key }}">
-      {% for value, title in filter.opts %}
-      <option value="{{ value }}" {{ value|ifeq(filter.field, 'selected') }}>
-        {{ title }}</option>
-      {% endfor %}
-    </select>
-    <button type="submit">{{ _('Go') }}</button>
-  </form>
-  {% cache addons.object_list %}
-    {% if c.all_personas %}
       {{ persona_grid(addons.object_list) }}
-    {% else %}
+    </div>
+  {% else %}
+    <div class="separated-listing">
+      <h3>
+        {% trans num=addons.paginator.count %}
+          {{ num }} Add-on in this Collection
+        {% pluralize %}
+          {{ num }} Add-ons in this Collection
+        {% endtrans %}
+      </h3>
+      <form class="item-sort go" action="">
+        <label for="sortby">{{ _('Sort by:') }}</label>
+        <select id="sortby" name="{{ filter.key }}">
+          {% for value, title in filter.opts %}
+          <option value="{{ value }}" {{ value|ifeq(filter.field, 'selected') }}>
+            {{ title }}</option>
+          {% endfor %}
+        </select>
+        <button type="submit">{{ _('Go') }}</button>
+      </form>
       {{ addon_listing_items(addons.object_list, notes=notes.next()) }}
-    {% endif %}
+    </div>
-    {{ addons|paginator }}
+  {% endif %}
-  {% endcache %}
+  {{ addons|paginator }}
-</div>
+{% endcache %}
 </div> {# primary #}
 
 <div class="secondary">
@@ -117,10 +134,12 @@
 {% if author_collections %}
   <div>
     <h3>{{ _('More by this User') }}</h3>
+    <ul class="addon-collections">
     {% for ac in author_collections %}
-      <a class="collectionitem" href="{{ ac.get_url_path() }}">
+      <li><a class="collectionitem" href="{{ ac.get_url_path() }}">
-        {{ ac.name }}</a>
+        {{ ac.name }}</a></li>
     {% endfor %}
+    </ul>
     <a class="more-info" href="{{ url('collections.user', c.author.nickname) }}">
       {{ _('See all collections by this user') }}</a>
   </div>

apps/bandwagon/views.py

@@ -230,7 +230,6 @@ def ajax_new(request):
 
         if form.is_valid():
             collection = form.save()
-            CollectionUser(collection=collection, user=request.amo_user).save()
             addon_id = request.REQUEST['addon_id']
             a = Addon.objects.get(pk=addon_id)
             collection.add_addon(a)

media/css/main.css

@@ -420,7 +420,8 @@ input.placeholder {
 }
 
 textarea {
-    width: 99%;
+    width: 100%;
+    -moz-box-sizing: border-box;
     display: block;
 }
 
@@ -3052,10 +3053,6 @@ ol.pagination + .num-results {
     float: right;
 }
 
-.separated-listing .item h3 {
-    float: none;
-}
-
 .separated-listing form.item-sort {
     float: right;
     margin-top: -0.2em;
@@ -3065,8 +3062,12 @@ ol.pagination + .num-results {
     float: left;
 }
 
+.separated-listing .item img.icon {
+    overflow: hidden;
+}
+
 .separated-listing .item .item-info {
-    border: none;
+    border-left: 1px dashed #b4dfee;
     margin-bottom: 2em;
 }
 
@@ -3078,9 +3079,18 @@ ol.pagination + .num-results {
     margin: 0;
 }
 
+.separated-listing .item .persona-inner {
+    padding: 0;
+}
+
+.separated-listing .item .persona-large .persona-preview [data-browsertheme] {
+    height: 72px;
+}
+
 .separated-listing blockquote {
     margin-right: 11em;
     clear: left;
+    overflow-x:hidden;
 }
 
 .separated-listing .item h4 {
@@ -3113,9 +3123,9 @@ ol.pagination + .num-results {
 .separated-listing .item {
     border: 1px solid #C9E8F3;
     margin: 0 0 1em 0;
-    -moz-border-radius:3px;
+    -moz-border-radius:8px;
-    -webkit-border-radius: 3px;
+    -webkit-border-radius: 8px;
-    border-radius:3px;
+    border-radius:8px;
 }
 
 .listing .item {

media/css/zamboni/zamboni.css

@@ -9,6 +9,7 @@
 .article.version:after,
 .article.review:after,
 .grouped_ratings li:after,
+.bars:after,
 #review-form p:after {
     content: ".";
     display: block;
@@ -32,7 +33,6 @@ li.usertag {
 }
 
 header {
-    margin: 0 1em;
     display: block;
 }
 
@@ -2464,3 +2464,117 @@ h6.author, .author a {
 .collections-contributors tr:hover a {
     display: inline;
 }
+
+.collections-personas .personas-grid {
+    border: 1px solid #C9E8F3;
+    padding: 1em;
+    margin: 0 0 1em 0;
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+    border-radius :8px;
+    background-color: #ffffff;
+    clear:both;
+}
+
+.featured div.meta {
+    margin-top: 0;
+}
+
+.meta li {
+    line-height: 2em;
+}
+
+.followers {
+    color: #37a632;
+}
+.followers span {
+    font-weight: bold;
+}
+
+.listing-footer .delete {
+    float: right;
+    color: red;
+}
+
+.tab-wrapper .content {
+    margin: 1em;
+}
+
+.tab-wrapper .listing-footer {
+    padding-top: .5em;
+    z-index: 0;
+}
+
+table#addons-list, table#contributors-list {
+    width: 100%;
+}
+#addons-list .comments {
+    display: none;
+}
+#addons-list tr {
+    border-top: 1px dotted #A5BFCE;
+}
+#addons-list tr:hover,
+.ui-state-hover {
+    background-color: #e4f5fb;
+}
+#addons-list td, #addons-list h3 {
+    line-height: 36px;
+    margin: 0;
+    padding: 0;
+}
+#addons-list img {
+    float: left;
+    margin: 2px 1em 0 0;
+}
+.ui-autocomplete {
+    background-color: #fff;
+    border: 1px solid black;
+    width: 300px;
+    z-index: 11;
+}
+.ui-autocomplete a {
+    display: block;
+    line-height: 32px;
+}
+#addons-list a.remove,
+#addons-list a.comment,
+#contributors-list a.remove {
+    cursor: pointer;
+    display: block;
+    width: 16px;
+    height: 16px;
+    margin: 10px;
+    text-indent: -9000px;
+    background-repeat: no-repeat;
+    background-image: url(../../img/zamboni/icons/collections.png);
+}
+#addons-list a.remove,
+#contributors-list a.remove {
+    background-position: 0 -250px;
+}
+#addons-list a.remove:hover,
+#contributors-list a.remove:hover,
+.collection-admin a.delete {
+    background-position: 0 -200px;
+}
+#addons-list a.comment {
+    background-position: 0 -800px;
+}
+
+.collection-admin {
+    font-weight: bold;
+    padding: .5em 1em;
+    margin-bottom: 0;
+    display: inline-block;
+}
+.collection-admin a {
+    background-repeat: no-repeat;
+    background-image: url(../../img/zamboni/icons/collections.png);
+    margin-left: 1em;
+    white-space: nowrap;
+    padding-left: 22px;
+}
+.collection-admin a.edit {
+    background-position: 0 -300px;
+}