Update Slides DayQueryRunPageComponent (PAT answering questions)

This is one of multiple issues concerning the PAT answering questions components. (see linked items below)

Under 'Layouts' below I put an image of what the final result should look like, when all of those issues are closed. The final layout might still change a bit until then, and there will be more issues coming up to get there.

This specific issue is only concerned with the slides.

99% of all these issues can probably be done in DayQueryRunPageComponent

Keep the current version

I do not know how far we get with the renewal DayQueryRunPageComponent until we have to deploy it. Since the current version does everything that we need, please make a copy of it before changing it, so that we can switch back at any time quickly.

If you have to make changes to other parts of the app to complete this issue, make sure the copy of the old DayQueryRunPageComponent still works.

What is to be done?

At the moment every question has one slide (plus there is one extra slide for the all-done-page). Those slides each cover the whole screen, so you will not see any borders or gaps.

Update DayQueryRunPageComponent such that the slides for each question (and the all-done-page) look like on the layouts below in the following respects:

• Questions have a green gradient (colorCategory: view) in the background, unless it is the question with the id rcc-curated-default-00-daily-notethen the background should have a blue gradient (colorCategory: share)

• The background behind the slides gets a color (colorCategory: create)

• There are gaps between the slides: make it 1rem

• The gap between the first/last slide and the border of the screen should be 2rem

• All slides have rounded corners (0.5rem)

• Set the width of the slides such that there is always enough space for a thin stripe (ca 3rem) of the next slide on the right – if there is one.

• Add a slide counter at the top left of each slide: {question number}/{number of all questions for today}

That's it, no need for further changes.

I'm a bit uneasy about the semantics of the color categories, because none of the blue or green slides have anything to do with sharing or viewing. Any ideas how to better deal with the color here?

Where to start?

• DayQueryRunPageComponent
• at lib/features/src/day-queries/day-query-run-page/day-query-run-page.component.ts

Layouts