Feat: Calendar View #311

SaraVieira · 2021-06-02T23:33:06Z

Creates a calendar view for the timeline

closes #244

src/pages/timeline.js

SaraVieira · 2021-06-03T18:27:33Z

Things done:

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

raae · 2021-06-04T05:43:27Z

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

Open Deploy Preview · Mark as Resolved

raae

This is making me so happy! Feels like progress, actual new functionality.

src/pages/timeline.js

raae · 2021-06-04T05:38:07Z

src/features/timeline/TimelineEditPage.js

  const classes = useStyles()
  const date = makeDate(entryId)
-
+  const redirectTo = path.includes("/calendar")


Here I think it could be good to do ".." as path for navigate. It will move back one.

I changed this, let me know if you still want this change

raae · 2021-06-04T05:46:35Z

src/features/timeline/TimelineIndexPage.js

 import { makeDate, entryIdFromDate } from "../utils/days"
 import { AppLayout, AppMainToolbar, AppPage } from "../app"
 import { Welcome } from "../onboarding"
 import { selectDaysBetween } from "../cycle"
 import TimelineItem from "./TimelineItem"
 import DatePicker from "./DatePicker"
+import Calendar from "./Calendar"


praise: I like this choice of moving between the views

raae · 2021-06-04T05:47:46Z

src/features/timeline/TimelineIndexPage.js

  return (
    <AppLayout>
      <AppPage>
        <AppMainToolbar>
          <DatePicker date={selectedDate} />
          <IconButton
            aria-label="Scroll to today"
-            onClick={() => navigate(`/timeline/${entryIdFromDate(new Date())}`)}
+            onClick={() =>


nitpick: This seems to not work, it goes back to timeline view when clicked if on calendar

raae · 2021-06-04T05:58:36Z

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 · 2021-06-04T08:11:22Z

😸 👍

SaraVieira · 2021-06-04T12:21:07Z

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 · 2021-06-04T12:21:29Z

Moved everything in the calendar to a new page :)

raae · 2021-06-07T05:44:59Z

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 · 2021-06-08T19:39:41Z

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 · 2021-06-08T19:47:48Z

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 · 2021-06-08T20:00:21Z

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 · 2021-06-08T20:12:23Z

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 · 2021-06-08T20:26:54Z

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 · 2021-06-08T20:29:52Z

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

SaraVieira · 2021-06-09T10:08:48Z

@raae Border has been added and info removed 🚀

raae

suggestion: I would like the first column to be Monday (I will later add option to have Sunday)
suggestion: When clicking a day you go to /<date> and then there is an edit button that adds /edit to the path.
suggestion: In the grid item there could be a dot for each tag (will later be color coded)
suggestion: The /date could look kind of like a timeline item

Just make as much the functional stuff you have time for, and then I will polish it.

I am a little tired, so let me know if anything is unclear. Will look over it tomorrow morning.

start work

7de4c55

SaraVieira requested a review from raae June 2, 2021 23:33

SaraVieira added 4 commits June 3, 2021 01:36

lint fixes

ae374e8

mobile

35665c9

add redirect uris

eca2d76

remove css file

6628578

SaraVieira commented Jun 3, 2021

View reviewed changes

src/pages/timeline.js Outdated Show resolved Hide resolved

Merge branch 'main' of github.com:raae/pow-app into calendar-view

420b3ba

remove log

cee6970

raae reviewed Jun 4, 2021

View reviewed changes

make new page

94fa97b

raae changed the title ~~Very early version of calendar view~~ feat: Very early version of calendar view, closes #244 Jun 7, 2021

raae mentioned this pull request Jun 8, 2021

Support emoji as tags #318

Open

SaraVieira changed the title ~~feat: Very early version of calendar view, closes #244~~ Feat: Calendar Viw Jun 8, 2021

SaraVieira changed the title ~~Feat: Calendar Viw~~ Feat: Calendar View Jun 8, 2021

SaraVieira added 2 commits June 9, 2021 11:52

Merge branch 'main' of github.com:raae/pow-app into calendar-view

34a19bb

add border to first period day

230a018

raae self-requested a review June 9, 2021 19:23

raae reviewed Jun 9, 2021

View reviewed changes

SaraVieira added 3 commits June 9, 2021 23:41

start week at mondy

4fc9e9c

add dots when there are tags

d000aa0

make one per hashtag

18627cc

SaraVieira marked this pull request as ready for review June 15, 2021 12:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: Calendar View #311

Feat: Calendar View #311

SaraVieira commented Jun 2, 2021

SaraVieira commented Jun 3, 2021

raae commented Jun 4, 2021

raae left a comment

raae Jun 4, 2021

SaraVieira Jun 4, 2021

raae Jun 4, 2021

raae Jun 4, 2021 •

edited

Loading

SaraVieira Jun 4, 2021

raae commented Jun 4, 2021

olavea commented Jun 4, 2021

SaraVieira commented Jun 4, 2021

SaraVieira commented Jun 4, 2021

raae commented Jun 7, 2021

troubalex commented Jun 8, 2021

troubalex commented Jun 8, 2021 •

edited

Loading

raae commented Jun 8, 2021 •

edited

Loading

SaraVieira commented Jun 8, 2021

raae commented Jun 8, 2021

SaraVieira commented Jun 8, 2021

SaraVieira commented Jun 9, 2021 •

edited

Loading

raae left a comment •

edited by SaraVieira

Loading

Feat: Calendar View #311

Are you sure you want to change the base?

Feat: Calendar View #311

Conversation

SaraVieira commented Jun 2, 2021

SaraVieira commented Jun 3, 2021

raae commented Jun 4, 2021

raae left a comment

Choose a reason for hiding this comment

raae Jun 4, 2021

Choose a reason for hiding this comment

SaraVieira Jun 4, 2021

Choose a reason for hiding this comment

raae Jun 4, 2021

Choose a reason for hiding this comment

raae Jun 4, 2021 • edited Loading

Choose a reason for hiding this comment

SaraVieira Jun 4, 2021

Choose a reason for hiding this comment

raae commented Jun 4, 2021

olavea commented Jun 4, 2021

SaraVieira commented Jun 4, 2021

SaraVieira commented Jun 4, 2021

raae commented Jun 7, 2021

troubalex commented Jun 8, 2021

troubalex commented Jun 8, 2021 • edited Loading

raae commented Jun 8, 2021 • edited Loading

SaraVieira commented Jun 8, 2021

raae commented Jun 8, 2021

SaraVieira commented Jun 8, 2021

SaraVieira commented Jun 9, 2021 • edited Loading

raae left a comment • edited by SaraVieira Loading

Choose a reason for hiding this comment

raae Jun 4, 2021 •

edited

Loading

troubalex commented Jun 8, 2021 •

edited

Loading

raae commented Jun 8, 2021 •

edited

Loading

SaraVieira commented Jun 9, 2021 •

edited

Loading

raae left a comment •

edited by SaraVieira

Loading