Changed class name .hdden to .hidden for .mapping-options__add-filter.
Transition CSS - 01/14/2022
Added transition styling to the v2 data mapper content items and made max-height on closed !important.
Data mapper v2 - 01/13/2022
Changes:
Added v2 versions of all clickable triggers and content blocks:
data-category__h1_trigger--v2
data-category__h1_content--v2
Use the class .is--closed on the content blocks to toggle them to closed.
The arrow icons in .data-category__h1_trigger--v2 is controlled by adding or removing is--closed to BOTH icons. This will hide the one and show the other.
Adjusted the alignment of the "map-location__tags" to fix the scrolling issue on mobile
Adjusted the width of "location-highlight" to not be a fixed width and cause wrapping issues
2023/03/15 - Various mobile changes
Made map location chips panel overflow with items aligned right so that the current filter shows first
Made the .map-bottom-items and map-bottoms-items have a the correct width and padding to make sure its contents does not overlap with other items on small screens. The only thing i couldnt test was whether the zoom buttons are working fine after this change. This seemed like a better way of handling the “map-options” change suggested as this would ensure no items in that parent div overlap rather than just 1.
Positioning of the left side panel toggles is fixed on may side, they are lower and dont hit the map location chips
Removed color: inherit styling from h1__point-mapper_trigger which was causing there to be an issue with the default colour of icons in the point mapper
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
Documentation of indicator version:
Documentation of highlight element:
Documentation of generic modal:
Generic Modal:
Documentation of indicator version:
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
Documentation:
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
Documentation:
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
Feature preview:
Changed:
Made the section nav scroll when height is restricted
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
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:
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
07/02/2021 - Map options filters
Please note that this element was changed as per a feature request:
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
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
Feature preview:
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
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)
Fixed:
Changed the wording of "Download all facilities" to "Download all locations" in the rich data view.
04/22/2021 - Download all facilities
Feature preview:
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.
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"
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
03/09/2021 - Print and google maps button for location
Feature preview:
Added:
Added print button to .facility-info
.facility-info__print is now a child of .facility-info__header
03/01/2021 - Explicit print button in rich data
Trello card:
Changed
Added .rich-data__print to the rich data panel
03/01/2021 - Rich data location buttons
Changed
Trello cards: +
Feature preview:
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
Trello card:
1. Map legend always showing:
Feature preview:
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.
2. Version of the point-legend without a remove button for print
02/18/2021 - Map legend
Changed
Trello card:
1. Map print legend:
Added .map-print to the .map div
Added .map-print__point-legend to .map-print
2. Point legend:
.point-legend contains .point-legend__color and .point-legend__text
.point-legend__text has a default state of loading...
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:
Trello card:
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
Webflow feature preview:
Changed
1. Hover menu groups for chart-value and download-data
Trello card:
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
Trello card:
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
02/12/2021 - Tab notice and map title
Changed
Map title:
Related Trello card:
Webflow feature preview:
Changed default state for .map-title to display: block
Added .hidden class to .block-title to hide by default.
Tab notice:
Related Trello card:
Webflow feature preview:
Added .tab-notice as a child of .main
Added .hidden class to .tab-notice to hide by default.
Changed the position of the geo select and its z index. This should be changed to be more dynamic and responsive to the state of other items at the bottom, but for not it should make the mobile experience better.
Set max width on rich data content as per suggestion.
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
.mapping-options__new-filter
.mapping-options__remove-filter (hidden by default)
Added code to disabled filters that have the disabled class:
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
Added data-i18n="Point Mapper" to all instances of "Point Mapper"
Added data-i18n="locations" to all instances of "locations"
.location__facilities_header-wrapper to contain the icon and title. Please note that this may cause integrations with backend data to break.
data-id="Value"
data-id="csv"
data-id="excel"
data-id="json"
.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.
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
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
.map-print has a .hidden class by default which is removed when required
.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
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
Remove .hidden to show
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...")
