empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 08:55:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Website: Add article subtitle styles, update mobile article styles (#6110)

Browse Source 
* Website: update mobile styles, article subtitle styles, fix issues in two markdown articles

* add comment
This commit is contained in:
Eric 2022-06-06 16:40:56 -05:00 committed by GitHub
parent fba894d853
commit d80f204fa3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 52 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
articles/delivering-data-to-snowflake-from-fleet-and-osquery.md
View File

@ -40,7 +40,7 @@ The two features I want to focus on for this blog post are the live queries and
![The queries page in Fleet](../website/assets/images/articles/delivering-data-to-snowflake-from-fleet-and-osquery-1-415x400@2x.png)
###Scheduled Queries Interface:
### Scheduled Queries Interface:
![The schedule page in Fleet](../website/assets/images/articles/delivering-data-to-snowflake-from-fleet-and-osquery-2-700x203@2x.png)

2
articles/work-may-be-watching-but-it-might-not-be-as-bad-as-you-think.md
View File

@ -1,4 +1,4 @@
## Work may be watching, but it might not be as bad as you think.
# Work may be watching, but it might not be as bad as you think.
![A friendly eye of Sauron watching someone work](../website/assets/images/articles/work-may-be-watching-but-it-might-not-be-as-bad-as-you-think-cover-800x502@2x.png)
*Transparency and collaboration are becoming the norm for company device monitoring.*

8
website/assets/js/pages/articles/basic-article.page.js vendored
View File

@ -3,7 +3,8 @@ parasails.registerPage('basic-article', {
// ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
data: {
//…
articleHasSubtitle: false,
articleSubtitle: undefined,
},
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
@ -14,6 +15,11 @@ parasails.registerPage('basic-article', {
},
mounted: async function() {
//…
// If the article has a subtitle (an H2 immediatly after an H1), we'll set articleSubtitle to be the text of that heading
this.articleHasSubtitle = $('[purpose="article-content"]').find('h1 + h2');
if(this.articleHasSubtitle.length > 0 && this.articleHasSubtitle[0].innerText) {
this.articleSubtitle = this.articleHasSubtitle[0].innerText;
}
},
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗

44
website/assets/styles/pages/articles/basic-article.less vendored
View File

@ -12,10 +12,16 @@
[purpose='article-title'] {
padding-top: 80px;
margin-bottom: 28px;
h1 {
margin-bottom: 16px;
margin-bottom: 4px;
line-height: 38px;
}
h2 {
font-size: 24px;
font-weight: 400;
line-height: 32px;
}
}
[purpose='article-details'] {
@ -37,6 +43,9 @@
h1:first-of-type {
display: none;
}
h1:first-of-type + h2:first-of-type {
display: none;
}
img {
max-width: 100%;
width: auto;
@ -44,7 +53,7 @@
max-height: 100%;
margin-left: auto;
margin-right: auto;
padding: 24px 0px 40px 0px;
padding: 24px 0px 16px 0px;
}
a {
color: @core-vibrant-blue;
@ -72,10 +81,11 @@
}
img + em { // Image captions
position: relative;
top: -24px;
top: -12px;
display: flex;
align-items: center;
flex-direction: column;
margin-bottom: 16px;
}
ul, ol {
padding-left: 16px;
@ -142,6 +152,10 @@
}
}
}
[purpose='large-button-text'] {
display: block;
}
@media (max-width: 991px) {
[purpose='article-title'] {
padding-top: 60px;
@ -151,6 +165,30 @@
}
}
@media (max-width: 769px) {
[purpose='article-title'] {
padding-top: 40px;
margin-bottom: 8px;
h1 {
font-size: 28px;
line-height: 38px;
}
}
[purpose='article-content'] {
img {
padding-bottom: 0px;
}
img + em { // Image captions
top: 4px;
margin-bottom: 16px;
}
}
}
@media (max-width: 375px) {
[purpose='large-button-text'] { // Changes the Slack call to action (Join the Fleet community on Slack -> Join Fleet on Slack)
display: none;
}
}
}

3
website/views/pages/articles/basic-article.ejs vendored
View File

@ -2,6 +2,7 @@
<div style="max-width: 800px;" class="container-fluid px-0">
<div purpose="article-title">
<h1>{{thisPage.meta.articleTitle}}</h1>
<h2 v-if="articleHasSubtitle && articleSubtitle !== undefined">{{articleSubtitle}}</h2>
</div>
<div purpose="article-details" class="d-flex flex-row align-items-center">
<span><js-timestamp format="billing" :at="thisPage.meta.publishedOn"></js-timestamp></span>
@ -22,7 +23,7 @@
</a>
<a href="/slack" target="_blank" class="d-flex btn btn-md btn-outline-secondary justify-content-center align-items-center mt-3 mt-sm-0" purpose="next-steps-button">
<img class="pr-3" alt="Slack logo" src="/images/logo-slack-24x24@2x.png"/>
Join the Fleet community on Slack
Join <span purpose="large-button-text">&nbsp;the&nbsp;</span> Fleet <span purpose="large-button-text">&nbsp;community&nbsp;</span>on Slack
</a>
</div>
</div>