Skip to content

Commit

Permalink
chore: Fix gc-subway pages
Browse files Browse the repository at this point in the history
  • Loading branch information
delisma committed Jun 14, 2021
1 parent 5f44947 commit 9627ea7
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 110 deletions.
101 changes: 51 additions & 50 deletions common-design-patterns/fragments/gc-subway-index.html
Original file line number Diff line number Diff line change
@@ -1,58 +1,59 @@
<html class="no-js" lang="fr" dir="ltr">
<head>
<meta content="text/html;charset=UTF-8">
<title>GC subway index</title>
<link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/wet-boew/css/theme.min.css">
<title>Subway index navigation example</title>
<link rel="stylesheet" href="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/css/theme.min.css">
</head>
<body style="font-size: 20px;">
<h1 class="gc-thickline">[Service name]</h1>
<nav class="provisional gc-subway">
<h2>Sections</h2>
<dl>
<dt>
<a href="#">[Step / section page name 1]</a>
</dt>
<dd>
Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
</dd>
<dt>
<a href="#">[Step / section page name 2]</a>
</dt>
<dd>
Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
</dd>
<dt>
<a href="#">[Step / section page name 3]</a>
</dt>
<dd>
Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
</dd>
<dt>
<a href="#">[Step / section page name 4]</a>
</dt>
<dd>
Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
</dd>
<dt>
<a href="#">[Step / section page name 5]</a>
</dt>
<dd>
Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
</dd>
<dt>
<a href="#">[Step / section page name 6]</a>
</dt>
<dd>
Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
</dd>
</dl>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<main class="container" property="mainContentOfPage" resource="#wb-main" typeof="WebPageElement">
<h1 property="name" id="wb-cont" class="gc-thickline">[Name of service]</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut [...].</p>
<nav class="provisional gc-subway">
<h2>Sections</h2>
<dl>
<dt>
<a href="gc-subway-en.html">[Step / section page name 1]</a>
</dt>
<dd>
Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
</dd>
<dt>
<a href="page2-en.html">[Step / section page name 2]</a>
</dt>
<dd>
Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
</dd>
<dt>
<a href="#">[Step / section page name 3]</a>
</dt>
<dd>
Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
</dd>
<dt>
<a href="#">[Step / section page name 4]</a>
</dt>
<dd>
Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
</dd>
<dt>
<a href="#">[Step / section page name 5]</a>
</dt>
<dd>
Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
</dd>
<dt>
<a href="#">[Step / section page name 6]</a>
</dt>
<dd>
Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
</dd>
</dl>
</nav>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha384-rY/jv8mMhqDabXSo+UCggqKtdmBfd3qC2/KvyTDNQ6PcUJXaxK1tMepoQda4g5vB" crossorigin="anonymous"></script>
<script src="https://wet-boew.github.io/themes-dist/GCWeb/wet-boew/js/wet-boew.min.js"></script>
<script src="https://www.canada.ca/etc/designs/canada/wet-boew/js/theme.min.js"></script>
<script src="https://pym.nprapps.org/pym.v1.js"></script>
<script>
var pymChild = new pym.Child({ polling: 500 });
</script>
<script src="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/js/theme.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
</body>
</html>
84 changes: 70 additions & 14 deletions common-design-patterns/fragments/gc-subway-page.html
Original file line number Diff line number Diff line change
@@ -1,14 +1,70 @@
<nav class="provisional gc-subway">
<h1>[Service name]</h1>
<ul class="gc-subway-steps">
<li><a href="#">[Step / section page name 1]<span class="wb-inv">: Service name</span></a></li>
<li><a href="#">[Step / section page name 2]<span class="wb-inv">: Service name</span></a></li>
<li><a aria-current="page" class="active">[Step / section page name 3]<span class="wb-inv">: Service name</span></a></li>
<li><a href="#">[Step / section page name 4]<span class="wb-inv">: Service name</span></a></li>
<li><a href="#">[Step / section page name 5]<span class="wb-inv">: Service name</span></a></li>
<li><a href="#">[Step / section page name 6]<span class="wb-inv">: Service name</span></a></li>
</ul>
</nav>
<h1 property="name" id="wb-cont-demo" class="provisional gc-thickline">[Service/step name 3]</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo elementum est, ac ultrices urna convallis vitae. Nulla nec convallis felis. Ut pretium nisl nisi. Nam gravida gravida aliquet. Morbi tincidunt lorem in purus imperdiet, id rutrum mauris sodales. Vivamus nec mattis tellus. Nunc turpis dolor, malesuada non magna nec, scelerisque tristique velit.</p>
<p>Sed consectetur eu ligula a molestie. Vivamus convallis libero malesuada pharetra suscipit. In a pulvinar mi, quis aliquet mauris. Duis convallis nunc nunc, in euismod nisi volutpat sit amet. Integer convallis lacus non orci imperdiet, ac convallis massa mollis.</p>
<html class="no-js" lang="fr" dir="ltr">
<head>
<meta content="text/html;charset=UTF-8">
<title>Subway navigation example</title>
<link rel="stylesheet" href="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/css/theme.min.css">
</head>
<body style="font-size: 20px;">
<main class="container" property="mainContentOfPage" resource="#wb-main" typeof="WebPageElement">
<nav>
<ul id="wb-tphp"<nav><ul id="wb-tphp" class="wb-init wb-disable-inited">
<li class="wb-slc"><a class="wb-sl" href="#wb-cont">Passer au contenu principal</a></li><li class="wb-slc"><a class="wb-sl" href="#gc-document-nav">Skip to: [Nom du service]</a></li><li class="wb-slc visible-sm visible-md visible-lg"><a class="wb-sl" href="#wb-info">Passer à «&nbsp;À propos de ce site&nbsp;»</a></li><li class="wb-slc"><a class="wb-sl" href="?wbdisable=true" rel="alternate">Switch to basic HTML version</a></li></ul></nav>>
<li class="wb-slc">
<a class="wb-sl" href="#wb-cont">Skip to main content</a>
</li>
<li class="wb-slc">
<a class="wb-sl" href="#gc-document-nav">Skip to: [Service name]</a>
</li>
<li class="wb-slc visible-sm visible-md visible-lg">
<a class="wb-sl" href="#wb-info">Skip to About this site</a>
</li>
<li class="wb-slc">
<a class="wb-sl" href="?wbdisable=true" rel="alternate">Switch to basic HTML version</a>
</li>
</ul>
</nav>
<nav class="provisional gc-subway">
<h1 id="gc-document-nav">[Service name]</h1>
<ul>
<li>
<a href="#" class="active" aria-current="page">[Page 1]</a>
</li>
<li>
<a href="#" class="hidden-xs hidden-sm">[Page 2]</a>
<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 2]</a>
</li>
<li>
<a href="#" class="hidden-xs hidden-sm">[Page 3]</a>
<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 3]</a>
</li>
<li>
<a href="#" class="hidden-xs hidden-sm">[Page 4]</a>
<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 4]</a>
</li>
<li>
<a href="#" class="hidden-xs hidden-sm">[Page 5]</a>
<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 5]</a>
</li>
<li>
<a href="#" class="hidden-xs hidden-sm">[Page 6]</a>
<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 6]</a>
</li>
</ul>
</nav>

<h1 property="name" id="wb-cont" class="gc-thickline">[Page 1]</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo elementum est, ac ultrices urna convallis vitae. Nulla nec convallis felis. Ut pretium nisl nisi. Nam gravida gravida aliquet. Morbi tincidunt lorem in purus imperdiet, id rutrum mauris sodales. Vivamus nec mattis tellus. Nunc turpis dolor, malesuada non magna nec, scelerisque tristique velit.</p>
<p>Sed consectetur eu ligula a molestie. Vivamus convallis libero malesuada pharetra suscipit. In a pulvinar mi, quis aliquet mauris. Duis convallis nunc nunc, in euismod nisi volutpat sit amet. Integer convallis lacus non orci imperdiet, ac convallis massa mollis. Aliquam erat volutpat. Ut maximus euismod auctor. Ut ac gravida nunc. Nam non efficitur neque. Pellentesque tincidunt, libero luctus condimentum laoreet, turpis magna maximus nibh, at cursus lectus tellus in augue. Aenean scelerisque eros dui, at tincidunt eros tristique nec.</p>
<nav class="mrgn-bttm-lg mrgn-tp-lg">
<h3 class="wb-inv">Document navigation</h3>
<ul class="pager">
<li class="next"><a href="#wb-cont" rel="next"><span class="wb-inv">Next: </span>[Page 2]</a></li>
</ul>
</nav>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha384-rY/jv8mMhqDabXSo+UCggqKtdmBfd3qC2/KvyTDNQ6PcUJXaxK1tMepoQda4g5vB" crossorigin="anonymous"></script>
<script src="https://wet-boew.github.io/themes-dist/GCWeb/wet-boew/js/wet-boew.min.js"></script>
<script src="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/js/theme.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
</body>
</html>
85 changes: 39 additions & 46 deletions common-design-patterns/subway-navigation.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,11 @@
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html -->
<title>Subway navigation - Canada.ca design pattern - Canada.ca</title>
<meta content="width=device-width,initial-scale=1" name="viewport">
<link href="https://www.canada.ca/etc/designs/canada/wet-boew/assets/favicon.ico" rel="icon" type="image/x-icon"> <link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/wet-boew/css/theme.min.css">
<link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/wet-boew/css/wet-boew.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link rel="stylesheet" href="../css/custom.css"> <link rel="stylesheet" href="../css/provisional-alerts.css">
<link rel="stylesheet" href="../css/split-h1.css">
<link href="https://www.canada.ca/etc/designs/canada/wet-boew/assets/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/wet-boew/css/theme.min.css">
<link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/wet-boew/css/wet-boew.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link rel="stylesheet" href="../css/custom.css">
<noscript>
<link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/wet-boew/wet-boew/css/noscript.min.css" />
</noscript>
Expand Down Expand Up @@ -41,6 +40,12 @@
gtag('js', new Date());
gtag('config', 'UA-105628416-2');
</script>
<style>
iframe {
width: 1px;
min-width: 100%;
}
</style>
</head>
<body class="cnt-wdth-lmtd" vocab="http://schema.org/" typeof="WebPage">
<ul id="wb-tphp">
Expand Down Expand Up @@ -134,11 +139,6 @@ <h1 property="name" id="wb-cont" dir="ltr"><span class="stacked"><span>Subway na
</div>
</div>
<p>Break up long and complex content into sections that each focus on a step or specific answer people need before moving to the next step or section. Ideal for presenting services and processes.</p>
<!--
<div class="pattern-demo mrgn-bttm-md">
<img src="../images/subway-navigation.png" alt="Subway navigation pattern example" class="img-responsive">
</div>
-->
<section>
<h2 class="h3">On this page</h2>
<ul>
Expand Down Expand Up @@ -170,10 +170,7 @@ <h2 id="how">How to implement</h2>
</ol>
<h3 id="1">1. Index page</h3>
<p><strong>When to use:</strong> use as the landing page for a set of related pages that use the subway navigation. Index page is optional.</p>
<div class="pattern-demo">
<figure id="iframe">
</figure>
</div>
<iframe title="Subway index navigation example" class="pattern-demo" src="fragments/gc-subway-index.html" frameBorder="0" loading="lazy"></iframe>
<details class="mrgn-tp-lg">
<summary>Code</summary>
<details>
Expand Down Expand Up @@ -311,10 +308,7 @@ <h3 id="1">1. Index page</h3>
</details>
<h3 id="2">2. Step page</h3>
<p><strong>When to use:</strong> Use on each page tied by the subway navigation.</p>
<figure class="pattern-demo">
<div data-ajax-replace="fragments/gc-subway-page.html" ></div>
<div class="clearfix"></div>
</figure>
<iframe title="Subway navigation example" class="pattern-demo" frameBorder="0" loading="lazy" src="fragments/gc-subway-page.html"></iframe>
<div class="mrgn-tp-lg">
<details class="wb-prettify all-pre">
<summary>Code</summary>
Expand Down Expand Up @@ -722,36 +716,35 @@ <h2 class="wb-inv">About this site</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://wet-boew.github.io/themes-dist/GCWeb/wet-boew/js/wet-boew.min.js"></script>
<script src="https://www.canada.ca/etc/designs/canada/wet-boew/js/theme.min.js"></script>
<script type="text/javascript" src="https://pym.nprapps.org/pym.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js" integrity="sha512-dnvR4Aebv5bAtJxDunq3eE8puKAJrY9GBJYl9GC6lTOEC76s1dbDfJFcL9GyzpaDW4vlI/UjR8sKbc1j6Ynx6w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var pattern_demo = new pym.Parent("iframe", "fragments/gc-subway-index.html", { trackscroll: true });
iFrameResize({ log: true }, 'iframe')
</script>
<!-- START SCRIPT PAGE FEEDBACK WIDGET -->

<script>
$(document).on("wb-ready.wb", function () {
$("#btnno").click(function (e) {
$(".gc-pg-hlpfl-no").removeClass("nojs-show");
$(".gc-pg-hlpfl-btn").addClass("hide");
$("#helpful").val("No");
});
$("#gc-pg-hlpfl-frm").submit(function (e) {
e.preventDefault();
$(".gc-pg-hlpfl-thnk").removeClass("hide");
$("#gc-pg-hlpfl-frm").addClass("hide nojs-show");
$.ajax({
url: 'https://pagesuccessemailqueue.azurewebsites.net/api/QueueProblemForm',
type: 'POST',
dataType: 'text',
data: $('form#gc-pg-hlpfl-frm').serialize(),
success: function (data) { },
error: function (xhr, status, err) {
console.log(xhr.responseText);
}
});
<!-- START SCRIPT PAGE FEEDBACK WIDGET -->
<script>
$(document).on("wb-ready.wb", function () {
$("#btnno").click(function (e) {
$(".gc-pg-hlpfl-no").removeClass("nojs-show");
$(".gc-pg-hlpfl-btn").addClass("hide");
$("#helpful").val("No");
});
$("#gc-pg-hlpfl-frm").submit(function (e) {
e.preventDefault();
$(".gc-pg-hlpfl-thnk").removeClass("hide");
$("#gc-pg-hlpfl-frm").addClass("hide nojs-show");
$.ajax({
url: 'https://pagesuccessemailqueue.azurewebsites.net/api/QueueProblemForm',
type: 'POST',
dataType: 'text',
data: $('form#gc-pg-hlpfl-frm').serialize(),
success: function (data) { },
error: function (xhr, status, err) {
console.log(xhr.responseText);
}
});
});
</script>
<!-- END SCRIPT PAGE FEEDBACK WIDGET -->
});
</script>
<!-- END SCRIPT PAGE FEEDBACK WIDGET -->
</body>
</html>

0 comments on commit 9627ea7

Please sign in to comment.