Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

v5.1 - Notes de version

Version 5.1

Télécharger le thème GCWeb v5.1
(Code source)

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.

WET-BOEW v4.0.31 (see release notes)

  • 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

List of commits

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
[add SRI hash]

Get all hash (JSON format):

More details and examples

Related to template

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

Signaler un problème sur cette page
Veuillez cocher toutes les réponses pertinentes :

Merci de votre aide!

Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît contactez-nous.

Date de modification :