fix(report): Embed settings cog wheel icon instead of loading from CDN (

#26) * Embed settings cog as b64 image instead of loading from web resource * Add CC BY attribution to settings drawer * Scroll pre blocks instead of page * Scroll tables instead of page
cerner · Nov 30, 2019 · 940e155 · 940e155
1 parent 031a109
commit 940e155
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 127 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,17 +25,17 @@
     "repositoryUrl": "https://github.com/cerner/cucumber-forge-report-generator.git"
   },
   "dependencies": {
-    "handlebars": "^4.5.1",
-    "i18next": "^19.0.0",
+    "handlebars": "^4.5.3",
+    "i18next": "^19.0.1",
     "i18next-node-fs-backend": "^2.1.3",
     "line-reader": "^0.4.0",
     "moment": "^2.24.0",
-    "npm-check-updates": "^3.2.0"
+    "npm-check-updates": "^3.2.2"
   },
   "devDependencies": {
     "chai": "^4.2.0",
-    "cucumber": "^6.0.3",
-    "eslint": "^6.6.0",
+    "cucumber": "^6.0.5",
+    "eslint": "^6.7.1",
     "eslint-config-airbnb-base": "^14.0.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",

diff --git a/src/Generator.js b/src/Generator.js
@@ -21,6 +21,7 @@ let featureHbTemplate;
 let cssStyles;
 let scripts;
 let logo;
+let cog;
 
 let projectName = 'Feature documentation';
 let reportName = DEFAULT_REPORT_NAME;
@@ -253,6 +254,7 @@ const create = async (files) => {
   docData.cssStyles = cssStyles;
   docData.scripts = scripts;
   docData.logo = logo;
+  docData.cog = cog;
   docData.creationdate = moment().format('LL');
   docData.author = author;
   docData.reportName = reportName;
@@ -273,6 +275,7 @@ class Generator {
     cssStyles = fs.readFileSync(path.resolve(__dirname, TEMPLATESDIR, 'style.css'), FILE_ENCODING);
     scripts = fs.readFileSync(path.resolve(__dirname, TEMPLATESDIR, 'scripts.js'), FILE_ENCODING);
     logo = fs.readFileSync(path.resolve(__dirname, TEMPLATESDIR, 'logo.b64'), FILE_ENCODING);
+    cog = fs.readFileSync(path.resolve(__dirname, TEMPLATESDIR, 'cog.b64'), FILE_ENCODING);
   }
 
   // eslint-disable-next-line class-methods-use-this

diff --git a/src/templates/cog.b64 b/src/templates/cog.b64
@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAABzElEQVQ4jZWUMWtVQRCFvwkhPEIKCUEkRBAJIhIkShARSWMjoo1Yir/Byl6sLPwpNraCjUgKbRRRxEBAsNAoMRJFjTmfRfbFm/hewHOb3bszs2fOzGyJDIRMALNqr6o2gGWKH4ONAYd9ek59rn5WH6tzQ22RkU7EUeQ6ctt4EJhRj6mTwFF1BplB7iIXd/nuYqQ3kvx0G8/V93aQZCXJ27ZdUxcHM4JTVTXW1ifVaQDd1rCqjlTVbDs/AJwYxmhGXekw2Eyypq6q60m2kvSPl5JM7mYkE8Yz6mlgojH4DTwALgCHgSvAo6pKY3kAWDDOIT3azzPq61Yd262r6rE9VTyfZL0x2moa7lRzFJgAjvdTrSqAT+pyUV0VnlXVr7YeAaaBXvNnBPiqvgQ+dsSd6gjbxwIw1rdRPwHLwPd+auNJ5tVLSfrpbSa5n+S02lMX1YctJdU36mV1Psm4OLhqTafN1i+r6rrardpTdaqrYTfQPQeg47wXN4c15BLsDOUz4J1KVfV1WwZeNTm+AC8GNmSS0SRX1VvqlHpN/dZu/5DkUpJDSe6oF9WRwan9O/1n/Tv9T5Kc3G/6a7/3SJ2tqp66UVX7vkfDA/0n/gBsYWgG0jlqkQAAAABJRU5ErkJggg==
diff --git a/src/templates/doc_template.html b/src/templates/doc_template.html
@@ -32,12 +32,13 @@
         {{/each}}
       </div>
       <div id="sidenavFooter">
-          <div id="settingsDrawer">
-              <input type="checkbox" id="tagsCheckbox">
-              <label for="tagsCheckbox">Show Tags</label>
-          </div>
-          <i id="settingsButton" class="fas fa-cog"></i>
-          <a href="https://github.com/cerner/cucumber-forge-desktop" target="_blank" rel="noopener" class="sidenav-header">Cucumber Forge</a>
+        <div id="settingsDrawer">
+          <input type="checkbox" id="tagsCheckbox"><label for="tagsCheckbox">Show Tags</label>
+          <p>Icons courtesy of <a href="https://fontawesome.com/license/free" target="_blank" rel="noopener"><i class="fab fa-font-awesome" title="FontAwesome"></i></a>
+          licensed under <a href="https://creativecommons.org/licenses/by/4.0/legalcode" target="_blank" rel="noopener"><i class="fab fa-creative-commons" title="Creative Commons"></i><i class="fab fa-creative-commons-by" title="CC BY"></i></a>.</p>
+        </div>
+        <img id="settingsButton" src="data:image/png;base64, {{{cog}}}" alt="Settings Cog" />
+        <a id="footerTitle" href="https://github.com/cerner/cucumber-forge-desktop" target="_blank" rel="noopener" class="sidenav-header">Cucumber Forge</a>
       </div>
     </div>
     <div class="main">

diff --git a/src/templates/feature_template.html b/src/templates/feature_template.html
@@ -16,15 +16,17 @@ <h3>{{this.background.name}}</h3>
             {{#each this.background.steps}}
               <p>{{this.name}}</p>
               {{#if this.table.length}}
-                <table class="step-table">
-                  {{#each this.table}}
-                    <tr>
-                      {{#each this}}
-                      <td>{{this}}</td>
-                      {{/each}}
-                    </tr>
-                  {{/each}}
-                </table>
+                <div class="table-wrapper">
+                  <table class="step-table">
+                    {{#each this.table}}
+                      <tr>
+                        {{#each this}}
+                        <td>{{this}}</td>
+                        {{/each}}
+                      </tr>
+                    {{/each}}
+                  </table>
+                </div>
               {{/if}}
               {{#if this.docString}}
                 <div class="docstring"><pre>{{this.docString}}</pre></div>
@@ -48,15 +50,17 @@ <h3>{{this.name}}</h3>
               {{#each this.steps}}
                 <p>{{this.name}}</p>
                 {{#if this.table.length}}
-                <table class="step-table">
-                  {{#each this.table}}
-                    <tr>
-                      {{#each this}}
-                      <td>{{this}}</td>
-                      {{/each}}
-                    </tr>
-                  {{/each}}
-                </table>
+                <div class="table-wrapper">
+                  <table class="step-table">
+                    {{#each this.table}}
+                      <tr>
+                        {{#each this}}
+                        <td>{{this}}</td>
+                        {{/each}}
+                      </tr>
+                    {{/each}}
+                  </table>
+                </div>
                 {{/if}}
                 {{#if this.docString}}
                   <div class="docstring"><pre>{{this.docString}}</pre></div>
@@ -65,23 +69,25 @@ <h3>{{this.name}}</h3>
               {{#if this.examples}}
                 <p>{{this.examples.name}}</p>
                 {{#if this.examples.table.length}}
-                <table class="example-table">
-                  {{#each this.examples.table}}
-                    {{#if @first}}
-                    <tr>
-                      {{#each this}}
-                      <th>{{this}}</th>
-                      {{/each}}
-                    </tr>
-                    {{else}}
-                    <tr>
-                      {{#each this}}
-                      <td>{{this}}</td>
-                      {{/each}}
-                    </tr>
-                    {{/if}}
-                  {{/each}}
-                </table>
+                <div class="table-wrapper">
+                  <table class="example-table">
+                    {{#each this.examples.table}}
+                      {{#if @first}}
+                      <tr>
+                        {{#each this}}
+                        <th>{{this}}</th>
+                        {{/each}}
+                      </tr>
+                      {{else}}
+                      <tr>
+                        {{#each this}}
+                        <td>{{this}}</td>
+                        {{/each}}
+                      </tr>
+                      {{/if}}
+                    {{/each}}
+                  </table>
+                </div>
                 {{/if}}
               {{/if}}
             </div>

diff --git a/src/templates/style.css b/src/templates/style.css
@@ -13,23 +13,26 @@ body {
   background-color: #fcfcfc;
 }
 pre {
-  overflow: visible;
+  overflow-x: auto;
 }
 a.anchor {
   display: block;
   position: relative;
   top: -1.5em;
 }
 
+.table-wrapper {
+  width: calc(70vw - 4em);
+  overflow-x: auto;
+}
 table {
   border-collapse: collapse;
   margin-left: 1em;
+  white-space: nowrap;
 }
-
 table, th, td {
   border: 1px solid black;
 }
-
 .step-table td, .example-table td, .example-table th {
   padding: 5px;
 }
@@ -94,13 +97,21 @@ table, th, td {
 #settingsDrawer.active {
   display: block;
 }
-#sidenavFooter i {
+#settingsDrawer p {
+  color: grey;
+}
+#settingsDrawer a {
+  color: grey;
+}
+#settingsButton {
   padding: 0.25em;
+  margin-left: 0.25em;
   cursor: pointer;
+  vertical-align: middle;
 }
-#sidenavFooter a {
+#footerTitle {
   color: #3a7ca8;
-  margin-left: calc(15vw - 6em);
+  margin-left: calc(15vw - 6.25em);
 }
 .feature-button {
   font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;