yvonne-liu / week16 Goto Github PK

so that users can visualize what these methods look like (and so they will find our page more beautiful).

icons are already available in the assets folder of this project.

relates #4

As we go, we'll document learnings from the frontend masters elm course

Using either navigation or beginnerProgram

so that I can filter through the information

Build the view that shows detailed information on contraceptive methods, once the user has clicked on a 'find out more' type of CTA.

...so that I can make a decision as to whether my current form of contraceptives is helping me.

Do we want such a large divide between the text and the button on desktop?

My suggestion is to vertically align the text and button element and have half the current amount of spacing between them. We could also add another container to limit the width of the content so that the text looks as beautiful as it does on mobile ✨

to something more meaningful
currently 'elmHubHeader

when screen width is above approx 750px, the text should appear larger (currently looks a bit lost).

@media (min-width:750px) {
- increase font-size AND/OR
- increase letter spacing
}

... so that I can make an informed decision about my sexual reproductive health.

After hacking together a couple of views in Elm yesterday afternoon and starting the Frontend Master's Elm course - we are collectively in ❤️ with Elm.

Our aim for today is to:

• learn as much about Elm as we can in a day (through the excellent 9-hr Frontend Masters course)
• understand how to implement making our app offline first #3

Knowledge needed by end of spike:

What do we need to know about elm in order to set up our project and start building views?

We need to undertake a spike into PWAs so that we can make our app offline-first

Ad this model will include the information for both hormonal and non-hormonal methods (and toggle the view depending on which 'tab' the user selects), so I think this name should be clearer as to what the model does.

Currently more like paragraph text than headings.

Ideas include:

• increasing font/ spacing
• having a different font & size set for these clickable headings that take you to a new page (would also apply to #43 if we were to do this)

There'll be some inconsistencies in how we're setting height etc in our css (what are you gonna do when there's 4 people working on one stylesheet 👩‍🎨 )

Let's try to remove svg code from the main elm app as it makes the file harder to read.

vh is buggy in some browsers. Let's use % instead 🎉

We must build the views for the information flow.

Screens are:

• home
• intro to information section
• choose a type of contraception to view (hormonal/ non-hormonal)
• view all methods of contraception in selected type, and a short synopsis on each
• in-depth information on a contraceptive

relates #1

Currently the view doesn't fill the whole page.

so that I can easily access either type of method and don't get trapped in one section (which could skewer the choices I make).