🛠️
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
  • 10/11/2021 - Filter truncation
  • 10/06/2021 - Cluster scroll fix
  • 10/06/2021 - Point mapper truncation fix
  • 10/01/2021 - Map data version support
  • 09/23/2021 - Facilities loading state
  • 09/16/2021 - Point mapper dropdown icon colour fix
  • 09/16/2021 - Cluster tooltip
  • 09/15/2021 - Point mapper dropdown and filters
  • 08/31/2021 - Fix for tutorial modal height
  • 08/25/2021 - Rich Data Nav Fix
  • 08/12/2021 - Print CSS test
  • 07/19/2021- Point-legend, table margin, z-depth bottom-items
  • 07/13/2021- Fixed rich data filter buttons to resemble map-options
  • 07/12/2021- Remove map options tooltip and change filter buttons
  • 07/05/2021- Disabled state for map download button
  • 07/05/2021- Removed filter disabled
  • 07/02/2021 - Map options filters
  • 06/28/2021 - Table content truncation
  • 06/28/2021 - Location tag width
  • 06/22/2021 - SVG console error fix
  • 06/21/2021 - .is--disabled to .disabled
  • 06/11/2021 - Map options truncation fix
  • 05/25/2021 - Changes to map options filters
  • 05/21/2021 - Additive filtering
  • 04/29/2021 - Data attributes and classes for Point Mapper and locations
  • 04/22/2021 - Download all facilities
  • 04/22/2021 - Chart menu data attributes
  • 04/09/2021 - Rich data tables
  • 03/09/2021 - Print and google maps button for location
  • Added:
  • 03/01/2021 - Explicit print button in rich data
  • Changed
  • 03/01/2021 - Rich data location buttons
  • Changed
  • 02/18/2021 - Map legend always showing
  • Changed
  • 02/18/2021 - Map legend
  • Changed
  • 02/17/2021 - Added data attributes to hover menu items
  • Changed
  • Fixed
  • 02/16/2021 - Hiding and styling content in chart hover menus
  • Changed
  • 02/12/2021 - Tab notice and map title
  • Changed

Was this helpful?

Export as PDF
  1. Development

Webflow exports & changelog

PreviousRules for Webflow exportsNextJune 2023

Last updated 3 years ago

Was this helpful?

10/11/2021 - Filter truncation

Changes:

  • Added truncation to long filters

  • Removed generic-modal

10/06/2021 - Cluster scroll fix

Changed:

Added a element .facility-tooltip__scroll inside .facility-tooltip is--cluster which has overflow: auto to accommodate a long scrolling list.

10/06/2021 - Point mapper truncation fix

Ensured that point mapper labels are correctly truncated.

10/01/2021 - Map data version support

Generic Modal:

09/23/2021 - Facilities loading state

Fixed:

  • Fixed a small bug where the facilities facet number was being pushed too far left if there was not a download button visible. Now, if the download button is hidden, the facet will align correctly with the right side of the panel. This fix was imlemented by changing the display of the parent from display: grid to display: flex

Changed:

  • Added loading state (hidden) for the location facilities title (.location__facilities_title--loading)

  • Added loading state (hidden) for hide/show facilities button (.location-facilities__trigger--loading)

  • Added loading state (hidden) for location facility block items (.location-facility__item--loading)

09/16/2021 - Point mapper dropdown icon colour fix

Changed:

  • Fixed what colour is automatically inherited for the point mapper dropdown headers so that it is not overridden with grey when using a theme colour.

09/16/2021 - Cluster tooltip

Added:

  • .facility-tooltip is--cluster to the styles panel for use when clustering nearby points on the map.

09/15/2021 - Point mapper dropdown and filters

Point mapper dropdown with toggle:

Point filters:

Changes:

  • Added .point-mapper__h1_checkbox that is hidden by default

  • Added .point-filters panel in .map-bottom-items (hidden by default)

08/31/2021 - Fix for tutorial modal height

Changes:

  • Restricted max height to 90vh on the tutorial modal

08/25/2021 - Rich Data Nav Fix

Changed:

  • Made the section nav scroll when height is restricted

08/12/2021 - Print CSS test

Changed:

  • add the following code to the print css:

@media print {
  .page-break-before {
    break-before: page;
  }

  body, .main, .rich-data, .rich-data-content, .rich-data-content .section, .profile-indicator{
    float: none !important;
    display: block !important;
  }

  .rich-data__print, .tab-notice{
    display: none;
  }

  .rich-data[style*="display: none;"]{
    display: none !important;
  }

  .facility-info[style*="display: none;"]{
    display: none !important;
  }

  .facility-info[style*="display: flex;"]{
    display: inline-table;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    max-height: 100%;
    max-width: 100%;
  }

  .facility-info__view-google-map, .facility-info__print, .facility-info__close{
    display: none;
  }
}

07/19/2021- Point-legend, table margin, z-depth bottom-items

Changed:

  • Added margin-bottom to .profile-indicator__table_inner to fix spacing issues in the rich-data panel

  • z-depth: 999 added to items within the .map-bottoms-items panel

  • Added .point-legend__remove to the .point-legend contained within the .map-print panel and added a .hidden class to it. It has also been moved further down the DOM so that the .point-legend that gets copied is the correct one.

  • Added .hidden class to .data-category__h1_icon by default to avoid incorrect icons

  • Added .slide-info__introduction to every tutorial slide

07/13/2021- Fixed rich data filter buttons to resemble map-options

There was a miscommunication about what options users preferred and we implemented the incorrect solution. This update implements the map-options filtering approach in the rich-data panel.

Please note that due to slow performance and export speeds, the backlog of old feature previews has been purged. I have created a backup on the webflow side to revert back if this causes any issues. I don't foresee there being a problem. Hopefully the performance issues are noticeable.

Changed:

  • Reverted to old implementation of .map-options__filters

  • Changed .profile-indicator__new-filter to be a wide button to replicate the map-options button

07/12/2021- Remove map options tooltip and change filter buttons

Changed:

  • Removed the indicator context tooltip from the bottom right of the map-options panel

  • Changed the way we implement filter buttons in the map-options panel to bring it in line with the rich-data panel

  • Added .mapping-options__filter-buttons with the following buttons:

    • .mapping-options__new-filter

    • .mapping-options__remove-filter (hidden by default)

07/05/2021- Disabled state for map download button

  • Added .disabled state to .map-download button by default.

  • Remove this class to set state to enabled.

07/05/2021- Removed filter disabled

  • Removed the .disabled class from .dropdown-menu__trigger

  • The disabled class is now only on .mapping-options__filter

  • Added code to disabled filters that have the disabled class:

.mapping-options__filter.disabled {
	pointer-events: none;
  }

07/02/2021 - Map options filters

Changed:

  • Added .map-options__filters_content back into .map-options__filters in the .map-options panel.

  • .map-options__filters_content is hidden by default using the .hidden class

06/28/2021 - Table content truncation

Changed:

  • Added code to force truncation on the table cells

  .profile-indicator__table_cell {
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
	}

06/28/2021 - Location tag width

Changed:

  • Set text within .map-tooltip__geography-chip to breaking: no-wrap;

06/22/2021 - SVG console error fix

Changed:

  • Adjusted the svg height value for .location-facility__icon to 24px to avoid console errors.

  • Removed wazimap-ng.css script call

06/21/2021 - .is--disabled to .disabled

Changed:

  • renamed the disabled class on the rich-text dropdowns to .disabled from .is--disabled

06/11/2021 - Map options truncation fix

Fixed:

Fixed the short truncation on map options title. It now extends the full width of the panel.

Changed:

Removed capitalization on the map options title.

05/25/2021 - Changes to map options filters

This feature change was requested because dropdowns were not working due to them being duplicates and not being cloned from the styles panel (similar to how it is handled in the rich-data panel).

Changed:

  • The backend will need to clone the .map-options__filters_content in the styles panel for the map-options panel as needed. The hope is that this will prevent the dropdowns from breaking.

05/21/2021 - Additive filtering

Added:

These two implementation of this feature work in a similar ways

  • .profile-indicator__filter-labels now contains the column labels for each filter column

  • Each filter row is now within .profile-indicator__filter-row and .mapping-options__filter-row

  • Possible buttons to the right of the filters (add filter and remove filter) are within .profile-indicator__filter-buttons and .mapping-options__filter-buttons

    • These buttons are .profile-indicator__remove-filter and .profile-indicator__new-filter in the rich data panel

    • These buttons are .mapping-options__remove-filter in the mapping options

    • .profile-indicator__new-filteris visible by default in the rich data panel

    • .profile-indicator__remove-filter is hidden by default in the rich data panel

Changed:

  • Added border-bottom: 1px; and padding-bottom: 12px; to .profile-indicator__header

04/29/2021 - Data attributes and classes for Point Mapper and locations

This change was requested by Mila directly and does not have an associated trello card or feature preview.

Changed:

  • Added class="i18n" to all instances of "Point Mapper" and "locations"

    • Point mapper panel and toggle tooltips

    • Locations section in the rich data view (includes the Locations count and the buttons)

  • Added data-i18n="Point Mapper" to all instances of "Point Mapper"

  • Added data-i18n="locations" to all instances of "locations"

Fixed:

  • Changed the wording of "Download all facilities" to "Download all locations" in the rich data view.

04/22/2021 - Download all facilities

Changes:

  • Added .location__facilities_download.location__facilities_download-all--header button to .location__facilities_header. This button is only visible on desktop. On mobile it hides and the button moves down to below the location cards. This is because downloading takes less priority on mobile devices.

  • Added .location__facilities_download.location__facilities_download-all--footer. This button shows on smaller screen sizes.

  • .location__facilities_header-wrapper to contain the icon and title. Please note that this may cause integrations with backend data to break.

04/22/2021 - Chart menu data attributes

Changes:

  • Added data attributes to the buttons in the chart dropdown menu

  • The following "data-id" attributes have been added:

    • data-id="Percentage"

    • data-id="Value"

    • data-id="csv"

    • data-id="excel"

    • data-id="json"

04/09/2021 - Rich data tables

Changes:

  • Added .profile-indicator__table to the .styles section

Documentation:

  • .profile-indicator__table_row.profile-indicator__table_row--header is the header row for the table and styles the row accordingly.

  • At the moment, only 3 column tables are supported

  • .profile-indicator__table_row's contain .profile-indicator__table_cell's

  • The first .profile-indicator__table_cell in each row has the class .profile-indicator__table_cell--first applied in order to apply specific styling.

  • By default the .profile-indicator__table_show-more is hidden (comprised of the "Load more rows" and "Showing" info).

  • When the table exceeds a certain number of rows (dev decision), subsequent rows are not shown and can be toggled to show using the load more rows button.

  • There is no functionality from the Webflow side to handle this "expansion". Please advise if there is anything on my end that would assist in getting this functionality working.

03/09/2021 - Print and google maps button for location

Added:

  • Added print button to .facility-info

    • .facility-info__print is now a child of .facility-info__header

  • Added .facility-info__view-google-map as a child of .facility-info.

    • Component has class .hidden applied by default and can be removed to show when available

03/01/2021 - Explicit print button in rich data

Changed

  • Added .rich-data__print to the rich data panel

03/01/2021 - Rich data location buttons

Changed

  • Info text changed from "This location has 0000 locations in 0000 categories." to "This area has 0000 locations in 0000 categories."

  • Button colour changed to green

  • Button wording changed from "facilities" to "locations"

02/18/2021 - Map legend always showing

Changed

1. Map legend always showing:

  • Made .map-options and .map-point-legend children of .map-bottom-items (new div)

  • .map-options and .map-point-legend have a .hidden applied by default while waiting for the user to add a point layer or choropleth to the map.

  • Changes to .map-options to make it's width consistent with other items of the ui

    • .map-options now stretches to the width of its parent .map-bottom-items

    • width: 95%; max-width: 650px;

  • Added .point-legend__remove to the .point-legend so that the user can remove a point layer from the map without needing to open the point mapper tab

    • This functionality needs to be added on the backend

    • If this functionality is not ready for deployment, the .point-legend__remove item can be hidden before cloning

2. Version of the point-legend without a remove button for print

02/18/2021 - Map legend

Changed

1. Map print legend:

  • Added .map-print to the .map div

  • Added .map-print__point-legend to .map-print

  • .map-print has a .hidden class by default which is removed when required

2. Point legend:

  • .point-legend contains .point-legend__color and .point-legend__text

    • .point-legend__text has a default state of loading...

    • .point-legend__color is fill: rgba(0, 0, 0, 0.06) by default

    • .point-legend__color fill must be updated to the value of the point

    • .point-legend can be duplicated for every instance required

3. Choropleth legend:

  • This item has been added to map-print to accommodate functionality that was being hacked together previously.

  • The functionality for this item is the same as the default choropleth legend.

  • Please contact Matthew if you have any questions about the intention of this component.

02/17/2021 - Added data attributes to hover menu items

Changed

Added data attributes to hover menu components:

  • Added data-element="chart-value-select" to the hover menu chart value type selector

  • Added data-element="chart-download-data" to hover menu download data options

Fixed

  • Removed .webflow from .hover-menu__content that was not removed before previous export

  • This class is used to show items when working on them in webflow. This will mean that the hover menu will start off open. With this fix it should return to a default of closed.

02/16/2021 - Hiding and styling content in chart hover menus

Changed

1. Hover menu groups for chart-value and download-data

  • Added a div for .hover-menu__chart-value and .hover-menu__download-data

  • Add .hidden to remove this group from the menu

2. Changed css for active state on hover menu list items

  • Changed the way the .last class is applied to .hover-menu__content_list-item to make the active class behave as intended.

    • Old method was a single class .hover-menu__content_list-item--last

    • New approach is a combo class added. eg. .hover-menu__content_list-item.last

  • To make the a list-item "active", just add the active class

    • eg..hover-menu__content_list-item.last.active

02/12/2021 - Tab notice and map title

Changed

Map title:

  • Changed default state for .map-title to display: block

  • Added .hidden class to .block-title to hide by default.

  • Remove .hidden to show

Tab notice:

  • Added .tab-notice as a child of .main

  • Added .hidden class to .tab-notice to hide by default.

  • Remove .hidden to show

  • Adjust <a> on .tab-notice__content to adjust the link of the notice

  • Adjust .tab-notice__text to adjust the text within the notice (default is "loading...")

Documentation of indicator version:

Documentation of highlight element:

Documentation of generic modal:

Documentation of indicator version:

Documentation:

Documentation:

Feature preview:

Please note that this element was changed as per a feature request:

Feature preview:

Feature preview:

Feature preview:

Trello card:

Trello cards: +

Feature preview:

Trello card:

Feature preview:

Trello card:

Trello card:

Webflow feature preview:

Trello card:

Trello card:

Related Trello card:

Webflow feature preview:

Related Trello card:

Webflow feature preview:

https://wazimap-ng.webflow.io/documentation#rich-data
https://wazimap-ng.webflow.io/documentation#utility
https://wazimap-ng.webflow.io/documentation#modals
https://wazimap-ng.webflow.io/documentation#rich-data
https://wazimap-ng.webflow.io/documentation#tooltips
https://wazimap-ng.webflow.io/documentation#point-mapper
https://wazimap-ng.webflow.io/feature-previews/rich-data-nav-fix#top
https://app.gitbook.com/@openup/s/wazi-ng-technical/~/drafts/-Md_pTCg5RT4tBx8Ni2q/development-process/changelog#05-21-2021-additive-filtering
https://wazimap-ng.webflow.io/feature-previews/additive-filters-05212021
https://wazimap-ng.webflow.io/feature-previews/download-all-facilities-04222021
https://wazimap-ng.webflow.io/feature-previews/google-map-link-02242021
https://trello.com/c/qEwQAdRg
https://trello.com/c/iqyaamZj
https://trello.com/c/AllyWK4N
https://wazimap-ng.webflow.io/feature-previews/rich-data-location-button-03012021
https://trello.com/c/iqyaamZj
https://wazimap-ng.webflow.io/feature-previews/map-legend-02122021
https://trello.com/c/iqyaamZj
https://trello.com/c/m1uc8zOh
https://wazimap-ng.webflow.io/feature-previews/chart-dropdown-percentage-02162021
https://trello.com/c/tNa3oDXM/654-provide-css-to-allow-hiding-of-the-chart-type-toggles-in-the-chart-context-menu
https://trello.com/c/KV0Yk0hR/655-fix-the-active-css-for-the-value-toggle-on-the-chart-context-menu
https://trello.com/c/KqAdJ01z
https://wazimap-ng.webflow.io/feature-previews/map-title-14012021
https://trello.com/c/0tGnWAkN
https://wazimap-ng.webflow.io/feature-previews/tab-notice
4MB
wazimap-ng.webflow (truncation-fix).zip
archive
Webflow export
4MB
wazimap-ng.webflow (cluster-scroll-fix - 10062021).zip
archive
Webflow export
4MB
wazimap-ng.webflow (pointmapper-truncation - 100621).zip
archive
Webflow export
4MB
wazimap-ng.webflow (indicator-version - 10012021).zip
archive
4MB
wazimap-ng.webflow (facilities-loading-state-fixed-2 - 09232021 ).zip
archive
4MB
wazimap-ng.webflow (icon-colour-fix - 09162021).zip
archive
Webflow Export
4MB
wazimap-ng.webflow (icon-colour-fix - 09162021).zip
archive
4MB
wazimap-ng.webflow (point-mapper-dropdown-filters - 09152021).zip
archive
Webflow export
3MB
wazimap-ng.webflow (tutorial-modal-fix - 08312021).zip
archive
Webflow export
3MB
wazimap-ng.webflow (richdata-nav-fix).zip
archive
Webflow export
3MB
wazimap-ng.webflow (print-css-test).zip
archive
Webflow export
3MB
wazimap-ng.webflow (z-depth-legend-table-margin-legend-fix - 07192021).zip
archive
3MB
wazimap-ng.webflow (rich-data-filter-feature-preview-purge - 07132021).zip
archive
6MB
wazimap-ng.webflow (remove-options-tooltip-add-filter-buttons - 07122021).zip
archive
Webflow export
6MB
wazimap-ng.webflow (map-download-disabled - 07052021).zip
archive
Webflow export
6MB
wazimap-ng.webflow (filter-disabled - 07052021).zip
archive
Webflow Export
6MB
wazimap-ng.webflow (map-options-filters - 07022021).zip
archive
Webflow Export
6MB
wazimap-ng.webflow (table-cell-truncation - 07012021).zip
archive
Webflow Export
6MB
wazimap-ng.webflow (location-tag-width - 06282021).zip
archive
Webflow Export
6MB
wazimap-ng.webflow (svg-size-fix - 06222021).zip
archive
Webflow export
6MB
wazimap-ng.webflow (disbaled-fix - 06212021).zip
archive
Webflow export
6MB
wazimap-ng.webflow (map-options-truncation - 06112021).zip
archive
Webflow export
6MB
wazimap-ng.webflow (map-options-filters - 05252021).zip
archive
Webflow export
6MB
wazimap-ng.webflow (additive-filtering - 05212021).zip
archive
Webflow export
5MB
wazimap-ng.webflow (data-classes-and-attributes - 04292021).zip
archive
5MB
wazimap-ng.webflow (download-all-facilities - 04222021).zip
archive
Webflow export
5MB
wazimap-ng.webflow (dropdown-data-id - 04222021).zip
archive
Webflow export
5MB
wazimap-ng.webflow (rich-data-tables - 04092021).zip
archive
Rich data tables
5MB
wazimap-ng.webflow (03092021 - Location print and google maps).zip
archive
Location print and google maps button
5MB
wazimap-ng.webflow (03012021 - explicit-print-button).zip
archive
Explicit print button
5MB
wazimap-ng.webflow (03012021 - rich-data-location-buttons).zip
archive
Rich data location buttons
4MB
wazimap-ng.webflow (map-legend 02182021).zip
archive
Map legend always showing
4MB
wazimap-ng.webflow (map-print-legend 02182021).zip
archive
Map legend
4MB
wazimap-ng.webflow (data-attributes - 01172021).zip
archive
Hover menu data-attributes
4MB
wazimap-ng.webflow (hover-menu-content-styling - 02162021).zip
archive
Hover menu content styling
4MB
wazimap-ng.webflow (tab-notice-map-title - 02122021).zip
archive
Tab notice and map title adjustments
Added generic modal (.generic-modal)
Element structure
.profile-indicator__version
Added highlight element that notifies users as to where they can change options in future (.highlight)
Loading state for title and show locations button
location-facility__item_loading for loading indicator on each row
Added margin below tables to improve spacing in rich data panel
Hid icon by default
Added .slide-info__introduction to all tutorial slides
Preview of rich-data profile-indicator filters
Preview of changes
Preview of disabled state
Example of issue
Preview of fix
Old console errors
Console errors after fix
Removed the filters content section from the map-options div
Added map-options__filters_content to the styles panel for cloning
Additive filter preview in rich-data panel
Additive filter preview in map-options
Preview of "Download all facilities" button
Revised structure of the facilities header
Preview of the table (component has the "load more rows" button and showing info hidden)
Print button and google maps button
.facility-info__print as a child of .facility-info__header
Explicit print button within rich-data panel
Structure of rich-data and print button
Preview of new implementation
Preview of the .point-legend showing as part of the non-print ui
Structure of new .map-bottom-items div
point-legend__remove added to point-legend
print version of .point-legend without the remove button
structure of .point-legend for print version
map-print contents
map-print in loading configuration
Duplicated point-legend
Preview of the change to the hover-menu structure
Old approach
New approach
Tab notice in loading state