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
This commit is contained in:
Eric 2025-02-17 10:40:44 -06:00 committed by GitHub
parent c1e8f36493
commit b00cb08162
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 50 additions and 42 deletions

View file

@ -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;
}
}

View file

@ -336,6 +336,9 @@
padding-bottom: 8px;
margin-bottom: 8px;
}
h1 {
font-size: 0px;
}
img {
height: 24px;
margin-right: 16px;

View file

@ -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;
}
}

View file

@ -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;

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

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

View file

@ -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">

View file

@ -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">

View file

@ -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">

View file

@ -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">

View file

@ -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">