Sizing fixes for better (intitial) layout

calendar/js/app.js

@@ -566,7 +566,6 @@ app.classes.calendar = AppJS.extend(
 				var translate = direction == "down" ? "translateY(-50%)" : (direction == "right" ? "translateX(-50%)" : "");
 				wrapper.css({"transform": translate});
 				window.setTimeout(function() {
-					var scrollTop = $j('.calendar_calTimeGridScroll',original).scrollTop();
 
 					cloned.remove();
 					
@@ -589,7 +588,9 @@ app.classes.calendar = AppJS.extend(
 					});
 
 					// Re-scroll to start of day
-					$j('.calendar_calTimeGridScroll',original).scrollTop(scrollTop);
+					template.widgetContainer.iterateOver(function(w) {
+						w._resizeTimes();
+					},this, et2_calendar_timegrid);
 
 					window.setTimeout(function() {
 						if(app.calendar)
@@ -1823,19 +1824,26 @@ app.classes.calendar = AppJS.extend(
 			for(var i = 0; i < view.etemplates.length; i++)
 			{
 				$j(view.etemplates[i].DOMContainer).show();
+				view.etemplates[i].resize();
 			}
 			// Toggle todos
 			if(state.state.view == 'day' || this.state.view == 'day')
 			{
 				if(state.state.view == 'day' && state.state.owner.length === 1 && !isNaN(state.state.owner) && state.state.owner[0] > 0)
 				{
-					view.etemplates[0].DOMContainer.style.width = "70%";
+					if(this.state.view !== 'day')
+					{
+						view.etemplates[0].widgetContainer.iterateOver(function(w) {
+							w.set_width(w.div.width() * 0.7);
+						},this,et2_calendar_timegrid);
+					}
 					$j(view.etemplates[1].DOMContainer).css("left","69%");
 					// TODO: Maybe some caching here
 					this.egw.jsonq('calendar_uiviews::ajax_get_todos', [state.state.date, state.state.owner[0]], function(data) {
 						this.getWidgetById('label').set_value(data.label||'');
 						this.getWidgetById('todos').set_value({content:data.todos||''});
 					},view.etemplates[1].widgetContainer);
+					view.etemplates[0].resize();
 				}
 				else
 				{
@@ -1845,12 +1853,22 @@ app.classes.calendar = AppJS.extend(
 						$j(this).hide();
 					},app.classes.calendar.views.day.etemplates[1].DOMContainer),1000);
 					$j(app.classes.calendar.views.day.etemplates[0].DOMContainer).css("width","100%");
+					view.etemplates[0].widgetContainer.iterateOver(function(w) {
+						w.set_width('100%');
+					},this,et2_calendar_timegrid);
 				}
 			}
 			else
 			{
 				$j(view.etemplates[0].DOMContainer).css("width","100%");
 			}
+
+			// Trigger resize to get correct sizes, as they may have sized while
+			// hidden
+			for(var i = 0; i < view.etemplates.length; i++)
+			{
+				view.etemplates[i].resize();
+			}
 			this.state = jQuery.extend({},state.state);
 
 			// List view (nextmatch) has slightly different fields

calendar/js/et2_widget_daycol.js

@@ -323,23 +323,23 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM],
 	set_left: function(left) {
 		// Maybe?
 		window.setTimeout(jQuery.proxy(function() {
-			if(this.div)
+		if(this.div)
-			{
+		{
-				this.div.css('left',left);
+			this.div.css('left',left);
-				// Headers are positioned relative
+			// Headers are positioned relative
-				//this.header.css('left',left);
+			//this.header.css('left',left);
-			}
+		}
 		},this),1);
-		
+
 	},
 	set_width: function(width) {
 		this.options.width = width;
 		window.setTimeout(jQuery.proxy(function() {
-			if(this.div)
+		if(this.div)
-			{
+		{
-				this.div.outerWidth(this.options.width);
+			this.div.outerWidth(this.options.width);
-				this.header.outerWidth(this.options.width);
+			this.header.outerWidth(this.options.width);
-			}
+		}
 		},this),1);
 	},
 

calendar/js/et2_widget_timegrid.js

@@ -639,11 +639,12 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 			this.rowHeight = new_height;
 			var rows = $j('.calendar_calTimeRow',this.scrolling).height(this.rowHeight);
 			this.days.css('height', (this.rowHeight*rows.length)+'px');
-			
+
-			// Scroll to start of day
+			$j('.calendar_calAddEvent',this.scrolling).height(this.rowHeight);
-			this._top_time = (wd_start * this.rowHeight) / this.options.granularity;
-			this.scrolling.scrollTop(this._top_time);
 		}
+		// Scroll to start of day
+		this._top_time = (wd_start * this.rowHeight) / this.options.granularity;
+		this.scrolling.scrollTop(this._top_time);
 	},
 
 	/**
@@ -1531,6 +1532,21 @@ var et2_calendar_timegrid = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResiz
 			
 			// Re-do time grid
 			this._drawGrid();
+
+			// Just re-did everything, no need to do more
+			return;
+		}
+
+		// Try to resize width, though animations cause problems
+		var day_width = ( $j(this.getInstanceManager().DOMContainer).width() - (this.div.innerWidth() - this.days.innerWidth()))/this.day_list.length;
+		// update day widgets
+		for(var i = 0; i < this.day_list.length; i++)
+		{
+			var day = this.day_widgets[i];
+
+			// Position
+			day.set_left((day_width * i) + 'px');
+			day.set_width(day_width + 'px');
 		}
 	}
 });

calendar/templates/default/app.css

@@ -243,6 +243,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	transition: width 1s ease-in-out;
 	z-index:30;
 	white-space: initial;
+	padding-bottom: 2ex;
 }
 .calendar_calDayColHeader > div[data-date] {
 	height: 16px;
@@ -292,8 +293,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 	flex-direction: row;
 	align-items:flex-start;
 	width: 100%;
-	height: 100%;
-	padding-bottom: 2ex;
 }
 
 .calendar_calDayColAllDay > .calendar_calEventBodySmall {