A minor CSS uplift for activites in calendar view

Feature Requests
1

Now that there are skylines for every activity and planned workout the calendar view feels a bit cluttered and I cant distinguish multiple activites from each other anymore very easily.

So I made a some CSS tweaking for the activities to distinguish them better.

Before:

image
image1804×695 124 KB

After:

image
image1805×726 123 KB

I am by no means a UI/UX designer so the end result is not that awesome, but I think you’ll get the point. Atleast the planned workout needs some tweaking more to be shown inside the activity “card”, but I didn’t want to touch the DOM with js.

The CSS I used:

:root {
    --background-gray: #f1f0f0;
}

.activity-list {
    gap: 0.5rem;
    padding: 0.5rem 0.2rem;
    background-color: var(--background-gray);
}

.activity {
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
}

.activity:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.wellness-info {
    background-color: white;
    margin: 0 !important;
}

.date {
    background-color: white;
}

.day {
    background-color: var(--background-gray);
}

.weather-info {
    background-color: white;
    margin: 0 !important;
}

I have made the change as a chrome extension (for myself) :slightly_smiling_face:

17 Likes
2

That does look better than my efforts! Thanks so much. I am way more of a back-end developer than front-end! Only thing is it uses a little more space but for sure this is going in for “normal” size screens!

5 Likes
3

Really like it, but it look a bit wonky on Safari on phones at the moment though

Margin on left off and not very clear when a planned activity is paired with a completed one

image
image750×1334 141 KB

4

I noticed it on the desktop now, while working on the plans for the coming weeks. A nice subtle update.

1 Like
5

This is awesome! Honestly my biggest gripe was the difficulty distinguishing multi activity days. So happy this has been adopted. I was also applying custom styling to the cal on my local device but this looks much better. Thank you!

1 Like
6

@eva just noticed these changes, well done. Thanks @david for incorporating that so fast.

@david , related: any thoughts on adding a user preferences section for custom CSS? I have some styles for intervals.icu that change the font to monospace and adds a background image. I’m sure some other folks on the forum could suggest more useful tweaks and it might be fun to have a thread here where we share them.

here’s a screenshot:

Screenshot 2024-04-07 at 15.47.15
Screenshot 2024-04-07 at 15.47.151156×622 246 KB

1 Like
7

This is such a good change, thank you to you both!

My only comment / suggestion is that days with no activities show up in white (like a workout ‘card’) and it might make more sense to have them as the background grey.

But that’s a tiny thing. The new design is a lot clearer :slight_smile:

1 Like
8

I have fixed the planned vs completed pairing:

Screenshot 2024-04-08 at 06.52.35

I noticed that you do not have the activity skyline charts enabled. Do you prefer having them off?

It’s probably easier for people to just continue using browser extensions for that. The css is already tricky to maintain. It has evolved organically right since the first days of the project. If it was all neat and tidy then maybe.

3 Likes
9

Thanks david.

Yep, preference to not have them on most of the time. Things become a little bit too busy for me with them on and I can’t focus in on the important things easily enough when I want to scan over the calendar etc.

Its a good feature though! And like most of the features, having the option to switch on/ off is great.

1 Like