5 files changed, 112 insertions, 20 deletions

diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
index 7777dc7f..4fbc4473 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
@@ -18,7 +18,6 @@
     {% if entries is not empty %}
         <div class="results clearfix">
             <div class="nb-results left">{{ entries.count }} {% trans %}entries{% endtrans %}</div>
-            <div class="left"><form>{{ form_rest(form) }}<button class="btn waves-effect waves-light" type="submit" id="submit-filter" value="filter">Filter</button></form></div>
             <ul class="pagination right">
                 {% for p in range(1, entries.nbPages) if entries.nbPages > 1 %}
                     <li class="{{ currentPage == p ? 'active':'waves-effect'}}">
@@ -62,4 +61,40 @@
             {% endfor %}
         </ul>
     {% endif %}
+
+
+    <!-- Filters -->
+    <div id="filters" class="side-nav fixed right-aligned">
+        <form>
+
+            <h4 class="center">{% trans %}Filters{% endtrans %}</h1>
+
+            <div class="row">
+
+                <div class="col s12">
+                    <label>{% trans %}Reading time in minutes{% endtrans %}</label>
+                </div>
+
+                <div class="input-field col s6">
+                    {{ form_widget(form.readingTime.left_number, {'type': 'number'}) }}
+                    <label for="entry_filter_readingTime_left_number">{% trans %}from{% endtrans %}</label>
+                </div>
+
+                <div class="input-field col s6">
+                    {{ form_widget(form.readingTime.right_number, {'type': 'number'}) }}
+                    <label for="entry_filter_readingTime_right_number">{% trans %}to{% endtrans %}</label>
+                </div>
+
+                <div class="col s6">
+                    <a href="#!" class="center waves-effect waves-green btn-flat" id="clean_form_filters">{% trans %}Clean{% endtrans %}</a>
+                </div>
+
+                <div class="col s6">
+                    <button class="btn waves-effect waves-light" type="submit" id="submit-filter" value="filter">{% trans %}Filter{% endtrans %}</button>
+                </div>
+
+            </div>
+
+        </form>
+    </div>
 {% endblock %}
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Security/login.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Security/login.html.twig
index 73abc3f8..2c513ffe 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Security/login.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Security/login.html.twig
@@ -23,19 +23,23 @@
                             <span class="black-text"><p>{{ flashMessage }}</p></span>
                         {% endfor %}
 
-                        <div class="input-field s12">
-                            <label for="username">{% trans %}Username{% endtrans %}</label>
-                            <input type="text" id="username" name="_username" value="{{ last_username }}" />
-                        </div>
+                        <div class="row">
 
-                        <div class="input-field s12">
-                            <label for="password">{% trans %}Password{% endtrans %}</label>
-                            <input type="password" id="password" name="_password" />
-                        </div>
+                            <div class="input-field col s12">
+                                <label for="username">{% trans %}Username{% endtrans %}</label>
+                                <input type="text" id="username" name="_username" value="{{ last_username }}" />
+                            </div>
+
+                            <div class="input-field col s12">
+                                <label for="password">{% trans %}Password{% endtrans %}</label>
+                                <input type="password" id="password" name="_password" />
+                            </div>
+
+                            <div class="input-field col s12">
+                                <input type="checkbox" id="remember_me" name="_remember_me" checked />
+                                <label for="remember_me">{% trans %}Keep me logged in{% endtrans %}</label>
+                            </div>
 
-                        <div class="input-field s12">
-                            <input type="checkbox" id="remember_me" name="_remember_me" checked />
-                            <label for="remember_me">{% trans %}Keep me logged in{% endtrans %}</label>
                         </div>
 
                     </div>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
index 17136566..554865d7 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
@@ -57,6 +57,7 @@
                 <ul>
                     <li class="bold"><a class="waves-effect" href="{{ path('new') }}" id="nav-btn-add"><i class="mdi-content-add"></i></a></li>
                     <li><a class="waves-effect" href="javascript: void(null);" id="nav-btn-search"><i class="mdi-action-search"></i></a>
+                    <li id="button_filters"><a href="#" data-activates="filters" class="nav-panel-menu button-collapse-right"><i class="mdi-content-filter-list"></i></a></li>
                 </ul>
             </div>
             <form method="get" action="index.php">
@@ -68,16 +69,9 @@
             </form>
             <div class="input-field nav-panel-add" style="display: none">
                 {{ render(controller( "WallabagCoreBundle:Entry:addEntryForm" )) }}
-                <label for="add"><i class="mdi-content-add"></i></label>
+                <label for="add" class="active"><i class="mdi-content-add"></i></label>
                 <i class="mdi-navigation-close"></i>
             </div>
-            <!--<form name="entry" method="post" action="{{ path('new_entry') }}">
-                <div class="input-field nav-panel-add" style="display: none">
-                    <input id="add entry_url" name="entry[url]" type="search" required placeholder="{% trans %}Enter your link here{% endtrans %}">
-                    <label for="add"><i class="mdi-content-add"></i></label>
-                    <i class="mdi-navigation-close"></i>
-                </div>
-            </form>-->
         </div>
     </nav>
 {% endblock %}
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
index bf7e667e..2497e3e9 100755
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
@@ -60,6 +60,10 @@ nav, main, footer {
    1 = Nav
    ========================================================================== */
 
+nav input {
+    color: #aaa;
+}
+
 .nav-wrapper .button-collapse {
     padding: 0px 15px;
 }
@@ -96,6 +100,38 @@ nav, main, footer {
     white-space: nowrap;
 }
 
+.nav-panels .input-field input {
+    display: block;
+    line-height: inherit;
+    padding-left: 4rem !important;
+    width: calc(100% - 8rem);
+}
+
+.nav-panels .input-field input:focus {
+    background-color: #fff;
+    border: 0;
+    box-shadow: none;
+    color: #444;
+}
+
+.input-field.nav-panel-add label {
+    left: 1rem;
+}
+
+.input-field.nav-panel-add .mdi-navigation-close {
+    position: absolute;
+    top: 0;
+    right: 1rem;
+    color: transparent;
+    cursor: pointer;
+    font-size: 2rem;
+    transition: .3s color;
+}
+
+#button_filters {
+    display: none;
+}
+
 /* ==========================================================================
    2 = Side-nav
    ========================================================================== */
@@ -133,6 +169,15 @@ nav, main, footer {
 }
 
 /* ==========================================================================
+ * 3 = Filters slider
+ * ========================================================================== */
+
+#filters button {
+    padding: 0px;
+    width: 100%;
+}
+
+/* ==========================================================================
    3 = Cards
    ========================================================================== */
 
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js
index 9341cb5a..4adc1a8d 100755
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js
@@ -1,3 +1,16 @@
+function init_filters() {
+    // no display if filters not aviable
+    if ($("div").is("#filters")) {
+        $('#button_filters').show();
+        $('.button-collapse-right').sideNav({ edge: 'right' });
+        $('#filters').css({ "left": "auto" });
+        $('#clean_form_filters').click(function(){
+            $('#filters input').val('');
+            return false;
+        });
+    }
+}
+
 $(document).ready(function(){
     // sideNav
     $('.button-collapse').sideNav();
@@ -5,6 +18,7 @@ $(document).ready(function(){
     $('.collapsible').collapsible({
         accordion : false
     });
+    init_filters();
 
     $('#nav-btn-add').click(function(){
        $(".nav-panel-buttom").hide(100);