Fixes and improve css @media

app/config/config.yml

@@ -136,6 +136,7 @@ liip_theme:
     load_controllers: false
     themes:
         - baggy
+        - material
     autodetect_theme: wallabag_core.helper.detect_active_theme
 
     path_patterns:

src/Wallabag/CoreBundle/Resources/views/themes/material/Config/index.html.twig

@@ -6,10 +6,10 @@
 
     <div class="row">
         <div class="col s12">
-            <div class="card-panel">
+            <div class="card-panel settings">
 
                 <div class="row">
-                    <div class="col s12"  style="padding-bottom: 15px;">
+                    <div class="div_tabs col s12">
                         <ul class="tabs">
                         <li class="tab col s3"><a class="active" href="#set1">{% trans %}Wallabag{% endtrans %}</a></li>
                         <li class="tab col s3"><a href="#set2">{% trans %}RSS{% endtrans %}</a></li>
@@ -211,11 +211,4 @@
             </div>
         </div>
     </div>
-
-<script>
-  $(document).ready(function() {
-    $('select').material_select();
-  });
-</script>
-
 {% endblock %}

src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig

@@ -3,7 +3,7 @@
 {% block title %}{{ entry.title|raw }} ({{ entry.url | e | domainName }}){% endblock %}
 
 {% block menu %}
-    <ul style="width: 240px; left: 0px;" id="slide-out" class="collapsible side-nav fixed reader-mode" data-collapsible="accordion">
+    <ul id="slide-out" class="collapsible side-nav fixed reader-mode" data-collapsible="accordion">
         <li class="bold border-bottom">
             <a class="waves-effect collapsible-header" href="/">
                 <i class="mdi-action-exit-to-app small"></i>
@@ -76,15 +76,6 @@
 
     </ul>
 
-<script>
-    $(document).ready(function(){
-        $('.collapsible').collapsible({
-            accordion : false
-        });
-    });
-</script>
-
-</script>
 <style>
 main {
     padding: 0;

src/Wallabag/CoreBundle/Resources/views/themes/material/README.md

@@ -1,3 +1,5 @@
-# Baggy Theme
+# Material Theme
 
-theme created by Thomas LEBEAU alias Courgette http://thomaslebeau.fr/
+Theme created by Danilow (@modos189) Alexandr  http://modos189.ru/
+
+Used framework  http://materializecss.com/

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

@@ -60,7 +60,7 @@
         <div id="main">
             {% block menu %}
                 <nav class="cyan darken-1">
-                    <ul style="width: 240px; left: 0px;" id="slide-out" class="side-nav fixed">
+                    <ul id="slide-out" class="side-nav fixed">
                         {% block logo %}
                             <li class="logo border-bottom">
                                 <a class="waves-effect" href="{{ path('unread') }}">
@@ -70,16 +70,17 @@
                         {% endblock %}
                         <li class="bold"><a class="waves-effect" href="{{ path('unread') }}">{% trans %}unread{% endtrans %}</a></li>
                         <li class="bold"><a class="waves-effect" href="{{ path('starred') }}">{% trans %}favorites{% endtrans %}</a></li>
-                        <li class="bold"><a class="waves-effect" href="{{ path('archive') }}"}>{% trans %}archive{% endtrans %}</a></li>
+                        <li class="bold"><a class="waves-effect" href="{{ path('archive') }}">{% trans %}archive{% endtrans %}</a></li>
                         <li class="bold border-bottom"><a class="waves-effect" href="?view=tags">{% trans %}tags{% endtrans %}</a></li>
                         <li class="bold"><a class="waves-effect" href="{{ path('config') }}">{% trans %}config{% endtrans %}</a></li>
                         <li class="bold"><a class="waves-effect" class="icon icon-power" href="{{ path('logout') }}" title="{% trans %}logout{% endtrans %}">{% trans %}logout{% endtrans %}</a></li>
                     </ul>
                     <div class="nav-wrapper nav-panels">
+                        <a href="#" data-activates="slide-out" class="nav-panel-menu button-collapse"><i class="mdi-navigation-menu"></i></a>
                         <div class="input-field nav-panel-buttom">
                             <ul>
                                 <li class="bold"><a class="waves-effect" href="{{ path('new_entry') }}" id="nav-btn-add"><i class="mdi-content-add"></i></a></li>
-                                <li style="position: relative;"><a class="waves-effect" href="javascript: void(null);" id="nav-btn-search"><i class="mdi-action-search"></i></a>
+                                <li><a class="waves-effect" href="javascript: void(null);" id="nav-btn-search"><i class="mdi-action-search"></i></a>
                             </ul>
                         </div>
                         <form method="get" action="index.php">
@@ -98,30 +99,6 @@
                         </form>-->
                     </div>
                 </nav>
-
-<script>
-$(document).ready(function() {
-    //$('#nav-btn-add').click(function(){
-    //    $(".nav-panel-buttom").hide(100);
-    //    $(".nav-panel-add").show(100);
-    //    $(".input-field #search").trigger('click');
-    //    return false;
-    //});
-    $('#nav-btn-search').click(function(){
-        $(".nav-panel-buttom").hide(100);
-        $(".nav-panel-search").show(100);
-        $(".input-field #add").trigger('click');
-        return false;
-    });
-    $('.mdi-navigation-close').click(function(){
-        $(".nav-panel-add").hide(100);
-        $(".nav-panel-search").hide(100);
-        $(".nav-panel-buttom").show(100);
-        return false;
-    });
-});
-</script>
-
             {% endblock %}
 
             <main>

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

@@ -129,7 +129,7 @@ main ul.row {
 }
 
 main .card .card-content {
-    min-height: 23em;
+    min-height: 25em;
 }
 
 .card .card-content .card-title {
@@ -150,9 +150,12 @@ main .card .card-content {
     line-height: 24px;
 }
 
-.card .card-action ul.links a {
+.card .card-action a {
-    margin-right: 0;
+    margin: 0;
-    margin-left: 15px;
+}
+
+.settings .div_tabs {
+    padding-bottom: 15px;
 }
 
 /* ==========================================================================
@@ -192,3 +195,51 @@ main .card .card-content {
       padding-left: 0;
     }
   }
+
+@media only screen and (min-width : 993px) and (max-width : 1180px) {
+    .row .col.l1 {
+    width: 25%;
+    margin-left: 0; }
+    .row .col.l2 {
+    width: 33.33333%;
+    margin-left: 0; }
+    .row .col.l3 {
+    width: 41.66667%;
+    margin-left: 0; }
+    .row .col.l4 {
+    width: 50%;
+    margin-left: 0; }
+    .row .col.l5 {
+    width: 58.33333%;
+    margin-left: 0; }
+    .row .col.l6 {
+    width: 66.66667%;
+    margin-left: 0; }
+    .row .col.l7 {
+    width: 75%;
+    margin-left: 0; }
+    .row .col.l8 {
+    width: 83.33333%;
+    margin-left: 0; }
+    .row .col.l9 {
+    width: 91.66667%;
+    margin-left: 0; }
+    .row .col.l10 {
+    width: 100%;
+    margin-left: 0; }
+}
+
+@media only screen and (max-width : 993px) {
+    nav, main, footer {
+        padding-left: 0;
+    }
+    .pagination {
+        width: auto;
+    }
+}
+
+@media only screen and (max-width : 350px) {
+    .nb-results {
+        display: none;
+    }
+}

src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js

@@ -1,6 +1,28 @@
 $(document).ready(function(){
-    // Show sideNav
+    // sideNav
-
-    // Hide sideNav
     $('.button-collapse').sideNav();
+    $('select').material_select();
+    $('.collapsible').collapsible({
+        accordion : false
+    });
+
+    //$('#nav-btn-add').click(function(){
+    //    $(".nav-panel-buttom").hide(100);
+    //    $(".nav-panel-add").show(100);
+    //    $(".nav-panel-menu").hide(100);
+    //    return false;
+    //});
+    $('#nav-btn-search').click(function(){
+        $(".nav-panel-buttom").hide(100);
+        $(".nav-panel-search").show(100);
+        $(".nav-panel-menu").hide(100);
+        return false;
+    });
+    $('.mdi-navigation-close').click(function(){
+        $(".nav-panel-add").hide(100);
+        $(".nav-panel-search").hide(100);
+        $(".nav-panel-buttom").show(100);
+        $(".nav-panel-menu").show(100);
+        return false;
+    });
 });