Issue with calendar layout after upgrading to 17.1.20180321-4.1

ldecoker 2018-04-12 15:20:57 UTC #1

Hello!

I changed a little bit the layout of the egroupware application by creating a new theme css. This css contains the exact same entries than the pixelegg css plus my modifications. It was working until I upgraded EGW to latest version (17.1.20180321-4.1). The calendar layout is just a mess. I so decided to do the customization in another way: in my own css, I will import the pixelegg and then add the customization I want. In that way, after upgrading I should not have to redo everyhting. But even if my css only has imported “pixelegg.css”, the rendering of the calendar (did not check other section) is the same mess. Is there something that has changed in regards of theming? I get used to do websites using framework (doing override or developement around the base) and it’s the first time for me to have so much difficulties to customize an interface for a customer. Any help would be appreciated

RalfBecker 2018-04-30 07:51:54 UTC #4

You have not written from where you coming. Was that an update within 17.1 or from 16.1?

One problem with a CSS include statement is the browser cache. Even if we changed something in the included file, you wont get it, unless you (and all your user) clear the browser cache.

Better to use a less file to included these dependencies and create a single CSS file, to which EGroupware will add a cache-buster.

A good example/start-point is to use the import statements from

github.com

EGroupware/egroupware/blob/master/calendar/templates/mobile/app.less

/**
 *
 * Calendar - Mobile
 *
 * Please do NOT change app.css directly, instead change app.less and compile it!
 * Pixleegg Template app.css
 * @link http://www.egroupware.org
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Hadi Nategh <hn@stylite.de>
 * @package calendar
 * @version $Id: app.less 55033 2016-02-16 18:49:17Z hnategh $
 */
@import (reference) "../../../pixelegg/less/definitions.less";
@import (reference) "../../../pixelegg/mobile/app_colors.less";
@import (less) "../pixelegg/app.less";
/* tablets and smartphones  */
@media all {
	#calendar-toolbar {
		height: 70px;
		box-shadow: 0px 4px 5px 2px silver;

This file has been truncated. show original

and then add your own calendar modification, starting with nothing at first, to see your setup is correct.

To compile the less file to a css file you can either use your IDE eg. Netbeans or use the toolchain we use and documented on the Readme page for a Git installation:

to get minified JavaScript and CSS you need to install nodejs and grunt, if you have not already done so
install nodejs from your distribution package manager
npm install -g grunt-cli # installs grunt command globally, if you have not already done so
npm install # installs required npm/grunt modules into node_modules/ dir
run grunt manually after every update, or better uncomment grunt steps in .mrconfig

Ralf