Merge pull request #2460 from wallabag/ui-changes

UI Changes

diff --combined src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entries.html.twig
index 5d657c7e7cb9a8bed158a52d9d01da3e7eb70ea5,cc150cf1610249b5e250ba195a0291e28f7e8942..0f1c010f5c50c5f6e867cad86be459179e1d41e5
--- 1/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entries.html.twig
--- 2/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entries.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entries.html.twig
@@@ -1,15 -1,21 +1,25 @@@
  {% extends "WallabagCoreBundle::layout.html.twig" %}
  
  {% block title %}
 -    {% include "@WallabagCore/themes/common/Entry/_title.html.twig" %}
 +    {% set currentTag = '' %}
 +    {% if tag is defined %}
 +        {% set currentTag = tag %}
 +    {% endif %}
 +    {% include "@WallabagCore/themes/common/Entry/_title.html.twig" with {'currentTag': currentTag} %}
  {% endblock %}
  
  {% block content %}
-     {% include "WallabagCoreBundle:Entry:pager.html.twig" with {'entries': entries} %}
+ 
+     <div class="results">
+         <div class="nb-results">{{ 'entry.list.number_on_the_page'|transchoice(entries.count) }}</div>
+         <div class="pagination">
+             <i class="btn-clickable download-btn material-icons md-36">file_download</i>
+             <i class="btn-clickable filter-btn material-icons md-36">filter_list</i>
+             {% if entries.getNbPages > 1 %}
+                 {{ pagerfanta(entries, 'twitter_bootstrap_translated', {'proximity': 1}) }}
+             {% endif %}
+         </div>
+     </div>
  
      {% for entry in entries %}
          <div id="entry-{{ entry.id|e }}" class="entry">
@@@ -50,32 -56,32 +60,36 @@@
          </div>
      {% endfor %}
  
+     {% if entries.getNbPages > 1 %}
+         {{ pagerfanta(entries, 'twitter_bootstrap_translated', {'proximity': 1}) }}
+     {% endif %}
+ 
      <!-- Export -->
      <aside id="download-form">
      {% set currentRoute = app.request.attributes.get('_route') %}
 +    {% set currentTag = '' %}
 +    {% if tag is defined %}
 +        {% set currentTag = tag %}
 +    {% endif %}
      {% if currentRoute == 'homepage' %}
          {% set currentRoute = 'unread' %}
      {% endif %}
          <h2>{{ 'entry.list.export_title'|trans }}</h2>
          <a href="javascript: void(null);" id="download-form-close" class="close-button--popup close-button">&times;</a>
          <ul>
 -            {% if craue_setting('export_epub') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'epub' }) }}">EPUB</a></li>{% endif %}
 -            {% if craue_setting('export_mobi') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'mobi' }) }}">MOBI</a></li>{% endif %}
 -            {% if craue_setting('export_pdf') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'pdf' }) }}">PDF</a></li>{% endif %}
 -            {% if craue_setting('export_csv') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'json' }) }}">JSON</a></li>{% endif %}
 -            {% if craue_setting('export_json') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'csv' }) }}">CSV</a></li>{% endif %}
 -            {% if craue_setting('export_txt') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'txt' }) }}">TXT</a></li>{% endif %}
 -            {% if craue_setting('export_xml') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'xml' }) }}">XML</a></li>{% endif %}
 +            {% if craue_setting('export_epub') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'epub', 'tag' : currentTag }) }}">EPUB</a></li>{% endif %}
 +            {% if craue_setting('export_mobi') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'mobi', 'tag' : currentTag }) }}">MOBI</a></li>{% endif %}
 +            {% if craue_setting('export_pdf') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'pdf', 'tag' : currentTag }) }}">PDF</a></li>{% endif %}
 +            {% if craue_setting('export_csv') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'json', 'tag' : currentTag }) }}">JSON</a></li>{% endif %}
 +            {% if craue_setting('export_json') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'csv', 'tag' : currentTag }) }}">CSV</a></li>{% endif %}
 +            {% if craue_setting('export_txt') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'txt', 'tag' : currentTag }) }}">TXT</a></li>{% endif %}
 +            {% if craue_setting('export_xml') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'xml', 'tag' : currentTag }) }}">XML</a></li>{% endif %}
          </ul>
      </aside>
  
      <!-- Filter -->
      {% if form is not null %}
-     <div id="filters" class="">
+     <div id="filters">
          <form method="get" action="{{ path('all') }}">
              <h2>{{ 'entry.filters.title'|trans }}</h2>
              <a href="javascript: void(null);" id="filter-form-close" class="close-button--popup close-button">&times;</a>

diff --combined src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
index 1225e68060d29934fac9e93c675b43f9b896eb96,1f88f774e6695c3cb27c76a8ef77731edffd3548..6347aface346c17f9eb48e42a48994ba6ced9159
--- 1/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
--- 2/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
@@@ -1,19 -1,23 +1,27 @@@
  {% extends "WallabagCoreBundle::layout.html.twig" %}
  
  {% block title %}
 -  {% include "@WallabagCore/themes/common/Entry/_title.html.twig" %}
 +    {% set currentTag = '' %}
 +    {% if tag is defined %}
 +        {% set currentTag = tag %}
 +    {% endif %}
 +    {% include "@WallabagCore/themes/common/Entry/_title.html.twig" with {'currentTag': currentTag} %}
  {% endblock %}
  
  {% block content %}
-     {% include "WallabagCoreBundle:Entry:pager.html.twig" with {'entries': entries} %}
+     <div class="results clearfix">
+         <div class="nb-results left">
+             {{ 'entry.list.number_on_the_page'|transchoice(entries.count) }}
+         </div>
+         {% if entries.getNbPages > 1 %}
+             {{ pagerfanta(entries, 'twitter_bootstrap_translated', {'proximity': 1}) }}
+         {% endif %}
+     </div>
+ 
      <br />
      <ul class="row data">
          {% for entry in entries %}
-             <li id="entry-{{ entry.id|e }}" class="col l4 m6 s12">
+             <li id="entry-{{ entry.id|e }}" class="col l3 m6 s12">
                  <div class="card">
  
                      <div class="card-body">
@@@ -30,24 -34,19 +38,19 @@@
  
                          <div class="card-content">
                              {% if not entry.previewPicture is null %}
-                                 <i class="card-title grey-text text-darken-4 activator material-icons right">more_vert</i>
+                                 <i class="grey-text text-darken-4 activator material-icons right">more_vert</i>
                              {% endif %}
  
-                             <span class="card-title dot-ellipsis dot-resize-update"><a href="{{ path('view', { 'id': entry.id }) }}" title="{{ entry.title|raw }}">{{ entry.title|striptags|raw }}</a></span>
+                             <span class="card-title dot-ellipsis dot-resize-update"><a href="{{ path('view', { 'id': entry.id }) }}" title="{{ entry.title | raw | striptags }}">{{ entry.title| striptags | truncate(80, true, '…') | raw }}</a></span>
  
-                             <div class="estimatedTime grey-text">
-                                 <span class="tool reading-time">
-                                     {% set readingTime = entry.readingTime / app.user.config.readingSpeed %}
-                                     {% if readingTime > 0 %}
-                                         {{ 'entry.list.reading_time_minutes'|trans({'%readingTime%': readingTime|round}) }}
-                                     {% else %}
-                                         {{ 'entry.list.reading_time_less_one_minute'|trans|raw }}
-                                     {% endif %}
-                                 </span>
+                             <div class="original grey-text">
+                                 <a href="{{ entry.url|e }}" target="_blank" title="{{ entry.domainName|removeWww }}" class="tool original grey-text">
+                                     <span>{{ entry.domainName|removeWww }}</span>
+                                 </a>
                              </div>
  
                              {% if entry.previewPicture is null %}
-                                 <p>{{ entry.content|striptags|slice(0, 300)|raw }}&hellip;</p>
+                                 <p>{{ entry.content|striptags|slice(0, 250)|raw }}&hellip;</p>
                                  <ul class="card-entry-labels-hidden">
                                  {% for tag in entry.tags | slice(0, 2) %}
                                      <li><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a></li>
@@@ -59,16 -58,10 +62,10 @@@
  
                      {% if not entry.previewPicture is null %}
                          <div class="card-reveal">
-                             <i class="card-title grey-text text-darken-4 material-icons right">clear</i>
-                             <span class="card-title"><a href="{{ path('view', { 'id': entry.id }) }}">{{ entry.title|raw }}</a></span>
- 
-                             <div class="estimatedTime grey-text">
-                                 <span class="tool reading-time">
-                                     {% if readingTime > 0 %}{{ 'entry.list.reading_time_minutes'|trans({'%readingTime%': readingTime|round}) }}{% else %}{{ 'entry.list.reading_time_less_one_minute'|trans|raw }}{% endif %}
-                                 </span>
-                             </div>
+                             <i class="card-title activator grey-text text-darken-4 material-icons right">clear</i>
+                             <span class="card-title" title="{{ entry.title | raw | striptags }}"><a href="{{ path('view', { 'id': entry.id }) }}">{{ entry.title | raw | striptags | truncate(90, true, '…') }}</a></span>
  
-                             <p>{{ entry.content|striptags|slice(0, 300)|raw }}&hellip;</p>
+                             <p>{{ entry.content|striptags|slice(0, 250)|raw }}&hellip;</p>
  
                              <ul class="card-entry-labels-hidden">
                                  {% for tag in entry.tags %}
@@@ -79,8 -72,9 +76,9 @@@
                      {% endif %}
  
                      <div class="card-action">
-                         <span class="bold">
-                             <a href="{{ entry.url|e }}" target="_blank" title="{{ 'entry.list.original_article'|trans }}: {{ entry.title|e }} - {{ entry.domainName|removeWww }}" class="tool original grey-text"><span>{{ entry.domainName|removeWww|truncate(18) }}</span></a>
+                         <span class="reading-time grey-text">
+                             <i class="material-icons" title="{{ 'entry.list.reading_time'|trans }}">timer</i>
+                             {{ entry.readingTime / app.user.config.readingSpeed }} min
                          </span>
  
                          <ul class="tools right">
@@@ -96,25 -90,25 +94,29 @@@
          {% endfor %}
      </ul>
  
+     {% if entries.getNbPages > 1 %}
+         {{ pagerfanta(entries, 'twitter_bootstrap_translated', {'proximity': 1}) }}
+     {% endif %}
+ 
      <!-- Export -->
      <div id="export" class="side-nav fixed right-aligned">
      {% set currentRoute = app.request.attributes.get('_route') %}
 +    {% set currentTag = '' %}
 +    {% if tag is defined %}
 +        {% set currentTag = tag %}
 +    {% endif %}
      {% if currentRoute == 'homepage' %}
          {% set currentRoute = 'unread' %}
      {% endif %}
          <h4 class="center">{{ 'entry.list.export_title'|trans }}</h4>
          <ul>
 -            {% if craue_setting('export_epub') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'epub' }) }}">EPUB</a></li>{% endif %}
 -            {% if craue_setting('export_mobi') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'mobi' }) }}">MOBI</a></li>{% endif %}
 -            {% if craue_setting('export_pdf') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'pdf' }) }}">PDF</a></li>{% endif %}
 -            {% if craue_setting('export_csv') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'json' }) }}">JSON</a></li>{% endif %}
 -            {% if craue_setting('export_json') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'csv' }) }}">CSV</a></li>{% endif %}
 -            {% if craue_setting('export_txt') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'txt' }) }}">TXT</a></li>{% endif %}
 -            {% if craue_setting('export_xml') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'xml' }) }}">XML</a></li>{% endif %}
 +            {% if craue_setting('export_epub') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'epub', 'tag' : currentTag }) }}">EPUB</a></li>{% endif %}
 +            {% if craue_setting('export_mobi') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'mobi', 'tag' : currentTag }) }}">MOBI</a></li>{% endif %}
 +            {% if craue_setting('export_pdf') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'pdf', 'tag' : currentTag }) }}">PDF</a></li>{% endif %}
 +            {% if craue_setting('export_csv') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'json', 'tag' : currentTag }) }}">JSON</a></li>{% endif %}
 +            {% if craue_setting('export_json') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'csv', 'tag' : currentTag }) }}">CSV</a></li>{% endif %}
 +            {% if craue_setting('export_txt') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'txt', 'tag' : currentTag }) }}">TXT</a></li>{% endif %}
 +            {% if craue_setting('export_xml') %}<li class="bold"><a class="waves-effect" href="{{ path('export_entries', { 'category': currentRoute, 'format': 'xml', 'tag' : currentTag }) }}">XML</a></li>{% endif %}
          </ul>
      </div>