Update mobile documentation styles and call to action (#2250)

* mobile styles for edit page button, display bottom of page CTA on mobile, fix link tags

* adjust button position, lint fix

* updated css to use [purpose=''] instead of class names and removed unneeded classes

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

@@ -199,51 +199,43 @@
       }
 
     }
-    .edit-button-container {
+    [purpose='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;
-        }
+    [purpose='edit-button'] {
+      color: @core-vibrant-blue;
+      opacity: 0;
+      font-size: 12px;
+      position: absolute;
+      right: 230px;
+      top: 34px;
+      cursor: pointer;
+      border: 1px solid @core-vibrant-blue;
+      border-radius: 4px;
+      padding: 4px 8px;
+      text-decoration: none;
 
+      i {
+        height: 16px;
+        padding-right: 5px;
       }
 
-      .edit-button:hover {
-
+      &:hover {
         background: @core-vibrant-blue;
 
         a {
           text-decoration: none;
-        }
-        .edit-link {
           color: @accent-white;
-
         }
+
       }
 
     }
 
     &:hover {
 
-      .edit-button {
+      [purpose='edit-button'] {
         opacity: 1;
 
       }
@@ -498,6 +490,11 @@
 
       padding: 0px 40px;
 
+      [purpose='edit-button'] {
+        top: -61px;
+        right: 15px;
+      }
+
       [purpose='right-sidebar'] {
         width: 100%;
 
@@ -514,7 +511,9 @@
 
       [purpose='content'] {
         width: 100%;
-
+        a {
+          word-wrap: break-word;
+        }
         h1:first-of-type {
           display: none;  // hides on mobile
         }
@@ -522,9 +521,18 @@
       }
 
     }
+
+    @media (max-width: 768px) {
+
+      [purpose='edit-button'] {
+        top: -2px;
+        right: 0px;
+      }
+
+    }
+
     // for mobile
     @media (max-width: 576px) {
-
       padding: 0px 24px;
 
     }

website/views/pages/docs/basic-documentation.ejs

@@ -140,9 +140,14 @@
       </div>
   
       <h1 purpose="page-title" class="d-flex d-lg-none py-4 m-0">{{thisPage.title}}</h1>
+
+      <div purpose="edit-button-container">
+        <div purpose="edit-button">
+          <a :href="'https://github.com/fleetdm/fleet/tree/main/docs/'+thisPage.sectionRelativeRepoPath"><i class="fa fa-pencil"></i>Edit page</a>
+        </div>
+      </div>
   
       <div class="container-fluid d-flex flex-column flex-lg-row p-0 pt-lg-4 pb-lg-4 m-0">
-  
         <div purpose="left-sidebar" style="min-width: 190px; max-width: 210px;" class="d-none d-lg-flex flex-column text-left pl-0 pr-4 left-sidebar">
           <ul class="p-0 pb-2 m-0 left-nav">
             <li v-for="page in findPagesByUrl()" :key="page.title">
@@ -190,11 +195,6 @@
 
         <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(
@@ -209,7 +209,7 @@
             )
           ) %>
 
-          <div class="d-none d-lg-block">
+          <div class="d-block">
             <h3 class="pb-4 m-0">Is there something missing?</h3>
             <p>
               If you notice something we’ve missed, or that could be improved, please click <a :href="'https://github.com/fleetdm/fleet/tree/main/docs/'+thisPage.sectionRelativeRepoPath">here</a> to edit this page.