Topic: Add additional content to sidebar?

I love the flexibility of LuxCal, but would like to modify it a little to suit a narrow width iFrame.

The all-vertical format of the Sidebar is perfect, but it's limited to displaying date, time and title for each event; I'd like to be able to display the other event details too, without the need for a js hover-over (which doesn't work on a smartphone), but this would mean adding to the code of lcsbar.php - and what to add / modify isn't at all obvious to me.

An obvious alternative would be to use the 'Upcoming Events' list, since that already contains the full details for each event. However that is laid out in two columns, date on the left and everything else on the right, which isn't great when squeezed down to a narrow width, as there are only a few words on each line on the right, and lots of empty space on the left. In theory I guess the code in 'upcoming.php' could be modified to create a single column design, but the code is again rather obscure.

And I suppose an alternative would be to modify a copy of rssfeed.php - retaining just the code that generates the individual events.

Is there anyone with enough knowledge of the code / coding who could point me in the right direction with any of these? Or is it just too complex for a casual hacker...

Re: Add additional content to sidebar?

Hi Jay,

We have a quarter horse, called Jay Golden Surprise, and therefore I'm offering the following wink
Two possibilities:
1. I can modify the sidebar (lcsbar.php) for you, remove the hover feature and add the fields you want.
2. I create a new "display" for you with exactly the layout and fields you want. I could for instance take "display 2" (see LuxCal Displays in the left-hand menu) and tailor it to your needs.
Possibility 2 has the advantage that it works "out of the box" and has a lot of settings you can change to meet your needs (colors, fonts, what events to display, etc.). I already planned to produce a new 'display' for narrow-width devices, so this option has my preference.

If you like this offer, please let me know the exact layout you want (event fields, order, where the crlfs should go). Depending on your needs, this will take me 1 - 3 days.

Roel

3 (edited by Jay 2018-12-07 21:48:14)

Re: Add additional content to sidebar?

Hi Roel

That really is a very kind offer! Thanks!

I really don't mind on the technology behind it - whatever is easiest to create & maintain (option 2, by the sound of it) - but I'm personally am happy styling in CSS. Rather than go into lots of description, I've done a mockup to show the kind of thing I had in mind - see below. Hope that's useful? Will try to check back here over the weekend in case of any questions.

Jay

https://yapics.com/a3307rgEZ12

Re: Add additional content to sidebar?

Hi Jay,

As promised, I've produced a new 'display', called display3, especially designed for narrow-width mobile devices. You can download it HERE. The zip-file contains a "black", a "white" and a "red" version of exactly the same 'display'.
Almost everything you see on the graphical interface (colors, fonts, font sizes, events to show, layout, etc.) can be tailored in the header part of the file. Give it a try and let me know your findings. I have added it to the LuxSoft site (LuxCal Displays) and I will include it in the next LuxCal release.
Please note: Displays use the calendar toolboxes and the calendar settings, like date format, time format, first day of the week, etc., and therefore must be located in the calendar root directory.

Roel

5 (edited by Jay 2018-12-10 02:41:28)

Re: Add additional content to sidebar?

Hi Roel

I've been giving it a try and it looks very good - many thanks!

I do have some feedback / suggestions, though, for consideration:

1) Due to the short length of the lines of text (as a result of the narrow width), the 'text-align:justify' and 'text-justify:inter-word' (line 233) aren't ideal, resulting in some large gaps between words, in particular when you get this:

        | for   a  demonstration   follow |
        | this                               url: |
        | http://www.luxsoft.eu/lcforum |
        | /viewtopic.php                      |

... so I'd suggest either left alignment by default, or a user option to select the alignment, rather than having to hack the code?

2) Again, due to line length, it might be useful to be able to select the date format used - so rather than 'Saturday 9 December', the option to use 'Saturday 9 Dec' or 'Sat 9 December'?

3) Line 30 - $evtWin selects whether clicking on the title opens an event window. It would be cool if another option was to be able to open the attachment (if one exists)

4) Lines 54 to 57 - Margins & Boarders. Maybe have this section come before the color settings? I was trying to make the border disappear by setting it to transparent, but setting $CBORD to hex #00 doesn't work - before finding there was an on/off switch in the next section.

5) Add an 'official' option to set a border corner radius?

6) Add an official option in the CSS to style the <br> tags in order to add a few pixels of padding between sections of the event text (as on my mockup)?

7) Line 263 - This adds an H5 tag to the date. However for search purposes, it should perhaps be the event title that takes the heading tag?

8) I see that I can format URLs by changing the inline CSS, but maybe there could be an official option to style this too?

Hope that's helpful - and once again, thanks very much for doing this (at all, let alone so rapidly)...

Jay

Re: Add additional content to sidebar?

Hi Jay,

Thanks for all your useful suggestions! Ive implemented most of them as follows:
1. 'justify' removed. This was inherited from an other 'display' and was  a mistake
2. Done, The date format can now be defined in the settings
3. If on line 27 (new display) '8' is part of the number list, then attachment links are part of the event body, which - when clicked - will open the download dialogue.
4. Done
5. Done
6. This can already be done by specifying the Line Height in the Font Definitions. Explanation with examples added
7. Changed
8. This is hard to do. There are an infinite number of styles one can set for URL links. The color of the link can be specified.

You can download the updated 'displays' HERE. Again the zip-file contains a "black", a "white" and a "red" version of exactly the same 'display'.
You can see  live versions of this display3 via the LuxCal Display button on the left.

Roel

7 (edited by Jay 2018-12-20 00:14:34)

Re: Add additional content to sidebar?

Hi Roel

Thanks again for the quick changes! I've added a couple more notes, using numbering as above:

6. Yes, line height can be changed, but this affects the gaps between all lines, not the gaps between the sections of the event (e.g. the separation between 'venue' and 'category', etc.). There's probably a more elegant way of doing it using divs, but styling the <br> tag works, e.g adding this to the CSS section.:
   br {display:block; margin-top:5px;}

7a. The header tag isn't always working as intended. If the date and title are on separate lines ($tt1Line = 0) then the H5 tag isn't applied to anything.

7b. Maybe the H4 and H5 tags should be reversed, so the title takes the more important tag?

Regards

Jay

Re: Add additional content to sidebar?

Hi Jay,

6. You're right. I've added a configurable 'br-style'.
7. The h5-tags don't make sense; I will replace them by p-tags.

All up-to-date displays are shown on the LuxCal Displays page of this website. I've added a download button just under each display, you will be able to download the latest display3.php files from the LuxCal displays page.

Regards,
Roel