rl-institut / e_metrobus Goto Github PK

• slow down animation
• display logos at the same time
• try to align logos horizontally

Build a construction page which is shown before app is running on server.

TODOS:

• Build page with foundation layout
• Inlcude foundation as CDN
• Setup page on server and activate e-metrobus link

• Change RIGHT icon
• Change FALSE icon
• Change bg-color from black to ...?
• Animation showing that score has increased (#52 )

Implement dashboard

TODOS:

• Layout
• Show score
• Show categories with progress

When the user answers all the questions of a category, she should win extra points and be able to see it. A page "Congrats, you answered all the questions of category X" should exist (about 2 seconds long before display none?)

The buttons should either be black or yellow in any state (now sometimes gray after tapping on them)

Show selected route

Simple implementation:

• Show start/end and distance

Show CO2 results for different mobility scenarios

TODOS:

• Layout
• Show comparison
• Get and show CO2 numbers
• Animation
• Backend implementation

Base template holds layout for all pages

• Clarify states: when? (non-clickable, clickable, active)

• use non blurred icons
• emphasize e-bus result (use othe color than black?)

Issue: The user has to tap each time on "see more" button to see the full answer

Suggestion: Remove the "see more" button and display the whole answer at once. In that case the short answer should be visually more important than the long answer text to keep a hierarchy of importance

Waits for real questions

Build desktop page saying "please go to mobile view"

• Cookie must be set
• Layout

Find plugin to show comparison including pictures

Set up legal page

TODOS:

• Text
• Layout
• Link on menu

@mdrli can you fix that bug?

"Gib Deine Strecke ein" (or better german phrase) should be present before the button appears

In base.html we could have two containers inside the body tag, one that is only displayed on smaller screens, the other only on larger screens (probably only for the re-direct page). Foundation has visibility classes for that:

https://foundation.zurb.com/sites/docs/visibility.html

<div class="grid-container full hide-for-large">...</div>
<div class="grid-container full show-for-large">...</div>

User tests with different devices in different sizes

• Android

• iPhone

• Windows

• Firefox

• Chrome

• Safari

• Mobile

• Tablet

PRIORITY 2

• animate points won after answering the question:
• move from 20% bottom to 20% top
• max 1 sec
• fade in at beginning and fade out at end
• animate total score on top:
• short increase in size of star and score
• max 0.5 sec

On /display_route and /comparison, the arrow on the left (top navigation) should not lead to the dashboard but to /route instead. The idea is that user can change the route if she wants before accessing the dashboard (e.g. after realizing that the chosen route was not the right one)

Setup docker production server @wam server

When clicking on "leaf" button -> show page with data about:

• fuel consumption
• CO2 emission
• "Stickoxide"
• "Feinstaub"

for own route and in total (data from BVG)

• Slow down animation

• Add space between text and images
• Fix issue with button overlapping content

Todos:

• Disable button, before answer is chosen

Implement menu to switch between:

• contact/dgstvo/etc.
• route selection
• text answers to all questions
• dashboard

TODOS:

• Layout
• backend template for menu
• mark current page
• CSS white, gray, black (selected)

Update the icons, especially the bus icon, which looks very different from the other ones.

Nice-to-have, no mandatory.

On /display_route and /comparison pages:

• remove highlight from information box and make it gray
• add highlight to quiz box (but not accessible, the user should not be able to go to quiz during onboarding)
• make text box gray

Implement template for all questions

TODOS:

• Layout (scrollable - extra base template)
• Correct answer
• Wrong answer
• Finished category
• Cookies for answerde questions

Build stations component to select two stations. Stations in between selection shall be highlighted.

TODOS:

• Layout
• Functionality
• Django component
• Layout error message and button (see #17)

Build a landing page showing title, partners etc.

TODOS:

• Layout
• Animation

Set up page to show questions and answers without quiz

TODOS:

• Text
• Layout
• Link on menu

Update icons to BVG black

Hover colour is set to foundation blue. Do we have to change?

TODOS:

• Add language support
• Add "change language" button to landing page
• Add "change language" button to top bar

Cookie accept button @ startup

Idea:

• Save score with date and hash
• link contains hash
• page is loaded if hash matches db entry

Keep size and positions consistant throughout the app

If user uses landscape view on mobile or tablet, because of display issues, there should be a message saying that landscape view is not supported.

@henhuy Can you de-activate the leaf icon on onboarding (display_route and comparison)? The user shouldn't get access to other pages during that phase.

All colors defined in scss should be variables from variables.scss

Check again the color code from BVG

Matrix holding CO2 and km for each station combination

TODOS:

• Structure to hold questions within their categories and related answers (including correct answer)
• Questions are differentiated as answered not/correct/wrong
• Resulting score can be calculated
• Calculate angle for dashboard arc

Show following things on "desktop page", instead of hint to use mobile app

• Mobile app advertisement
• Project info
• Add correct QR code