More design tweaks

app/Resources/TwigBundle/views/Exception/error404.html.twig

@@ -1,24 +1,5 @@
 {% extends 'PackagistWebBundle::layout.html.twig' %}
 
-{% block content_header %}
-<section class="wrapper wrapper-blue">
-    <div class="container">
-        <form autocomplete="off" method="GET" action="{{ path('search') }}" id="search-form">
-
-            <input type="search" class=" form-control" tabindex="1" placeholder="Search packages..." autofocus="autofocus" autocomplete="off" required="required" name="search_query[query]" id="search_query_query">
-
-        </form>
-
-        <div class="row">
-            <div class="col-lg-12 hidden-xs">
-                <p>Packagist is the main <a href="http://getcomposer.org/">Composer</a> repository. It aggregates all sorts of PHP packages that are installable with Composer.</p>
-                <p><a href="{{ path('browse') }}">Browse packages</a> or <a href="{{ path('submit') }}">submit your own</a>.</p>
-            </div>
-        </div>
-    </div>
-</section>
-{% endblock %}
-
 {% block content %}
 <section class="wrapper">
     <section class="container error">
@@ -27,10 +8,6 @@
             <h3 class="font-normal">It looks like you requested a page that was not found.</h3>
             <h4>Go back to the <a href="{{ path('home') }}">homepage</a> or use the search above to find the package you want.</h4>
         </div>
-
-        <div class="row hidden">
-            <div class="search-list col-md-12"></div>
-        </div>
     </section>
 </section>
-{% endblock %}
+{% endblock %}

src/Packagist/WebBundle/Controller/WebController.php

@@ -552,20 +552,29 @@ class WebController extends Controller
      * @Route(
      *     "/p/{name}.{_format}",
      *     name="view_package_alias",
-     *     requirements={"name"="[A-Za-z0-9_.-]+/[A-Za-z0-9_.-]+?", "_format"="(json)"},
+     *     requirements={"name"="[A-Za-z0-9_.-]+(/[A-Za-z0-9_.-]+?)?", "_format"="(json)"},
      *     defaults={"_format"="html"}
      * )
      * @Route(
      *     "/packages/{name}",
      *     name="view_package_alias2",
-     *     requirements={"name"="[A-Za-z0-9_.-]+/[A-Za-z0-9_.-]+?/", "_format"="(json)"},
+     *     requirements={"name"="[A-Za-z0-9_.-]+(/[A-Za-z0-9_.-]+?)?/"},
      *     defaults={"_format"="html"}
      * )
      * @Method({"GET"})
      */
     public function viewPackageAliasAction(Request $req, $name)
     {
-        return $this->redirect($this->generateUrl('view_package', array('name' => trim($name, '/'), '_format' => $req->getRequestFormat())));
+        $format = $req->getRequestFormat();
+        if ($format === 'html') {
+            $format = null;
+        }
+
+        if (false === strpos(trim($name, '/'), '/')) {
+            return $this->redirect($this->generateUrl('view_vendor', array('vendor' => $name, '_format' => $format)));
+        }
+
+        return $this->redirect($this->generateUrl('view_package', array('name' => trim($name, '/'), '_format' => $format)));
     }
 
     /**
@@ -968,6 +977,9 @@ class WebController extends Controller
 
         $data = array(
             'package' => $package,
+            'versions' => null,
+            'expandedVersion' => null,
+            'version' => null,
             'addMaintainerForm' => $form->createView(),
             'show_add_maintainer_form' => true,
         );
@@ -1023,6 +1035,8 @@ class WebController extends Controller
 
         $data = array(
             'package' => $package,
+            'versions' => null,
+            'expandedVersion' => null,
             'version' => null,
             'removeMaintainerForm' => $removeMaintainerForm->createView(),
             'show_remove_maintainer_form' => true,

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

@@ -322,6 +322,9 @@ body > section:first-child {
     padding: 26px 20px;
     color: #2c3e50;
 }
+.wrapper .container.flash-container {
+  padding-bottom: 0;
+}
 
 .content p {
     font-size: 14px;
@@ -334,7 +337,8 @@ body > section:first-child {
 }
 
 .wrapper-blue .container p {
-    margin-top: 8px;
+  margin-top: 8px;
+  margin-bottom: 0;
 }
 
 .wrapper .container .btn-white {
@@ -954,6 +958,17 @@ ul.packages .abandoned {
   font-weight: 600;
   color: #2C3E50;
 }
+.version-details.loading .title .version-number:after {
+  display: inline-block;
+  content: "";
+  width: 16px;
+  height: 16px;
+  background-image: url("../img/loader-white.gif");
+  background-repeat: no-repeat;
+  position: relative;
+  top: 2px;
+  left: 10px;
+}
 .package .version-details .release-date {
   float: right;
   position: relative;
@@ -1247,11 +1262,14 @@ pre, code {
     border-radius: 2px;
     padding: 5px 0 5px 10px;
 }
+.flash-container .alert {
+  margin-bottom: 0;
+}
 .alert-warning {
     border-left-color: #D58512;
     color: #D58512;
 }
-.alert-danger {
+.alert-danger, .alert-error {
     border-left-color: #CD3729;
     color: #CD3729;
 }

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

@@ -1,6 +1,10 @@
 /*jslint nomen: true, browser: true*/
 (function ($, humane, ZeroClipboard) {
     "use strict";
+
+    var versionCache = {},
+        ongoingRequest = false;
+
     $('#add-maintainer').click(function (e) {
         $('#remove-maintainer-form').addClass('hidden');
         $('#add-maintainer-form').toggleClass('hidden');
@@ -11,26 +15,44 @@
         $('#remove-maintainer-form').toggleClass('hidden');
         e.preventDefault();
     });
-    $('.package .version h1').click(function (e) {
-        e.preventDefault();
-        $(this).siblings('.details-toggler').click();
-    });
+
     $('.package .details-toggler').click(function () {
         var target = $(this);
-        target.toggleClass('open')
-            .prev().toggleClass('open');
-        if (target.attr('data-load-more')) {
+
+        if (versionCache[target.attr('data-version-id')]) {
+            $('.package .version-details').html(versionCache[target.attr('data-version-id')]);
+        } else if (target.attr('data-load-more')) {
+            if (ongoingRequest) { // TODO cancel previous requests instead?
+                return;
+            }
+            ongoingRequest = true;
+            $('.package .version-details').addClass('loading');
             $.ajax({
                 url: target.attr('data-load-more'),
                 dataType: 'json',
                 success: function (data) {
-                    target.attr('data-load-more', '')
-                        .prev().html(data.content);
+                    versionCache[target.attr('data-version-id')] = data.content;
+                    ongoingRequest = false;
+                    $('.package .version-details')
+                        .removeClass('loading')
+                        .html(data.content);
                 }
             });
         }
+
+        $('.package .versions .open').removeClass('open');
+        target.toggleClass('open');
     });
 
+    // initializer for #<version-id> present on page load
+    (function () {
+        var hash = document.location.hash;
+        if (hash.length > 1) {
+            hash = hash.substring(1);
+            $('.package .details-toggler[data-version-id="'+hash+'"]').click();
+        }
+    }());
+
     function forceUpdatePackage(e, updateAll) {
         var submit = $('input[type=submit]', '.package .force-update'), data;
         if (e) {

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

@@ -1,13 +1,13 @@
 <form id="search-form" action="{{ path('search.ajax') }}" method="GET" {{ form_enctype(searchForm) }} autocomplete="off">
     <div class="{% if orderBys is defined %}sortable{% endif %} row">
         <div class="hidden">{{ form_errors(searchForm.query) }}</div>
-        <div class="col-xs-9">
+        <div class="col-xs-8 col-sm-9">
             {{ form_widget(searchForm.query, {'attr': {'autocomplete': 'off', 'autofocus': 'autofocus', 'placeholder': 'Search packages...', 'tabindex': 1}}) }}
         </div>
 
         {% set hasActiveOrderBy = false %}
         {% spaceless %}
-        <div id="order-bys-wrapper" class="col-xs-4 col-lg-2{% if searchForm.vars.value.query is empty %} hidden{% endif %}">
+        <div id="order-bys-wrapper" class="col-xs-4 col-sm-3 col-lg-2{% if searchForm.vars.value.query is empty %} hidden{% endif %}">
             {% for sort, param in orderBys %}
                 <a title="{{ param.title }}" href="{{ param.href }}" class="order-by-group">
                     <i class="glyphicon {{ param.class }}{% if param.arrowClass is not empty %} active{% endif %}"></i>

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

@@ -4,9 +4,8 @@
 
         {%- if showSearchDesc == 'show' %}
         <div class="row">
-            <div class="col-lg-12 hidden-xs">
+            <div class="col-xs-12 hidden-xs">
                 <p>Packagist is the main <a href="http://getcomposer.org/">Composer</a> repository. It aggregates all sorts of PHP packages that are installable with Composer.</p>
-                <p><a href="{{ path('browse') }}">Browse packages</a> or <a href="{{ path('submit') }}">submit your own</a>.</p>
             </div>
         </div>
         {%- endif %}

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

@@ -194,14 +194,14 @@
             {% if versions|length %}
             <div class="row versions-section">
                 <div class="version-details col-md-9">
-                    {% if version %}
+                    {% if expandedVersion %}
                         {% include 'PackagistWebBundle:Web:versionDetails.html.twig' with {version: expandedVersion} %}
                     {% endif %}
                 </div>
                 <div class="col-md-3 package-aside versions-wrapper">
                     <ul class="versions">
                         {% for version in versions %}
-                            {% set expanded = version.id == expandedVersion.id %}
+                            {% set expanded = version.id == expandedVersion.id|default(false) %}
                             <li class="details-toggler version{% if loop.last %} last{% endif %}{% if expanded %} open{% endif %}" data-version-id="{{ version.version }}" data-load-more="{{ path('view_version', {versionId: version.id, _format: 'json'}) }}">
                                 <a href="#{{ version.version }}" class="version-number">
                                     {{- version.version -}}

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

@@ -108,19 +108,23 @@
                     </div>
                 </div>
             </nav>
-{#
-            {%- if app.session.flashbag.all()|length > 0 %}
+        </header>
+
+        {{ include("PackagistWebBundle:Web:searchSection.html.twig", {showSearchDesc: showSearchDesc|default('show')}) }}
+
+        {% block flashMessages %}
+            {%- if app.session.flashbag.peekAll()|length > 0 %}
             <section class="wrapper wrapper-white">
-                <div class="container">
+                <div class="container flash-container">
                 {%- for type, flashMessages in app.session.flashbag.all() %}
                     {%- for flashMessage in flashMessages %}
                         {%- if 'fos_user_' in type %}
-                            <div class="flash-message {{ type|replace({'fos_user_': ''}) }}">
+                            <div class="alert alert-{{ type|replace({'fos_user_': ''}) }}">
                                 <p>{{ flashMessage|trans({}, 'FOSUserBundle') }}</p>
                             </div>
                         {%- else %}
-                            <div class="flash-message {{ type }}">
-                                <p>{{ flashMessage }}</p>
+                            <div class="alert alert-{{ type }}">
+                                <p>{{ flashMessage|trans }}</p>
                             </div>
                         {%- endif %}
                     {%- endfor %}
@@ -128,10 +132,7 @@
                 </div>
             </section>
             {%- endif %}
-#}
-        </header>
-
-        {{ include("PackagistWebBundle:Web:searchSection.html.twig", {showSearchDesc: showSearchDesc|default('show')}) }}
+        {% endblock %}
 
         {% block content_header %}{% endblock %}