Author: nathangray
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
— 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','');
— 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;
}
— 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
*/
— 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
Site24x7 APM Insight: Get Deep Visibility into Application Performance
APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month
Monitor end-to-end web transactions and take corrective actions now
Troubleshoot faster and improve end-user experience. Signup Now!
http://pubads.g.doubleclick.net/gampad/clk?id=272487151&iu=/4140
eGroupWare-cvs mailing list
eGroupWare-cvs@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/egroupware-cvs
