v5.1.x release notes

Version 5.1

Launching date: 2019-06-20
Compile with: WET-BOEW v4.0.31

Download theme GCWeb v5.1
(Source code)

What's new?

Template
- Minor - Search template - New template for pages with search results.
- Minor - Navigation element - A <nav> element was added for the skip nav link, as shown here.
- Minor - Font Awesome - A reference to font-awesome 5.8.1 was added inside the <head> tag (see snippet).
- Minor - RDFa + schema.org improvement to Canada wordmark - The RDFa markup has been modified, new property added, to improve SEO and how search engine interprete some information included in our template (more details).
- Patch - RDFa markup for main element - Fixed RDFa markup issue on the main element by adding typeof="WebPageElement" attribute to the <main> element, as shown here.
Styles and plugins
- Minor - Custom CSS variant - New concept that allows integration of custom CSS for implementation variant of GCWeb by writing styles inside new SASS files that are included in the build for pick-up (more details).
- Minor - Background colour - Set a dark background to an element (e.g. well) with the class .bg-dark or a completely black one with .bg-darker.
- Minor - Text colour- Set text in white with a CSS class called text-white. Works jointly with dark backgrounds.
- Minor - Redacted text - Change of redacted text character to a full block when .redacted is in use.
- Minor - Well - Provide a responsive well that takes the full width of its parent by adding the .header-rwd class to it.
- Minor - URL manager and geomap - Added the possibility to prefill geomap configurations with action management, as shown here.
- Patch - Footer background image - Canadian flag was added on the top of the parliament on the landscpae image.
- Patch - Carousel - Link underline override was removed on carousel.
- Patch - Multimedia player - Top margin override was removed on multimedia player.
- Patch - Menu - Fix menu navigation on different browsers when using a screen reader by running rigorous operability tests with JAWS and NVDA.
Experimental (NEW)
- Bootstrap 4 spacers - CSS classes added for padding and margin spacing, e.g. .p-0 for no padding and .mb-sm-5 for extra-large bottom margin for small devices and up.
- Background image size - CSS class added for a background image to cover the boxes size with .bg-cover.
- Background image URL - New plugin that allows to set a background image from a data attribute called data-bgimg. It was introduced in the specifications but is not yet supported by browsers.
- Theme colours - Provides the ability to change theme colours to pink or dark.
Maintenance
- Build script - HTMLlint exception was added to prohibit integrity attribute in link tags until adopted in the HTML specifications.
- GCWeb install from other repository - Include a package.lock in the repository "themes-cdn_GCWeb" to be able to refer at it as a dependency in a nodejs project.

Modified files for implementation

Footer landscape image: GCWeb/assets/landscape.png
Main JavaScript:
- GCWeb/js/theme.js
- GCWeb/js/theme.min.js
Main CSS:
- GCWeb/css/theme.css
- GCWeb/css/theme.min.css
Sprite image for social media logos: wet-boew/assets/sprites_share.png Clarified on: 2019-09-16
Geomap dependency:
- wet-boew/js/geomap-lib.js
- wet-boew/js/geomap-lib.min.js
i18n zh-Hans language:
- wet-boew/js/i18n/zh-Hans.js
- wet-boew/js/i18n/zh-Hans.min.js

WET-BOEW v4.0.31 (see release notes) Clarified on: 2019-09-16

Template
- skip links
Styles and plugins
- overlay
- share widget
- geomap
- core
- tables
- multimedia player
- feeds
- toggle
Maintenance
- build script

Browsers supported

As per the rule defined by Design decision 2: Browser supported

Chrome 75
Chrome 74
Safari 12.1.1
Firefox 67.0.3
Firefox 66.0.5
Firefox ESR - 60.7.1
IE 11
Edge 44

Details

Number of commits: 41

Pierre Dubois (@duboisp): 19 commits
Patrick Lajeunesse (@patlaj): 5 commits
Thang Le (@thangle2013): 4 commits
Eric Dunsworth (@EricDunsworth): 3 commits
Francis Gorman (@GormFrank): 2 commits
Xiayitan (@xiayitan): 2 commits
Ilya Pak (@ipaksc): 1 commit
Shawn Thompson (@shawnthompson): 1 commit
Jun Sola (@junsola): 1 commit
Miguel Borges-Porteous (@Borges-Porteous): 1 commit
Stephane Ducharme (@StdGit): 1 commit
David Pepin (@quidampepin): 1 commit

List of commits

Update build version to v5.1.0-development - Pierre Dubois, 2019-02-11
Broken link fix and added SRI hash - Pierre Dubois, 2019-02-11
Broken link fix - Pierre Dubois, 2019-02-12
add nav element to skip navigation closes #1500 related wet-boew/wet-boew#8570 - Shawn Thompson, 2019-02-13
Menu fix when navigating with a screen reader - Pierre Dubois, 2019-02-20
v5.0.x release notes page content update - ipaksc, 2019-02-21
Report - Menu - Test result with screen reader - Pierre Dubois, 2019-02-22
v5.0.1 Release notes - Pierre Dubois, 2019-02-23
Search template - Documentation and working example - Borges-Porteous co-authored by Pierre Dubois, 2019-03-01
Add FontAwesome to page heads - Patrick Lajeunesse, 2019-03-18
Added details about Font Awesome - Patrick Lajeunesse, 2019-03-18
Tag close and position of link line from @EricDunsworth - EricDunsworth co-authored by Patrick Lajeunesse, 2019-03-22
Action mng - Add geomap filtering - Pierre Dubois, 2019-03-22
Build script - add HTMLlint exception for integrity attribute in link element - Pierre Dubois, 2019-03-22
Move before theme.css, use 5.8.1 of fontawesome - Patrick Lajeunesse, 2019-03-24
Redacted text - Changed the recommended redacted character - Pierre Dubois, 2019-03-26
Carousel: Removed link underline overrides. - Eric Dunsworth, 2019-04-02
Carousel: Removed media player top's margin. - Eric Dunsworth, 2019-04-04
Correct hash for vers 5.8.1 - Patrick Lajeunesse, 2019-04-09
Content - Add reference for GCWeb menu CDN link - Pierre Dubois, 2019-04-12
update-megamenu-20190411 - Thang Le, 2019-04-12
Fixing links to specs - quidampepin, 2019-04-16
megamenu-changes-v5 - Thang Le, 2019-04-18
Add color - Background dark and text white - xiayitan, 2019-05-10
Well header responsive + Experimental features - Pierre Dubois, 2019-05-10
WET-BOEW dependance - Bump to v4.0.31-development+2019-05-08 build - Pierre Dubois, 2019-05-13
Add experimental margin bottom xl small device and up - xiayitan, 2019-05-14
Experimental - rename .px-sm for .px-sm-3 and improved the .mb-sm-5 working example - Pierre Dubois, 2019-05-14
Allow to install from themes-cdn_GCWeb - Stephane Ducharme, 2019-05-15
Menu - Prevent menu closing for touch screen and basic instruction menu (#1539) - Pierre Dubois co-authored by Francis Gorman, 2019-05-16
Experimental - Add pink day and dark color theme - Pierre Dubois, 2019-05-17
Build for GCWeb variant - Allow the integration of custom CSS with GCWeb - Pierre Dubois, 2019-05-22
WET-BOEW dependance - Bump to 2019-05-22 build - Francis Gorman, 2019-05-23
Template - Replace landscape image in footer - Pierre Dubois, 2019-05-27
Structure Data - Set publisher to Government of Canada - Pierre Dubois, 2019-05-29
update - French-mega-menu - Thang Le, 2019-05-31
Experimental: Add a background to a heading. - junsola, 2019-06-04
Default image path fix - Francis Gorman, 2019-06-05
Pre-release notes: Updates to the developer build notes - gormanfrank, 2019-06-06
update-megamenu-BSD-9189 - Thang Le, 2019-06-07
Experimental features: Add link to Design decision on documentation page - GormFrank, 2019-06-10

Subresource integrity (SRI)

SRI provides a method to protect website delivery. The following information contains the hash for key resource in WET and GCWeb.

v5.1

GCWeb/js/theme.min.js: sha256-OiyJQtupiMx0gDQGSlt55mOp82hu4XsItRN3fQV2BxY= sha512-6N1hTW9Wcl8pDykcln31N2ACd41L8VCiav+pz70ws4QgfmeMux5MRzEq0lQEeKJtJlo2MgQnSDFOefERH9i2eg==

Get all hash (JSON format):

GCWeb theme

More details and examples

Related to template

Navigation element

Now

<nav>
		<ul id="wb-tphp">
			[...]
		</ul>
	</nav>

Was

<ul id="wb-tphp">
		[...]
	</ul>

Font awesome

The following snippet needs to be inserted above or under the "theme.min.css" link stylesheet call:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />

RDFa + schema.org improvement to Canada wordmark

Set the "publisher" property of the "WebPage" to be a "Governement Organization"
Define the following property for the Governement Organization:

url

Link to the home page

logo

Top left image logo

name

Government of Canada

areaServed

Set to the country "Canada"

logo

Link representing the bottom right logo

Note: The following markup was limited to scope of RDFa 1.1 lite and that is why a link, the same as the bottom logo was added.

English

Now

<div class="brand col-xs-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
		<a href="https://www.canada.ca/en.html" property="url"><img src="./../GCWeb/assets/sig-blk-en.svg" alt="" property="logo" /><span class="wb-inv" property="name"> Government of Canada / <span lang="fr">Gouvernement du Canada</span></span></a>
		<meta property="areaServed" typeOf="Country" content="Canada" />
		<link property="logo" href="./../GCWeb/assets/wmms-blk.svg" />
	</div>

Was

<div class="brand col-xs-5 col-md-4">
		<a href="https://www.canada.ca/en.html"><img src="./../GCWeb/assets/sig-blk-en.svg" alt="" /><span class="wb-inv"> Government of Canada / <span lang="fr">Gouvernement du Canada</span></span></a>
	</div>

French

Now

<div class="brand col-xs-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
		<a href="https://www.canada.ca/fr.html" property="url"><img src="./../GCWeb/assets/sig-blk-fr.svg" alt="" property="logo" /><span class="wb-inv" property="name"> Gouvernement du Canada / <span lang="en">Government of Canada</span></span></a>
		<meta property="areaServed" typeOf="Country" content="Canada" />
		<link property="logo" href="./../GCWeb/assets/wmms-blk.svg" />
	</div>

Was

<div class="brand col-xs-5 col-md-4">
		<a href="https://www.canada.ca/fr.html"><img src="./../GCWeb/assets/sig-blk-fr.svg" alt="" /><span class="wb-inv"> Gouvernement du Canada / <span lang="en">Government of Canada</span></span></a>
	</div>

RDFa markup for main element

Now

<main property="mainContentOfPage" typeof="WebPageElement" class="container">
	<h1 property="name" id="wb-cont">[...]</h1>
	</main>

Was

<main property="mainContentOfPage" class="container">
	<h1 property="name" id="wb-cont">[...]</h1>
	</main>

Related to styles and plugins

Custom CSS variant

If you would want to use your own variant of GCWeb to ease implementation, then rename the following folder in order to be caught by the build script:

After

"src/variant"

Before

"src/variant-default"

Note: "variant-default.scss" is the SASS file to edit for custom styles, but others inside the same folder are also available for different viewports.

Action manager and geomap

As an example, the following parameters ?aoi=qc&layout=pt would zoom on Quebec and activate the Points layer after the URL manager is initiated. Check out the URL mapping documentation for more information.

Page details

Date modified:: 2019-09-16