Webflow Integration
Stable version: ... | Latest version: https://wazi-rich-data.webflow.io/
Last updated
Stable version: ... | Latest version: https://wazi-rich-data.webflow.io/
Last updated
Rationale for recent structure update: The latest version of wazimap has been reworked to ensure we can include the following features:
In-page anchor linking and page navigation
A component based approach to populating pages
An improved mobile experience
Filtering of sub-indicator
The functional styles div resides on the main mapping page (hidden using .hidden). A copy of it can be found here (https://wazi-rich-data.webflow.io/styles). This copy needs to be updated as elements are added to the main section or visa versa. Elements can be called as needed into different areas. This approach was aimed at improving loading times and initial states that would have incorrect information.
Every other element is arranged in relation to this panel (using position fixed). This is so that we can maintain in page anchor linking and page navigation.
These items sit on the left hand side of the rich data panel and act as anchors to jump to different content. They also allow users to know which section they are currently in.
Default state: .rich-data-nav__ list will be populated with the .rich-data-nav__item "summary" and the location pin icon. This item links to the top of the rich data panel using the anchor link #top.
Anchor links: Anchor link named need to be added when implementing a component. They should be added to .section-link within .section within .rich-data__content as they are brought into the page. See image below. Position adjustment has been made to this .section-link to ensure users scroll to the correct position, taking into account navigation elements etc.
Call .rich-data-nav__item into .rich-data-nav__list
Once you're strong enough, save the world:
