From 6413befdd182b2b64f8b5077246295a558fdd3bb Mon Sep 17 00:00:00 2001
From: eashaw <eashaw@sailsjs.com>
Date: Wed, 22 Sep 2021 00:05:53 -0500
Subject: [PATCH] Add edit page button to the top of documentation pages on
 fleetdm.com/docs (#2165)

* floating edit button on hover

* update class name

* adjust padding and border-radius

* fix failing lint test

* Update website/assets/styles/pages/docs/basic-documentation.less

* Update website/assets/styles/pages/docs/basic-documentation.less

* Update website/assets/styles/pages/docs/basic-documentation.less

* Update website/assets/styles/pages/docs/basic-documentation.less

Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
---
 .../pages/docs/basic-documentation.less       | 50 +++++++++++++++++++
 .../views/pages/docs/basic-documentation.ejs  |  7 +++
 2 files changed, 57 insertions(+)

diff --git a/website/assets/styles/pages/docs/basic-documentation.less b/website/assets/styles/pages/docs/basic-documentation.less
index 66a990dd03..4d9956c5dd 100644
--- a/website/assets/styles/pages/docs/basic-documentation.less
+++ b/website/assets/styles/pages/docs/basic-documentation.less
@@ -198,6 +198,56 @@
         color: @core-fleet-black;
       }
 
+    }
+    .edit-button-container {
+      position: relative;
+
+      .edit-button {
+        color: @core-vibrant-blue;
+        opacity: 0;
+        font-size: 12px;
+        position: absolute;
+        right: 4px;
+        top: 8px;
+        cursor: pointer;
+        border: 1px solid @core-vibrant-blue;
+        border-radius: 4px;
+        padding: 4px 8px;
+        text-decoration: none;
+
+        .edit-link {
+          color: @core-vibrant-blue;
+
+        }
+        .edit-pencil {
+          height: 16px;
+          padding-right: 5px;
+        }
+
+      }
+
+      .edit-button:hover {
+
+        background: @core-vibrant-blue;
+
+        a {
+          text-decoration: none;
+        }
+        .edit-link {
+          color: @accent-white;
+
+        }
+      }
+
+    }
+
+    &:hover {
+
+      .edit-button {
+        opacity: 1;
+
+      }
+
     }
 
     [purpose='search'] {
diff --git a/website/views/pages/docs/basic-documentation.ejs b/website/views/pages/docs/basic-documentation.ejs
index 56c97246b3..7cc744d5d3 100644
--- a/website/views/pages/docs/basic-documentation.ejs
+++ b/website/views/pages/docs/basic-documentation.ejs
@@ -189,6 +189,13 @@
         </div>
 
         <div purpose="content" id="body-content" class="d-flex flex-column px-lg-5 content" parasails-has-no-page-script>
+
+          <div class="edit-button-container">
+            <div class="edit-button">
+              <a class="edit-link" :href="'https://github.com/fleetdm/fleet/tree/main/docs/'+thisPage.sectionRelativeRepoPath"><i class="edit-pencil fa fa-pencil"></i>Edit page</a>
+            </div>
+          </div>
+
           <%- partial(
             path.relative(
               path.dirname(__filename),