Nav close button alignment and nav boxes improved

4 files changed, 38 insertions, 40 deletions

diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
index 54066e95..8abf90c1 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
@@ -9,7 +9,7 @@
         <div class="determinate"></div>
     </div>
     <nav class="hide-on-large-only">
-        <div class="nav-wrapper cyan darken-1">
+        <div class="nav-panel-item cyan darken-1">
             <ul>
                 <li>
                     <a href="#" data-activates="slide-out" class="button-collapse">
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/new_form.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/new_form.html.twig
index 8d5d053e..e0d5e794 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/new_form.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/new_form.html.twig
@@ -1,4 +1,4 @@
-<form name="entry" method="post" action="{{ path('new_entry')}}">
+<form class="input-field nav-panel-item nav-panel-add" style="display: none" name="entry" method="post" action="{{ path('new_entry')}}">
     {% if form_errors(form) %}
         <span class="black-text">{{ form_errors(form) }}</span>
     {% endif %}
@@ -9,6 +9,7 @@
     {% endif %}
 
     {{ form_widget(form.url, { 'attr': {'autocomplete': 'off', 'placeholder': 'entry.new.placeholder'} }) }}
+    <i class="material-icons close">clear</i>
 
     {{ form_rest(form) }}
 </form>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/search_form.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/search_form.html.twig
index ba8a8454..ba1b3aac 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/search_form.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/search_form.html.twig
@@ -1,4 +1,4 @@
-<form name="search" method="GET" action="{{ path('search')}}">
+<form class="input-field nav-panel-item nav-panel-search" style="display: none" name="search" method="GET" action="{{ path('search')}}">
     {% if form_errors(form) %}
         <span class="black-text">{{ form_errors(form) }}</span>
     {% endif %}
@@ -11,6 +11,7 @@
     <input type="hidden" name="currentRoute" value="{{ currentRoute }}" />
 
     {{ form_widget(form.term, { 'attr': {'autocomplete': 'off', 'placeholder': 'entry.search.placeholder'} }) }}
+    <i class="material-icons close">clear</i>
 
     {{ form_rest(form) }}
 </form>
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 aa1e8a10..6472d182 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
@@ -93,44 +93,40 @@
                 <a class="waves-effect icon icon-power" href="{{ path('fos_user_security_logout') }}">{{ 'menu.left.logout'|trans }}</a>
             </li>
         </ul>
-        <div class="nav-wrapper nav-panels">
-            <div class="nav-panel-top">
-                <button data-activates="slide-out" class="nav-panel-menu button-collapse"><i class="material-icons">menu</i></button>
-                <h1 class="left action">
-                    {% block title %}
-                    {% endblock %}
-                </h1>
-            </div>
-            <ul class="input-field nav-panel-buttom">
-                <li class="bold">
-                    <a class="waves-effect tooltipped" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.add_new_entry'|trans }}" href="{{ path('new') }}" id="nav-btn-add">
-                        <i class="material-icons">add</i>
-                    </a>
-                </li>
-                <li>
-                    <a class="waves-effect tooltipped" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.search'|trans }}" href="javascript: void(null);" id="nav-btn-search">
-                        <i class="material-icons">search</i>
-                    </a>
-                </li>
-                <li id="button_filters">
-                    <a class="nav-panel-menu button-collapse-right tooltipped js-filters-action" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.filter_entries'|trans }}" href="#" data-activates="filters">
-                        <i class="material-icons">filter_list</i>
-                    </a>
-                </li>
-                <li id="button_export">
-                    <a class="nav-panel-menu button-collapse-right tooltipped js-export-action" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.export'|trans }}" href="#" data-activates="export">
-                        <i class="material-icons">file_download</i>
-                    </a>
-                </li>
-            </ul>
-            <div class="input-field nav-panel-search" style="display: none">
-                {{ render(controller("WallabagCoreBundle:Entry:searchForm", {'currentRoute': app.request.attributes.get('_route')})) }}
-                <i class="material-icons close">clear</i>
-            </div>
-            <div class="input-field nav-panel-add" style="display: none">
-                {{ render(controller("WallabagCoreBundle:Entry:addEntryForm")) }}
-                <i class="material-icons close">clear</i>
+        <div class="nav-panels">
+            <div class="nav-panel-actions nav-panel-item">
+                <div class="nav-panel-top">
+                    <button data-activates="slide-out" class="nav-panel-menu button-collapse"><i class="material-icons">menu</i></button>
+                    <h1 class="left action">
+                        {% block title %}
+                        {% endblock %}
+                    </h1>
+                </div>
+                <ul class="input-field nav-panel-buttom">
+                    <li class="bold">
+                        <a class="waves-effect tooltipped" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.add_new_entry'|trans }}" href="{{ path('new') }}" id="nav-btn-add">
+                            <i class="material-icons">add</i>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="waves-effect tooltipped" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.search'|trans }}" href="javascript: void(null);" id="nav-btn-search">
+                            <i class="material-icons">search</i>
+                        </a>
+                    </li>
+                    <li id="button_filters">
+                        <a class="nav-panel-menu button-collapse-right tooltipped js-filters-action" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.filter_entries'|trans }}" href="#" data-activates="filters">
+                            <i class="material-icons">filter_list</i>
+                        </a>
+                    </li>
+                    <li id="button_export">
+                        <a class="nav-panel-menu button-collapse-right tooltipped js-export-action" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.export'|trans }}" href="#" data-activates="export">
+                            <i class="material-icons">file_download</i>
+                        </a>
+                    </li>
+                </ul>
             </div>
+            {{ render(controller("WallabagCoreBundle:Entry:searchForm", {'currentRoute': app.request.attributes.get('_route')})) }}
+            {{ render(controller("WallabagCoreBundle:Entry:addEntryForm")) }}
         </div>
     </nav>
 {% endblock %}