Website: Update state of device management report (#6318)

* update header CTA layout, remove logs from state-of-device-management, update report table of contents

* lint fix

website/assets/js/pages/reports/state-of-device-management.page.js

@@ -399,7 +399,7 @@ parasails.registerPage('state-of-device-management', {
               fullWidth: false,
               position: chartHasLegendOnBottom ? 'bottom' : 'right',
               // removing the default onClick event from the chart's legend
-              onClick: (click)=>{console.log(click);},
+              onClick: ()=>{return;},
               labels: {
                 padding: 16,
                 generateLabels: (chart) => {
@@ -428,10 +428,8 @@ parasails.registerPage('state-of-device-management', {
       if(this.redrawnCharts.length < 1) {
         // Iterating through charts drawn on the page. If the window width is below 768px, we'll change the configuration and update the charts.
         for(let index in this.chartsDrawnOnPage) {
-          console.log(this.chartsDrawnOnPage[index]);
           // If a bottom legend position was specified, we'll ignore it.
           let chartHasLegendOnBottomAtAllWidths = this.chartsDrawnOnPage[index].aspectRatio === 0.8;
-          console.log(this.chartsDrawnOnPage[index] + ' ' + 'chartHasLegendOnBottomAtAllWidths: '+ chartHasLegendOnBottomAtAllWidths);
           if(window.innerWidth < 768 && !chartHasLegendOnBottomAtAllWidths){
             this.redrawnCharts.push(this.chartsDrawnOnPage[index]);
             this.chartsDrawnOnPage[index].aspectRatio = 1;
@@ -450,7 +448,6 @@ parasails.registerPage('state-of-device-management', {
             this.chartsDrawnOnPage[index].resize();
           }
         }
-        console.log(this.chartsDrawnOnPage);
       } else {
         // Iterating through the charts that have been redrawn and changing them back to their original configuration.
         for(let index in this.redrawnCharts) {
@@ -473,7 +470,6 @@ parasails.registerPage('state-of-device-management', {
             this.redrawnCharts[index].resize();
           }
         }
-        console.log(this.redrawnCharts);
       }
     },
 

website/assets/styles/layout.less

@@ -107,16 +107,13 @@ html, body {
     }
   }
   [purpose='header-report-cta'] {
-    height: 48px;
-    strong {
-      font-size: 14px;
-      line-height: 20px;
-    }
     p {
       font-size: 14px;
       line-height: 20px;
     }
     a {
+      font-size: 14px;
+      line-height: 20px;
       font-weight: 700;
       text-decoration: underline;
     }
@@ -265,14 +262,6 @@ body.detected-mobile {
     [purpose='page-footer'] {
       height: 264px;
     }
-    [purpose='page-header'] {
-      [purpose='header-report-cta'] {
-        height: 58px;
-      }
-    }
-    .translate-y-0 {
-      transform: translateY(-153px);
-    }
   }
 }
 
@@ -282,14 +271,6 @@ body.detected-mobile {
     [purpose='page-footer'] {
       height: 371px;
     }
-    [purpose='page-header'] {
-      [purpose='header-report-cta'] {
-        height: 78px;
-      }
-    }
-    .translate-y-0 {
-        transform: translateY(-173px);
-    }
   }
 }
 
@@ -318,5 +299,5 @@ body.detected-mobile {
 
 // Some utilities for the sticky nav behaviour
 .translate-y-0 {
-    transform: translateY(-143px);
+    transform: translateY(-210px);
 }

website/views/layouts/layout-landing.ejs

@@ -97,11 +97,9 @@
     <div style="padding-bottom: 60px; background-color: #FFFFFF;" purpose="page-wrap">
       <div style="background-color: #FFFFFF;" class="header" purpose="page-header">
         <div purpose="header-report-cta" class="d-flex flex-row justify-content-center align-items-md-center">
-          <div class="mb-0 d-flex flex-md-row flex-column justify-content-center px-2">
-            <strong class="text-center pr-1">We surveyed 200+ security practitioners to discover the state of device management in 2022. </strong>
-            <p class="mb-0">
-              <a class="pl-3 d-block text-center d-sm-inline text-sm-left" href="/reports/state-of-device-management">Click here to learn about their struggles and best practices</a>.
-            </p>
+          <div class="mb-0 d-flex flex-lg-row flex-column justify-content-center py-3 px-2">
+            <p class="text-center pr-1 mb-0">We surveyed 200+ security practitioners to discover the state of device management in 2022. </p>
+            <a class="mb-0 d-block text-center d-lg-inline text-lg-left" href="/reports/state-of-device-management">Click here to learn about their struggles and best practices.</a>
           </div>
         </div>
         <div style="max-width: 1248px; height: 94px;" class="container-fluid d-flex align-items-center justify-content-between pt-3 pb-3 px-3 px-md-4">
@@ -193,6 +191,7 @@
     <script src="/js/components/ajax-button.component.js"></script>
     <script src="/js/components/ajax-form.component.js"></script>
     <script src="/js/components/bar-chart.component.js"></script>
+    <script src="/js/components/call-to-action.component.js"></script>
     <script src="/js/components/cloud-error.component.js"></script>
     <script src="/js/components/js-timestamp.component.js"></script>
     <script src="/js/components/modal.component.js"></script>

website/views/layouts/layout.ejs

@@ -97,11 +97,9 @@
     <div purpose="page-wrap">
       <div class="<%= isHomepage ? 'homepage-header' : 'header' %>" purpose="page-header">
         <div purpose="header-report-cta" class="<%= headerCTAHidden  ?  'd-none' : 'd-flex' %> flex-row justify-content-center align-items-md-center">
-          <div class="mb-0 d-flex flex-md-row flex-column justify-content-center px-2">
-            <strong class="text-center pr-1">We surveyed 200+ security practitioners to discover the state of device management in 2022. </strong>
-            <p class="mb-0">
-              <a class="pl-3 d-block text-center d-sm-inline text-sm-left" href="/reports/state-of-device-management">Click here to learn about their struggles and best practices</a>.
-            </p>
+          <div class="mb-0 d-flex flex-lg-row flex-column justify-content-center py-3 px-2">
+            <p class="text-center pr-1 mb-0">We surveyed 200+ security practitioners to discover the state of device management in 2022. </p>
+            <a class="mb-0 d-block text-center d-lg-inline text-lg-left" href="/reports/state-of-device-management">Click here to learn about their struggles and best practices.</a>
           </div>
         </div>
         <div style="max-width: 1248px; height: 94px;" class="container-fluid d-flex justify-content-between align-items-center pt-3 pb-3 px-3 px-md-4">
@@ -384,6 +382,7 @@
     <script src="/js/components/ajax-button.component.js"></script>
     <script src="/js/components/ajax-form.component.js"></script>
     <script src="/js/components/bar-chart.component.js"></script>
+    <script src="/js/components/call-to-action.component.js"></script>
     <script src="/js/components/cloud-error.component.js"></script>
     <script src="/js/components/js-timestamp.component.js"></script>
     <script src="/js/components/modal.component.js"></script>

website/views/pages/reports/state-of-device-management.ejs

@@ -20,7 +20,7 @@
       <hr>
       <div purpose="table-of-contents">
         <a href="#insights-from-mike-mcneil" class="pb-3">Insights from Mike McNeil</a>
-        <a href="#key-findings" class="pb-3">Key Findings</a>
+        <a href="#key-findings" class="pb-3">Key findings</a>
         <a href="#who-we-surveyed" >Who we surveyed</a>
       </div>
       <hr>