The Canada word-mark isn't fully clickable. Need to add size to the element inside below the word-mark.

Please, as early implementers are migrating huge volumes of content from WET3 to gcweb/WET4, we need everyone's participation at this stage to quit changing class or id names. Bite the bullet and wait until we are done with this first release.

If it is critical, warn us here or by mass email as we cannot guess.

Thanks.

Maybe it's just my version of the downloaded zip, but the drop down from the menu bar does not disappear unless I hover over a different menu item

For example, if I hover and the drop down appears, but then I decide I want to stay on the page, so I mouse away, the drop down stays and won't go away.

Implementing zebra striping on tables does not work for me and my colleagues. Used the "table-striped" class within the "table" class and also used it with the "wb-tables" class as well. Still not displaying, am I missing something? Thanks for the help.

Since we changed the grid system on the main pages, the partners pages with the left navigation aren't layout correctly.

Need to add focus (colour change) to the search button in the search form above the menu.

There is a duplicate ID "wb-slc" in the skip to content code.

The down arrow (expicon) on the menu, with sub menus look is still off since changes in #80.

The template does not seem to display correctly in IE 8. I tested with second-en.html. In Firefox it work fine.

The page https://github.com/bci-web/GCWeb-dist/blob/master/mediaplayer-en.html has the class col-offset-1 but there is no such thing as that class. It would need to be col-md-offset-1 but I'm not sure why you would want to offset it. It would more likely have no offset but increase the grid to a col-md-7?

<div class="row"> 
<div class="col-md-6 col-offset-1"> 
<h2 class="h3">Remembrance Vignette</h2> 
<p>...</p> 
<p class="text-center"><a class="btn btn-primary text-center" href="video-en.html">See the video</a></p> 
</div> 
<div class="col-md-5 profileimage"> 
<a href="video-en.html"><img class="thumbnail" alt="Remembrance Vignette" src="http://dev3.canada.ca/video/2012veterans.jpg"></a> 
</div> 
</div>

Do we really need a 1em bottom spacer on the footer link? (Wouldn't a 0.5 be fine?) Currently we have this...

footer nav li {
    margin-bottom: 1em;
}

Over to you @patheard

.opct-100 {
opacity:1;
}

.opct-90 {
opacity:.9;
}

.opct-80 {
opacity:.8;
}

.opct-70 {
opacity:.7;
}

.opct-60 {
opacity:.6;
}

.opct-50 {
opacity:.5;
}

.opct-40 {
opacity:.4;
}

.opct-30 {
opacity:.3;
}

.opct-20 {
opacity:.2;
}

.opct-10 {
opacity:.1;
}

.clmn-2 {
column-count:2;
}

.clmn-3 {
column-count:3;
}

.clmn-4 {
column-count:4;
}

.pstn-lft,.pstn-lft-sm,.pstn-lft-md,.pstn-lft-lg,.pstn-lft-xlg,.pstn-rght,.pstn-rght-sm,.pstn-rght-md,.pstn-rght-lg,.pstn-rght-xlg,.pstn-tp,.pstn-tp-sm,.pstn-tp-md,.pstn-tp-lg,.pstn-tp-xlg,.pstn-bttm,.pstn-bttm-sm,.pstn-bttm-md,.pstn-bttm-lg,.pstn-bttm-xlg {
position:absolute!important;
margin:0!important;
}

.pstn-lft {
left:0!important;
}

.pstn-lft-sm {
left:10px!important;
}

.pstn-lft-md {
left:20px!important;
}

.pstn-lft-lg {
left:50px!important;
}

.pstn-lft-xlg {
left:100px!important;
}

.pstn-rght {
right:0!important;
}

.pstn-rght-sm {
right:10px!important;
}

.pstn-rght-md {
right:20px!important;
}

.pstn-rght-lg {
right:50px!important;
}

.pstn-rght-xlg {
right:100px!important;
}

.pstn-tp {
top:0!important;
}

.pstn-tp-sm {
top:10px!important;
}

.pstn-tp-md {
top:20px!important;
}

.pstn-tp-lg {
top:50px!important;
}

.pstn-tp-xlg {
top:100px!important;
}

.pstn-bttm {
bottom:0!important;
}

.pstn-bttm-sm {
bottom:10px!important;
}

.pstn-bttm-md {
bottom:20px!important;
}

.pstn-bttm-lg {
bottom:50px!important;
}

.pstn-bttm-xlg {
bottom:100px!important;
}

.mrgn-lft-0 {
margin-left:0!important;
}

.mrgn-lft-sm {
margin-left:5px!important;
}

.mrgn-lft-md {
margin-left:10px!important;
}

.mrgn-lft-lg {
margin-left:20px!important;
}

.mrgn-lft-xlg {
margin-left:50px!important;
}

.mrgn-bttm-0 {
margin-bottom:0!important;
}

.mrgn-bttm-sm {
margin-bottom:5px!important;
}

.mrgn-bttm-md {
margin-bottom:10px!important;
}

.mrgn-bttm-lg {
margin-bottom:20px!important;
}

.mrgn-bttm-xlg {
margin-bottom:50px!important;
}

.mrgn-tp-sm {
margin-top:5px!important;
}

.mrgn-tp-md {
margin-top:10px!important;
}

.mrgn-tp-lg {
margin-top:20px!important;
}

.mrgn-tp-xlg {
margin-top:50px!important;
}

.mrgn-rght-0 {
margin-right:0!important;
}

.mrgn-rght-sm {
margin-right:5px!important;
}

.mrgn-rght-md {
margin-right:10px!important;
}

.mrgn-rght-lg {
margin-right:20px!important;
}

.mrgn-rght-xlg {
margin-right:50px!important;
}

[class*=border] {
border:solid 0 #ccc;
}

.brdr-lft {
border-left-width:1px;
}

.brdr-rght {
border-right-width:1px;
}

.brdr-tp {
border-top-width:1px;
}

.brdr-bttm {
border-bottom-width:1px;
}

Has jQuery been disabled in IE <9?

cc/ @pjackson28

Refer to wet-boew
wet-boew/wet-boew#3548

I noticed that the layout is bigger then 100% of the screen size for the partners second-en.html and second-fr.html pages. You actually have a horizontal scroll bar and white space to the right of the GoC wrapper. This is happening on all browser. I suspect there some issue with the class="secondary" in the body.

All the main element CSS rules do not work in IE8. When viewed in IE 8, the content sticks to the sides of the window.

When you un-hover the megamenu the megamenu stays expanded (open). This is happening in all browsers. The only way to hide the megamenu is if you un-hover by moving the cursor away from the megamenu from the top of the banner (white space) all the way to the right or left where there is no megamenu item.

This link is keyboard accessible but it does not have visual indicator to indicate that it received focus. This would fail Guideline 2.4.7 Focus Visible: “Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible” (http://www.w3.org/TR/WCAG20/#navigation-mechanisms).
Without visible indicators, keyboard users can’t know if an element on the page received the focus and they can’t interact with that element. Keyboard focus indicator is dotted border that we see around links and form elements when we tab to them.

Also, curious to know if we are still using easytabs here?

Thanks.

@thomasgohard has any IE 8 testing been done on your pages?

I will create a content page similar to the one we had/have for WET for this theme.
http://wet-boew.github.io/wet-boew/demos/theme-gcwu-fegc/cont-en.html

PS I'm using the issues as my todo list but if anyone else wants to take these on go...

The gh-pages/deploy stuff is wiping out the master content. This needs to be reverted to a previous commit

Link “Close” that is supposed to be available only on small screens to close Search functionality is physically present on larger screens too. CSS is used to hide it from visual users but it is exposed to screen readers. This might be an issue because the link does nothing when page is viewed on larger screens.
Also link text “Close” is not descriptive enough. Text does not explain the purpose of the link. The visually impaired users can’t know what they would be closing.

Which of the following is correct:
A)

<div class="wb-equalheight"> 
            <div class="sect-lnks"> 
                <figure class="thumbnail"> 
                    <img src="./img/healthy.jpg" alt="..."> 
                    <figcaption class="caption">
                        <a href="#">Healthy Canadians</a>
                    </figcaption> 
                </figure> 
            </div>

or, B)

<div class="wb-equalheight">
            <figure class="sect-lnks thumbnail">
                <img src="./img/healthy.jpg" alt="...">
                <figcaption class="caption">
                    <a href="#">Healthy Canadians</a>
                </figcaption>
            </figure>

Thanks!

This would fail Guideline 2.1 Keyboard Accessible (http://www.w3.org/TR/WCAG20/#keyboard-operation)
Right now the user can only tab to “Jobs” (first link of first level links) because the tabindex is set to 0 (tabindex=”0”). Other links (including sublinks) do not participate in the tabbing flow of the document because their tabindex is given a value of -1 (tabindex=”-1”).
If given a value of "-1", the element can't be tabbed to and it can’t be focused via the keyboard.

The menu font is still set at 14px and is too small for mobile standards. If we make it any bigger the menu wraps in French when viewed at medium size. A purposed fix was to remove the UPPERCASE text and remove the font-size declaration setting back to default. @masterbee any news on this change?

@masterbee we have the same problem with the footer include (/site/includes/footers.hbs) that we had with the menu include. We need to create a French version to accommodate for the difference in links. I will create the file (/site/includes/footerfr.hbs) but I'm not sure how to link in in the default page....

Because Bootstrap uses padding and percentages, you do NOT need background images for borders (like you did for fixed width grids).

Currently it's this code

footer .border-left {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAIAAACmkByiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjJFMEIzREYzNUQ3MTFFMzgxQzlBMTYxOUUwOTI0MDQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjJFMEIzRTAzNUQ3MTFFMzgxQzlBMTYxOUUwOTI0MDQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMkUwQjNERDM1RDcxMUUzODFDOUExNjE5RTA5MjQwNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMkUwQjNERTM1RDcxMUUzODFDOUExNjE5RTA5MjQwNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjVj5TYAAAAZSURBVHjaYjh05CgTAwPDKB7FoxgTAwQYAJdOA9pG4uR3AAAAAElFTkSuQmCC");
    background-position: 0 15px;
    background-repeat: no-repeat;
}

Additionally, the border isn't rendering the proper height of the div it's attached to. It should just be this:

.border-left {
border-left:1px solid #ccc;

}

Here is what is currently displaying

H2 when the text crosses over two line get squished.

the breadcrumbs on the index-alt-en.html page is missing a level.
"Home / Finding a job" should be "Home / Jobs & the workplace / Finding a job"

None of the demo pages show a left menu. How will the left menu be displayed in mobile, as the main menu/footer is now in a different ajax file?

There is a 1px solid white border on the image.

Also I don't think the gray background on the image is the same gray as in the footer.

The HTML minifier fails at random.

I can run the build and it fails. Then I run the build immediately again, without making any changes, and it passes.

Just noticed some issues with the document structure. There are several unnamed sections in the HTML5 outline which will be problematic for people that navigate by the HTML5 outline, including screen reader users. Please ensure all sectioning elements include a heading.

 1.  Welcome to Canada.ca
    1.   Language selection
    2.   Untitled SECTION
    3.   Search
    4.   Untitled NAV
       1.    Site menu
       2.    Site Information
    5.   Breadcrumb trail
    6.   Untitled ASIDE
    7.   Most requested services and information
    8.   Lorem ipsum dolor sit.
    9.   Necessitatibus, et accusantium debitis.
   10.  Velit, sit placeat consequatur!
   11.  Lorem ipsum dolor sit.
   12.  Provident molestiae enim totam.
   13.  Adipisci dignissimos voluptatibus voluptatem.
   14.  Lorem ipsum dolor sit.
   15.  Ipsam natus placeat saepe!
   16.  Ipsum est fugit fuga!
   17.  Departments and Agencies
       1.    Lorem ipsum dolor.
       2.    Praesentium, culpa iure.
       3.    Assumenda, ab, obcaecati.
   18.  Untitled SECTION
   19.  Features
   20. Site Information
       1.    Government
       2.    Transparency
       3.    News
       4.    Contact information
       5.    Social media
       6.    Mobile centre

When viewing the page in IE 8 the H1 is extremely large.

Probably a stupid question, but the IA seems odd

When opening the demo multimedia player in IE 8 it crashes the browser window.

If you remove this CSS from the theme file:

.wb-sec ul {
    margin-top: 10px;
    padding-left: 5px;
}

.wb-sec ul a {
    display: block;
    padding: 5px 0;
}

and recode the left menu like this:

<ul class="list-group list-unstyled">
    <li><a href="#" class="list-group-item active">Lorem ipsum dolor sit amet.</a></li>
    <li><a href="#" class="list-group-item">Officia, molestiae praesentium.</a></li>
    <li><a href="#" class="list-group-item">Officiis, dolorem ut sunt?</a></li>
    <li><a href="#" class="list-group-item">Harum, aliquam cupiditate!</a></li>
    <li><a href="#" class="list-group-item">Quos voluptates quisquam alias.</a></li>
  </ul>

Then you go from this 'non-menu-look':

To this menu look (which is already part of bootstrap).

That said, you have to add this CSS (as Bootstrap hasn't accounted for links in a ul, just in a div:

ul.list-group li a.list-group-item {
    border-radius:0;
    margin-top:-1px;
    text-decoration:none;
}
ul.list-group li:first-child .list-group-item {
    border-radius:4px 4px 0 0;
}
ul.list-group li:last-child .list-group-item {
    border-radius:0 0 4px 4px;
}

Lastly, I included the 'active' state for the left menu to show that I don't think we customized bootstrap all the way as the active items is still their default blue (#428BCA) and I suspect we want a dark version???

@masterbee there seems to be a problem with the menu hovering not going away once we hover off the menu item.

The search input box is 1px taller than that search input button. They used to match but now don't. Not sure if you want to just increase the padding by 1px on the search button or if you want to add a 1px border to either the top or bottom etc.

Date modified on the partners pages is all the way to the left and the font size is smaller then the rest of the content.

There are 5 layouts in site/layouts that are practically identical. The differences should be addressed through variables and partials (includes)

Should the date modified be on the alt pages also?
index-alt-en.html?

The built index pages are missing from the /dist folder. The partners pages are there but the paths to the media files (CSS, JS) files are wrong, they need to go back another level.

When pressing the left arrow or escape key to close a submenu, the parent menu item should be highlighted to indicate to the user where they are. It currently doesn't

Can't see any in demos.

Also, any details relating to modifying it.

Thanks

When I run the built on my local machine, the menu is not working and it doesn't see to bring in any updates from the WET v4.0 project. The GCWeb-dist repo is working fine.

I will be working on adding the Geo Target into the WET 4 template.

You can assign it to Louis Galipeau.

I'm trying to build GCWeb for testing but it doesn't work. I'm not sure whether it's me doing something wrong or whether the build itself is broken.

What is the correct process for building GCWeb?

What I'm doing:
npm install
which fails with:

Running "hub:wetboew" (hub) task
>> Running [default] on lib\wet-boew\Gruntfile.coffee
>> lib\wet-boew\Gruntfile.coffee:
Loading "Gruntfile.coffee" tasks...
Warning: Task "hub:wetboew" failed. Use --force to continue.

Aborted due to warnings.
npm ERR! weird error 3
npm ERR! not ok code 0

If I run grunt from lib/wet-boew, I get:

Loading "Gruntfile.coffee" tasks...ERROR
>> Error: Unable to read ".jshintrc" file. (Error code: ENOENT).
Warning: Task "default" not found. Use --force to continue.

Aborted due to warnings.

Right now we have front matter in both JSON and YAML. We should chose one.

I have no preference either way, although I'm more familiar with JSON.

What's the preferred format?