Webflow exports & changelog
Last updated
Last updated
Removed the app preview subtitle from the header nav.
Added .richtext-image to the export
Removed the reliance on a combo class for .richtext-image.
Updated documentation to reflect this change
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.
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.
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 .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
Removed the dummy map from .map-container
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.
Added elements to ensure the export html represents the structure outlined by Jaron
Documentation link: https://citizen-engagement-app.webflow.io/documentation#maps
Trello card: https://trello.com/c/GF14y9FH
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.
.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:
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
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
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
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
These changes were implemented to make form more accessible and
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
Removed grid--fullwidth from component library
Added grid--default to component library
Documentation: https://citizen-engagement-app.webflow.io/documentation
Created component .basic-block--placeholder for lists that do not have any items
Created component .basic-block--status for success/warning/failure messages
https://www.figma.com/file/GREhUOy6VpwAku9O7yb2Lu/Citizen-Engagement-App?node-id=708%3A0
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"
