Merge pull request #2230 from modos189/issue_2055

Cut entries title in card view: continued

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

@@ -285,6 +285,12 @@ main ul.row {
 
 .card .card-content .card-title {
     line-height: 32px;
+    max-height: 64px;
+    display: block;
+}
+
+.card .card-content i.right, .card .card-reveal i.right {
+    margin-left: 0;
 }
 
 .card .card-content .estimatedTime {

src/Wallabag/CoreBundle/Resources/public/themes/material/js/jquery.tinydot.js

@@ -0,0 +1,39 @@
+/*
+ *	jQuery tinydot 0.1
+ *
+ *	Copyright (c) Alexander Danilov
+ *	www.modos189.ru
+ *
+ *	Plugin repository:
+ *	https://gitlab.com/modos189/tinydot
+ *
+ *	Licensed under the MIT license.
+ *	http://en.wikipedia.org/wiki/MIT_License
+ */
+
+(function( $, undef )
+{
+    if ( $.fn.tinydot )
+    {
+            return;
+    }
+
+    $.fn.tinydot = function( o ) {
+        var p=$(this).children('a');
+        var divh=$(this).height();
+        while ($(p).outerHeight()>divh) {
+            $(p).text(function (index, text) {
+                return text.replace(/\W*\s(\S)*$/, '...');
+            });
+        }
+    }
+})( jQuery );
+
+jQuery(document).ready(function($) {
+    //We only invoke jQuery.tinydot on elements that have dot-ellipsis class
+    $(".dot-ellipsis").each(function(){
+            var x = new Object();
+            $(this).tinydot(x);
+    });
+            
+});

src/Wallabag/CoreBundle/Resources/public/themes/material/js/jquery.tinydot.min.js

@@ -0,0 +1 @@
+!function(t,n){t.fn.tinydot||(t.fn.tinydot=function(n){for(var e=t(this).children("a"),i=t(this).height();t(e).outerHeight()>i;)t(e).text(function(t,n){return n.replace(/\W*\s(\S)*$/,"...")})})}(jQuery),jQuery(document).ready(function(t){t(".dot-ellipsis").each(function(){var n=new Object;t(this).tinydot(n)})});

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

@@ -35,7 +35,7 @@
                                 <i class="card-title grey-text text-darken-4 activator mdi-navigation-more-horiz right"></i>
                             {% endif %}
 
-                            <span class="card-title"><a href="{{ path('view', { 'id': entry.id }) }}" title="{{ entry.title|raw }}">{{ entry.title|striptags|slice(0, 42)|raw }}</a></span>
+                            <span class="card-title dot-ellipsis"><a href="{{ path('view', { 'id': entry.id }) }}" title="{{ entry.title|raw }}">{{ entry.title|striptags|raw }}</a></span>
 
                             <div class="estimatedTime grey-text">
                                 <span class="tool reading-time">

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

@@ -11,6 +11,7 @@
 {% block scripts %}
     {{ parent() }}
 
+    <script src="{{ asset('bundles/wallabagcore/themes/material/js/jquery.tinydot.min.js') }}"></script>
     <script src="{{ asset('bundles/wallabagcore/themes/material/js/materialize.min.js') }}"></script>
     <script src="{{ asset('bundles/wallabagcore/themes/material/js/init.js') }}"></script>
 {% endblock %}