Usability issues in timeline view

Ideas & Features
1

I’m having little issues using timeline view on Fibery. I list them here rondomly:

  1. Actually to show the current date there is a red (on the dark theme) line placed in the current date column. First issue is that this line is behind all timeline items so when the timeline is full, items hide the red line and it become barely visible.

  2. The current date is not visible at a glance because there is no change in color of the cell containing the day number. I tried to apply a style but there is no HTML class or id to use and there is no way to “customize” the appearance using Chrome extensions like StyleBot. I think that highlighting the current day column would greatly enhance the user experience and the usability.

  3. When you enable fields to be shown, if the timeline item is longer than the screen, fields are not visible because they are rendered at the end of the item bar

2

Try injecting this custom CSS to make the red “Today line” more visible, and lie on top of your events so it is not hidden by them:

.MarkerCanvas>.TimelineContent {
    width: 16px !important;
    z-index: 999;
    mix-blend-mode: color;
}

image
image908×351 16.9 KB

1 Like
3

Great suggestion. I wasn’t able to find where the “today line” DOM node was. This solves points 1 and 2, at least on my side.

I also added this:

.TimelineItemRenderer.tooltip .TimelineItemRenderer.Box .Title {
    mix-blend-mode: difference;
}

so that text in highlighted timeline bar is readable. It will “fade” other titles a little bit but it’s something I can bear with.

4

Hello! I just got to this post and wanted to try this on my Fibery… but where exactly do I enter this custom CSS code?

Thanks!

5

You would need to install a css editor extension to your browser (Fibery doesn’t include the option)

1 Like