Drop jquery.dotdotdot for a lighter css-only solution

CHANGELOG.md

@@ -24,6 +24,8 @@
   [#838](https://github.com/opendatateam/udata/pull/838)
 - Drop `jquery-slimscroll` and fix admin menu scrolling
   [#851](https://github.com/opendatateam/udata/pull/851)
+- drop jquery.dotdotdot for a lighter css-only solution (less memory consumption)
+  [#853](https://github.com/opendatateam/udata/pull/853)
 
 ## 1.0.6 (2017-04-01)
 

js/legacy.js

@@ -3,5 +3,4 @@
  */
 import $ from 'jquery';  // here only as bootstrap dependency
 import 'bootstrap';  // Stil required for navbar, dropdowns, contribute modal and remaining tabsets
-import 'utils/ellipsis';
 import 'i18n';

less/udata/mixins.less

@@ -21,6 +21,19 @@
     text-overflow: ellipsis;
 }
 
+/**
+ * Dirty tricks for Webkit based browsers
+ * to perform multiline ellipsis
+ */
+.clamp(@lines) {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: @lines;
+    -webkit-box-orient: vertical;
+}
+
+.clamp-2 { .clamp(2) }
+
 
 .square-stamp(@color) {
     padding: 2px 4px;

package.json

@@ -82,7 +82,6 @@
     "bootstrap-slider": "~7.1.0",
     "chart.js": "^1.1.1",
     "diff": "^2.2.3",
-    "jQuery.dotdotdot": "BeSite/jQuery.dotdotdot#v1.7.4",
     "fine-uploader": "~5.11.10",
     "font-awesome": "^4.6.3",
     "highlight.js": "^9.9.0",

udata/templates/dataset/display.html

@@ -387,7 +387,7 @@ <h3>{{ _('Reuses') }}</h3>
                                     src="{{ reuse.image|placeholder('reuse') }}">
                             </a>
                             <div class="caption">
-                                <h4 class="ellipsis-dot">
+                                <h4 class="clamp-2">
                                     <a href="{{ url_for('reuses.show', reuse=reuse) }}" title="{{ reuse.title }}">
                                         {{ reuse.title }}
                                     </a>

udata/templates/dataset/resource/list-item.html

@@ -2,8 +2,8 @@
 <div id="resource-{{resource.id}}" class="list-group-item"
     data-checkurl="{{ url_for('api.checkurl') }}"
     @click="showResource('{{resource.id}}', $event, {{ resource.owner is defined|tojson }})">
-    <div class="format-label pull-left ellipsis-dot" v-tooltip tooltip-placement="left">
-        <span data-format="{{ resource_format }}">
+    <div class="format-label pull-left" v-tooltip tooltip-placement="left">
+        <span class="ellipsis" data-format="{{ resource_format }}">
             {{ resource_format }}
         </span>
     </div>

udata/templates/dataset/search-result.html

@@ -14,10 +14,10 @@
             <img src="{{ ''|placeholder('organization') }}" alt="">
         </div>
         {% endif %}
-        <div class="result-body ellipsis-dot">
-            <h4 class="result-title">{{ dataset.title }}</h4>
+        <div class="result-body">
+            <h4 class="result-title ellipsis">{{ dataset.title }}</h4>
 
-            <div class="result-description">
+            <div class="result-description clamp-2">
                 {{ dataset.description|mdstrip(300) }}
             </div>
         </div>

udata/templates/organization/search-result.html

@@ -8,9 +8,9 @@
                 width="70" height="70">
         </div>
         {{ badge_if_certified(organization) }}
-        <div class="result-body ellipsis-dot">
-            <h4 class="result-title">{{ organization.name }}</h4>
-            <div class="result-description">
+        <div class="result-body">
+            <h4 class="result-title ellipsis">{{ organization.name }}</h4>
+            <div class="result-description clamp-2">
                 {{ organization.description|mdstrip(300) }}
             </div>
         </div>

udata/templates/reuse/search-result.html

@@ -6,9 +6,9 @@
                 src="{{ reuse.image(70)|placeholder('reuse') }}"
                 width="70" height="70">
         </div>
-        <div class="result-body ellipsis-dot">
-            <h4 class="result-title">{{ reuse.title }}</h4>
-            <div class="result-description">
+        <div class="result-body">
+            <h4 class="result-title ellipsis">{{ reuse.title }}</h4>
+            <div class="result-description clamp-2">
             {{ reuse.description|mdstrip(300) }}
             </div>
         </div>

udata/templates/territories/search-result.html

@@ -7,9 +7,9 @@
                 src="{{ logo }}"
                 width="64" height="70">
         </div>
-        <div class="result-body ellipsis-dot">
-            <h4 class="result-title">{{ territory.html_title|safe }}</h4>
-            <div class="result-description">
+        <div class="result-body">
+            <h4 class="result-title ellipsis">{{ territory.html_title|safe }}</h4>
+            <div class="result-description clamp-2">
                 {{ _('INSEE code:') }} {{ territory.code }}<br/>
                 {% if territory.postal_string %}
                     {{ _('Postal code:') }} {{ territory.postal_string }}