Merge pull request #1694 from GormFrank/header

Slim header

site/includes/brand.hbs

@@ -1,5 +1,5 @@
 {{#unless provisional}}
-	<div class="brand col-xs-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
+	<div class="brand col-xs-9 col-sm-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
 		<a href="https://www.canada.ca/{{language}}.html" property="url"><img src="{{assets}}/../{{site.theme}}/assets/sig-blk-{{language}}.svg" alt="{{{i18n "tmpl-gc-sig"}}}" property="logo" /><span class="wb-inv"> / <span lang="{{#is page.language "en"}}fr">{{{i18n "tmpl-gc-sig" language="fr"}}}{{else}}en">{{{i18n "tmpl-gc-sig" language="en"}}}{{/is}}</span></span></a>
 		<meta property="name" content="{{{i18n "tmpl-gc-sig"}}}" />
 		<meta property="areaServed" typeOf="Country" content="Canada" />

site/includes/header.hbs

@@ -1,9 +1,9 @@
 <header>
 	<div id="wb-bnr" class="container">
+		<div class="row">
 {{#isnt languagetoggle "false"}}
 	{{>languagetoggle}}
 {{/isnt}}
-		<div class="row">
 			{{>brand}}
 {{#isnt sitesearch "false"}}
 	{{>sitesearch}}

site/includes/languagetoggle.hbs

@@ -1,11 +1,21 @@
-<section id="wb-lng" class="text-right">
+<section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right">
 	<h2 class="wb-inv">{{{i18n "tmpl-lang-select"}}}</h2>
-	<ul class="list-inline margin-bottom-none">
+	<ul class="list-inline mrgn-bttm-0">
 	{{#isnt language "fr" }}
-		<li><a lang="fr" hreflang="fr" href="{{altLangPrefix}}-fr.html">{{{i18n "lang-native" language="fr"}}}</a></li>
+		<li>
+			<a lang="fr" hreflang="fr" href="{{altLangPrefix}}-fr.html">
+				<span class="hidden-xs">{{{i18n "lang-native" language="fr"}}}</span>
+				<abbr title="Français" class="visible-xs h3 mrgn-tp-sm mrgn-bttm-0 text-uppercase">{{{i18n "lang-code" language="fr"}}}</abbr>
+			</a>
+		</li>
 	{{/isnt}}
 	{{#isnt language "en" }}
-		<li><a lang="en" hreflang="en" href="{{altLangPrefix}}-en.html">{{{i18n "lang-native" language="en"}}}</a></li>
+		<li>
+			<a lang="en" hreflang="en" href="{{altLangPrefix}}-en.html">
+				<span class="hidden-xs">{{{i18n "lang-native" language="en"}}}</span>
+				<abbr title="English" class="visible-xs h3 mrgn-tp-sm mrgn-bttm-0 text-uppercase">{{{i18n "lang-code" language="en" }}}</abbr>
+			</a>
+		</li>
 	{{/isnt}}
 	</ul>
 </section>

site/includes/sitesearch.hbs

@@ -1,7 +1,7 @@
-<section id="wb-srch" class="col-lg-8 text-right">
+<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
 	<h2>{{{i18n "tmpl-search"}}}</h2>
-	<form action="#" method="post" name="cse-search-box" role="search" class="form-inline">
-		<div class="form-group">
+	<form action="#" method="post" name="cse-search-box" role="search">
+		<div class="form-group wb-srch-qry">
 			<label for="wb-srch-q" class="wb-inv">{{{i18n "tmpl-search-site"}}}</label>
 			<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="{{{i18n "tmpl-search-site"}}}" />
 			<datalist id="wb-srch-q-ac">

site/pages/gcweb-theme/implementing.hbs

@@ -208,7 +208,7 @@
 </tr>
 <tr>
 	<th>Header</th>
-	<td><a href="https://github.com/wet-boew/GCWeb/blob/master/site/pages/gcweb-theme/static-header-footer/bootstrap-3.html#L1-L89" rel="external">Source code, line 1 to 89</a></td>
+	<td><a href="https://github.com/wet-boew/GCWeb/blob/master/site/pages/gcweb-theme/static-header-footer/bootstrap-3.html#L1-L77" rel="external">Source code, line 1 to 77</a></td>
 	<td><a href="https://github.com/wet-boew/GCWeb/blob/master/site/pages/gcweb-theme/static-header-footer/bootstrap-4.html#L1-L66" rel="external">Source code, line 1 to 66</a></td>
 </tr>
 <tr>

site/pages/gcweb-theme/static-header-footer/bootstrap-3.html

@@ -16,24 +16,33 @@
 
 <header>
 	<div id="wb-bnr" class="container">
-		<section id="wb-lng" class="text-right">
-			<h2 class="wb-inv">Language selection</h2>
-			<ul class="list-inline margin-bottom-none">
-				<li><a lang="fr" href="archived-fr.html">Français</a></li>
-			</ul>
-		</section>
 		<div class="row">
-			<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="https://wet-boew.github.io/themes-dist/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>
+			<section id="wb-lng" class="col-xs-3 col-sm-12 pull-right text-right">
+				<h2 class="wb-inv">Language selection</h2>
+				<ul class="list-inline mrgn-bttm-0">
+					<li>
+						<a lang="fr" hreflang="fr" href="home-fr.html">
+							<span class="hidden-xs">Français</span>
+							<abbr title="Français" class="visible-xs h3 mrgn-tp-sm mrgn-bttm-0 text-uppercase">fr</abbr>
+						</a>
+					</li>
+				</ul>
+			</section>
+			<div class="brand col-xs-9 col-sm-5 col-md-4" property="publisher" typeof="GovernmentOrganization">
+				<a href="https://www.canada.ca/en.html" property="url">
+					<img src="https://wet-boew.github.io/themes-dist/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="https://wet-boew.github.io/themes-dist/GCWeb/assets/wmms-blk.svg">
 			</div>
-			<section id="wb-srch" class="col-lg-8 text-right">
+			<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
 				<h2>Search</h2>
-				<form action="#" method="post" name="cse-search-box" role="search" class="form-inline">
-					<div class="form-group">
+				<form action="#" method="post" name="cse-search-box" role="search">
+					<div class="form-group wb-srch-qry">
 						<label for="wb-srch-q" class="wb-inv">Search Canada.ca</label>
 						<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca">
-						<datalist id="wb-srch-q-ac"> </datalist>
+						<datalist id="wb-srch-q-ac">
+						</datalist>
 					</div>
 					<div class="form-group submit">
 						<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"><span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button>
@@ -46,7 +55,7 @@ <h2>Search</h2>
 		<div class="container">
 			<h2 class="wb-inv">Menu</h2>
 			<button type="button" aria-haspopup="true" aria-expanded="false"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
-			<ul role="menu" aria-orientation="vertical" data-ajax-replace="https://wet-boew.github.io/themes-dist/GCWeb/ajax/sitemenu-v5-en.html">
+			<ul role="menu" aria-orientation="vertical" data-ajax-replace="https://www.canada.ca/content/dam/canada/sitemenu/sitemenu-v2-en.html">
 				<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/jobs.html">Jobs and the workplace</a></li>
 				<li role="presentation"><a role="menuitem" href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship</a></li>
 				<li role="presentation"><a role="menuitem" href="https://travel.gc.ca/">Travel and tourism</a></li>

src/banner/_screen-xs-max.scss

@@ -6,6 +6,11 @@ header {
 		a {
 			margin-top: 15px;
 		}
+
+		object,
+		img {
+			max-height: 30px;
+		}
 	}
 }
 

src/banner/_screen-xxs-max.scss

@@ -9,11 +9,15 @@
 
 header {
 	.brand {
-		@extend %brand-screen-xxs-max-override-grid;
+
+		/* Solely for the purpose of having the previous header look decent */
+		&.col-xs-5 {
+			@extend %brand-screen-xxs-max-override-grid;
+		}
 
 		object,
 		img {
-			max-height: 25px;
+			padding-right: 0;
 		}
 	}
 }

src/ie8-theme.scss

@@ -49,7 +49,6 @@
  */
 /* All screen views */
 @media screen {
-	@import "search/screen";
 	@import "views/screen";
 	@import "tabs/screen";
 	@import "priorities/screen"; /* Deprecated as v4.0.28 */
@@ -66,7 +65,6 @@
 	@import "views/screen-sm-max";
 	@import "banner/screen-sm-max";
 	@import "examples/screen-sm-max";
-	@import "search/screen-sm-max";
 }
 
 /* Medium view and under */

src/language-bar/_base.scss

@@ -1,6 +1,5 @@
 #wb-lng {
 	padding-top: 10px;
-
 	li {
 		padding-right: 0;
 	}

src/search/_base.scss

@@ -5,6 +5,12 @@
 .srchbox {
 	padding-top: 1em;
 
+	.submit {
+		position: absolute;
+		right: 15px;
+		top: 1em;
+	}
+
 	input,
 	button {
 		border-radius: 0;
@@ -30,14 +36,24 @@
 
 	input {
 		border-color: #e0e0e0;
-		border-right: 0;
 		border-style: solid;
 		box-shadow: none;
 		color: #555;
-		margin-right: -4px;
-		min-width: 246px;
 		position: relative;
 	}
+
+	.wb-srch-qry {
+		width: 100%;
+
+		input {
+			max-width: inherit;
+			width: 100%;
+		}
+	}
+}
+
+#wb-srch-sub {
+	margin-left: 5px;
 }
 
 [dir=rtl] {
@@ -49,6 +65,13 @@
 			margin-right: auto;
 		}
 	}
+
+	#wb-srch-sub {
+		margin: {
+			left: 0;
+			right: 5px;
+		}
+	}
 }
 
 
@@ -136,3 +159,7 @@
 		padding-top: 8px;
 	}
 }
+
+input#wb-srch-q {
+	width: 100%;
+}

src/theme.scss

@@ -74,7 +74,6 @@
  */
 /* All screen views */
 @media screen {
-	@import "search/screen";
 	@import "views/screen";
 	@import "tabs/screen";
 	@import "priorities/screen"; /* Deprecated as v4.0.28 */
@@ -99,7 +98,6 @@
 	@import "views/screen-sm-max";
 	@import "banner/screen-sm-max";
 	@import "examples/screen-sm-max";
-	@import "search/screen-sm-max";
 	@import "footer/screen-sm-max";
 	@import "menu/screen-sm-max";
 	@import "variant-screen-sm-max";

src/views/_screen-xs-min-to-screen-xs-max.scss

@@ -4,6 +4,5 @@
  */
 
 #wb-srch input {
-	max-width: 200px;
-	min-width: 150px;
+	max-width: 50%;
 }

src/views/_screen-xxs-max.scss

@@ -9,6 +9,5 @@
 }
 
 #wb-srch input {
-	border-right: 1px solid #e0e0e0;
-	max-width: 246px;
+	max-width: inherit;
 }