Website: update platform icons and filters (#26335)

Closes: #26057 Changes: - Updated the platform filters on the query library, vital details, osquery table details, and policy library pages to be wrapped in `<h1>` tags - Updated the platform icons on the query details and policy details page to be wrapped in `<h1>` tags
fleetdm · Feb 17, 2025 · b00cb08 · b00cb08
1 parent c1e8f36
commit b00cb08
Show file tree

Hide file tree

Showing 12 changed files with 50 additions and 42 deletions.
diff --git a/website/assets/styles/pages/osquery-table-details.less b/website/assets/styles/pages/osquery-table-details.less
@@ -42,7 +42,7 @@
         height: 20px;
         margin-right: 10px;
       }
-      p {
+      h1 {
         color: #192147;
         text-align: center;
         margin-bottom: 0px;
@@ -55,7 +55,7 @@
       &.selected {
         border-bottom: 2px solid var(--text-text-brand, #192147);
         padding: 16px 40px 22px 40px;
-        p {
+        h1 {
           font-weight: 700;
         }
       }

diff --git a/website/assets/styles/pages/policy-details.less b/website/assets/styles/pages/policy-details.less
@@ -336,6 +336,9 @@
       padding-bottom: 8px;
       margin-bottom: 8px;
     }
+    h1 {
+      font-size: 0px;
+    }
     img {
       height: 24px;
       margin-right: 16px;

diff --git a/website/assets/styles/pages/policy-library.less b/website/assets/styles/pages/policy-library.less
@@ -154,7 +154,7 @@
         height: 20px;
         margin-right: 10px;
       }
-      p {
+      h1 {
         color: #192147;
         text-align: center;
         margin-bottom: 0px;
@@ -167,7 +167,7 @@
       }
       &.selected {
         border-bottom: 2px solid var(--text-text-brand, #192147);
-        p {
+        h1 {
           font-weight: 700;
         }
       }

diff --git a/website/assets/styles/pages/query-detail.less b/website/assets/styles/pages/query-detail.less
@@ -178,6 +178,11 @@
       padding-bottom: 8px;
       margin-bottom: 8px;
     }
+    h1 {
+      font-size: 0px;
+      line-height: 0px;
+      margin-bottom: 0px;
+    }
     img {
       height: 24px;
       margin-right: 16px;

diff --git a/website/assets/styles/pages/query-library.less b/website/assets/styles/pages/query-library.less
@@ -159,7 +159,7 @@
         height: 20px;
         margin-right: 10px;
       }
-      p {
+      h1 {
         color: #192147;
         text-align: center;
         margin-bottom: 0px;
@@ -172,7 +172,7 @@
       }
       &.selected {
         border-bottom: 2px solid var(--text-text-brand, #192147);
-        p {
+        h1 {
           font-weight: 700;
         }
       }

diff --git a/website/assets/styles/pages/vital-details.less b/website/assets/styles/pages/vital-details.less
@@ -234,7 +234,7 @@
         height: 20px;
         margin-right: 10px;
       }
-      p {
+      h1 {
         color: #192147;
         text-align: center;
         margin-bottom: 0px;
@@ -247,7 +247,7 @@
       &.selected {
         border-bottom: 2px solid var(--text-text-brand, #192147);
         padding: 16px 40px 22px 40px;
-        p {
+        h1 {
           font-weight: 700;
         }
       }

diff --git a/website/views/pages/osquery-table-details.ejs b/website/views/pages/osquery-table-details.ejs
@@ -8,28 +8,28 @@
         </div>
         <div purpose="platform-filters" class="d-flex justify-content-center"  >
           <div purpose="platform-filter" :class="[selectedPlatform === 'apple' ? 'selected' : '']+' '+[bowser.windows ? 'order-3' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('apple')">
-            <p class="d-flex align-items-center">
+            <h1 class="d-flex align-items-center">
             <img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" class="d-inline">
             <span class="d-none d-md-inline">Apple</span>
-            </p>
+            </h1>
           </div>
           <div purpose="platform-filter" :class="[selectedPlatform === 'linux' ? 'selected' : '']+' '+[bowser.windows ? 'order-2' : '']"  class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('linux')">
-            <p class="d-flex align-items-center">
+            <h1 class="d-flex align-items-center">
               <img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" class="d-inline">
               <span class="d-none d-md-inline">Linux</span>
-            </p>
+            </h1>
           </div>
           <div purpose="platform-filter" :class="[selectedPlatform === 'windows' ? 'selected' : '']+' '+[bowser.windows ? 'order-1' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('windows')">
-            <p class="d-flex align-items-center">
+            <h1 class="d-flex align-items-center">
               <img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" class="d-inline">
               <span class="d-none d-md-inline">Windows</span>
-            </p>
+            </h1>
           </div>
           <div purpose="platform-filter" :class="[selectedPlatform === 'chrome' ? 'selected' : '']+' '+[bowser.windows ? 'order-4' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('chrome')">
-            <p class="d-flex align-items-center">
+            <h1 class="d-flex align-items-center">
               <img src="/images/os-chromeos-dark-24x24@2x.png" alt="Chrome" class="d-inline">
               <span class="d-none d-md-inline">ChromeOS</span>
-            </p>
+            </h1>
           </div>
         </div>
 

diff --git a/website/views/pages/policy-details.ejs b/website/views/pages/policy-details.ejs
@@ -64,10 +64,10 @@
             <div purpose="policy-platform">
               <h4>Platform</h4>
               <div class="d-flex flex-row">
-                <img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" v-if="policy.platform.includes('darwin')"/>
-                <img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" v-if="policy.platform.includes('windows')"/>
-                <img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" v-if="policy.platform.includes('linux')"/>
-                <img src="/images/os-chromeos-dark-24x24@2x.png" alt="ChromeOS" v-if="policy.platform.includes('chrome')"/>
+                <h1><img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" v-if="policy.platform.includes('darwin')"/>macOS/apple</h1>
+                <h1><img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" v-if="policy.platform.includes('windows')"/>Windows</h1>
+                <h1><img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" v-if="policy.platform.includes('linux')"/>Linux</h1>
+                <h1><img src="/images/os-chromeos-dark-24x24@2x.png" alt="ChromeOS" v-if="policy.platform.includes('chrome')"/>ChromeOS</h1>
               </div>
             </div>
             <div purpose="docs-links" class="order-3">

diff --git a/website/views/pages/policy-library.ejs b/website/views/pages/policy-library.ejs
@@ -12,22 +12,22 @@
       </div>
       <div purpose="platform-filters" class="d-flex justify-content-center" :class="[bowser.windows ? 'detected-windows' : '']">
         <div purpose="platform-filter" :class="[selectedPlatform === 'macos' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('macos')">
-          <p class="d-flex align-items-center">
+          <h1 class="d-flex align-items-center">
           <img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" class="d-inline">
           <span class="d-none d-sm-inline">Apple</span>
-          </p>
+          </h1>
         </div>
         <div purpose="platform-filter" :class="[selectedPlatform === 'linux' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('linux')">
-          <p class="d-flex align-items-center">
+          <h1 class="d-flex align-items-center">
             <img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" class="d-inline">
             <span class="d-none d-sm-inline">Linux</span>
-          </p>
+          </h1>
         </div>
         <div purpose="platform-filter" :class="[selectedPlatform === 'windows' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('windows')">
-          <p class="d-flex align-items-center">
+          <h1 class="d-flex align-items-center">
             <img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" class="d-inline">
             <span class="d-none d-sm-inline">Windows</span>
-          </p>
+          </h1>
         </div>
       </div>
       <div purpose="selected-queries">

diff --git a/website/views/pages/query-detail.ejs b/website/views/pages/query-detail.ejs
@@ -45,10 +45,10 @@
             <div purpose="query-platform">
               <h4>Platform</h4>
               <div class="d-flex flex-row">
-                <img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" :class="[ selectedTab === 'ps' ? 'muted' : '']" v-if="query.platform.includes('darwin')"/>
-                <img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" :class="[ selectedTab === 'bash' ? 'selected' : '']" v-if="query.platform.includes('windows')"/>
-                <img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" :class="[ selectedTab === 'ps' ? 'muted' : '']" v-if="query.platform.includes('linux')"/>
-                <img src="/images/os-chromeos-dark-24x24@2x.png" alt="ChromeOS" :class="[ selectedTab === 'ps' ? 'muted' : '']" v-if="query.platform.includes('chrome')"/>
+                <h1><img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" :class="[ selectedTab === 'ps' ? 'muted' : '']" v-if="query.platform.includes('darwin')"/>Apple</h1>
+                <h1><img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" :class="[ selectedTab === 'bash' ? 'selected' : '']" v-if="query.platform.includes('windows')"/>Windows</h1>
+                <h1><img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" :class="[ selectedTab === 'ps' ? 'muted' : '']" v-if="query.platform.includes('linux')"/>Linux</h1>
+                <h1><img src="/images/os-chromeos-dark-24x24@2x.png" alt="ChromeOS" :class="[ selectedTab === 'ps' ? 'muted' : '']" v-if="query.platform.includes('chrome')"/>ChromeOS</h1>
               </div>
             </div>
             <div purpose="docs-links" class="order-3">

diff --git a/website/views/pages/query-library.ejs b/website/views/pages/query-library.ejs
@@ -11,22 +11,22 @@
       </div>
       <div purpose="platform-filters" :class="[bowser.windows ? 'detected-windows' : '']" class="d-flex justify-content-center">
         <div purpose="platform-filter" :class="[selectedPlatform === 'macos' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('macos')">
-          <p class="d-flex align-items-center">
+          <h1 class="d-flex align-items-center">
           <img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" class="d-inline">
           <span class="d-none d-sm-inline">Apple</span>
-          </p>
+          </h1>
         </div>
         <div purpose="platform-filter" :class="[selectedPlatform === 'linux' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('linux')">
-          <p class="d-flex align-items-center">
+          <h1 class="d-flex align-items-center">
             <img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" class="d-inline">
             <span class="d-none d-sm-inline">Linux</span>
-          </p>
+          </h1>
         </div>
         <div purpose="platform-filter" :class="[selectedPlatform === 'windows' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('windows')">
-          <p class="d-flex align-items-center">
+          <h1 class="d-flex align-items-center">
             <img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" class="d-inline">
             <span class="d-none d-sm-inline">Windows</span>
-          </p>
+          </h1>
         </div>
       </div>
       <div purpose="selected-queries">

diff --git a/website/views/pages/vital-details.ejs b/website/views/pages/vital-details.ejs
@@ -10,16 +10,16 @@
       </div>
       <div purpose="platform-filters" class="d-flex justify-content-center"  >
         <div purpose="platform-filter" :class="[selectedPlatform === 'apple' ? 'selected' : '']+' '+[bowser.windows ? 'order-3' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('apple')">
-          <p class="d-flex align-items-center">
+          <h1 class="d-flex align-items-center">
           <img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" class="d-inline">
           <span class="d-none d-md-inline">Apple</span>
-          </p>
+          </h1>
         </div>
         <div purpose="platform-filter" :class="[selectedPlatform === 'linux' ? 'selected' : '']+' '+[bowser.windows ? 'order-2' : '']"  class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('linux')">
-          <p class="d-flex align-items-center">
+          <h1 class="d-flex align-items-center">
             <img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" class="d-inline">
             <span class="d-none d-md-inline">Linux</span>
-          </p>
+          </h1>
         </div>
         <div purpose="platform-filter" :class="[selectedPlatform === 'windows' ? 'selected' : '']+' '+[bowser.windows ? 'order-1' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('windows')">
           <p class="d-flex align-items-center">
@@ -28,10 +28,10 @@
           </p>
         </div>
         <div purpose="platform-filter" :class="[selectedPlatform === 'chrome' ? 'selected' : '']+' '+[bowser.windows ? 'order-4' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('chrome')">
-          <p class="d-flex align-items-center">
+          <h1 class="d-flex align-items-center">
             <img src="/images/os-chromeos-dark-24x24@2x.png" alt="Chrome" class="d-inline">
             <span class="d-none d-md-inline">ChromeOS</span>
-          </p>
+          </h1>
         </div>
       </div>
       <div purpose="vital-details-and-sidebar" class="d-flex flex-md-row flex-column">