Handle filter form using some JS

Instead of displaying an ugly form

src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entries.html.twig

@@ -4,24 +4,34 @@
 
 {% block content %}
     {% block pager %}
-    {% if entries is not empty %}
         <div class="results">
             <div class="nb-results">{{ entries.count }} {% trans %}entries{% endtrans %}</div>
-            <div class="pagination">
+                <div class="pagination">
-                {% for p in range(1, entries.nbPages) if entries.nbPages > 1 %}
+                <a href="#" id="filter">{% trans %}Filter{% endtrans %}</a>
-                    <li>
+                {% if entries is not empty %}
-                        <a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': p})) }}" class="{{ currentPage == p ? 'current':''}}" >{{ p }}</a>
+                    –
-                    </li>
+                    {% for p in range(1, entries.nbPages) if entries.nbPages > 1 %}
-                {% endfor %}
+                        <li>
+                            <a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': p})) }}" class="{{ currentPage == p ? 'current':''}}" >{{ p }}</a>
+                        </li>
+                    {% endfor %}
+                {% endif %}
             </div>
         </div>
-    {% endif %}
     {% endblock %}
 
+    <div id="filter-form" class="messages info popup-form">
+        <form method="get" action="{{ path('all') }}">
+            <h2>{% trans %}Filter{% endtrans %}</h2>
+            <a href="javascript: void(null);" id="filter-form-close" class="close-button--popup close-button">&times;</a>
+            {{ form_rest(form) }}
+            <button class="btn waves-effect waves-light" type="submit" id="submit-filter" value="filter">{% trans %}Filter{% endtrans %}</button>
+        </form>
+    </div>
+
     {% if entries is empty %}
         <div class="messages warning"><p>{% trans %}No articles found.{% endtrans %}</p></div>
     {% else %}
-        <div><form action="{{ path('all') }}">{{ form_rest(form) }}<button class="btn waves-effect waves-light" type="submit" id="submit-filter" value="filter">Filter</button></form></div>
         {% for entry in entries %}
             <div id="entry-{{ entry.id|e }}" class="entry">
                 <h2><a href="{{ path('view', { 'id': entry.id }) }}">{{ entry.title|raw }}</a></h2>

src/Wallabag/CoreBundle/Resources/views/themes/baggy/public/css/main.css

@@ -939,6 +939,19 @@ pre code {
 		font-size: 0.96em;
 }
 
+#filter-form {
+    margin-top: 30px !important;
+    width: 500px;
+    height: 370px;
+    right: 5em;
+    left: inherit;
+}
+
+#filter-form form {
+    width: 500px;
+    height: 370px;
+}
+
 
 /* ==========================================================================
    6 = Media Queries

src/Wallabag/CoreBundle/Resources/views/themes/baggy/public/js/popupForm.js

@@ -2,6 +2,7 @@ $(document).ready(function() {
 
     $("#search-form").hide();
     $("#bagit-form").hide();
+    $("#filter-form").hide();
 
     //---------------------------------------------------------------------------
     // Toggle the "Search" popup in the sidebar
@@ -18,6 +19,13 @@ $(document).ready(function() {
         }
     }
 
+    //---------------------------------------------------------------------------
+    // Toggle the "Filter" popup on entries list
+    //---------------------------------------------------------------------------
+    function toggleFilter() {
+        $("#filter-form").toggle();
+    }
+
     //---------------------------------------------------------------------------
     // Toggle the "Save a Link" popup in the sidebar
     //---------------------------------------------------------------------------
@@ -50,6 +58,11 @@ $(document).ready(function() {
         $("#searchfield").focus();
     });
 
+    $("#filter").click(function(){
+        closePopups();
+        toggleFilter();
+    });
+
     $("#bagit").click(function(){
         closePopups();
         toggleBagit();
@@ -60,13 +73,11 @@ $(document).ready(function() {
         toggleSearch();
     });
 
+    $("#filter-form-close").click(function(){
+        toggleFilter();
+    });
+
     $("#bagit-form-close").click(function(){
         toggleBagit();
     });
-
-    // $("#").click(function(){
-    //     toggleSearch();
-    // });
-
-
 });