Add help page and links (#7)

* Add help page and links
Nike-Inc · Dec 14, 2016 · 0f46313 · 0f46313
1 parent a5f4445
commit 0f46313
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 3 deletions.
diff --git a/app/components/LandingView/LandingView.js b/app/components/LandingView/LandingView.js
@@ -10,6 +10,7 @@ export default class LandingView extends Component {
                 <h2>Welcome to the Cerberus Management Dashboard</h2>
                 <h3>Environment: {EnvironmentService.getEnvironment()}</h3>
                 <h3>API Domain: {EnvironmentService.getDomain()}</h3>
+                <h4>For help please visit the <a target="_blank" href="/dashboard/help/index.html">help page</a></h4>
             </div>
         )
     }

diff --git a/app/components/LandingView/LandingView.scss b/app/components/LandingView/LandingView.scss
@@ -2,4 +2,8 @@
   li {
     font-size: 20px;
   }
+
+  a {
+    text-decoration: underline;
+  }
 }
diff --git a/app/components/Login/Login.scss b/app/components/Login/Login.scss
@@ -85,10 +85,25 @@
   #login-form-submit-container {
     padding-top: 25px;
     float: right;
-  }
+    display: flex;
+
+    #login-help {
+      padding-right: 15px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      a {
+        color: $snkrs_grey;
+        font-weight: bold;
+        &:hover {
+          color: $snkrs_off_white;
+        }
+      }
+    }
 
-  #login-btn {
-    min-width: 125px;
+    #login-btn {
+      min-width: 125px;
+    }
   }
 }
 

diff --git a/app/components/LoginMfaForm/LoginMfaForm.js b/app/components/LoginMfaForm/LoginMfaForm.js
@@ -88,6 +88,9 @@ export default class LoginMfaForm extends Component {
 
                     </div>
                     <div id='login-form-submit-container'>
+                        <div id="login-help">
+                            <a target="_blank" href="/dashboard/help/index.html">Need help?</a>
+                        </div>
                         <button id='login-mfa-btn'
                                 type='submit'
                                 className='ncss-btn-offwhite ncss-brand pt3-sm pr5-sm pb3-sm pl5-sm pt2-lg pb2-lg u-uppercase'

diff --git a/app/components/LoginUserForm/LoginUserForm.js b/app/components/LoginUserForm/LoginUserForm.js
@@ -95,6 +95,9 @@ export default class LoginUserForm extends Component {
                         <div id='fountainG_7' className='fountainG'></div>
                         <div id='fountainG_8' className='fountainG'></div>
                     </div>
+                    <div id="login-help">
+                        <a target="_blank" href="/dashboard/help/index.html">Need help?</a>
+                    </div>
                     <button id='login-btn'
                             className='ncss-btn-offwhite ncss-brand pt3-sm pr5-sm pb3-sm pl5-sm pt2-lg pb2-lg u-uppercase'
                             disabled={isAuthenticating}>Login</button>

diff --git a/build/help/index.html b/build/help/index.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+    <title>Cerberus Management Dashboard Help</title>
+    <link rel="stylesheet" href="//web.nike.com/ncss/0.12/snkrs/desktop/css/ncss.en-us.min.css">
+    <link rel="stylesheet" href="./main.css">
+    <link rel="icon" href=../favicon.ico?v1" />
+</head>
+<body>
+    <div id="content-wrapper">
+        <div id="content">
+            <h2>Cerberus Management Dashboard Help</h2>
+            <h3>Documentation is located on the <a target="_blank" href="http://engineering.nike.com/cerberus/docs/">Nike Engineering Cerberus site</a></h3>
+            <p>This file is static and the publish-dashboard command allows you to override it with a new html file with help specific to your org</p>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/build/help/main.css b/build/help/main.css
@@ -0,0 +1,38 @@
+#content-wrapper {
+    background-color: #222222;
+    width: 100%;
+    height: 100%;
+
+    padding: 20px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#content {
+    background-color: #f2f2f2;
+    width: 1000px;
+    height: 100%;
+    color: #222222;
+    font-size: 40px;
+    font-weight: bold;
+
+    padding: 20px;
+}
+
+a {
+    text-decoration: underline;
+    color: grey;
+}
+
+h3 {
+    padding-top: 5px;
+    padding-left: 15px;
+}
+
+p {
+    font-size: 16px;
+    padding-top: 5px;
+    padding-left: 20px;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,8 @@ @@
       li {
         font-size: 20px;
       }
+      a {
+        text-decoration: underline;
+      }
     }