From c983d50ffae011b7b0d987ffdd588a0d091986bb Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Mon, 18 Apr 2022 22:53:59 -0500
Subject: [PATCH] Website: Update handbook styles (#5203)

* update layout, add hoverlinks, clean up stylesheet

* update lists to match wireframes

* Update basic-handbook.less

* update nested list padding

* Update basic-handbook.less
---
 .../styles/pages/handbook/basic-handbook.less | 152 ++++++++----------
 .../views/pages/handbook/basic-handbook.ejs   |  21 +--
 2 files changed, 79 insertions(+), 94 deletions(-)

diff --git a/website/assets/styles/pages/handbook/basic-handbook.less b/website/assets/styles/pages/handbook/basic-handbook.less
index b07603b8b9..ce40f2ea3e 100644
--- a/website/assets/styles/pages/handbook/basic-handbook.less
+++ b/website/assets/styles/pages/handbook/basic-handbook.less
@@ -1,22 +1,18 @@
 #basic-handbook {
-
+  padding: 0px 40px;
   a {
     color: @core-vibrant-blue;
   }
-
   ul {
     list-style: none;
     padding-left: 8px;
-
     li {
       padding-bottom: 8px;
     }
   }
 
   [purpose='search'] {
-
     padding-bottom: 16px;
-
     input {
       padding-top: 6px;
       padding-bottom: 6px;
@@ -25,7 +21,6 @@
         font-size: 16px;
         line-height: 24px;
       }
-
     .input-group {
       border-top-left-radius: 6px;
       border-bottom-left-radius: 6px;
@@ -33,24 +28,19 @@
       border-bottom-right-radius: 6px;
       border: 1px solid @core-fleet-black-25;
     }
-
     .input-group:focus-within {
       border: 1px solid @core-vibrant-blue;
     }
-
     .docsearch-input {
       height: 100%;
       width: 98%;
     }
-
     .ds-input:focus {
       outline: rgba(0, 0, 0, 0);
     }
-
     .input-group-text {
       color: @core-fleet-black-50;
     }
-
     .form-control {
       height: 36px;
       padding: 0px;
@@ -59,6 +49,7 @@
       border: none;
     }
   }
+
   [purpose='breadcrumbs'] {
     padding-bottom: 16px;
     padding-top: 16px;
@@ -75,58 +66,50 @@
   }
 
   [purpose='right-sidebar'] {
-    min-width: max-content;
-    max-width: 210px;
-    margin: 0px 40px;
     p, a {
+      display: block;
       font-size: 14px;
     }
-
     h4 {
       padding-top: 16px;
       font-size: 16px;
     }
 
     [purpose='maintainer'] {
-
       padding-top: 24px;
       padding-bottom: 8px;
-      .maintainer-image {
+      img {
         height: 32px;
         width: 32px;
         border-radius: 100%;
         margin-bottom: 24px;
       }
-
       a {
         font-size: 14px;
       }
-
       h4 {
         font-size: 16px;
         font-weight: 700;
       }
-
     }
 
     [purpose='subtopics'] {
       color: @core-fleet-black;
       border-left: 1px solid @core-vibrant-blue-25;
       box-sizing: content-box;
-
       ul {
         li:last-child {
           padding-bottom: 0px;
         }
       }
       a {
+        display: flex;
+        word-wrap: break-word;
         text-decoration: none;
         &:hover {
           color: @core-vibrant-blue;
         }
-
       }
-
       .active:before {
         border: 1.5px solid @core-vibrant-blue;
         background-color: @core-vibrant-blue;
@@ -190,7 +173,26 @@
     }
     ul {
       list-style-type: disc;
-      padding-left: 32px;
+      padding-left: 16px;
+    }
+    li {
+      line-height: 24px;
+      padding-bottom: 16px;
+      p { // Making sure our list items stay a consistent size if the contents get wrapped in a <p> tag coverted from Markdown.
+        margin-bottom: 0;
+      }
+      ol, ul { // adding padding to nested lists
+        padding-top: 16px;
+        li:last-child { // removing the padding from the last item of nested lists
+          padding-bottom: 0px;
+        }
+      }
+    }
+    ol {
+      padding-left: 16px;
+      li {
+        padding-bottom: 16px;
+      }
     }
     img {
       display: flex;
@@ -239,16 +241,14 @@
       font-size: 16px;
       line-height: 24px;
       margin-bottom: 16px;
-
+      table-layout: auto;
+      max-width: 100%;
       th {
         font-weight: @bold;
-        font-family: @header-font;
         border: 1px solid @border-lt-gray;
         padding: 8px 7px 7px 8px;
       }
-
       td {
-        font-family: @main-font;
         border: 1px solid @border-lt-gray;
         padding: 8px 7px 7px 8px;
       }
@@ -274,19 +274,28 @@
         font-size: 16px;
       }
     }
-  }
-
-
-  // for larger screens
-  @media (min-width: 992px) {
-    ul {
-      .topic {
-        padding-left: 8px;
+    .markdown-heading:hover {
+      .markdown-link {
+        height: 16px;
+        vertical-align: middle;
+        margin-left: 8px;
+        content: url('/images/icon-link-16x16@2x.png');
       }
     }
+  }
+
+  [purpose='handbook-landing-page'] {
+    .markdown-heading:hover {
+      .markdown-link {
+        display: none;
+      }
+    }
+  }
+
+  @media (min-width: 1199px) {
+
     [purpose='right-sidebar'] {
-      max-width: 210px;
-      margin-left: 40px;
+      width: 200px;
     }
     [purpose='page-title'] {
       h1 {
@@ -294,61 +303,36 @@
       }
     }
     [purpose='content'] {
+      max-width: 720px;
       min-width: 0px; // in order for <pre> elements to shrink properly, the parent flex element needs to override min-width auto
     }
   }
 
-  // for smaller screens
-  @media (max-width: 991px) {
-    padding: 0px 40px;
-
-    [purpose='search'] {
-
-      padding-bottom: 24px;
-    }
-
-    [purpose='right-sidebar'] {
-      max-width: 150px;
-      margin-left: 40px;
-      margin-right: 0px;
-
-      [purpose='subtopics'] {
-        color: @core-fleet-black;
-
-        a {
-          word-wrap: break-word;
-        }
-      }
-    }
+  // for larger screens (>900px)
+  @media (max-width: 1199px) {
 
     [purpose='content'] {
-
-      h1:first-of-type {
-        display: none;  // hides on mobile
-      }
+      max-width: 630px;
+      min-width: 0px;
     }
-    .handbook-content {
-      max-width: 80%;
+    [purpose='right-sidebar'] {
+      width: 200px;
     }
-
   }
-  // for even smaller screens
-  @media (max-width: 767px) {
-    padding: 0px 40px;
 
-    .handbook-content {
+  // for smaller screens (>768px)
+  @media (max-width: 991px) {
+    [purpose='content'] {
       max-width: 100%;
     }
     [purpose='search'] {
       padding-bottom: 0px;
     }
     [purpose='right-sidebar'] {
-      max-width: 100%;
+      width: 100%;
       margin: 0;
-
       [purpose='subtopics'] {
         border-left: none;
-
         .active:before {
           border: none;
           padding: 0px;
@@ -357,22 +341,22 @@
         }
       }
     }
+  }
 
-    [purpose='content'] {
-
-      img {
-        margin: auto;
-      }
+  // for even smaller screens (>576px)
+  @media (max-width: 767px) {
+    [purpose='search'] {
+      padding-bottom: 0px;
+    }
+    [purpose='right-sidebar'] {
+      width: 100%;
+      margin: 0;
     }
   }
 
-  // for mobile
+  // for mobile screens (< 576px)
   @media (max-width: 576px) {
     padding: 0px 24px;
-
-    [purpose='search'] {
-      min-width: calc(100% - 48px);
-    }
   }
 
 
diff --git a/website/views/pages/handbook/basic-handbook.ejs b/website/views/pages/handbook/basic-handbook.ejs
index 583f01476d..1a56078c95 100644
--- a/website/views/pages/handbook/basic-handbook.ejs
+++ b/website/views/pages/handbook/basic-handbook.ejs
@@ -1,11 +1,11 @@
 <div id="basic-handbook" v-cloak>
-  <div purpose="handbook-template" style="max-width: 1000px;" class="container-fluid p-0 px-lg-3 mb-5">
-    <div class="d-flex flex-column flex-md-row pt-lg-4 pb-lg-4 m-0">
+  <div purpose="handbook-template" style="max-width: 1000px;" class="container-fluid p-0 mb-5">
+    <div class="d-flex flex-column justify-content-between flex-lg-row pt-lg-4 pb-lg-4 m-0">
 
-      <div purpose="right-sidebar" class="order-md-last d-none d-md-block pb-3 pb-lg-0 pr-xl-0 right-sidebar">
+      <div purpose="right-sidebar" class="order-lg-last d-lg-block d-none pb-3 pb-lg-0 pr-xl-0 right-sidebar">
         <div purpose="maintainer" class="mb-lg-3">
           <h4>Maintained by:</h4>
-          <img class="maintainer-image" alt="The page maintainer's github profile picture" :src="'https://github.com/'+thisPage.meta.maintainedBy+'.png?size=200'">
+          <img alt="The page maintainer's github profile picture" :src="'https://github.com/'+thisPage.meta.maintainedBy+'.png?size=200'">
           <a style="margin-top: 24px;" :href="'https://github.com/fleetdm/fleet/edit/main/handbook/'+thisPage.sectionRelativeRepoPath"> Edit this page</a>
         </div>
         <div v-if="!isHandbookLandingPage">
@@ -13,7 +13,7 @@
           <div purpose="subtopics">
             <ul class="p-0 m-0">
               <li v-for="(subtopic, index) in subtopics" class="subtopic" :key="index">
-                <a :href="subtopic.url" :class="_isCurrentSection(subtopic, this.window.location) ? 'active' : 'pl-md-3'" @click="forceRender()">{{subtopic.title}}</a>
+                <a :href="subtopic.url" :class="_isCurrentSection(subtopic, this.window.location) ? 'active' : 'pl-lg-3'" @click="forceRender()">{{subtopic.title}}</a>
               </li>
             </ul>
           </div>
@@ -21,7 +21,7 @@
         <div class="border-bottom py-3 d-flex d-md-none"></div>
       </div>
 
-      <div class="d-flex flex-column pl-lg-5 handbook-content">
+      <div class="d-flex flex-column handbook-content">
 
         <div purpose="breadcrumbs" class="d-flex m-0 align-items-center breadcrumbs">
           <div class="d-flex" v-if="breadcrumbs.length > 1">
@@ -61,10 +61,10 @@
           </div>
         </div>
 
-        <div purpose="right-sidebar" class="d-block d-md-none pb-3 pb-lg-0 pr-xl-0 right-sidebar">
+        <div purpose="right-sidebar" class="d-block d-lg-none pb-3 pb-lg-0 pr-xl-0 right-sidebar">
           <div purpose="maintainer" class="mb-lg-3">
             <h4>Maintained by:</h4>
-            <img class="maintainer-image" alt="The page maintainer's github profile picture" :src="'https://github.com/'+thisPage.meta.maintainedBy+'.png?size=200'">
+            <img alt="The page maintainer's github profile picture" :src="'https://github.com/'+thisPage.meta.maintainedBy+'.png?size=200'">
             <a style="margin-top: 24px;" :href="'https://github.com/fleetdm/fleet/tree/main/handbook/'+thisPage.sectionRelativeRepoPath"> Edit this page</a>
           </div>
           <div v-if="!isHandbookLandingPage">
@@ -72,7 +72,7 @@
             <div purpose="subtopics">
               <ul class="p-0 m-0">
                 <li v-for="(subtopic, index) in subtopics" class="subtopic" :key="index">
-                  <a :href="subtopic.url" :class="_isCurrentSection(subtopic, this.window.location) ? 'active' : 'pl-md-3'" @click="forceRender()">{{subtopic.title}}</a>
+                  <a :href="subtopic.url" :class="_isCurrentSection(subtopic, this.window.location) ? 'active' : 'pl-lg-3'" @click="forceRender()">{{subtopic.title}}</a>
                 </li>
               </ul>
             </div>
@@ -81,7 +81,7 @@
         </div>
 
         <div purpose="content" id="body-content" class="content" parasails-has-no-page-script>
-
+          <div :purpose="[isHandbookLandingPage ? 'handbook-landing-page' : '' ]" >
           <%- partial(
             path.relative(
               path.dirname(__filename),
@@ -94,6 +94,7 @@
               )
             )
           ) %>
+          </div>
 
         </div>
       </div>