Show search box on every page and adjust styling

src/Packagist/WebBundle/Controller/WebController.php

@@ -48,14 +48,10 @@ class WebController extends Controller
      */
     public function indexAction()
     {
-        $searchQuery = new SearchQuery;
-        $form = $this->createForm(new SearchQueryType, $searchQuery);
-
-        return array('page' => 'home', 'form' => $form->createView());
+        return array('page' => 'home', 'searchForm' => $this->createSearchForm()->createView());
     }
 
     /**
-     * @Template()
      * @Route("/packages/", name="browse")
      */
     public function browseAction(Request $req)
@@ -84,13 +80,11 @@ class WebController extends Controller
     }
 
     /**
-     * @Template()
      * @Route("/search/", name="search")
      */
     public function searchAction(Request $req)
     {
-        $searchQuery = new SearchQuery;
-        $form = $this->createForm(new SearchQueryType, $searchQuery);
+        $form = $this->createSearchForm();
 
         if ($req->query->has('search_query')) {
             $form->bindRequest($req);
@@ -154,7 +148,7 @@ class WebController extends Controller
             }
         }
 
-        return array('form' => $form->createView(), 'page' => 'submit');
+        return array('form' => $form->createView(), 'page' => 'submit', 'searchForm' => $this->createSearchForm()->createView());
     }
 
     /**
@@ -206,7 +200,7 @@ class WebController extends Controller
             throw new NotFoundHttpException('The requested vendor, '.$vendor.', was not found.');
         }
 
-        return array('packages' => $packages, 'vendor' => $vendor, 'paginate' => false);
+        return array('packages' => $packages, 'vendor' => $vendor, 'paginate' => false, 'searchForm' => $this->createSearchForm()->createView());
     }
 
     /**
@@ -230,6 +224,8 @@ class WebController extends Controller
             $data['form'] = $this->createAddMaintainerForm()->createView();
         }
 
+        $data['searchForm'] = $this->createSearchForm()->createView();
+
         return $data;
     }
 
@@ -285,12 +281,24 @@ class WebController extends Controller
             }
         }
 
+        $data['searchForm'] = $this->createSearchForm()->createView();
         return $data;
     }
 
+    public function render($view, array $parameters = array(), Response $response = null)
+    {
+        $parameters['searchForm'] = $this->createSearchForm()->createView();
+        return parent::render($view, $parameters, $response);
+    }
+
     private function createAddMaintainerForm()
     {
         $addMaintainerRequest = new AddMaintainerRequest;
         return $this->createForm(new AddMaintainerRequestType, $addMaintainerRequest);
     }
+
+    private function createSearchForm()
+    {
+        return $this->createForm(new SearchQueryType, new SearchQuery);
+    }
 }

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

@@ -108,7 +108,8 @@ a:hover {
 
 .container div.user, .container div.box, .container header, .container div.flash-message {
   width: 900px;
-  margin: auto;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 header h1 {
@@ -144,10 +145,11 @@ header p {
   -moz-border-radius: 6px;
   border-radius: 6px;
   box-shadow: rgba(0, 0, 0, 0.25) 0 1px 3px;
+  margin-bottom: 10px;
 }
 
 header {
-  margin: 0 10px 20px;
+  margin: 0 10px;
   font-size: 15px;
 }
 
@@ -351,18 +353,16 @@ input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focu
   border-color: #64c523;
   outline-style: none;
 }
-input[type="text"]:invalid, input[type="password"]:invalid, input[type="email"]:invalid, input[type="search"]:invalid {
+input[type="text"]:invalid, input[type="password"]:invalid, input[type="email"]:invalid {
   border-color: #c67700;
   color: #bf7300;
 }
-
 input[type="search"] {
   -moz-appearance:none;
   -webkit-appearance:none;
   font-size: 25px;
 }
 
-
 input[type="checkbox"] {
   float: left;
   clear: left;
@@ -376,6 +376,27 @@ form ul {
   margin: 10px 0;
 }
 
+/* Search */
+#search_query_query {
+  width: 780px;
+}
+#search-form .submit-wrapper {
+  width: 100px;
+  float: right;
+}
+#search-form .submit {
+  margin: 0;
+  padding: 6px 20px;
+  width: 100px;
+}
+#search-form p {
+  margin: 0;
+}
+.search-list {
+  margin-top: 10px;
+}
+
+/* Package */
 .package form h2 {
   margin: 10px 0;
 }

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

@@ -9,15 +9,11 @@
         previousQuery;
 
     showResults = function (page) {
-        var list = $('.package-list'),
+        var list = $('.search-list'),
             newList = $(page);
 
-        if (newList.find('.packages li').length) {
-            list.replaceWith(newList);
-            list.show();
-        } else {
-            list.hide();
-        }
+        list.html(newList.html());
+        list.removeClass('hidden');
 
         searching = false;
 

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

@@ -1,27 +1,14 @@
 {% extends "PackagistWebBundle::layout.html.twig" %}
 
-{% block scripts %}
-    <script src="{{ asset('bundles/packagistweb/js/search.js?v=2')}}"></script>
-{% endblock %}
-
-{% block content %}
+{% block search %}
     <div class="box">
         <p>Packagist is the main <a href="{{ path('about.composer') }}">Composer</a> repository. It aggregates all sorts of PHP packages that are installable with Composer.<br /><a href="{{ path('browse') }}">Browse packages</a> or <a href="{{ path('submit') }}">submit your own</a>.</p>
     </div>
 
-    &nbsp;
-
-    <div class="box">
-        {% include "PackagistWebBundle:Web:searchForm.html.twig" %}
-    </div>
-
-    &nbsp;
-
-    <div class="box package-list hidden">
-    </div>
-
-    &nbsp;
+    {{ parent() }}
+{% endblock %}
 
+{% block content %}
     <div class="box clearfix">
         <section class="getting-started">
             <h1>Getting Started</h1>

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

@@ -5,10 +5,12 @@
 {% block content %}
     <div class="box clearfix package-list">
         {% block content_title %}<h1>Packages</h1>{% endblock %}
-        {% if packages|length %}
-            {{ macros.listPackages(packages, paginate is not defined or paginate) }}
-        {% else %}
-            <p>No packages found.</p>
-        {% endif %}
+        {% block list %}
+            {% if packages|length %}
+                {{ macros.listPackages(packages, paginate is not defined or paginate) }}
+            {% else %}
+                <p>No packages found.</p>
+            {% endif %}
+        {% endblock %}
     </div>
 {% endblock %}

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

@@ -5,14 +5,17 @@
 {% endblock %}
 
 {% block content %}
+{% endblock %}
+
+{% block search %}
     <div class="box clearfix">
         <h1>Search packages</h1>
         {% include "PackagistWebBundle:Web:searchForm.html.twig" %}
-    </div>
 
-    &nbsp;
-
-    {% if packages is defined %}
-        {{ parent() }}
-    {% endif %}
+        <div class="search-list hidden">
+            {% if packages is defined %}
+                {{ block('list') }}
+            {% endif %}
+        </div>
+    </div>
 {% endblock %}

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

@@ -1,10 +1,9 @@
-<form id="search-form" action="{{ path('search') }}" method="GET" {{ form_enctype(form) }} autocomplete="off">
-    <div>
-        <p>
-            {{ form_errors(form.query) }}
-            {{ form_widget(form.query, {'attr': {'autocomplete': 'off'}}) }}
-        </p>
-        {{ form_rest(form) }}
-        <input id="submit" type="submit" value="Search" />
-    </div>
+<form id="search-form" action="{{ path('search') }}" method="GET" {{ form_enctype(searchForm) }} autocomplete="off">
+    <p class="submit-wrapper"><input class="submit" type="submit" value="Search" /></p>
+    <p>
+        {{ form_errors(searchForm.query) }}
+        {{ form_widget(searchForm.query, {'attr': {'autocomplete': 'off', 'placeholder': 'Search packages...'}}) }}
+        {{ form_rest(searchForm) }}
+    </p>
 </form>
+

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

@@ -62,6 +62,16 @@
                 {% endif %}
                 {{ app.session.clearFlashes }}
 
+                {% block search %}
+                    {% if searchForm is defined %}
+                        <div class="box">
+                            {% include "PackagistWebBundle:Web:searchForm.html.twig" %}
+                            <div class="search-list hidden">
+                            </div>
+                        </div>
+                    {% endif %}
+                {% endblock %}
+
                 {% block content %}
                 {% endblock %}
             </div>
@@ -92,6 +102,7 @@
         <script>!window.jQuery && document.write(unescape('%3Cscript src="/js/libs/jquery-1.5.2.min.js"%3E%3C/script%3E'))</script>
         <script src="{{ asset('js/libs/humane.min.js') }}"></script>
         <script src="{{ asset('bundles/packagistweb/js/layout.js') }}"></script>
+        <script src="{{ asset('bundles/packagistweb/js/search.js')}}"></script>
 
         {% if not app.debug and google_analytics.ga_key %}
             <script>