Onboarding screen

[prateek-singh-3212]

Pull Request template

Purpose / Description

Added onboarding screen.

Fixes

Fixes #9129

Approach

How does this change address the problem?

How Has This Been Tested?

Firefox browser and Galaxy M51 (API 30) Aspect ratio 20:9

Learning (optional, can help others)

Describe the research stage

Links to blog posts, patterns, libraries or addons used to solve this problem

Checklist

Please, go through these checks before submitting the PR.

• [ ] You have not changed whitespace unnecessarily (it makes diffs hard to read)
• [ ] You have a descriptive commit message with a short title (first line, max 50 chars).
• [ ] Your code follows the style of the project (e.g. never omit braces in if statements)
• [ ] You have commented your code, particularly in hard-to-understand areas
• [ ] You have performed a self-review of your own code
• [ ] UI changes: include screenshots of all affected screens (in particular showing any new or changed strings)
• [ ] UI Changes: You have tested your change using the Google Accessibility Scanner

[prateek-singh-3212]

Here is the short video.

https://user-images.githubusercontent.com/76490368/123843078-1beae000-d92f-11eb-8cb8-b99c2eb97d4f.mp4

[prateek-singh-3212]

@Arthur-Milchior please take a look.

[ShridharGoel]

The task here was to create UI of various screens in HTML and CSS, which can be used instead of images in the onboarding screen. This implementation is quite different from that.

[prateek-singh-3212]

The task here was to create UI of various screens in HTML and CSS, which can be used instead of images in the onboarding screen. This implementation is quite different from that.

Okay let me review it once again.

@ShridharGoel Image may contain text in English which will be uncomfortable for some users this is the main for not using the images. Am I Right?

[mikehardy]

Just answering one specific question - ideally we can internationalize all the strings yes so images will not work in all cases (sorry I have not had time for a more detailed review)

[ShridharGoel]

Image may contain text in English which will be uncomfortable for some users this is the main for not using the images. Am I Right?

Yes, this is one of the reasons.

[Arthur-Milchior]

First, thanks for the work. I was surprised you wanted to show a video, but after seeing it, I really loved it. Really nice to see how the screen adapt to various size. There is one test that is still missing in the video that would be quite important, right to left. I assume on wide screen, we want the logo on the right by symmetry.

This document lacks a licence.

As @ShridharGoel mentioned, this is not what was requested. Indeed, it is not a screen of the app. As I asked in #9129 I wanted a mock-up of reviewer, browser, etc... I wanted something that looks a like what the user would see when they would use the app.

However, this can clearly be used. @ShridharGoel, you can clearly create a slide with this page to start onboarding, and we'll see what is the best way store this file. I suspec we'll just use the standard java string formatting tools here, so %1$s instead of the actual string. That will also give the opportunity to see how to incorporate the image.

To answer your question @prateek-singh-3212, the three reasons to avoid using images are already in #9129. I don't know what more we could answer.

I don't think I'll merge this PR, as it is useless alone, and we'll incorporate it into the onboarding PR with the commit adding the slide (and with proper credit to you. Using

Co-authored-by: Prateek Singh

in the commit message

[Arthur-Milchior]

To be clear, I still would like you to work on what we asker. That is, a mockup of an actual screen of the app. E.g. take the deck picker and re-create it in html/css. This way we can have a real document we'll merge in the codebase. I'm not sure this html page will ever get into the codebase. In this case, just an image and text, I think the current implementation of onboarding works well enough that we don't need to use html for this slide

[prateek-singh-3212]

Sure, I will add recreate the pages of card browser deck picker etc.

[Arthur-Milchior]

Do you have a date at which you hope to have done it? I can spend some time this week-end to do this if you don't have time. I'd want it done quickly to unblock the slide work itself

[prateek-singh-3212]

If every thing goes smoothly as planned then I will provide you the first screen tomorrow. I think if I am able to make first screen on time then I will provide all the succive screen on day after tomorrow.

[prateek-singh-3212]

@Arthur-Milchior finished the CSS design of deck picker. Some Flaws:

1. Below 200 (width) sync icon is distorted. I will fix this if required (try different approach).
2. Not Supported Landscape mode. (I required then I will make it).

(LTR)

(RTL)

[prateek-singh-3212]

Short vedio of responsive test

https://user-images.githubusercontent.com/76490368/124453330-e584e900-dda4-11eb-8bbd-c197a978f26b.mp4

[Arthur-Milchior]

Really nice, thank you very much. While I may eventually love landscape mode, that is a lower priority than having the other screen. I'm happy, because with this one, we can really work with localization too

[prateek-singh-3212]

Thanks Arthur , Now I will work on rest of the pages as per the plan below:-

1. Card Reviewer
2. Add Note
3. Overview Of Statistics If I missed anything then please add. I will finish this task in within 2 days.

[Arthur-Milchior]

I'd also like browser please

[prateek-singh-3212]

Here is the screens of Reviewer and Statistic. I will upload rest of screens soon.

[prateek-singh-3212]

@Arthur-Milchior All screens completed. Here is the screenshot of the screens

[Arthur-Milchior]

That's wonderful, thanks a lot! I won't merge it because I've no idea what exactly is required right now, regarding templating, incorporating in the slide, etc... @ShridharGoel when you use those screen in your slide, think about adding Co-authored-by: Prateek Singh <[email protected]> in your commit message

[github-actions[bot]]

Hello 👋, this PR has been opened for more than 2 months with no activity on it. If you think this is a mistake please comment and ping a maintainer to get this merged ASAP! Thanks for contributing! You have 7 days until this gets closed automatically

[mikehardy]

Keeping open relationship between this and #9130 is examined and merges happen...

[BrayanDSO]

I don't expect a PR stale for two years to get work again, so I'm going to close it to keep the queue clean. The PR author can open it again if they ever got to work on it again