Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-24 09:28:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 30

Website: Handbook style fixes (#17610)

Browse source 
Closes: https://github.com/fleetdm/confidential/issues/5750

Changes:
- Updated the handbook stylesheet:
- Breadcrumbs from having linebreaks and overflowing outside the page's
container
- Added a max width to mermaid diagrams to prevent them from overflowing
outside the page's container
- Updated the size of `<h1>` text on smaller screens to prevent the
page's title from overflowing outside of the page's container
This commit is contained in:
Eric 2024-03-13 23:37:16 -05:00 committed by GitHub
parent 654a53f488
commit 5c72cea3de
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 26 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
website/assets/styles/pages/handbook/basic-handbook.less vendored
View file

@ -102,12 +102,22 @@
} }
[purpose='breadcrumbs'] { [purpose='breadcrumbs'] {
[purpose='page-breadcrumbs'] {
max-width: 100%;
overflow: hidden;
}
padding-bottom: 16px; padding-bottom: 16px;
padding-top: 16px; padding-top: 16px;
p, a, strong { p, a, strong {
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
} }
[purpose='current-page-breadcrumb'] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
a { a {
text-decoration: none; text-decoration: none;
&.active { &.active {
@ -323,6 +333,7 @@
font-family: @code-font; font-family: @code-font;
display: inline-block; display: inline-block;
svg { svg {
max-width: 100%;
max-height: 600px; max-height: 600px;
} }
} }
@ -628,6 +639,12 @@
[purpose='handbook-template'] { [purpose='handbook-template'] {
padding: 0px 24px; padding: 0px 24px;
} }
[purpose='content'] {
h1 {
font-size: 28px;
line-height: 120%;
}
}
} }

22
website/views/pages/handbook/basic-handbook.ejs vendored
View file

@ -24,22 +24,18 @@
<div class="d-flex flex-column handbook-content"> <div class="d-flex flex-column handbook-content">
<div purpose="breadcrumbs" class="d-flex m-0 align-items-center breadcrumbs"> <div purpose="breadcrumbs" class="d-flex m-0 align-items-center breadcrumbs">
<div class="d-flex flex-row align-items-center" v-if="breadcrumbs.length > 1"> <div purpose="page-breadcrumbs" class="d-flex flex-row align-items-center" v-if="breadcrumbs.length > 1">
<a :href="'/' + breadcrumbs[0]" class="pr-3"> <a :href="'/' + breadcrumbs[0]" class="pr-3">
{{breadcrumbs[0] === 'handbook' ? 'Introduction' : breadcrumbs[0]}} {{breadcrumbs[0] === 'handbook' ? 'Introduction' : breadcrumbs[0]}}
</a> </a>
<div class="d-flex p-0 m-0 align-items-center" v-if="breadcrumbs.length === 3"> <img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png" / v-if="breadcrumbs.length === 3">
<img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png" /> <a :href="'/' + breadcrumbs[0] + '/' + breadcrumbs[1]" class="px-3" v-if="breadcrumbs.length === 3">
<a :href="'/' + breadcrumbs[0] + '/' + breadcrumbs[1]" class="px-3"> {{_getTitleFromUrl(breadcrumbs[1])}}
{{_getTitleFromUrl(breadcrumbs[1])}} </a>
</a> <img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png"/ v-if="breadcrumbs.length > 1">
</div> <p purpose="current-page-breadcrumb" class="pl-3 m-0" v-if="breadcrumbs.length > 1">
<div class="d-flex p-0 m-0 align-items-center" v-if="breadcrumbs.length > 1"> {{thisPage.title}}
<img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png"/> </p>
<p class="px-3 m-0">
{{thisPage.title}}
</p>
</div>
</div> </div>
<div v-else> <div v-else>
<strong>Introduction</strong> <strong>Introduction</strong>