> For the complete documentation index, see [llms.txt](https://openup.gitbook.io/wazi-ng-technical/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://openup.gitbook.io/wazi-ng-technical/development-process/changelog.md).

# Webflow exports & changelog

##

## 10/11/2021 - Filter truncation

{% file src="/files/OI5nDeSrcAySnAclllmj" %}
Webflow export
{% endfile %}

#### Changes:

* Added truncation to long filters
* Removed generic-modal

## 10/06/2021 - Cluster scroll fix

{% file src="/files/-MlPErqSJJu3PmSJDUuo" %}
Webflow export
{% endfile %}

#### 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

{% file src="/files/-MlJBMCLQWTfXnVNJG5F" %}
Webflow export
{% endfile %}

Ensured that point mapper labels are correctly truncated.

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MlJBa8ZjOzI3k-EmqBu%2F-MlJBgJlLfYnQmbY8iPx%2Fimage.png?alt=media&amp;token=ff98eed4-3631-4bba-9067-a713471131a2" alt=""></div>

## 10/01/2021 - Map data version support

{% file src="/files/-MkuzzoEHSEblCXv7Alc" %}

{% hint style="info" %}
Documentation of indicator version: <https://wazimap-ng.webflow.io/documentation#rich-data>
{% endhint %}

{% hint style="info" %}
Documentation of highlight element: <https://wazimap-ng.webflow.io/documentation#utility>
{% endhint %}

{% hint style="info" %}
Documentation of generic modal: <https://wazimap-ng.webflow.io/documentation#modals>
{% endhint %}

**Generic Modal:**

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MkuXzHQqTYAwGLATdta%2F-MkuZofhfj8XIvMFHvyo%2Fimage.png?alt=media&amp;token=ec22340c-ef0c-440b-ab43-06c0bcaa48ad" alt="Added generic modal (.generic-modal)"></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MkuXzHQqTYAwGLATdta%2F-Mkuw8-4Y2H8UWDjQyBx%2Fimage.png?alt=media&amp;token=c4b73f4a-c0b3-47b0-b45a-bf0fd916009f" alt="Element structure"></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MkuXzHQqTYAwGLATdta%2F-MkusnTOzEFy1S6BEOjt%2Fimage.png?alt=media&amp;token=f4489621-e5a6-42ee-b53a-906bb43c7aa5" alt=".profile-indicator__version"></div>

{% hint style="info" %}
Documentation of indicator version: <https://wazimap-ng.webflow.io/documentation#rich-data>
{% endhint %}

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MkuXzHQqTYAwGLATdta%2F-Mkude4N0lY5tfZ4yIQ8%2Fimage.png?alt=media&amp;token=73ad65df-38ff-4a7b-ad12-b159eb29ac0a" alt="Added highlight element that notifies users as to where they can change options in future (.highlight)"></div>

## 09/23/2021 - Facilities loading state

{% file src="/files/-MkHdSmcDaEjDFfKbY9q" %}

**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`&#x20;

**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)

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MkGo1bXpreKrff2dsC5%2F-MkGt-CU40q-PXBpPSh_%2Fimage.png?alt=media&amp;token=9eb586a4-2021-4ae1-9dbc-e9b09cd95c9b" alt="Loading state for title and show locations button"></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MkGo1bXpreKrff2dsC5%2F-MkGsbGiCRHDzoTZLaRO%2Fimage.png?alt=media&amp;token=3b59d18a-8c03-4e6d-9d2c-64d025d919ce" alt="location-facility__item_loading for loading indicator on each row"></div>

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

{% file src="/files/-MjiggDePmR0k8nKA6uJ" %}
Webflow Export
{% endfile %}

#### 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

{% file src="/files/-MjihiKiQh-lFtan799g" %}

{% hint style="info" %}
Documentation: <https://wazimap-ng.webflow.io/documentation#tooltips>
{% endhint %}

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MjhGAClV34nHa1g8SrB%2F-MjhMmKWgHn5B6VKhqLr%2Fimage.png?alt=media&amp;token=2e03185a-b91b-432d-b9be-37d28679c70e" alt=""></div>

#### 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

{% file src="/files/-Mjc9YRcQ5b6Dd\_ew1xi" %}
Webflow export
{% endfile %}

{% hint style="info" %}
Documentation: <https://wazimap-ng.webflow.io/documentation#point-mapper>
{% endhint %}

#### Point mapper dropdown with toggle:

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-Mjc4PzWRbedgy8EnL8e%2F-Mjc9EDFJGkX8gw_ETJ0%2Fimage.png?alt=media&amp;token=1d86215c-af44-4c21-a5b4-b5157b58f86e" alt=""></div>

#### Point filters:

![](https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-Mjc4PzWRbedgy8EnL8e%2F-Mjc9mAtKNV98XcYSamg%2Fimage.png?alt=media\&token=5a045020-8930-486a-8628-9c4ca4cd68a4)

#### 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

{% file src="/files/-MiQFmq-rU3pEccLKljD" %}
Webflow export
{% endfile %}

#### Changes:

* Restricted max height to 90vh on the tutorial modal

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MiQCaPfGn3IvKrKomJw%2F-MiQG7PBtpnfu1JgfZoR%2Fimage.png?alt=media&amp;token=1eb5ba33-58b4-4b96-bc28-cc78f2127c3b" alt=""></div>

## 08/25/2021 - Rich Data Nav Fix

{% file src="/files/-Mhwv2CG8H7GEjDAoWl7" %}
Webflow export
{% endfile %}

{% hint style="info" %}
Feature preview: <https://wazimap-ng.webflow.io/feature-previews/rich-data-nav-fix#top>
{% endhint %}

Changed:

* Made the section nav scroll when height is restricted

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MhwurdpDWHeAWG_wUst%2F-MhwvWHA673479-K064J%2Fimage.png?alt=media&amp;token=b763f329-698b-4537-8a01-109125bba07f" alt=""></div>

## 08/12/2021 - Print CSS test&#x20;

{% file src="/files/-MgtwOivOBnsDVIq7Dh2" %}
Webflow export
{% endfile %}

Changed:

* add the following code to the print css:

```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

{% file src="/files/-MexvqA9ESqZtHZBFqs8" %}

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MexgPeiup_az7Ru0tRt%2F-MexgwJhTX_G1FpRuTRb%2Fimage.png?alt=media&amp;token=68be0e22-4f37-444e-b703-859f0913b4e6" alt="Added margin below tables to improve spacing in rich data panel"></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MexvzPXDPIbZuwetP1R%2F-Mexw913Yy8zPyZIKXQM%2Fimage.png?alt=media&amp;token=863ee3b5-f423-40a8-8298-e804956f9d55" alt="Hid icon by default"></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MexwRmd8xpsgsVnFrjf%2F-MeyB3mJ38Z-JEBDOy5w%2Fimage.png?alt=media&amp;token=5c2f2cda-373d-4a0c-8f54-12dba3785edd" alt="Added .slide-info__introduction to all tutorial slides"></div>

#### 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

{% file src="/files/-MeUAs8MaWxPQXr4cV4R" %}

{% hint style="info" %}
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.&#x20;
{% endhint %}

{% hint style="warning" %}
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.
{% endhint %}

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MeU7KIgPjNVsfGmsY61%2F-MeU9DUQRLcA52x_Hv9p%2Fimage.png?alt=media&amp;token=6d628500-76d9-4367-85b4-7aacecf49132" alt="Preview of rich-data profile-indicator filters"></div>

#### Changed:

* Reverted to old implementation of `.map-options__filters`&#x20;
* 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

{% file src="/files/-MePVsGCjS50fFPGDm7l" %}
Webflow export
{% endfile %}

![Preview of changes](https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MePMuYW3RJkWdjIUK5Z%2F-MePW5Oiw_bIcxq5U9Jr%2Fimage.png?alt=media\&token=fd3a90e5-f380-4330-891c-78b399d90d35)

Changed:&#x20;

* 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)

![](https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MePMuYW3RJkWdjIUK5Z%2F-MePWXvtCYihq9gVWvMO%2Fimage.png?alt=media\&token=277f2a7c-8bea-4b0e-ae2c-f3244f015b4b)

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

{% file src="/files/-MdqO2C2X3Ir-8\_lhkj7" %}
Webflow export
{% endfile %}

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MdqNXkvccR1UDRWe-zX%2F-MdqNuxTrIm9rNbMvNOe%2Fimage.png?alt=media&amp;token=0e1b4535-fee5-4bb8-997d-b7a08b83980e" alt="Preview of disabled state"></div>

* Added `.disabled` state to `.map-download` button by default.&#x20;
* Remove this class to set state to enabled.

## 07/05/2021- Removed filter disabled&#x20;

{% file src="/files/-MdpkCdnGJ3Za-FmKhW9" %}
Webflow Export
{% endfile %}

* 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:

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

## 07/02/2021 - Map options filters

{% file src="/files/-Md\_rYqDnhshJZTX0mqf" %}
Webflow Export
{% endfile %}

{% hint style="warning" %}
Please note that this element was changed as per a feature request: <https://app.gitbook.com/@openup/s/wazi-ng-technical/~/drafts/-Md_pTCg5RT4tBx8Ni2q/development-process/changelog#05-21-2021-additive-filtering>
{% endhint %}

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-Md_oqmWcDE22PcHOqce%2F-Md_rnKlAOvdkSmVJiM6%2Fimage.png?alt=media&amp;token=cb2b06ff-134c-43ef-8450-b817e9e71cc1" alt=""></div>

#### 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

{% file src="/files/-MdWhiBXUAdJyjcnjLGi" %}
Webflow Export
{% endfile %}

#### Changed:

* Added code to force truncation on the table cells

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

![](https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MdWfNByGTI7Vw1-gmWe%2F-MdWfV2NJgzZb8YpKh3V%2Fimage.png?alt=media\&token=9b1c25af-deb5-4de6-9871-c813fd6872ef)

## 06/28/2021 - Location tag width

{% file src="/files/-MdGtrbd-8w-Fxe05CC9" %}
Webflow Export
{% endfile %}

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MdGs503N5QWaBFv6b5S%2F-MdGsIcPHwIVkoUIud3o%2Fimage.png?alt=media&amp;token=c19cee48-38b2-4a2b-8706-66a2eb239b94" alt="Example of issue"></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MdGs503N5QWaBFv6b5S%2F-MdGt-LEy4UgWvcKriQf%2Fimage.png?alt=media&amp;token=ab431655-79e9-4810-acd7-a0ddcfa379a7" alt="Preview of fix"></div>

#### Changed:

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

## 06/22/2021 - SVG console error fix

{% file src="/files/-Mcn80MUylVLekolam5O" %}
Webflow export
{% endfile %}

#### Changed:

* Adjusted the svg height value for `.location-facility__icon` to 24px to avoid console errors.
* Removed wazimap-ng.css script call

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-Mcn70P1XVH82XFSyRTj%2F-Mcn98EplSENugZqfv8d%2Fimage.png?alt=media&amp;token=6e6e2105-d368-46e9-b658-32126469fe73" alt="Old console errors"></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-Mcn70P1XVH82XFSyRTj%2F-Mcn93Cr2-EB40DNrsBB%2Fimage.png?alt=media&amp;token=74d26889-ddf3-43a8-b6ea-635a57e6eaa5" alt="Console errors after fix"></div>

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

{% file src="/files/-Mch\_Hr9YvvY7sUHY6nv" %}
Webflow export
{% endfile %}

#### Changed:

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

## 06/11/2021 - Map options truncation fix

{% file src="/files/-Mbttq-0LQcWWvMk90XS" %}
Webflow export
{% endfile %}

#### 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.

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-Mbtrhi6nsF36lqWrMQa%2F-MbttjX9lRKyvPUnSFvv%2Fimage.png?alt=media&amp;token=519e145e-e602-42e5-b48a-3bb98e0b498b" alt=""></div>

## 05/25/2021 - Changes to map options filters

{% file src="/files/-MaY32wywTlmeS1CH4zg" %}
Webflow export
{% endfile %}

{% hint style="info" %}
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).
{% endhint %}

#### Changed:

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MaY2_hi8S55bLAijxMq%2F-MaY3CgcLB_6kDz1v2qA%2Fimage.png?alt=media&amp;token=e338334b-216c-4e42-b335-67be91e20e9c" alt="Removed the filters content section from the map-options div"></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MaY2_hi8S55bLAijxMq%2F-MaY3_kCWElbPVbagTHY%2Fimage.png?alt=media&amp;token=cd90bbdf-ad2e-4218-b3c9-97155efcbaef" alt="Added map-options__filters_content to the styles panel for cloning"></div>

* 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&#x20;

{% file src="/files/-MaDXGzVNtCnTJy13oIw" %}
Webflow export
{% endfile %}

{% hint style="info" %}
Feature preview: <https://wazimap-ng.webflow.io/feature-previews/additive-filters-05212021>
{% endhint %}

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MaDWv5aLmD9jSiLr09_%2F-MaDXhlaf4gW0nGaGMUb%2Fimage.png?alt=media&amp;token=1040651f-76b7-40e2-90d0-ba8b304e2441" alt="Additive filter preview in rich-data panel"></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MaDWv5aLmD9jSiLr09_%2F-MaDXzsmddzoG-e8eAKR%2Fimage.png?alt=media&amp;token=df524547-7bd7-4a38-ae81-1fb0461a1933" alt="Additive filter preview in map-options"></div>

#### 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-filter`is 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

{% file src="/files/-MZSM9y4evIT6Su-76i5" %}

{% hint style="info" %}
This change was requested by Mila directly and does not have an associated trello card or feature preview.
{% endhint %}

#### 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

{% file src="/files/-MYt0W\_qy8UFVgJwJ5y6" %}
Webflow export
{% endfile %}

{% hint style="info" %}
Feature preview: <https://wazimap-ng.webflow.io/feature-previews/download-all-facilities-04222021>
{% endhint %}

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MYt00pHdMbHvuheCGrO%2F-MYt1aKPhXX4kQn5i7wD%2Fimage.png?alt=media&amp;token=36b9d108-9b22-457c-9794-c1cea2e911df" alt="Preview of &#x22;Download all facilities&#x22; button"></div>

#### 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.

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MYt00pHdMbHvuheCGrO%2F-MYt1Pva8Ymp6Zjy0f7p%2Fimage.png?alt=media&amp;token=80fddbd5-9ca2-4345-89a2-dc9035b79ef8" alt="Revised structure of the facilities header"></div>

## 04/22/2021 - Chart menu data attributes

{% file src="/files/-MYsRfpH-eYOOvtwrTho" %}
Webflow export
{% endfile %}

#### 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&#x20;

{% file src="/files/-MXq8bGjxTquwJzMzXip" %}
Rich data tables
{% endfile %}

#### Changes:

* Added `.profile-indicator__table` to the `.styles` section&#x20;

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MXq4x5vD5_PjjjznxlI%2F-MXq5FVR_av0qGGkglMv%2Fimage.png?alt=media&amp;token=45636dd4-e2de-4b94-97b6-63c1308634d4" alt="Preview of the table (component has the &#x22;load more rows&#x22; button and showing info hidden) "></div>

#### Documentation:

* `.profile-indicator__table_row.profile-indicator__table_row--header` is the header row for the table and styles the row accordingly.&#x20;
* 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.&#x20;

## 03/09/2021 - Print and google maps button for location&#x20;

{% file src="/files/-MVLEmqRsxjW6F9ST4Cq" %}
Location print and google maps button
{% endfile %}

{% hint style="info" %}
Feature preview: <https://wazimap-ng.webflow.io/feature-previews/google-map-link-02242021>
{% endhint %}

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MVLCBr0kMKxZrbu6Xpy%2F-MVLCcXTWPElUFnhOkJ7%2Fimage.png?alt=media&amp;token=fe578938-0c0b-41d4-8e1b-ee6f3f137bfd" alt="Print button and google maps button"></div>

### 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

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MVLCBr0kMKxZrbu6Xpy%2F-MVLDijxOEXDtO_PzgAt%2Fimage.png?alt=media&amp;token=5be314b6-d431-4803-80c7-e37287b0c866" alt=".facility-info__print as a child of .facility-info__header"></div>

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

{% file src="/files/-MUhJr7BMnxa9mWnj1kV" %}
Explicit print button
{% endfile %}

{% hint style="info" %}
Trello card: <https://trello.com/c/qEwQAdRg>
{% endhint %}

### Changed

* Added `.rich-data__print` to the rich data panel

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MUh3PLeLkiCosrPd9tn%2F-MUhKYVc5ptvSicBO9W9%2Fimage.png?alt=media&amp;token=8a615c8b-248c-425b-9f95-acbd8f7ddc6b" alt="Explicit print button within rich-data panel"></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MUh3PLeLkiCosrPd9tn%2F-MUhK78cf6PiNOmSSA06%2Fimage.png?alt=media&amp;token=7a740417-ca8b-48a4-b213-c9a3e8a9b3a4" alt="Structure of rich-data and print button"></div>

## 03/01/2021 - Rich data location buttons

{% file src="/files/-MUh1zndNry9glDJ5Xn4" %}
Rich data location buttons
{% endfile %}

### Changed

{% hint style="info" %}
Trello cards: [https://trello.com/c/iqyaamZj](https://trello.com/c/PjRb7JD0) + <https://trello.com/c/AllyWK4N>
{% endhint %}

{% hint style="info" %}
Feature preview: <https://wazimap-ng.webflow.io/feature-previews/rich-data-location-button-03012021>
{% endhint %}

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MUh39nF6DtnnGgAlHVY%2F-MUh3JmkaJ4kx9jeetrT%2Fimage.png?alt=media&amp;token=197d686c-d427-48ff-a759-0bc79d657477" alt="Preview of new implementation"></div>

* 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

{% file src="/files/-MTohIRQtTrNfShw3oLl" %}
Map legend always showing
{% endfile %}

### Changed

{% hint style="info" %}
Trello card: <https://trello.com/c/iqyaamZj>
{% endhint %}

#### 1. Map legend always showing:

{% hint style="info" %}
Feature preview: <https://wazimap-ng.webflow.io/feature-previews/map-legend-02122021>
{% endhint %}

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MToh9V3GPHWQcvXhI3H%2F-MToiP5ZJgmqNwbiqv3R%2Fimage.png?alt=media&amp;token=adf4d4fc-2f03-4e3b-90bd-20f51372e6c4" alt="Preview of the .point-legend showing as part of the non-print ui"></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MToh9V3GPHWQcvXhI3H%2F-MToiMgc5PXK8ffGiom_%2Fimage.png?alt=media&amp;token=766b0b61-63a2-4fe1-8a3f-7269ecb68728" alt="Structure of new .map-bottom-items div"></div>

* 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

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MToh9V3GPHWQcvXhI3H%2F-MTokL3g_IjROCeuZxRG%2Fimage.png?alt=media&amp;token=9b371825-f505-48a6-bc1d-3bfadc8ad191" alt="point-legend__remove added to point-legend"></div>

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

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MToh9V3GPHWQcvXhI3H%2F-MTol-3VDMIKs8beGAd5%2Fimage.png?alt=media&amp;token=8319e230-8df5-4bb9-968d-3feded65d8a0" alt="print version of .point-legend without the remove button"></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MToh9V3GPHWQcvXhI3H%2F-MTolSO9BNGerNPakf6U%2Fimage.png?alt=media&amp;token=e84403b5-1809-4abd-b6b4-9e6c973ffc7b" alt="structure of .point-legend for print version"></div>

## 02/18/2021 - Map legend

{% file src="/files/-MTnfIkW7tg788mPtXae" %}
Map legend
{% endfile %}

### Changed

{% hint style="info" %}
Trello card: <https://trello.com/c/iqyaamZj>
{% endhint %}

#### 1. Map print legend:

* Added `.map-print` to the `.map` div
* Added `.map-print__point-legend` to `.map-print`&#x20;
* `.map-print` has a `.hidden` class by default which is removed when required

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MTkKFajZa6UnisoV1oW%2F-MTnd08YbGGjT0WNBW1n%2Fimage.png?alt=media&amp;token=34d19ecb-dc7e-43d1-80bb-1eca5089339e" alt="map-print contents"></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MTkKFajZa6UnisoV1oW%2F-MTngfDgbaA0-JuImXTN%2Fimage.png?alt=media&amp;token=9926de89-f6db-451d-a829-b2d6c89f17c1" alt="map-print in loading configuration"></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MTkKFajZa6UnisoV1oW%2F-MTnh1hNQJRVNuMMDWU0%2Fimage.png?alt=media&amp;token=7b7096d2-662e-46b7-849f-5258eda4417a" alt="Duplicated point-legend"></div>

#### 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&#x20;
  * `.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

{% file src="/files/-MTia89LXGJmjwONrr2n" %}
Hover menu data-attributes
{% endfile %}

### Changed

#### Added data attributes to hover menu components:

{% hint style="info" %}
Trello card: <https://trello.com/c/m1uc8zOh>
{% endhint %}

* 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

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MTi_Efj5HWP6QNudueb%2F-MTiabp8_VwNU-nS9353%2Fimage.png?alt=media&amp;token=3432ee05-99ef-4600-b07e-bfe8e0b9c391" alt=""></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MTi_Efj5HWP6QNudueb%2F-MTib6SJBqJapSBqjDEi%2Fimage.png?alt=media&amp;token=d1ac724b-9569-4510-aab5-fea95aea78fa" alt=""></div>

### 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

{% file src="/files/-MTefm6QjE9miQKnr7fQ" %}
Hover menu content styling
{% endfile %}

{% hint style="info" %}
Webflow feature preview: <https://wazimap-ng.webflow.io/feature-previews/chart-dropdown-percentage-02162021>
{% endhint %}

### Changed

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

{% hint style="info" %}
Trello card: <https://trello.com/c/tNa3oDXM/654-provide-css-to-allow-hiding-of-the-chart-type-toggles-in-the-chart-context-menu>
{% endhint %}

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MTe6XUt5htQ6WLWCMJo%2F-MTeanG18MxHo0jiXxW0%2Fimage.png?alt=media&amp;token=c435f0b9-af2a-4c62-8422-6b4cbd822fe8" alt="Preview of the change to the hover-menu structure"></div>

* 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

{% hint style="info" %}
Trello card: <https://trello.com/c/KV0Yk0hR/655-fix-the-active-css-for-the-value-toggle-on-the-chart-context-menu>
{% endhint %}

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MTe6XUt5htQ6WLWCMJo%2F-MTedsFKRUqgnijAyFLQ%2Fimage.png?alt=media&amp;token=dba253dd-c3d0-4a82-91e0-de2085793ae3" alt="Old approach"></div>

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MTe6XUt5htQ6WLWCMJo%2F-MTedQdMMxqJwSvqdP7K%2Fimage.png?alt=media&amp;token=e2d1523b-e735-403d-bf37-c36874154f03" alt="New approach"></div>

* Changed the way the `.last` class is applied to `.hover-menu__content_list-item` to make the active class behave as intended.&#x20;
  * 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&#x20;
  * eg.`.hover-menu__content_list-item.last.active`

## 02/12/2021 - Tab notice and map title

{% file src="/files/-MTKUAFKUZvCC6ZSj7sr" %}
Tab notice and map title adjustments
{% endfile %}

### Changed

#### Map title:

{% hint style="info" %}
Related Trello card: <https://trello.com/c/KqAdJ01z>
{% endhint %}

{% hint style="info" %}
Webflow feature preview: <https://wazimap-ng.webflow.io/feature-previews/map-title-14012021>
{% endhint %}

* Changed default state for `.map-title` to `display: block`
* Added `.hidden` class to `.block-title` to hide by default.&#x20;
* Remove `.hidden` to show

#### Tab notice:

{% hint style="info" %}
Related Trello card: <https://trello.com/c/0tGnWAkN>
{% endhint %}

{% hint style="info" %}
Webflow feature preview: <https://wazimap-ng.webflow.io/feature-previews/tab-notice>
{% endhint %}

<div align="left"><img src="https://405987915-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3zapxOsLjq_qKRcmH8%2F-MTKTKs8mT7YDmoejM7-%2F-MTKVvnyRkL4n6ReBJhE%2Fimage.png?alt=media&amp;token=be0ded5a-0810-4726-989c-27f1b0c7c456" alt="Tab notice in loading state"></div>

* 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...")