Multi-line ellipsis on event bodies that are longer than their space can show

calendar/js/et2_widget_daycol.js

@@ -76,6 +76,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 			.addClass("calendar_calDayColAllDay")
 			.appendTo(this.header);
 		this.event_wrapper = $j(document.createElement('div'))
+			.addClass("event_wrapper")
 			.appendTo(this.div);
 		
 		this.setDOMNode(this.div[0]);

calendar/js/et2_widget_event.js

@@ -343,9 +343,13 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 
 			this.body
 				.html('<span class="calendar_calEventTitle">'+title+'</span>')
-				.append('<span class="calendar_calTimespan">'+start_time + '</span>')
+				.append('<span class="calendar_calTimespan">'+start_time + '</span>');
+			if(this.options.value.description.trim())
+			{
+				this.body
 					.append('<p>'+this.options.value.description+'</p>');
 			}
+		}
 	},
 
 	/**
@@ -358,19 +362,34 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 	 * > 4 - Show description as well, truncated to fit
 	 */
 	_small_size: function() {
+		// Pre-calculation reset
 		this.div.removeClass('calendar_calEventSmall');
+		this.body.css('height', 'auto');
+
 		if(this.options.value.whole_day_on_top) return;
-		var visible_lines = Math.floor(this.div.innerHeight() / this.title.height());
+		var line_height = parseFloat(this.div.css('line-height'));
+		var visible_lines = Math.floor(this.div.innerHeight() / line_height);
 
 		if(!this.title.height())
 		{
 			// Handle sizing while hidden, such as when calendar is not the active tab
 			visible_lines = Math.floor(egw.getHiddenDimensions(this.div).h / egw.getHiddenDimensions(this.title).h);
 		}
+		visible_lines = Math.max(1,visible_lines);
 
 		this.div.toggleClass('calendar_calEventSmall',visible_lines < 4);
 		this.div
-			.attr('data-visible_lines', visible_lines < 4 ? Math.max(1,visible_lines) : '');
+			.attr('data-visible_lines', visible_lines);
+
+
+		if(this.body.height() > this.div.height() - this.title.height() && visible_lines >= 4)
+		{
+			this.body.css('height', Math.floor((visible_lines-1)*line_height - this.title.height()) + 'px');
+		}
+		else
+		{
+			this.body.css('height', '');
+		}
 	},
 
 	/**

calendar/templates/default/app.css

@@ -556,6 +556,20 @@ Hide subsequent headers in week view with non-consolidated owners
 	cursor: pointer;
 }
 
+/** Multi-line ellipsis */
+.calendar_calEvent .calendar_calEventBody {
+	overflow: hidden;
+}
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) *:not(.calendar_calDayColAllDay) > .calendar_calEvent::after {
+	width: 100%;
+    background-color: rgba(255,255,255,0.9);
+    height: 0.9em;
+    content: "\02026";
+    left: 0px;
+    float: right;
+    padding-bottom: 5em;
+	text-indent: 5px;
+}
 /**
  * User has not accepted the invitation
  */
@@ -725,7 +739,7 @@ Hide subsequent headers in week view with non-consolidated owners
 }
 .calendar_calTimeGrid:not(.calendar_calTimeGridList)
 .calendar_calEventSmall .calendar_calEventBody {
-	padding-top: 2em;
+	padding-top: 4em;
 }
 
 /* Events as displayed in a list, not sized by time */
@@ -745,7 +759,7 @@ Hide subsequent headers in week view with non-consolidated owners
 .calendar_calTimeGridList .calendar_calDayColHeader > div[data-date] {
 	border: none;
 }
-.calendar_calTimeGridList .calendar_calDayCol > div:first-child
+.calendar_calTimeGridList .calendar_calDayCol > div.event_wrapper
 {
 	position: absolute;
 	top: 0px;

calendar/templates/pixelegg/app.css

@@ -11,7 +11,7 @@
  * @package calendar
  * @version $Id$
  */
-/* $Id: app.css 54876 2016-01-28 22:08:15Z nathangray $ */
+/* $Id: app.css 54896 2016-02-02 09:19:31Z ralfbecker $ */
 /*Media print classes*/
 @media print {
   .th td,
@@ -559,6 +559,20 @@ Hide subsequent headers in week view with non-consolidated owners
 .calendar_calEvent:hover {
   cursor: pointer;
 }
+/** Multi-line ellipsis */
+.calendar_calEvent .calendar_calEventBody {
+  overflow: hidden;
+}
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) *:not(.calendar_calDayColAllDay) > .calendar_calEvent::after {
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.9);
+  height: 0.9em;
+  content: "\02026";
+  left: 0px;
+  float: right;
+  padding-bottom: 5em;
+  text-indent: 5px;
+}
 /**
  * User has not accepted the invitation
  */
@@ -713,7 +727,7 @@ Hide subsequent headers in week view with non-consolidated owners
   display: inline;
 }
 .calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall .calendar_calEventBody {
-  padding-top: 2em;
+  padding-top: 4em;
 }
 /* Events as displayed in a list, not sized by time */
 .calendar_calTimeGridList .calendar_calTimeGridScroll {
@@ -732,7 +746,7 @@ Hide subsequent headers in week view with non-consolidated owners
 .calendar_calTimeGridList .calendar_calDayColHeader > div[data-date] {
   border: none;
 }
-.calendar_calTimeGridList .calendar_calDayCol > div:first-child {
+.calendar_calTimeGridList .calendar_calDayCol > div.event_wrapper {
   position: absolute;
   top: 0px;
   bottom: 3em;