iService Home Page

On the iService home page, you will find different elements:

  • Carousel (also known as a Rotator)
  • iService Calendar of Events
  • Warning Alerts
  • iService Catalogues (HR, Finance, IM/IT and Integrity)
  • iService Apps
  • Most Requested
  • Quick Links
Content Approver

Content Approver

Content Publisher

Content Publisher

Steps to create

Heading

The iService index page heading follows the semantic structure rules. There is only one level 1 heading, it is descriptive and concise. Left of the heading is an iService logo (swoosh) that is coded in by using cascading style sheets (CSS). This code is found in the CSS file specific to the iService site. This is the code to look for if it requires editing:
/* iService logo */
h1:before { content: url("http://iservice.prv/eng/imgs/iservicelogo-small.png");
/*h1:before { content: url("http://iservice.prv/eng/imgs/iservice_swoosh_pink.png");*/
margin-left: -.500em;
margin-right: .25em;
margin-top: 0;
margin-bottom: 0;
}

Banners

Refer to the Carousel (Rotator) page.

Find Your Service panel

Panels

Use panels to create a visual grouping of content. Panels have colour themed options, as well as offer a distinct header and footer. More on panels.

As the title suggests this panel is about finding a service. There are four links to separate sections of the iService Catalogue. There is more information about the structure and maintenance of the Catalogue items.

There is a search field that allows the user to query iService content only.

Since iService is a subsection of ESDC.prv, it was necessary to have a separate search field for searching the iService collection. The first search field in the top menu is used to search all of ESDC.prv including iService.prv, the second field (in this panel) narrows the search to iService only.

iService Apps panel

Buttons are used to link to some popular applications.

Button code explained
Phoenix

The class "btn" is used on the anchor tag to styl it as a button, "btn-default" defines the colour as grey and "btn-block" forces the size of the button to match the column (grid) size that it is in.

The span tag holds a glyph icon (glyphicon glyphicon-usd) that is green (text-success) and the icon is hidden from users that use a screen reader and cannot see the glyph (aria-hidden="true"). The tag <small> controls the size of the text.

<a href="http://gcintranet.tpsgc-pwgsc.gc.ca/gc/rem/awr-cwa-eng.html" class="btn btn-default btn-block" role="button"><span class="glyphicon glyphicon-usd text-success" aria-hidden="true"></span><small>Phoenix</small></a>

Most Requested

The "Most Requested" is a list of pages that are most popular according to web analytics reports. This list is not dynamic but it gathered by reading the monthly iService reports.

This item is a panel with a hidden header inside an expand/collapse that is in a div tag (<div></div>). The class "bg-success" specifies the green background in the title bar. Below is a portion of the code from the home page.

Code Example

<div><details> <summary class="bg-success">
<span class="text-success"><strong>Most Requested</strong></span></summary>
<section class="panel panel-success mrgn-bttm-sm">
<div class="panel-heading hidden">
<h2 class="h4 panel-title mrgn-tp-0"> </h2>
</div>

iService Warning Alert

This notice is intended to be short messages of great importance for a short timeline. There is nothing dynamic about this message, it is posted manually and removed manually. The classes alert and alert-warning (class="alert alert-warning") are used to create the yellow box. There are four different colours available for the alerts. Read more about alert boxes on the WET.

The Quick Link items are panels in columns (also known as grids in WET). The grid system breaks the page up into 12 sections. This layout for the Quick Links is 6 columns with a width of 2 and there are two rows.

Code breakdown

A div tag surrounds the entire row. The class wb-eqht is used to make all the columns the same height. Each of the sections inherit the height from the column with the class hght-inhrt. The top margin is controled with the class mrgn-tp-lg. Read more about Equal Height.

Text size (not the font) can be controlled by using the classes h1 through h6. You may need to control the top margin that is a part of the class. Not always is large space above the text required, so the class mrgn-tp-0 will remove it.

Accessibility Tip

It is important to use the correct tag for the content so a screen reader can interpret the item correctly. A properly coded heading is <h2>iService Quick Links</h2> and <p class="h2">Quick Links</p> is not.

<div class="row wb-eqht mrgn-tp-lg">

<div class="col-sm-6 col-md-2">
<section class="panel-heading bg-info text-center hght-inhrt">
<p class="h3 mrgn-tp-0"><a href="/eng/hr/cb/index.shtml" class="panel-heading no-underline">
<span class="mrgn-bttm-md glyphicon glyphicon-star text-muted lg-icon" aria-hidden="true"></span>
<span class="h5 mrgn-tp-0">Compensation</span></a></p>
</section>
<p class="text-center wb-inv"><a href="/eng/hr/cb/index.shtml">More links for Compensation</a></p>
</div>