Webflow exports & changelog

2021-24-06 - App preview removal

Changed:

Removed the app preview subtitle from the header nav.

2021-24-05 - richtext-image update

2MB

citizen-engagement-app.webflow (richtext-image - 05242021).zip

Changed:

Added .richtext-image to the export
Removed the reliance on a combo class for .richtext-image.
Updated documentation to reflect this change

2021-19-05 - image--richtext addition

Added:

Added .image--richtext to the documentation and component library.
- This class adds "height: auto;" to the .image class

This may not be the best way to implement this feature. Based on dev feedback, we may be able to add "height: auto;" to the base .image class to make this class unnecessary. Please advise on this.

2021-07-05 - Logo loading and button wrapping

Changed:

Set the loading behavior on .nav-menu__logo to "eager" so that it loads with the page rather than when it becomes visible.
Removed max-height on .card.action-block so that the label does not extend outside the button.

Please note that the changing of this max height will mean that we need to be careful about the length of button labels. They will grow to be as long as the label is and might cause UI/UX issues if not vetted. Err on the side of short descriptive labels.

2021-04-21 - Form items and fontawesome removal

Feature preview: https://citizen-engagement-app.webflow.io/feature-previews/feature-preview-service-requests

Changed:

Removed label from .form___input-block--large-field (these labels must now be added manually above this component)
Removed font awesome fonts from the site. Now only icons created using the class approach will work. If you run into any issues with old styling that relied on the fonts, please let me know.

Added:

Added .upload-images component to the component library as well as the documentation (see images)

Added .form__field-label to the documentation and component library. This .form__field-label (if duplicated from the component library) will have the <label> tag.
Added .form__location-picker_expand to the component library and documentation. This allows for the map location picker to be hidden by default and then expanded on request from the user. See the documentation for more information.

Please stop using the .label component that is currently in the component library. Use the .form__field-label instead

2021-04-08 - Remove location and pre-wrap paragraph

Fixed:

Removed the dummy map from .map-container

Added:

Added .paragraph--prewrap to the component library based on this user story https://trello.com/c/Oyubdn55
Added .map-remove-location to the .location-picker component and documented it in the documentation here: https://citizen-engagement-app.webflow.io/documentation#maps
Added a .map-loading item to the .map-container which should be hidden once the map is loaded.

2021-04-06 - Tab Content Fix

Fixed:

Added elements to ensure the export html represents the structure outlined by Jaron

<div class="tab-contents__wrap">
  <div class="tab-content scroll">
    <div class="grid--default"></div>
  </div>
</div>

2021-04-06 - Location picker

Documentation link: https://citizen-engagement-app.webflow.io/documentation#maps

Trello card: https://trello.com/c/GF14y9FH

Added:

Added .location-picker item to the component library and documented it on the documentation page.

Please note that the location picker does not have a heading or a prompt to drag the map to a specific location. This should be added based on the needs of the map. If this should be incorporated into the component, please let me know.

Location picker dev:

.map-container is where the leaflet map should be inserted.
Added the following css to the site in order to prevent users from being able to highlight and select the map pin element when swiping on the map:

/*Make map pin non-interactive*/  
.map-pin {
  pointer-events: none;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */   
}

Location picker notes:

The location picker is for users to identify a location that might not be an address eg. the user wants to highlight a dam or a tree next to a road.
A user journey could be as follows:
- User wants to locate a broken street lamp near them
- The user knows the lamp is down the road from their house
- They click "use my location" to center the map on their current GPS location
- The user is prompted to allow the website to use their location (if they haven't already)
- The map centers on their location
- The then drags the map to position the map pin on the location of the lamp

Fixed:

Adjusted the way that .tab-links display. They were filling the screen height before, which meant that when you tapped one, the entire height of the screen below the tab would be highlighted with the tap interaction. I have fixed this so now the tab is only highlighted at the top of the screen where it is visible.
Added padding-bottom: 6px to the bottom of .tab-link to make this fix work

Changes:

Added sharing menu

.share is hidden by default using a .hidden class and will not show up by default

Tap on .share__button opens the menu and shows .share__close which is a fixed div that fills the entire screen so any tap outside the menu will close it.
Tapping a .share__link will also close the menu (and any functionality should be added on this click eg. linking to facebook sharing or opening the email client)
.share-links have a class to describe their function (eg. facebook, email, copy-link etc.)
The .share__link.copy-link is the only link that doesn't close the menu, instead it plays a blinking animation saying "Link copied!" to let people know it has been copied to clipboard. The user will need to then click outside the menu to close it.

.share__link_icon is an SVG embed on the Webflow side so that the colour of the icon can be dynamically controlled. You can adjust this icon by changing the svg code.
.share__link_alt is only used on the .copy-link it is the alternate text that flashes when the link is clicked

2021-02-25 - Description truncation

Changed:

Added .truncate class to .h3-block-title within .link-block--subtitle-status in order to prevent it from running onto multiple lines within the block
Added overflow: hidden to .link-block__inner to ensure truncation behaves correctly

2021-02-25 - Form item changes

Rationale:

These changes were implemented to make form more accessible and

Changed:

Please note that there are spacing issues with the current form because form items are not being placed within .form__inner

Please note that placeholder text in form items should now be example text as apposed to a label. eg. John Smith, johnsmith@email.com

.input-field changed to .form__input-field and is now housed within.form__input-block to accommodate the default .form__field-label that will accompany each .form__input-field
.field-label changed to .form__field-description to avoid confusion now that there is an explicit field label that appears above the input field
.form__input-field--label changed to .form__input-block--description to avoid confusion and keep the concept of the "input-block" consistent.
.form__input-field--large is now housed within .form__input-block--large-field to accommodate the default .form__field-label that will accompany each input field

Added .form__legend-block to be used as "headings" for form input groupings
Added .form__legend-block--label to be used when heading description labels are required eg. *Required

2021-02-17 - Added grid--default to component library

Changed:

Added grid--default to component library:

Removed grid--fullwidth from component library
Added grid--default to component library

2021-02-12 - Status alerts and placeholder messages

Associated designs:

Documentation: https://citizen-engagement-app.webflow.io/documentation

Changelog:

Created component .basic-block--placeholder for lists that do not have any items
Created component .basic-block--status for success/warning/failure messages

2021-02-10 - Service requests

Associated designs:

https://www.figma.com/file/GREhUOy6VpwAku9O7yb2Lu/Citizen-Engagement-App?node-id=708%3A0

Changelog:

Created component ".form__input-field--large" for "Service request description"
Created component ".link-block--subtitle-status" for "My service requests"
Created component ".dropdown" for "Ward" and "Service area of request"
Created component ".label"

Documentation:

Documentationcitizen-engagement-app.webflow.io

4MB

citizen-engagement-app.webflow (12092020 - logo-link-form-labels-favicon-webclip).zip

2021-24-06 - App preview removal

Changed:

2021-24-05 - richtext-image update

Changed:

2021-19-05 - image--richtext addition

Added:

2021-07-05 - Logo loading and button wrapping

Changed:

2021-04-21 - Form items and fontawesome removal

Changed:

Added:

2021-04-08 - Remove location and pre-wrap paragraph

Fixed:

Added:

2021-04-06 - Tab Content Fix

Fixed:

2021-04-06 - Location picker

Added:

Location picker dev:

Location picker notes:

2021-04-02 - Share button

Fixed:

Changes:

Share menu interaction:

Share menu notes:

2021-02-25 - Description truncation

Changed:

2021-02-25 - Form item changes

Rationale:

Changed:

2021-02-17 - Added grid--default to component library

Changed:

Added grid--default to component library:

2021-02-12 - Status alerts and placeholder messages

Associated designs:

Changelog:

2021-02-10 - Service requests

Associated designs:

Changelog:

Documentation: