Vertical bars are almost invisible in week view

[claell]

At first I thought there are no vertical bars at all, but they are only not really visible. This makes it harder to read the calendar when there are not many events.

[georgehrke]

cc @nextcloud/designers @jancborchardt

[georgehrke]

@claell What version are you on? (both Nextcloud and calendar versions)

[claell]

Nextcloud version 11.0.1, calendar version 1.5.0

[eppfel]

I would need to see some proposals for comparison. Not a big issue IMO, but, yes vertical bars could be stronger than horizontal ones.

[claell]

Just checked on another monitor and there the lines are better visible, but also could be stronger.

[jancborchardt]

The vertical bars could be exactly colored like the stronger horizontal bars, but no stronger.

[claell]

@jancborchardt I think this is already the case.

[jancborchardt]

Yeah, so I think it’s proper. The horizontal bars to delineate the time are more important because it’s smaller steps. Weekdays are very wide already so easier to distinguish. If the vertical bars would be darker they would take precedence over the horizontal ones, which is wrong.

[claell]

Ah, did not see that this was a reply to @eppfel.

Then I suggest to make both darker and/or stronger.
A few mockups:
Darker lines:

I did a quick research how this is handled in analog calendars and they often use a different vertical delimiter, this would look like:

Darker lines:

[eppfel]

Nice work 👍

Kind of like the gaps approach, but I don't believe it fits the nextcloud look. Would need to see it with context.

Maybe do not interrupt the horizontal separater between all-day- and not-all-day events? 🤔

And can you try, the idea of @jancborchardt making it just the same width as the horizontal separater?

[claell]

I did some more mockups showing them in context and without interrupting the horizontal separator.

As I am using only an image manipulation program it is hard to modify width.
But I just had a closer look and it seems @jancborchardt was right. The width of both horizontal and vertical lines is equal (1px) and only the color is different.

Darker:

[jancborchardt]

Great stuff @claell! :) I really like the vertical separation via whitespace (also in the header) and I think it fits our style of showing less and using whitespace rather than additional lines.

Do you want to start a pull request with that? :) By the way, I also added you to the designers team, so welcome! 🎉

[claell]

Thanks :)

I have almost no experience with js or webdesign unfortunately, so I don't know how to achieve what I have mocked up.

Also I don't know how to test the changes afterwards.

[jancborchardt]

@claell this actually is a very good starter issue to get into CSS I would say. :) Just right-click the calendar in your browser and inspect it. There should be some border-right or border-left attributes in the CSS you can set to none to make the border go away. Then you can use padding-left and padding-right on each of the td elements to achieve the whitespace.

If you need more help, us @nextcloud/designers are glad to support you and help you get involved! :)

[claell]

I played around a bit with the inspector yesterday but didn't find the right things to change.

I managed to remove the horizontal borders now, but I don't get the horizontal lines "cut".

[eppfel]

@claell The layout is a bit cheated. I had a quick look at it yesterday. There is one table overlaying the other. You have to edit both of them.

[claell]

But I think I cannot change the space between horizontal borders with padding, as this is just resizing the borders around the content afaik: http://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css/10994718#10994718

[georgehrke]

@claell @jancborchardt @eppfel How do we want to proceed here? :)

[jancborchardt]

As far as I can see the horizontal lines are darker. :) Made in a PR some weeks ago I think.

[Dennis1993]

#421 Maybe this is a improvement? I changed the color a little bit of the grid

[claell]

Sorry for the late reply. As I told before, I did not know how to implement the mockups I created. So if nobody else is trying to do this, I guess what #421 does is fine.