From: <nat...@us...> - 2016-02-04 22:35:44
|
Author: nathangray Date: Thu Feb 4 23:35:34 2016 New Revision: 54927 URL: http://svn.stylite.de/viewvc/egroupware?rev=54927&view=rev Log: Limit all day section to 3 lines with ellipsis, show all on hover. Modified: trunk/calendar/js/et2_widget_daycol.js trunk/calendar/templates/default/app.css trunk/calendar/templates/pixelegg/app.css trunk/calendar/templates/pixelegg/app.less Modified: trunk/calendar/js/et2_widget_daycol.js URL: http://svn.stylite.de/viewvc/egroupware/trunk/calendar/js/et2_widget_daycol.js?rev=54927&r1=54926&r2=54927&view=diff ============================================================================== --- trunk/calendar/js/et2_widget_daycol.js (original) +++ trunk/calendar/js/et2_widget_daycol.js Thu Feb 4 23:35:34 2016 @@ -532,6 +532,8 @@ this.header.children('.hiddenEventBefore').remove(); this.div.children('.hiddenEventAfter').remove(); this.event_wrapper.css('overflow','visible'); + this.all_day.removeClass('overflown'); + $j('.calendar_calEventBody', this.div).css('padding-top',''); var timegrid = this._parent; @@ -567,6 +569,11 @@ return; } } + // Check all day overflow + this.all_day.toggleClass('overflown', + this.all_day[0].scrollHeight - this.all_day.height() > 5 + ); + // Check each event this.iterateOver(function(event) { // Skip whole day events and events missing value @@ -576,7 +583,6 @@ { return; } - // Reset event.title.css({'top':'','background-color':''}); event.body.css('padding-top',''); Modified: trunk/calendar/templates/default/app.css URL: http://svn.stylite.de/viewvc/egroupware/trunk/calendar/templates/default/app.css?rev=54927&r1=54926&r2=54927&view=diff ============================================================================== --- trunk/calendar/templates/default/app.css (original) +++ trunk/calendar/templates/default/app.css Thu Feb 4 23:35:34 2016 @@ -402,8 +402,30 @@ flex-direction: row; align-items:flex-start; width: 100%; -} - + + /* Set max height of all day section */ + max-height: 4.2em; + overflow: hidden; +} +/* If more all day events than shown, show ellipsis & show all on hover */ +.calendar_calDayColHeader .calendar_calDayColAllDay.overflown:hover { + max-height: none; + overflow: visible; + position: absolute; + background-color: #f0f0f0; + z-index: 50; + padding-bottom: 2ex; +} +.calendar_calDayColHeader .calendar_calDayColAllDay.overflown:not(:hover)::after { + content: "\02026"; + line-height: 0.5em; + height: 1em; + position: absolute; + bottom: 0px; + left: 0px; + right: 0px; + text-align: center; +} .calendar_calDayColAllDay > .calendar_calEventBodySmall { white-space: nowrap; } Modified: trunk/calendar/templates/pixelegg/app.css URL: http://svn.stylite.de/viewvc/egroupware/trunk/calendar/templates/pixelegg/app.css?rev=54927&r1=54926&r2=54927&view=diff ============================================================================== --- trunk/calendar/templates/pixelegg/app.css (original) +++ trunk/calendar/templates/pixelegg/app.css Thu Feb 4 23:35:34 2016 @@ -11,7 +11,7 @@ * @package calendar * @version $Id$ */ -/* $Id: app.css 54911 2016-02-03 16:52:28Z nathangray $ */ +/* $Id: app.css 54926 2016-02-04 21:05:31Z nathangray $ */ /*Media print classes*/ @media print { .th td, @@ -412,6 +412,28 @@ flex-direction: row; align-items: flex-start; width: 100%; + /* Set max height of all day section */ + max-height: 4.2em; + overflow: hidden; +} +/* If more all day events than shown, show ellipsis & show all on hover */ +.calendar_calDayColHeader .calendar_calDayColAllDay.overflown:hover { + max-height: none; + overflow: visible; + position: absolute; + background-color: #f0f0f0; + z-index: 50; + padding-bottom: 2ex; +} +.calendar_calDayColHeader .calendar_calDayColAllDay.overflown:not(:hover)::after { + content: "\02026"; + line-height: 0.5em; + height: 1em; + position: absolute; + bottom: 0px; + left: 0px; + right: 0px; + text-align: center; } .calendar_calDayColAllDay > .calendar_calEventBodySmall { white-space: nowrap; @@ -1888,7 +1910,6 @@ /* timeGridWidget, contains timeRow's and dayCol's */ .calendar_calTimeGrid { - background-color: #f0f0f0; /* set via inline style on runtime: * height: */ @@ -1973,6 +1994,9 @@ } /* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers) */ +.calendar_calGridHeader { + background-color: #f0f0f0; +} /* contains one event: header-row & -body */ .calendar_calEvent { @@ -2048,15 +2072,6 @@ } .calendar_calEventHeaderSmall .calendar_calEventIcons img { height: 13px; -} -.calendar_calTimeGridList .calendar_calEventBody { - background: #f0f0f0 !important; -} -.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:before { - background: #f0f0f0; -} -.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:hover { - background: #f0f0f0; } /* table of the dayView containing 2 cols: 1) day-view, 2) todos */ Modified: trunk/calendar/templates/pixelegg/app.less URL: http://svn.stylite.de/viewvc/egroupware/trunk/calendar/templates/pixelegg/app.less?rev=54927&r1=54926&r2=54927&view=diff ============================================================================== --- trunk/calendar/templates/pixelegg/app.less (original) +++ trunk/calendar/templates/pixelegg/app.less Thu Feb 4 23:35:34 2016 @@ -796,7 +796,6 @@ /* timeGridWidget, contains timeRow's and dayCol's */ .calendar_calTimeGrid{ - .background_color_10_gray; /* set via inline style on runtime: * height: */ @@ -898,6 +897,7 @@ /* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers) */ .calendar_calGridHeader{ + .background_color_10_gray; } /* contains one event: header-row & -body @@ -983,13 +983,10 @@ .calendar_calTimeGridList .calendar_calEventBody { - background: #f0f0f0 !important; } .calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:before { - background : #f0f0f0; } .calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:hover { - background: #f0f0f0; } /* table of the dayView containing 2 cols: 1) day-view, 2) todos |