Help Page Enhancements (#126)

* add breadcrum, google no translate * Update help docs styling - add css style for help-docs-text - added styling for help & docs column * Update styling - use bootstrap bg/text coloring - replace google notranslate with lang
thinkific · Oct 5, 2020 · 053c3e5 · 053c3e5
1 parent 67a2422
commit 053c3e5
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 33 deletions.
diff --git a/ui/views/env.html b/ui/views/env.html
@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
 <head>
     {{ template "header-head" . }}
     <script type="text/javascript">

diff --git a/ui/views/help.html b/ui/views/help.html
@@ -1,43 +1,62 @@
-<html>
+<html lang="en">
     <head>
         {{ template "header-head" . }}
         <script type="text/javascript">
             const apiBaseURL = "{{ .APIBaseURL }}";
         </script>
+        <style>
+            .help-docs {
+                font-weight: bold;
+                flex-wrap: wrap;
+                padding-top: 15px;
+                padding-left: 15px;
+                padding-right: 15px;
+                margin-left: 15px;
+                margin-right: 15px;
+            }
+        </style>
     </head>
     <body class="acyl-ui">
         {{ template "header-nav" . }}
-        <div class="container-fluid">
-            <div class="row flex-nowrap p-3 mb-2 bg-light text-dark">
+        <div class="container">
+            <div class="row">
                 <div class="col">
-                    <strong>
-                        <h3>
-                            Help & Documentation
-                        </h3>
-                        <ul id="ulHelpDocumentation">
-                            <li>
-                                <a target="_blank" href="{{ .APIBaseURL }}/ui/swagger/index.html">API Documentation</a>
-                            </li>
-                            <li>
-                                <a target="_blank" href="https://github.com/dollarshaveclub/acyl/wiki/User-Guide">User Guide</a>
-                            </li>
-                            <li>
-                                <a target="_blank" href="https://github.com/dollarshaveclub/acyl/wiki/Acyl.yml-V2-Specification">Nitro v2 Specification</a>
-                            </li>
-                        </ul>
-                        {{ if ne (len .Branding.AdditionalDocURLs) 0 }}
-                        <h5 id="hAdditionalResources">
-                            Additional Resources
-                        </h5>
-                        <ul id="ulAdditionalResources">
-                            {{ range $name, $url := .Branding.AdditionalDocURLs }}
-                            <li>
-                                <a target="_blank" href="{{ $url }}">{{ $name }}</a>
-                            </li>
-                            {{ end }}
-                        </ul>
+                    <nav aria-label="breadcrumb">
+                        <ol class="breadcrumb">
+                            <li class="breadcrumb-item"><a href="{{ .APIBaseURL }}/ui/home">Home</a></li>
+                            <li class="breadcrumb-item" aria-current="page" id="bc-help">Help</li>
+                        </ol>
+                    </nav>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col help-docs bg-light text-dark rounded">
+                    <h3>
+                        Help & Documentation
+                    </h3>
+                    <ul id="ulHelpDocumentation">
+                        <li>
+                            <a target="_blank" href="{{ .APIBaseURL }}/ui/swagger/index.html">API Documentation</a>
+                        </li>
+                        <li>
+                            <a target="_blank" href="https://github.com/dollarshaveclub/acyl/wiki/User-Guide">User Guide</a>
+                        </li>
+                        <li>
+                            <a target="_blank" href="https://github.com/dollarshaveclub/acyl/wiki/Acyl.yml-V2-Specification">Nitro v2 Specification</a>
+                        </li>
+                    </ul>
+                    {{ if ne (len .Branding.AdditionalDocURLs) 0 }}
+                    <h5 id="hAdditionalResources">
+                        Additional Resources
+                    </h5>
+                    <ul id="ulAdditionalResources">
+                        {{ range $name, $url := .Branding.AdditionalDocURLs }}
+                        <li>
+                            <a target="_blank" href="{{ $url }}">{{ $name }}</a>
+                        </li>
                         {{ end }}
-                    </strong>
+                    </ul>
+                    {{ end }}
                 </div>
             </div>
         </div>

diff --git a/ui/views/home.html b/ui/views/home.html
@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
     <head>
         {{ template "header-head" . }}
         <script type="text/javascript">

diff --git a/ui/views/status.html b/ui/views/status.html
@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
   <head>
     {{ template "header-head" . }}
     <link