Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 马丽 sees a splash screen when opening app #8

Closed
2 tasks done
toshify opened this issue Feb 27, 2020 · 0 comments · Fixed by #13
Closed
2 tasks done

feat: 马丽 sees a splash screen when opening app #8

toshify opened this issue Feb 27, 2020 · 0 comments · Fixed by #13
Assignees
@toshify
Labels
front end

Comments

@toshify
Copy link
Collaborator

toshify commented Feb 27, 2020 •
edited
Loading

马丽 taps a link in 威信. She sees a splash screen with an animation (to try to communicate that the app is not frozen but making progress loading). When the app is ready, she sees the help introduction screen, or the start screen if she has seen the instructions introduction screen 2-3 times before.
马丽 opens the app from 威信 favorites. The app responds as above.
马丽 opens the app from phone dashboard. The app responds as above.
If the app loses internet access, see Issue #9.

Requires

  • Minimizes assets required for splash screen
  • Sets minimum timer to show splash for at least 500 ms

See issue #14 re: pre-loading of certain assets/functionality.
@toshify toshify self-assigned this Feb 27, 2020
@toshify toshify added this to the i20-02-18-Infrastructure milestone Feb 27, 2020
@toshify toshify mentioned this issue Mar 20, 2020
Merged
@toshify toshify linked a pull request Mar 20, 2020 that will close this issue
feat: add startup splash, instruction overlay, tech foundation #13
Merged
toshify pushed a commit that referenced this issue May 11, 2020
@toshify
[#8] splash+instructions
304c4d8 
[#8] splash+instructions

Startup splash screen and instructions overlay

- adds inital splash screen on load both in browser and in PWA from
  phone's start screen.
- adds splash animation inline in index.html awaiting App component
- adds proper TypeScrip formatting
- adds linting
- generates icons and splash with pwa-assets-generator
- adds delay to mount if time since navStart>2000
- configures splash delay to only delay in prod
- aligns ios splash with loader ani
- adds vuetify material design and get instructions graphic
- adds vuetify svg icons as well as font icons
- configures vuetify to use mdiSvg
- configures vuetify to make custom properties available for css
- updates Home to use vuetify for layout
- moves push to s3 script into packages.json scripts section
- gets eslint in vscode working (see .eslinrc.js)
- adds html overflow-y auto to index to avoid scroll bar when NOT on
mobile
- adds functional navigation bar
- adds typescript shims for handling svg files as objects
- updates @vue/cli and plugins to latest
- adds yarn versioning and local yarn
- adds workspace cfg and starts trigger on instructions button
- adds amplify cfg at root

All tests passing!
@toshify toshify added the A.1 label May 12, 2020
toshify pushed a commit that referenced this issue May 21, 2020
@toshify
[#8] Adds splash screen, instructions overlay, technology foundation
1ad9aae 
PR #8
Issue #1, #2, #6, #8

✔️ **All tests passing!**

- adds inital splash screen on load both in browser and in PWA from
  phone's start screen.
- adds splash animation inline in index.html awaiting App component
- adds proper TypeScrip formatting
- adds linting
- generates icons and splash with pwa-assets-generator
- adds delay to mount if time since navStart>2000
- configures splash delay to only delay in prod
- aligns ios splash with loader ani
- adds vuetify material design and get instructions graphic
- adds vuetify svg icons as well as font icons
- configures vuetify to use mdiSvg
- configures vuetify to make custom properties available for css
- updates Home to use vuetify for layout
- moves push to s3 script into packages.json scripts section
- gets eslint in vscode working (see .eslinrc.js)
- adds html overflow-y auto to index to avoid scroll bar when NOT on
mobile
- adds functional navigation bar
- adds typescript shims for handling svg files as objects
- updates @vue/cli and plugins to latest
- adds yarn versioning and local yarn
- adds workspace cfg and starts trigger on instructions button
- adds amplify cfg at root

All tests passing!
@toshify toshify added this to To do in Development and operations via automation Apr 23, 2021
@toshify toshify moved this from To do to Done in Development and operations Apr 23, 2021
toshify added a commit that referenced this issue May 14, 2021
@toshify
[#8] Adds splash screen, instructions overlay, technology foundation
b4805bf 
PR #8
Issue #1, #2, #6, #8

✔️ **All tests passing!**

- adds inital splash screen on load both in browser and in PWA from
  phone's start screen.
- adds splash animation inline in index.html awaiting App component
- adds proper TypeScrip formatting
- adds linting
- generates icons and splash with pwa-assets-generator
- adds delay to mount if time since navStart>2000
- configures splash delay to only delay in prod
- aligns ios splash with loader ani
- adds vuetify material design and get instructions graphic
- adds vuetify svg icons as well as font icons
- configures vuetify to use mdiSvg
- configures vuetify to make custom properties available for css
- updates Home to use vuetify for layout
- moves push to s3 script into packages.json scripts section
- gets eslint in vscode working (see .eslinrc.js)
- adds html overflow-y auto to index to avoid scroll bar when NOT on
mobile
- adds functional navigation bar
- adds typescript shims for handling svg files as objects
- updates @vue/cli and plugins to latest
- adds yarn versioning and local yarn
- adds workspace cfg and starts trigger on instructions button
- adds amplify cfg at root

All tests passing!
@toshify toshify changed the title 马丽 sees a splash screen when opening app feat: 马丽 sees a splash screen when opening app May 21, 2021
toshify added a commit that referenced this issue Jun 27, 2021
@toshify
feat: Add splash screen, instructions, tech foundation (#8)
391e469 
Because the learner should know that the app is loading and not frozen,
and easily find instructions when needed,
this commit will:
  - add inital splash screen on load in both browser and PWA
  - add splash animation inline in index.html awaiting App component
  - add barebones instructions overlay
  - add functional navigation bar
  - remove unnecessary scroll bar when NOT on mobile
  - update icons and splash graphics

For the benefit of developer efficiency, this commit will:
  - fix linting
  - use Vuetify.js for layout
  - update @vue/cli and plugins to latest
  - add amplify cfg to Vue.js project
  - move 'push to s3' script into packages.json scripts section
  - move dev wiki to separate repo
  - add yarn versioning and local yarn

Closes #1, #2, #6, #8

Signed-off-by: toshify <4579559+toshify@users.noreply.github.com>
@toshify toshify removed this from Done in Development and operations Oct 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@toshify toshify

Labels
front end
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: add startup splash, instruction overlay, tech foundation nodepa/seedlingo
1 participant
@toshify