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>
This commit is contained in:
eashaw 2021-09-22 00:05:53 -05:00 committed by GitHub
parent 4d36400fe5
commit 6413befdd1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 57 additions and 0 deletions

View file

@ -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'] {

View file

@ -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),