[Framework] Improvements to page title (#245)

Main changes: - Add the roadmap title to subpages (#238) - Add the current page's icon to the title when available - Adjust styles accordingly for different screen widths The roadmap title is displayed as a breadcrumb near the top of the page. The icon appears next to the title when there is enough room, or on top of it.
w3c · Apr 26, 2018 · fa0b516 · fa0b516
1 parent 2a018ec
commit fa0b516
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 48 deletions.
diff --git a/assets/css/roadmap.css b/assets/css/roadmap.css
@@ -36,14 +36,57 @@ filter: grayscale(1);*/
 }
 
 .hero .container {
-  padding-bottom: 30px;
+  padding-bottom: 20px;
 }
 
 .hero h2 {
-  font-size: 1.3em;
-  margin-top: -1em;
-  margin-bottom: 1em;
+  font-size: 1em;
+  margin-bottom: 0.5em;
+  color: #47525d;
+}
+
+.hero h2 a {
   color: #47525d;
+  border-bottom: none;
+}
+
+.hero h2 a:hover {
+  border-bottom: rgba(0,0,0,0.1) 1px solid;
+}
+
+.hero h2 + h1 {
+  margin-top: 0;
+}
+
+.hero .container .title {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: 20px;
+  margin-bottom: 30px;
+}
+
+@media (min-width: 500px) {
+  .hero .container .title {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.hero .container .title h1 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.hero .container .title h2 {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 1.3em;
+}
+
+.hero .container img {
+  height: 80px;
+  padding-right: 1em;
 }
 
 .hero details {
@@ -391,7 +434,6 @@ span[lang=en] {
   font-size: smaller;
 }
 
-
 @media (min-width: 768px) {
     .container {
         width: 100%;
@@ -416,8 +458,6 @@ span[lang=en] {
         background-color: transparent;
     }
 
-
-
     .hero .btn-negative {
         background-color: #0070cc;
         border: 1px solid #0070cc;
@@ -495,14 +535,6 @@ span[lang=en] {
         border-top: 1px solid rgba(0,0,0,0.1);
     }
 
-  h1 {
-    font-size: 2em;
-    font-weight: 300;
-    line-height: 50px;
-    margin-top: 20px;
-    margin-bottom: 15px;
-  }
-
   h1.hero-heading {
     font-size: 4em;
     font-weight: 400;
@@ -512,23 +544,14 @@ span[lang=en] {
     color: #47525d;
   }
 
-  h2 {
-    font-size: 1.5em;
-    line-height: 35px;
-    margin-top: 15px;
-    margin-bottom: 10px;
-  }
-
   h3 {
     font-size: 1.3em;
-    line-height: 30px;
     margin-top: 15px;
     margin-bottom: 0px;
   }
 
   h4 {
     font-weight: 800;
-    line-height: 30px;
     margin-top: 10px;
     margin-bottom: 5px;
   }

diff --git a/assets/css/theme.css b/assets/css/theme.css
@@ -8,17 +8,16 @@ html, body {
 }
 
 h1 {
-  font-size: 1.5em;
-  line-height: 1.5em;
+  font-size: 2em;
+  line-height: 1em;
   font-weight: 300;
-  margin-top: 0px;
-  margin-bottom: 10px;
+  margin-top: 20px;
+  margin-bottom: 40px;
   color: #47525d;
 }
 
 h2 {
-  font-size: 1.4em;
-  line-height: 1.5em;
+  font-size: 1.5em;
   font-weight: 300;
   margin-top: 20px;
   margin-bottom: 10px;
@@ -27,7 +26,6 @@ h2 {
 
 h3 {
   font-size: 1.3em;
-  line-height: 1.5em;
   font-weight: 400;
   margin-top: 10px;
   margin-bottom: 0px;
@@ -38,7 +36,6 @@ h3 {
 h4 {
   font-size: 1em;
   font-weight: 800;
-  line-height: 1.5em;
   color: #47525d;
 }
 

diff --git a/js/generate-utils.js b/js/generate-utils.js
@@ -101,6 +101,12 @@ const templateItem = '<a href="" data-nav><div class="icon"><img src="" alt=""><
  */
 const templateTocItem = '<a href="" data-nav><div class="icon"><img src="" alt=""></div><div class="description"></div></a>';
 
+/**
+ * Template to use for the title in a page
+ * (replaces the h1 that authors set in the source page)
+ */
+const templatePageTitle = '<h2><a href="" data-breadcrumb></a> ></h2><div class="title"><img src="" alt="" data-icon><div><h1 data-title></h1><h2 data-publishdate></h2></div></div>';
+
 /**
  * Ordered list of known implementation stages
  */
@@ -507,22 +513,13 @@ const fillDocumentMetadata = function (toc, translate, pagetype) {
 
   // Insert publication date and document metadata section to header
   let container = document.querySelector('.hero .container');
-  let firstContent = $(document, '.hero .container > *').find(el =>
-    (el.nodeName !== 'H1') && (el.nodeName !== 'H2') &&
-    (el.nodeName !== 'H3') && !el.getAttribute('data-beforemetadata'));
-
+  let publishDate = container.querySelector('[data-publishdate]');
   if (params.publishDate) {
-    let mainHeading = container.querySelector('h2');
-    if (mainHeading) {
-      mainHeading.appendChild(document.createTextNode(' - '));
-    }
-    else {
-      mainHeading = document.createElement('h2');
-      container.insertBefore(mainHeading, firstContent);
-    }
-    let publishDate = new Date(params.publishDate);
-    mainHeading.appendChild(document.createTextNode(
-      publishDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })));
+    publishDate.textContent = (new Date(params.publishDate))
+      .toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+  }
+  else {
+    publishDate.parentNode.removeChild(publishDate);
   }
 
   if (!pagetype.menu) {
@@ -588,6 +585,10 @@ const fillDocumentMetadata = function (toc, translate, pagetype) {
   let linksContainer = document.createElement('div');
   linksContainer.appendChild(links);
   metadata.appendChild(linksContainer);
+
+  let firstContent = $(document, '.hero .container > *').find(el =>
+    (el.nodeName !== 'H1') && (el.nodeName !== 'H2') &&
+    (el.nodeName !== 'H3') && !el.getAttribute('data-beforemetadata'));
   container.insertBefore(metadata, firstContent);
 }
 
@@ -601,7 +602,9 @@ const fillDocumentMetadata = function (toc, translate, pagetype) {
  * current page is not the menu page)
  */
 const applyToc = function (toc, translate, lang, pagetype) {
-  const h1 = document.querySelector('.hero .container h1');
+  // Add title of roadmap to the title in sub-pages
+  const container = document.querySelector('.hero .container');
+  const h1 = container.querySelector('h1');
   let title = (h1 ? h1.textContent : null);
   if (!title && pagetype.about) {
     title = toc.about.title || translate('labels', 'About this document');
@@ -615,6 +618,35 @@ const applyToc = function (toc, translate, lang, pagetype) {
     }
   });
 
+  let currentPage = toc.pages.find(page =>
+    window.location.pathname.endsWith(page.url) ||
+    window.location.pathname.endsWith(page.url.replace(/\.([^\.]+)$/, '.' + lang + '.$1')));
+  let iconUrl = (currentPage && currentPage.icon ? currentPage.icon : null);
+  let titleContainer = document.createElement('div');
+  titleContainer.setAttribute('data-beforemetadata', 'true');
+  titleContainer.innerHTML = templatePageTitle;
+
+  let breadcrumb = titleContainer.querySelector('[data-breadcrumb]');
+  if (pagetype.menu) {
+    breadcrumb = breadcrumb.parentNode;
+    breadcrumb.parentNode.removeChild(breadcrumb);
+  }
+  else {
+    breadcrumb.setAttribute('href', ((lang === 'en') ? './' : './index.' + lang + 'html'));
+    breadcrumb.textContent = toc.title;
+  }
+
+  let icon = titleContainer.querySelector('[data-icon]');
+  if (iconUrl) {
+    icon.src = iconUrl;
+  }
+  else {
+    icon.parentNode.removeChild(icon);
+  }
+
+  titleContainer.querySelector('[data-title]').textContent = h1.textContent;
+  container.replaceChild(titleContainer, h1);
+
   if (toc.pages.length === 0) {
     document.getElementById('side-nav-btn').hidden = true;
   }