Webflow exports & changelog

2021-24-06 - App preview removal

Webflow export

Changed:

  • Removed the app preview subtitle from the header nav.

2021-24-05 - richtext-image update

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

Webflow export

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

Webflow export

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

Webflow export

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)

Preview of the .upload-images component
upload-images component structure
  • 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.

Documentation of the .form__field-label

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

Pre-wrap and remove location

Fixed:

  • Removed the dummy map from .map-container

Added:

2021-04-06 - Tab Content Fix

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>
Tabs structure

2021-04-06 - Location picker

Location picker

Added:

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

.location-picker preview
.location-picker structure

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

2021-04-02 - Share button

Sharing menu

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

Preview of the share menu
Share component structure

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

Share menu interaction:

  • 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 function class

Share menu notes:

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

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

Example of truncation
truncate added to .h3-block-title within .link-block--subtitle-status

2021-02-25 - Form item changes

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

Structure of form__input-block--large-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

Screenshot from documentation

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

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

Status alerts and placeholder message

Associated designs:

Changelog:

  • Created component .basic-block--placeholder for lists that do not have any items

  • Created component .basic-block--status for success/warning/failure messages

Status alerts
Placeholder block

2021-02-10 - Service requests

citizen-engagement-app.webflow (service-requests - 02102021)

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:

Last updated

Was this helpful?