feat(list): long title is displayed on 2 lines

infra-geo-ouverte · Jun 26, 2017 · d7f9414 · d7f9414
1 parent 561b0a5
commit d7f9414
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/lib/layer/layer-item/layer-item.component.html b/src/lib/layer/layer-item/layer-item.component.html
@@ -7,7 +7,7 @@
     [collapsed]="layer.collapsed"
     (toggle)="toggleLegend($event)">
   </md-icon>
-  <h4 md-line>{{layer.title}}</h4>
+  <h4 md-line [md-tooltip]="layer.title">{{layer.title}}</h4>
 
   <button
     md-icon-button

diff --git a/src/lib/shared/list/list.component.styl b/src/lib/shared/list/list.component.styl
@@ -19,6 +19,19 @@ md-list {
   position: static;
 }
 
+
+:host >>> .mat-list .mat-list-item .mat-list-text>* {
+  white-space: normal
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  max-height: 36px;
+  line-height: 18px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+
 :host >>> .mat-list .mat-list-item.mat-list-item-avatar .mat-list-item-content {
   display: -webkit-flex;
   height: $igo-list-item-height;