🛠️
Wazimap technical handbook
  • Introduction
  • System Architecture
    • Database Models
    • IndicatorData
    • Geography Hierarchies
    • Choropleth Maps
    • Determine which instance to use
  • Development
    • Code Deployment
    • Component Architecture
    • Development Process
    • Pull Request Template Explanation
    • Code Review Process
    • Pull Request Template (FE)
    • Webflow Integration
    • Merging webflow exports
    • Rules for Webflow exports
    • Webflow exports & changelog
      • June 2023
      • March 2023
      • February 2023
      • December 2022
      • November 2022
      • October 2022
      • May 2022
      • April 2022
      • March 2022
      • January 2022
      • December 2021
      • November 2021
      • October 2021
    • Translation
    • Map components
  • Testing
    • Testing guidelines
    • Critical Paths
    • GUI Tests
    • Heroku Review Apps
  • Design
    • Iconography
  • Change Proposals
  • NGPx - Template
  • NGP1 - Changing the data model (Implemented)
  • NGP2 - Presenting Geographical Hierarchies to users
  • NGP3 - Change Geography Hierarchies
  • NGP4 - Format configuration
  • NGP5 - Multiple count columns
  • NGP6 - Profile-specific open graph metadata
  • NGP7 - Wazimap profile domain management
  • NGP8 - Replacing Webflow as frontend framework
  • Tutorials
    • Creating a new profile
    • Loading new geographies
    • Loading Data
    • Creating a new admin user
    • Creating a non-admin user for a private profile
    • Changing the Geography level name
    • Deployment to Dokku
  • Configuration
  • Profile Configuration
  • Profile Indicator Configuration
  • Profile Collection Configuration
  • Geographies, hierarchies and versions
  • API
    • General API Information
    • Upload API
    • Task Status
    • Point data API
Powered by GitBook
On this page
  • General
  • Styles section
  • Rich Data Panel
  • 1. Rich data nav items

Was this helpful?

Export as PDF
  1. Development

Webflow Integration

Stable version: ... | Latest version: https://wazi-rich-data.webflow.io/

PreviousPull Request Template (FE)NextMerging webflow exports

Last updated 5 years ago

Was this helpful?

General

Rationale for recent structure update: The latest version of wazimap has been reworked to ensure we can include the following features:

  1. In-page anchor linking and page navigation

  2. A component based approach to populating pages

  3. An improved mobile experience

  4. Filtering of sub-indicator

Styles section

Rich Data Panel

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.

1. Rich data nav items

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.

How to implement this component:

Call .rich-data-nav__item into .rich-data-nav__list

$ give me super-powers

Once you're strong enough, save the world:

hello.sh
# Ain't no code for that yet, sorry
echo 'You got to trust me on this, I saved the world'

The functional styles div resides on the main mapping page (hidden using .hidden). A copy of it can be found here (). 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.

https://wazi-rich-data.webflow.io/styles
Overall page structure.
The individual components ready to be cloned.
The styled components for the rich data panel
.section-link within a .section
Example nav items
Structure of the .rich-data-nav