Access to search, filters, export on mobile

app/Resources/static/themes/material/css/main.css

@@ -283,6 +283,16 @@ nav input {
   color: #aaa;
 }
 
+nav {
+  height: auto;
+}
+
+.nav-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
 .nav-wrapper .button-collapse {
   padding: 0 15px;
 }
@@ -291,8 +301,10 @@ nav input {
   display: none;
 }
 
-.nav-panels {
-  overflow: hidden;
+.nav-panel-buttom {
+  display: flex;
+  flex-grow: 1;
+  justify-content: right;
 }
 
 .nav-panel-buttom li {
@@ -357,7 +369,7 @@ nav input {
 .input-field.nav-panel-add form,
 .input-field.nav-panel-search,
 .input-field.nav-panel-search form {
-  height: 100%;
+  flex-grow: 1;
 }
 
 /* ==========================================================================
@@ -807,6 +819,14 @@ article aside .tools li {
     width: auto;
   }
 
+  .nav-panels .action {
+    padding-right: 0.75rem;
+  }
+
+  .nav-panel-buttom {
+    justify-content: space-around;
+  }
+
   #article {
     max-width: 35em;
     margin-left: auto;
@@ -843,11 +863,13 @@ article aside .tools li {
   .pagination li.next {
     width: auto;
   }
-}
 
-@media only screen and (min-width: 400px) {
-  .nav-panel-buttom {
-    float: right;
+  .drag-target + .drag-target {
+    height: 50%;
+  }
+
+  .drag-target + .drag-target + .drag-target {
+    top: 50%;
   }
 }
 

src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig

@@ -80,30 +80,28 @@
                 {% block title %}
                 {% endblock %}
             </div>
-            <div class="input-field nav-panel-buttom">
-                <ul>
-                    <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" 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" 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>
+            <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" 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" 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')})) }}
                 <label for="search" class="active"><i class="material-icons search">search</i></label>