refactor body partials
authorDan Allen <dan@opendevise.com>
Thu, 20 Jun 2019 09:24:05 +0000 (03:24 -0600)
committerDan Allen <dan@opendevise.com>
Wed, 26 Jun 2019 20:01:22 +0000 (14:01 -0600)
* introduce body partial
* introduce header-scripts partial
* introduce nav-toggle partial
* rename breadcrumbs to crumbs
* shorten navigation to nav
* rename main-wrapper class to body
* change main CSS class to main role

19 files changed:
src/css/main.css
src/layouts/404.hbs
src/layouts/default.hbs
src/partials/body.hbs [new file with mode: 0644]
src/partials/breadcrumbs.hbs [deleted file]
src/partials/crumbs.hbs [new file with mode: 0644]
src/partials/header-scripts.hbs [new file with mode: 0644]
src/partials/header.hbs
src/partials/main.hbs
src/partials/nav-explore.hbs [new file with mode: 0644]
src/partials/nav-menu.hbs [new file with mode: 0644]
src/partials/nav-toggle.hbs [new file with mode: 0644]
src/partials/nav-tree.hbs [new file with mode: 0644]
src/partials/nav.hbs [new file with mode: 0644]
src/partials/navigation-explore.hbs [deleted file]
src/partials/navigation-menu.hbs [deleted file]
src/partials/navigation-tree.hbs [deleted file]
src/partials/navigation.hbs [deleted file]
src/partials/toolbar.hbs

index facfd77..0d51e10 100644 (file)
@@ -1,9 +1,9 @@
 @media screen and (min-width: 1024px) {
-  .main-wrapper {
+  .body {
     display: flex;
   }
 
-  .main {
+  main {
     flex: auto;
     /* min-width: 0 required for flexbox to constrain overflowing elements */
     min-width: 0;
index 3974113..ceea03f 100644 (file)
@@ -5,7 +5,7 @@
   </head>
   <body class="status-404">
 {{> header}}
-{{> main}}
+{{> body}}
 {{> footer}}
   </body>
 </html>
index fc17bf1..e567326 100644 (file)
@@ -5,7 +5,7 @@
   </head>
   <body class="article">
 {{> header}}
-{{> main}}
+{{> body}}
 {{> footer}}
   </body>
 </html>
diff --git a/src/partials/body.hbs b/src/partials/body.hbs
new file mode 100644 (file)
index 0000000..4a0ac25
--- /dev/null
@@ -0,0 +1,4 @@
+<div class="body">
+{{> nav}}
+{{> main}}
+</div>
diff --git a/src/partials/breadcrumbs.hbs b/src/partials/breadcrumbs.hbs
deleted file mode 100644 (file)
index 0611b26..0000000
+++ /dev/null
@@ -1,20 +0,0 @@
-<nav class="crumbs" aria-label="breadcrumbs">
-  {{#if page.breadcrumbs}}
-  <ul>
-    {{#with page.componentVersion}}
-    {{#if (and ./title (not (or ./root (eq @root.page.breadcrumbs.0.content ./title))))}}
-    <li class="crumb"><a href="{{{relativize @root.page.url ./url}}}">{{{./title}}}</a></li>
-    {{/if}}
-    {{/with}}
-    {{#each page.breadcrumbs}}
-    <li class="crumb">
-    {{~#if (and ./url (eq ./urlType 'internal'))~}}
-    <a href="{{{relativize @root.page.url ./url}}}">{{{./content}}}</a>
-    {{~else~}}
-    {{{./content}}}
-    {{~/if~}}
-    </li>
-    {{/each}}
-  </ul>
-  {{/if}}
-</nav>
diff --git a/src/partials/crumbs.hbs b/src/partials/crumbs.hbs
new file mode 100644 (file)
index 0000000..0611b26
--- /dev/null
@@ -0,0 +1,20 @@
+<nav class="crumbs" aria-label="breadcrumbs">
+  {{#if page.breadcrumbs}}
+  <ul>
+    {{#with page.componentVersion}}
+    {{#if (and ./title (not (or ./root (eq @root.page.breadcrumbs.0.content ./title))))}}
+    <li class="crumb"><a href="{{{relativize @root.page.url ./url}}}">{{{./title}}}</a></li>
+    {{/if}}
+    {{/with}}
+    {{#each page.breadcrumbs}}
+    <li class="crumb">
+    {{~#if (and ./url (eq ./urlType 'internal'))~}}
+    <a href="{{{relativize @root.page.url ./url}}}">{{{./content}}}</a>
+    {{~else~}}
+    {{{./content}}}
+    {{~/if~}}
+    </li>
+    {{/each}}
+  </ul>
+  {{/if}}
+</nav>
diff --git a/src/partials/header-scripts.hbs b/src/partials/header-scripts.hbs
new file mode 100644 (file)
index 0000000..b9e907c
--- /dev/null
@@ -0,0 +1 @@
+{{!-- Add header scripts here --}}
index affbeeb..8a39422 100644 (file)
@@ -1 +1,2 @@
+{{> header-scripts}}
 {{> header-content}}
index ccb80c3..92af307 100644 (file)
@@ -1,7 +1,4 @@
-<div class="main-wrapper">
-{{> navigation}}
-  <main class="main">
+<main role="main">
 {{> toolbar}}
 {{> article}}
-  </main>
-</div>
+</main>
diff --git a/src/partials/nav-explore.hbs b/src/partials/nav-explore.hbs
new file mode 100644 (file)
index 0000000..7a6d7ba
--- /dev/null
@@ -0,0 +1,24 @@
+<div class="navigation-explore{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore">
+  {{#if page.component}}
+  <div class="context">
+    <span class="title">{{page.component.title}}</span>
+    <span class="version">{{page.componentVersion.displayVersion}}</span>
+  </div>
+  {{/if}}
+  <ul class="components">
+    {{#each site.components}}
+    <li class="component{{#if (eq this @root.page.component)}} is-current{{/if}}">
+      <span class="title">{{{./title}}}</span>
+      <ul class="versions">
+        {{#each ./versions}}
+        <li class="version
+          {{~#if (and (eq ../this @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if~}}
+          {{~#if (eq this ../latestVersion)}} is-latest{{/if}}">
+          <a href="{{{relativize @root.page.url ./url}}}">{{./displayVersion}}</a>
+        </li>
+        {{/each}}
+      </ul>
+    </li>
+    {{/each}}
+  </ul>
+</div>
diff --git a/src/partials/nav-menu.hbs b/src/partials/nav-menu.hbs
new file mode 100644 (file)
index 0000000..e21831c
--- /dev/null
@@ -0,0 +1,8 @@
+{{#if page.navigation}}
+<div class="navigation-menu is-active" data-panel="menu">
+  <nav class="nav-menu">
+    <h3 class="title"><a href="{{relativize page.url page.componentVersion.url}}">{{page.component.title}}</a></h3>
+{{> nav-tree navigation=page.navigation}}
+  </nav>
+</div>
+{{/if}}
diff --git a/src/partials/nav-toggle.hbs b/src/partials/nav-toggle.hbs
new file mode 100644 (file)
index 0000000..27be729
--- /dev/null
@@ -0,0 +1 @@
+<button class="navigation-toggle"></button>
diff --git a/src/partials/nav-tree.hbs b/src/partials/nav-tree.hbs
new file mode 100644 (file)
index 0000000..6587047
--- /dev/null
@@ -0,0 +1,21 @@
+{{#if navigation.length}}
+<ul class="nav-list">
+  {{#each navigation}}
+  <li class="nav-item{{#if (eq @root.page.url ./url)}} is-current-page{{/if}}" data-depth="{{or ../level 0}}">
+    {{#if ./content}}
+    {{#if ./items.length}}
+    <button class="nav-toggle"></button>
+    {{/if}}
+    {{#if ./url}}
+    <a class="nav-link" href="
+      {{~#if (eq ./urlType 'internal')}}{{{relativize @root.page.url ./url}}}
+      {{~else}}{{{./url}}}{{~/if}}">{{{./content}}}</a>
+    {{else}}
+    <span class="nav-text">{{{./content}}}</span>
+    {{/if}}
+    {{/if}}
+{{> nav-tree navigation=./items level=(increment ../level)}}
+  </li>
+  {{/each}}
+</ul>
+{{/if}}
diff --git a/src/partials/nav.hbs b/src/partials/nav.hbs
new file mode 100644 (file)
index 0000000..6f29bfa
--- /dev/null
@@ -0,0 +1,8 @@
+<div class="navigation-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
+  <aside class="navigation">
+    <div class="panels">
+{{> nav-menu}}
+{{> nav-explore}}
+    </div>
+  </aside>
+</div>
diff --git a/src/partials/navigation-explore.hbs b/src/partials/navigation-explore.hbs
deleted file mode 100644 (file)
index 7a6d7ba..0000000
+++ /dev/null
@@ -1,24 +0,0 @@
-<div class="navigation-explore{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore">
-  {{#if page.component}}
-  <div class="context">
-    <span class="title">{{page.component.title}}</span>
-    <span class="version">{{page.componentVersion.displayVersion}}</span>
-  </div>
-  {{/if}}
-  <ul class="components">
-    {{#each site.components}}
-    <li class="component{{#if (eq this @root.page.component)}} is-current{{/if}}">
-      <span class="title">{{{./title}}}</span>
-      <ul class="versions">
-        {{#each ./versions}}
-        <li class="version
-          {{~#if (and (eq ../this @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if~}}
-          {{~#if (eq this ../latestVersion)}} is-latest{{/if}}">
-          <a href="{{{relativize @root.page.url ./url}}}">{{./displayVersion}}</a>
-        </li>
-        {{/each}}
-      </ul>
-    </li>
-    {{/each}}
-  </ul>
-</div>
diff --git a/src/partials/navigation-menu.hbs b/src/partials/navigation-menu.hbs
deleted file mode 100644 (file)
index 296f79a..0000000
+++ /dev/null
@@ -1,8 +0,0 @@
-{{#if page.navigation}}
-<div class="navigation-menu is-active" data-panel="menu">
-  <nav class="nav-menu">
-    <h3 class="title"><a href="{{relativize page.url page.componentVersion.url}}">{{page.component.title}}</a></h3>
-{{> navigation-tree navigation=page.navigation}}
-  </nav>
-</div>
-{{/if}}
diff --git a/src/partials/navigation-tree.hbs b/src/partials/navigation-tree.hbs
deleted file mode 100644 (file)
index 4d56cca..0000000
+++ /dev/null
@@ -1,21 +0,0 @@
-{{#if navigation.length}}
-<ul class="nav-list">
-  {{#each navigation}}
-  <li class="nav-item{{#if (eq @root.page.url ./url)}} is-current-page{{/if}}" data-depth="{{or ../level 0}}">
-    {{#if ./content}}
-    {{#if ./items.length}}
-    <button class="nav-toggle"></button>
-    {{/if}}
-    {{#if ./url}}
-    <a class="nav-link" href="
-      {{~#if (eq ./urlType 'internal')}}{{{relativize @root.page.url ./url}}}
-      {{~else}}{{{./url}}}{{~/if}}">{{{./content}}}</a>
-    {{else}}
-    <span class="nav-text">{{{./content}}}</span>
-    {{/if}}
-    {{/if}}
-{{> navigation-tree navigation=./items level=(increment ../level)}}
-  </li>
-  {{/each}}
-</ul>
-{{/if}}
diff --git a/src/partials/navigation.hbs b/src/partials/navigation.hbs
deleted file mode 100644 (file)
index 89ed635..0000000
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="navigation-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
-  <aside class="navigation">
-    <div class="panels">
-{{> navigation-menu}}
-{{> navigation-explore}}
-    </div>
-  </aside>
-</div>
index 48fe56f..78a46cc 100644 (file)
@@ -1,9 +1,9 @@
 <div class="toolbar" role="navigation">
-  <button class="navigation-toggle"></button>
+{{> nav-toggle}}
   {{#if site.homeUrl}}
   <a href="{{relativize page.url site.homeUrl}}" class="home-link{{#if page.home}} is-current{{/if}}"></a>
   {{/if}}
-{{> breadcrumbs}}
+{{> crumbs}}
 {{> page-versions}}
   {{#if (and page.editUrl (not page.origin.private))}}
   <div class="edit-this-page"><a href="{{page.editUrl}}">Edit this Page</a></div>