Refactor package list and package detail views

src/Packagist/WebBundle/Entity/Package.php

@@ -190,15 +190,25 @@ class Package
     }
 
     /**
-     * Get vendor
+     * Get vendor prefix
      *
-     * @return string $vendor
+     * @return string
      */
     public function getVendor()
     {
         return preg_replace('{/.*$}', '', $this->name);
     }
 
+    /**
+     * Get package name without vendor
+     *
+     * @return string
+     */
+    public function getPackageName()
+    {
+        return preg_replace('{^[^/]*/}', '', $this->name);
+    }
+
     /**
      * Set description
      *

src/Packagist/WebBundle/Resources/public/css/main.css

@@ -92,11 +92,11 @@ body {
 }
 
 a, a:visited, a:active {
-  color: #fb9700;
+  color: #c67700;
   text-decoration: none;
 }
 a:hover {
-  color: #c67700;
+  color: #975a00;
 }
 
 .container {
@@ -137,7 +137,7 @@ header p {
 .box {
   width: 900px;
   font-size: 15px;
-  padding: 5px 7px;
+  padding: 7px;
   background: #f5f5f5;
   border: 1px solid #fff;
   -webkit-border-radius: 6px;
@@ -295,16 +295,8 @@ ul.packages {
   list-style-type: none;
   margin: 0;
   padding: 0;
-  float: left;
-}
-ul.packages li {
-  margin: 0 -6px;
-  padding: 0;
-  padding-left: 10px;
-}
-ul.packages section {
-  position: relative;
 }
+
 ul.packages h1 {
   font-family: Verdana;
   font-size: 22px;
@@ -314,81 +306,18 @@ ul.packages h1 {
   padding: 8px 4px 0 0;
   height: 32px;
 }
-ul.packages h1.has-description {
-  margin-bottom: 15px;
-}
-ul.packages li.has-popup:hover, div.package-details {
-  background: url("../img/package_corners.png") -20px 0 no-repeat;
-}
-ul.packages li.has-popup:hover h1 {
-  color: #fff;
-  background: url("../img/package_bg.png") 0 0 repeat-x;
-}
-ul.packages li.has-popup:hover h1 a, ul.packages li.has-popup:hover h1 a:visited {
-  color: #fff;
-}
-
-ul.packages p.package-description {
-  position: absolute;
-  height: 21px;
-  overflow: hidden;
-  margin-top: -24px;
-  left: 0;
-  width: 888px;
-  color: #808080;
-}
-div.package-full-details {
-  margin: -4px 0 6px;
-}
-
-div.package-details {
-  display: none;
-  background-position: 0 0;
-  position: absolute;
-  right: -20px;
-  width: 20px;
-  top: 0;
-  bottom: 0;
-}
-div.package-details > div {
-  position: absolute;
-  left: 20px;
-  min-width: 400px;
-  top: 0;
-  z-index: 2;
-  color: #fff;
-  padding: 4px 8px;
-  background: #53a51d;
-  background: -moz-linear-gradient(top, #53a51d 0%, #75b74a 100%);
-  background: -webkit-linear-gradient(top, #53a51d 0%, #75b74a 100%);
-  background: -o-linear-gradient(top, #53a51d 0%, #75b74a 100%);
-  background: -ms-linear-gradient(top, #53a51d 0%, #75b74a 100%);
-  background: linear-gradient(top, #53a51d 0%, #75b74a 100%);
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
-  box-shadow: rgba(0, 0, 0, 0.25) 0 1px 3px;
-}
-ul.packages li.has-popup:hover div.package-details, ul.packages li.has-popup:hover div.package-details {
-  display: block;
-}
 
-ul.packages p {
-  margin-bottom: 4px;
-  line-height: 1.4em;
-}
-ul.packages p:last-child {
-  margin-bottom: 0;
-}
-
-ul.packages li.has-popup:hover div a, ul.packages li.has-popup:hover div a:visited, ul.packages li.has-popup:hover div a:hover {
-  color: #fff;
-  text-decoration: underline;
+ul.packages li {
+    background: none repeat scroll 0 0 #EEEEEE;
+    border: 1px solid #BBBBBB;
+    border-radius: 3px 3px 3px 3px;
+    margin: 10px 0;
+    padding: 0 0 0 10px;
 }
 
 label {
   display: block;
-  margin: 20px 0 10px;
+  margin: 0 0 5px;
 }
 
 input, textarea {
@@ -423,7 +352,7 @@ input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focu
   outline-style: none;
 }
 input[type="text"]:invalid, input[type="password"]:invalid, input[type="email"]:invalid {
-  border-color: #fb9700;
+  border-color: #c67700;
   color: #bf7300;
 }
 
@@ -441,27 +370,129 @@ form ul {
   margin: 10px 0;
 }
 
-.package {
-  margin: 0 0 15px;
+.package form h2 {
+  margin: 10px 0;
 }
-.package h2 {
-  font-size: 25px;
-  margin-bottom: 5px;
+.package > h1 {
+  float: left;
+  margin-right: 20px;
 }
-.package .summary {
-  font-weight: normal;
-  font-size: 20px;
-  position: relative;
-  left: 10px;
-  top: 5px;
+.package .tags {
+  line-height: 34px;
+}
+.package .tags a {
+  background: #c67700;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  color: #fff;
+  padding: 3px;
+  margin-right: 5px;
 }
 .package .description {
   clear: left;
 }
-
-.package > p {
-  margin: 6px 0;
+.package .authors {
+  border-top: 1px solid #ccc;
+  margin-top: 10px;
+  padding-top: 10px;
+}
+.package .details span {
+  float: left;
+  display: block;
+  clear: left;
+  width: 90px;
+}
+.package .versions {
+  list-style: none;
+  margin: 0;
+}
+.package .version {
+  background: #eee;
+  padding: 5px 10px;
+  border: 1px solid #bbb;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  margin-bottom: 10px;
+}
+.package .version.last {
+  margin-bottom: 0;
+}
+.package .version h1 {
+  margin-bottom: 5px;
+}
+.package .version .release-date {
+  padding-left: 10px;
+  font-size: 14px;
+  float: right;
+}
+.package .version .license {
+  float: right;
+  width: 250px;
+  font-size: 14px;
+  clear: right;
+  text-align: right;
+  line-height: 12px;
+}
+.package .version .details {
+  display: none;
+}
+.package .version .details.open {
+  display: block;
+}
+.package .package-links {
+  border-top: 1px solid #ccc;
+  margin-top: 10px;
+  padding-top: 10px;
+}
+.package .package-links div {
+  float: left;
+  width: 32%;
+  margin-bottom: 10px;
+}
+.package .version {
+  font-size: 11px;
+}
+.package .version h2 {
+  font-size: 14px;
+  margin-bottom: 2px;
+}
+.package .version .details ul {
+  margin-left: 2px;
+  list-style: disc inside none;
 }
+.package .package-links .provides {
+  clear: left;
+}
+.package .package-links .requires,
+.package .package-links .recommends,
+.package .package-links .provides,
+.package .package-links .conflicts {
+  margin-right: 5px;
+}
+.package .details-toggler {
+  height: 12px;
+  margin: 0 -5px;
+  padding: 0 4px;
+  width: 100%;
+  border: 1px solid #ccc;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  background: url(../img/expand.gif) center center no-repeat #ddd;
+}
+.package .details-toggler.open {
+  background-image: url(../img/contract.gif);
+}
+.package .details-toggler:hover {
+  background-color: #ccc;
+  cursor: pointer;
+}
+.package .description, .package .details {
+  margin-bottom: 10px;
+}
+
 
 pre {
   background: #fff;

src/Packagist/WebBundle/Resources/public/js/view.js

@@ -1,5 +1,10 @@
 (function ($){
-	$('#add-maintainer').click(function () {
-		$('#add-maintainer-form').toggleClass('hidden');		
-	});
+    $('#add-maintainer').click(function (e) {
+        $('#add-maintainer-form').toggleClass('hidden');
+        e.preventDefault();
+    });
+    $('.package .details-toggler').click(function (e) {
+        $(this).toggleClass('open')
+            .prev().toggleClass('open');
+    });
 })(jQuery);

src/Packagist/WebBundle/Resources/views/Web/viewPackage.html.twig

@@ -5,20 +5,38 @@
 {% endblock %}
 
 {% block content %}
-    <div class="box clearfix">
+    <div class="box">
         <div class="package">
-            <p style="float: right;"><a href="{{ path("view_vendor", {"vendor": package.vendor}) }}">View more packages from {{ package.vendor }}.</a></p>
-            <h1>{{ package.name }}</h1>
-            <p class="maintainers">Maintainer{{ package.maintainers|length > 1 ? 's' : '' }}:
-            {% for maintainer in package.maintainers %}
-                {{ maintainer.username }}{{ loop.last ? '' : ', ' }}
-            {% endfor %}</p>
+            <h1>
+                <a href="{{ path("view_vendor", {"vendor": package.vendor}) }}">{{ package.vendor }}/</a>{{ package.packageName }}
+            </h1>
+            {% if package.versions|length and package.versions[0].tags|length %}
+                <p class="tags">
+                    {%- for tag in package.versions[0].tags -%}
+                        <a href="{{ url("browse", { "tag" : tag.name }) }}">{{ tag.name }}</a>
+                    {%- endfor -%}
+                </p>
+            {% endif %}
+
+            <p class="description">{{ package.description }}</p>
+            <p class="details">
+                <span>Maintainer{{ package.maintainers|length > 1 ? 's' : '' }}:</span>
+                {% for maintainer in package.maintainers %}
+                    {{ maintainer.username }}{{ loop.last ? '' : ', ' }}
+                {% endfor %}
+                {% if form is defined %}<a id="add-maintainer" href="{{ path('add_maintainer', {'name': package.name}) }}">Add Maintainer</a>{% endif %}
+                <br />
+                {% if package.versions|length and package.versions[0].homepage %}
+                    <span>Homepage:</span> <a href="{{ package.versions[0].homepage }}">{{ package.versions[0].homepage|replace({'http://': ''}) }}</a><br />
+                {% endif %}
+                <span>Repository:</span> <a href="{{ package.repository }}">{{ package.repository }}</a>
+            </p>
 
             {% if form is defined %}
                 <div>
-                    <strong id="add-maintainer"><a href="#">Add Maintainer</a></strong>
                     <form id="add-maintainer-form" class="{{ show_maintainer_form|default(false) ? '': 'hidden' }}" action="{{ path('add_maintainer', {'name': package.name}) }}" method="POST" {{ form_enctype(form) }}>
                         <div>
+                            <h2>Add Maintainer</h2>
                             <p>
                                 {{ form_label(form.user, "Username") }}
                                 {{ form_errors(form.user) }}
@@ -32,46 +50,106 @@
             {% endif %}
 
             {% if package.versions|length %}
-                <ul class="packages">
+                <ul class="versions">
                     {% for version in package.versions %}
-                        <li{% if loop.index0 > 0 and not ('-dev' in version.version) %} class="has-popup"{% endif %}>
+                        <li class="version{% if loop.last %} last{% endif %}">
                             <section>
-                                <h1>{{ version.version }}</h1>
-                                {% if loop.index0 > 0 and not ('-dev' in version.version) %}
-                                    <div class="package-details"><div>
-                                {% else %}
-                                    <div class="package-full-details"><div>
-                                {% endif %}
-                                <p class="description">{{ version.description }}</p>
-                                <p class="license">License: {{ version.license ? version.license|join(', ') : "Unknown" }}</p>
-                                <p class="release-date">Date: {{ version.releasedAt|date("Y-m-d") }}</p>
-                                <p class="links">
-                                    {% if version.homepage %}
-                                        Homepage: <a href="{{ version.homepage }}">{{ version.homepage|replace({'http://': ''}) }}</a><br />
-                                    {% endif %}
-                                </p>
-                                <p class="links">
-                                    Tags:
-                                    {% for tag in version.tags -%}
-                                        <a href="{{ url("browse", { "tag" : tag.name }) }}">{{ tag.name }}</a>{{ loop.last ? '' : ', ' }}
-                                    {%- endfor %}
-                                </p>
-                                <p class="authors">Author{{ version.authors|length > 1 ? 's' : '' }}:
-                                    {% for author in version.authors %}
-                                        {% if author.homepage %}
-                                            <a href="{{ author.homepage }}">{{ author.name }}</a>
-                                        {% else %}
-                                            {{ author.name }}
-                                        {% endif %}
-                                        {% if author.email %}&lt;<a href="mailto:{{ author.email }}">{{ author.email }}</a>&gt;{% endif %}
-                                        <br />
-                                    {% endfor %}
-                                </p>
-                                <p class="requires">Requirement{{ version.require|length > 1 ? 's' : '' }}:
-                                    {% for req in version.require %}
-                                        {{ req.packageName }} ({{ req.packageVersion }})<br />
-                                    {% endfor %}
-                                </p>
+                                <h1>
+                                    {{ version.version }}
+                                    <span class="release-date">{{ version.releasedAt|date("Y-m-d") }}</span>
+                                    <span class="license">{{ version.license ? version.license|join(', ') : '' }}</span>
+                                </h1>
+
+                                <div class="details {% if loop.index0 == 0 %} open{% endif %}">
+                                    <h2 class="authors">Author{{ version.authors|length > 1 ? 's' : '' }}</h2>
+                                    <ul>
+                                        {% for author in version.authors %}
+                                            <li>
+                                                {%- if author.homepage -%}
+                                                    <a href="{{ author.homepage }}">{{ author.name }}</a>
+                                                {%- else -%}
+                                                    {{ author.name }}
+                                                {%- endif -%}
+                                                {% if author.email %} &lt;<a href="mailto:{{ author.email }}">{{ author.email }}</a>&gt;{% endif -%}
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                    <div class="clearfix package-links">
+                                        <div class="requires">
+                                            <h2>Requires</h2>
+                                            {% if version.require|length %}
+                                                <ul>
+                                                    {%- for req in version.require -%}
+                                                        <li>{{ req.packageName }}: {{ req.packageVersion }}</li>
+                                                    {%- endfor -%}
+                                                </ul>
+                                            {% else %}
+                                                None
+                                            {% endif %}
+                                        </div>
+                                        <div class="recommends">
+                                            <h2>Recommends</h2>
+                                            {% if version.recommend|length %}
+                                                <ul>
+                                                    {%- for req in version.recommend -%}
+                                                        <li>{{ req.packageName }}: {{ req.packageVersion }}</li>
+                                                    {%- endfor -%}
+                                                </ul>
+                                            {% else %}
+                                                None
+                                            {% endif %}
+                                        </div>
+                                        <div class="suggests">
+                                            <h2>Suggests</h2>
+                                            {% if version.suggest|length %}
+                                                <ul>
+                                                    {%- for req in version.suggest -%}
+                                                        <li>{{ req.packageName }}: {{ req.packageVersion }}</li>
+                                                    {%- endfor -%}
+                                                </ul>
+                                            {% else %}
+                                                None
+                                            {% endif %}
+                                        </div>
+                                        <div class="provides">
+                                            <h2>Provides</h2>
+                                            {% if version.provide|length %}
+                                                <ul>
+                                                    {%- for req in version.provide -%}
+                                                        <li>{{ req.packageName }}: {{ req.packageVersion }}</li>
+                                                    {%- endfor -%}
+                                                </ul>
+                                            {% else %}
+                                                None
+                                            {% endif %}
+                                        </div>
+                                        <div class="conflicts">
+                                            <h2>Conflicts</h2>
+                                            {% if version.conflict|length %}
+                                                <ul>
+                                                    {%- for req in version.conflict -%}
+                                                        <li>{{ req.packageName }}: {{ req.packageVersion }}</li>
+                                                    {%- endfor -%}
+                                                </ul>
+                                            {% else %}
+                                                None
+                                            {% endif %}
+                                        </div>
+                                        <div class="replaces">
+                                            <h2>Replaces</h2>
+                                            {% if version.replace|length %}
+                                                <ul>
+                                                    {%- for req in version.replace -%}
+                                                        <li>{{ req.packageName }}: {{ req.packageVersion }}</li>
+                                                    {%- endfor -%}
+                                                </ul>
+                                            {% else %}
+                                                None
+                                            {% endif %}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="details-toggler{% if loop.index0 == 0 %} open{% endif %}"></div>
                             </section>
                         </li>
                     {% endfor %}
@@ -79,7 +157,7 @@
             {% elseif package.crawledAt is null %}
                 <p>This package has not been crawled yet, some information is missing.</p>
             {% else %}
-                <p>This package has no released version yet, and little information is available yet.</p>
+                <p>This package has no released version yet, and little information is available.</p>
             {% endif %}
         </div>
     </div>

src/Packagist/WebBundle/Resources/views/macros.html.twig

@@ -1,36 +1,11 @@
 {% macro listPackages(packages, paginate) %}
     <ul class="packages">
         {% for package in packages %}
-            <li class="has-popup">
-                <section>
-                    {% if package.versions|length and package.versions[0].description|length %}
-                        <h1 class="has-description"><a href="{{ path('view_package', { 'name' : package.name }) }}">{{ package.name }}</a></h1>
-                        <p class="package-description">{{ package.versions[0].description }}</p>
-                    {% else %}
-                        <h1><a href="{{ path('view_package', { 'name' : package.name }) }}">{{ package.name }}</a></h1>
-                    {% endif %}
-                    <div class="package-details"><div>
-                    {% if package.versions|length %}
-                        <p class="description">{{ package.versions[0].description }}</p>
-                        <p class="license">License: {{ package.versions[0].license ? package.versions[0].license|join(', ') : "Unknown" }}</p>
-                        <p class="links">
-                            {% if package.versions[0].homepage %}
-                                Homepage: <a href="{{ package.versions[0].homepage }}">{{ package.versions[0].homepage|replace({'http://': ''}) }}</a><br />
-                            {% endif %}
-                            Tags: {% for tag in package.versions[0].tags %}<a href="{{ path("browse", { "tag" : tag.name }) }}">{{ tag.name }}</a>{{ loop.last ? '' : ', ' }}{% endfor %}
-                        </p>
-                    {% elseif package.crawledAt is null %}
-                        <p>This package has not been crawled yet, some information is missing.</p>
-                    {% else %}
-                        <p>This package has no released version yet, and little information is available yet.</p>
-                    {% endif %}
-
-                    <p class="maintainers">Maintainer{{ package.maintainers|length > 1 ? 's' : '' }}:
-                    {% for maintainer in package.maintainers %}
-                        <a href="{{ path("user_packages", { "name" : maintainer.username }) }}">{{ maintainer.username }}</a>{{ loop.last ? '' : ', ' }}
-                    {% endfor %}</p>
-                    </div></div>
-                </section>
+            <li>
+                <h1><a href="{{ path('view_package', { 'name' : package.name }) }}">{{ package.name }}</a></h1>
+                {% if package.versions|length and package.versions[0].description|length %}
+                    <p class="package-description">{{ package.versions[0].description }}</p>
+                {% endif %}
             </li>
         {% endfor %}