Merge pull request #2230 from modos189/issue_2055

Cut entries title in card view: continued

5 files changed, 48 insertions, 1 deletions

diff --git a/src/Wallabag/CoreBundle/Resources/public/themes/material/css/main.css b/src/Wallabag/CoreBundle/Resources/public/themes/material/css/main.css
index b4e082d3..eb4eebd8 100755
--- a/src/Wallabag/CoreBundle/Resources/public/themes/material/css/main.css
+++ b/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 {
diff --git a/src/Wallabag/CoreBundle/Resources/public/themes/material/js/jquery.tinydot.js b/src/Wallabag/CoreBundle/Resources/public/themes/material/js/jquery.tinydot.js
new file mode 100644
index 00000000..d2bf7fb6
--- /dev/null
+++ b/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);
+    });
+            
+});
diff --git a/src/Wallabag/CoreBundle/Resources/public/themes/material/js/jquery.tinydot.min.js b/src/Wallabag/CoreBundle/Resources/public/themes/material/js/jquery.tinydot.min.js
new file mode 100644
index 00000000..32c5799f
--- /dev/null
+++ b/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)})});
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
index c8e4a533..2110b889 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
+++ b/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">
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 a5c16792..0573e8e5 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
+++ b/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 %}