expand first version, show package description, automatically adjust width for package data popup

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

@@ -289,20 +289,36 @@ ul.packages h1 {
   padding: 8px 4px 0 0;
   height: 32px;
 }
-ul.packages li:hover, div.package-details {
-  background: url("../img/package_corners.png") -20px 50% no-repeat;
+ul.packages h1.has-description {
+  margin-bottom: 15px;
 }
-ul.packages li:hover h1 {
+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 50% repeat-x;
+  background: url("../img/package_bg.png") 0 0 repeat-x;
 }
-ul.packages li:hover h1 a, ul.packages li:hover h1 a:visited { 
+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 50%;
+  background-position: 0 0;
   position: absolute;
   right: -20px;
   width: 20px;
@@ -328,7 +344,7 @@ div.package-details > div {
   border-radius: 6px;
   box-shadow: rgba(0, 0, 0, 0.25) 0 1px 3px;
 }
-ul.packages li:hover div.package-details, ul.packages li:hover div.package-details {
+ul.packages li.has-popup:hover div.package-details, ul.packages li.has-popup:hover div.package-details {
   display: block;
 }
 
@@ -340,7 +356,7 @@ ul.packages p:last-child {
   margin-bottom: 0;
 }
 
-ul.packages p a {
+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;
 }

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

@@ -0,0 +1,9 @@
+/*
+    Adjust width for packades data
+*/
+$(window).load(function()
+{
+    var row = $('ul.packages');
+    if(!row.length) return;
+    $('div.package-details > div').css('min-width', Math.max(400, Math.floor(860 - row.width())) + 'px');
+});

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

@@ -5,9 +5,14 @@
     {% if packages|length %}
     <ul class="packages">
     {% for package in packages %}
-        <li>
+        <li class="has-popup">
             <section>
-                <h1><a href="{{ url('view', { 'name' : package.name }) }}">{{ package.name }}</a></h1>
+                {% if package.versions|length and package.versions[0].description|length %}
+                    <h1 class="has-description"><a href="{{ url('view', { 'name' : package.name }) }}">{{ package.name }}</a></h1>
+                    <p class="package-description">{{ package.versions[0].description }}</p>
+                {% else %}
+                    <h1><a href="{{ url('view', { '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>
@@ -23,7 +28,7 @@
                 {% 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="{{ url("user_packages", { "name" : maintainer.username }) }}">{{ maintainer.username }}</a>{{ loop.last ? '' : ', ' }}

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

@@ -14,55 +14,59 @@
 
     {% if form is defined %}
         <div>
-		    <strong id="add-maintainer"><a href="#">Add Maintainer</a></strong>
-		    <form id="add-maintainer-form" class="hidden" action="" method="POST" {{ form_enctype(form) }}>
-		        <div>
-		            <p>
-		                {{ form_label(form.user, "Username") }}
-		                {{ form_errors(form.user) }}
-		                {{ form_widget(form.user) }}
-		            </p>
-		            {{ form_rest(form) }}
-		            <input id="submit" type="submit" value="Submit" />
-		        </div>
-		    </form>
-	    </div>
+            <strong id="add-maintainer"><a href="#">Add Maintainer</a></strong>
+            <form id="add-maintainer-form" class="hidden" action="" method="POST" {{ form_enctype(form) }}>
+                <div>
+                    <p>
+                        {{ form_label(form.user, "Username") }}
+                        {{ form_errors(form.user) }}
+                        {{ form_widget(form.user) }}
+                    </p>
+                    {{ form_rest(form) }}
+                    <input id="submit" type="submit" value="Submit" />
+                </div>
+            </form>
+        </div>
     {% endif %}
 
     {% if package.versions|length %}
-	<ul class="packages">
+    <ul class="packages">
         {% for version in package.versions %}
-        <li>
-        	<section>
-	            <h1>Version {{ version.version }}</h1>
-    			<div class="package-details"><div>
-				<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 %}
-					Tags: {% for tag in version.tags %}<a href="{{ url("tag", { "name" : 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>
-			</section>
-		</li>
+        <li{% if loop.index0 > 0 and not ('-dev' in version.version) %} class="has-popup"{% endif %}>
+            <section>
+                <h1>Version {{ 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 %}
+                    Tags: {% for tag in version.tags %}<a href="{{ url("tag", { "name" : 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>
+            </section>
+        </li>
         {% endfor %}
-	</ul>
+    </ul>
     {% elseif package.crawledAt is null %}
         <p>This package has not been crawled yet, some information is missing.</p>
     {% else %}

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

@@ -85,6 +85,7 @@
 
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
         <script>!window.jQuery && document.write(unescape('%3Cscript src="/js/libs/jquery-1.5.2.min.js"%3E%3C/script%3E'))</script>
+        <script src="{{ asset('bundles/packagistweb/js/layout.js') }}"></script>
         {#<script>
             var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; // TODO Change UA-XXXXX-X
             (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;