openbudget / budgetkey-app-main-page Goto Github PK

/cc: @mushon please confirm this

We want to implement the design for the main page of BudgetKey.
Designs are in InVision: https://projects.invisionapp.com/d/main#/projects/prototypes/7587193
All the data is static (I'll add a sample in a few hours)

Header & Footer - as usual. Ignore the menu on the top (and the collapsed menu later on)
Search Box - should act the same way as the generic item page (i.e. submit redirects to the search page)

Contents of the page are controlled by vertical scrolling.

• Initial view is what we see in HP-State-1
  The red circle is always half visible at the bottom of the page (regardless of screen size)
• On scroll down: what we see in HP-State-2
  Header collapses into a minimal configuration.
  red circle reaches its new position.
  title above red circle fades in.
  (Ignore for now left and right arrows for other years)
• On scroll down: what we see in HP-State-3
  Title above red circle + text inside red circle move to their new location
  Red circle fades out
  New circles fade in, while moving from the center of the red circle to their final location
  Titles and numbers for the circle groups fade in, already in their final positions
• [ LAST: On hover on a circle group - circles move away from one another, and labels are added as in the "popups" design in InVision.
  On Hover on one of the circles, a popup appears with 3 states (2 with text and one with a line chart), which can be selected by the user or automatically changing every few seconds ]
  For now, we can start with a simple onHover popup on each of the circles.
• On scroll down: we scroll until we reach the 'map' visualisation.
  For now, any map will do (but please use the MapBox SDK https://www.mapbox.com/mapbox.js/api/v3.1.1/).
  Map starts with initial state - state = (center + zoom + html text which should appear alongside the map).
• On scroll down: map moves to next state (all states should be provided as configuration inside the repo). Continued scrolling continues to advance the states.
• On scroll down (after last step was reached): continue scrolling until the end of the page.

In the site, the "התחברות" button is cropped due to a width issue.
I've trace the issue to the changes made to the budgetkey-header width, in this commit 35ab640.
This may fix a mobile problem but makes another on desktop.

I opened an issue on another repo that correlates to this issue. Here a fix will prevent the cropped button, and there the fix will match both sides to the same margin.

I will try to open a PR here to hopefully fix the second step towards fixing this issues.

While we don't have specific requirements I assume themed sites will require the main page as well

However, I'm wondering if it's worth to theme this component, as I assume most content will be customized per site.

So, it might make more sense to create a new main-page for each themed site

WDYT?

I ran npm install and at the end it showed this:

audited 42509 packages in 7.587s
found 661 vulnerabilities (3 low, 11 moderate, 645 high, 2 critical)

@aviklai see here
http://next.obudget.org/app/

Seems that d3 is not configured correctly when using the app the production setting (i.e. npm run dist-serve).

the red bubble should "pop" by disappearing and revealing all the 7 category bubbles under it and have them flow to their position on the page. This action should be controlled through the page scroll (both forward and backwards).