Feat: Calendar View

[SaraVieira]

Creates a calendar view for the timeline

closes #244

[SaraVieira]

Things done:

• Insert calendar view with CSS Grid
• Some layout creation
• Route change when on calendar
• New icons
• New components

[raae]

Could the info about the current state be moved underneath the current' week's row?

Browser metadata

``` Path: /timeline/calendar/ Browser: Chrome 90.0.4430.212 on Mac OS 10.13.6 Viewport: 1920 x 978 @2x Language: en-GB Cookies: Enabled ``` [View on BrowserStack](https://live.browserstack.com/dashboard#url=https%3A%2F%2Fdeploy-preview-311--pow-app.netlify.app%2Ftimeline%2Fcalendar%2F&os=OS+X&os_version=High+Sierra&browser=Chrome&browser_version=90.0&resolution=1920x978&speed=1&start=true)

Open Deploy Preview · Mark as Resolved

[raae]

thought: Should remove "add note" and make the whole square a button that will take you to a /<date> that then gives you a detailed view of the date and then from that page go to `//edit? As it will be hard to fit all the info in the square?

[olavea]

😸 👍

[SaraVieira]

Could the info about the current state be moved underneath the current' week's row?

Browser metadata Open Deploy Preview · Mark as Resolved

This is actually super hard in CSS grid, to remove flow of elements :/

Trying it now

[SaraVieira]

Moved everything in the calendar to a new page :)

[raae]

Could the info about the current state be moved underneath the current' week's row?

This is actually super hard in CSS grid, to remove flow of elements :/

Trying it now

suggestion: The purple info block should be "connected" to current month/date not the next menses prediction (as it feels like it is now)

[troubalex]

Could the info about the current state be moved underneath the current' week's row?

This is actually super hard in CSS grid, to remove flow of elements :/

You might run into the so called visual moat issue, where users don't register the block of text at all regardless of where you place it. We're all so used to jumping over these kinds of elements. 😅

As an alternative, have you considered giving a visual indication of "day 1" on the calendar view instead? I tag my period days with 🩸 emojis.

(Also, hi @SaraVieira 👋 please ignore me until @raae says something else. We've been talking about the app for a while among ourselves 😅 )

[troubalex]

Could the info about the current state be moved underneath the current' week's row?

This is actually super hard in CSS grid, to remove flow of elements :/ Trying it now

suggestion: The purple info block should be "connected" to current month/date not the next menses prediction (as it feels like it is now)

Oh wait, now I get what you're trying here. Hum, that is going to be fiddly. 🤔 Apple Health solves this (very poorly) by giving you a month view per prediction (period and fertility here). Clue does visual indicators for different types of predictions.

You may have to keep the calendar to a minimum to avoid overloading it, and then maybe add another view that gives a better insight into what is going on over the course of a cycle and makes more detailed predictions?

[raae]

suggestion: The purple info block should be "connected" to current month/date not the next menses prediction (as it feels like it is now)

Oh wait, now I get what you're trying here. Hum, that is going to be fiddly. 🤔 Apple Health solves this (very poorly) by giving you a month view per prediction (period and fertility here). Clue does visual indicators for different types of predictions.

You may have to keep the calendar to a minimum to avoid overloading it, and then maybe add another view that gives a better insight into what is going on over the course of a cycle and makes more detailed predictions?

suggestion: Now that I think of it, this "info" block could be skipped in the grid view as more dates will be visible. In the timeline view it's needed as otherwise you might have to scroll a lot to see the next period date.

Future plans @troubalex is to give the tags colors and then show as dots on the day, you open/press/click to see more of the info and then add emojii support #318

[SaraVieira]

This makes sense, I will remove this info block from the calendar view and we should give more prominence to the first day, maybe a red background?

hello @troubalex 👋

[raae]

This makes sense, I will remove this info block from the calendar view and we should give more prominence to the first day, maybe a red background?

hello @troubalex 👋

I think I might fill in som data in those blocks in the near future, so maybe a red border?

[SaraVieira]

Sure! Will add that tomorrow morning and let you know when it's done :)

[SaraVieira]

@raae Border has been added and info removed 🚀