mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
Website: add navigation sidebar to article category pages (#30664)
Closes: https://github.com/fleetdm/confidential/issues/11063 Changes: - Added a navigation sidebar to article category pages. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Introduced a sidebar to the articles page with navigation links and a dynamic call-to-action section that adapts based on user status. * Added a new two-column layout, displaying articles alongside the sidebar. * **Style** * Enhanced sidebar and article section styling, including a new sidebar call-to-action component. * Improved responsive design for better usability on smaller screens. * **Refactor** * Updated category labeling from "Announcements" to "News" with revised descriptions. * Disabled the previous card-based article layout. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Eric
GitHub
parent
76119a5c68
commit
1cedb151de
3 changed files with 189 additions and 20 deletions
|
|
@ -39,8 +39,8 @@ parasails.registerPage('articles', {
|
|||
this.categoryDescription = 'Learn more about how to use Fleet to accomplish your goals.';
|
||||
break;
|
||||
case 'announcements':
|
||||
this.articleCategory = 'Announcements';
|
||||
this.categoryDescription = 'The latest news from Fleet.';
|
||||
this.articleCategory = 'News';
|
||||
this.categoryDescription = 'The latest announcements from Fleet.';
|
||||
break;
|
||||
case 'podcasts':
|
||||
this.articleCategory = 'Podcasts';
|
||||
|
|
@ -80,6 +80,8 @@ parasails.registerPage('articles', {
|
|||
// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
|
||||
// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
|
||||
methods: {
|
||||
|
||||
clickGotoStart: function() {
|
||||
this.goto('/register');
|
||||
},
|
||||
}
|
||||
});
|
||||
|
|
|
|||
129
website/assets/styles/pages/articles/articles.less
vendored
129
website/assets/styles/pages/articles/articles.less
vendored
|
|
@ -117,6 +117,7 @@
|
|||
}
|
||||
|
||||
[purpose='search'] {
|
||||
width: 256px;
|
||||
// Note: We're using classes here to override the default Docsearch styles;
|
||||
button {
|
||||
width: 100%;
|
||||
|
|
@ -201,6 +202,111 @@
|
|||
}
|
||||
}
|
||||
|
||||
[purpose='sidebar-and-articles'] {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
[purpose='sidebar'] {
|
||||
margin-left: 16px;
|
||||
min-width: 256px;
|
||||
}
|
||||
[purpose='nav-links'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 16px;
|
||||
a {
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
color: var(--text-text-brand, #192147);
|
||||
|
||||
/* Body SM (FKA Card text) */
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px; /* 142.857% */
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
[purpose='sidebar-cta'] {
|
||||
padding: 0px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #E2E4EA;
|
||||
background: #FFF;
|
||||
min-height: 290px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 8px;
|
||||
max-width: 256px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
[purpose='cta-image'] {
|
||||
height: 145px;
|
||||
background-image: url('/images/cloud-city-cta-256x145@2x.png');
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
background-size: 100% 145px;
|
||||
background-position: center bottom;
|
||||
}
|
||||
[purpose='cta-text'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0px 24px 24px 24px;
|
||||
h4 {
|
||||
color: #192147;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
line-height: 120%;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
p {
|
||||
color: #515774;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 150%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
[purpose='cta-button'] {
|
||||
display: flex;
|
||||
width: 140px;
|
||||
height: 36px;
|
||||
padding: 16px 32px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 150%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
[purpose='cta-platform-icons'] {
|
||||
img {
|
||||
height: 16px;
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='article-rows'] {
|
||||
padding-right: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
[purpose='article-row'] {
|
||||
padding: 24px 0px;
|
||||
border-bottom: 1px solid #E2E4EA;
|
||||
|
|
@ -400,7 +506,7 @@
|
|||
}
|
||||
[purpose='category-title'] {
|
||||
padding-bottom: 40px;
|
||||
margin-right: 35px;
|
||||
// margin-right: 35px;
|
||||
}
|
||||
[purpose='articles'] {
|
||||
[purpose='article-card'] {
|
||||
|
|
@ -446,6 +552,27 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
[purpose='search'] {
|
||||
width: 100%;
|
||||
}
|
||||
[purpose='sidebar-and-articles'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
[purpose='sidebar'] {
|
||||
margin-left: 0px;
|
||||
}
|
||||
[purpose='article-rows'] {
|
||||
padding-right: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
[purpose='nav-links'] {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
[purpose='sidebar-cta'] {
|
||||
display: none;
|
||||
}
|
||||
[purpose='articles'] {
|
||||
[purpose='article-card'] {
|
||||
flex: 1 1 330px;
|
||||
|
|
|
|||
72
website/views/pages/articles/articles.ejs
vendored
72
website/views/pages/articles/articles.ejs
vendored
|
|
@ -29,24 +29,64 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="article-rows" v-if="['guides', 'announcements', 'releases', 'articles'].includes(category)">
|
||||
<a :href="article.url" purpose="article-row" class="d-flex flex-lg-row flex-row justify-content-between" v-for="article in articles">
|
||||
<div purpose="article-name-and-description" class="d-flex flex-column">
|
||||
<div class="d-flex flex-column">
|
||||
<p purpose="article-name">{{article.meta.articleTitle}}</p>
|
||||
|
||||
<div purpose="sidebar-and-articles">
|
||||
<div purpose="sidebar">
|
||||
<div purpose="nav-links">
|
||||
<a href="/announcements">News</a>
|
||||
<a href="/testimonials">Case studies</a>
|
||||
<a href="/articles">Articles</a>
|
||||
<a href="/releases">Releases</a>
|
||||
</div>
|
||||
<div purpose="sidebar-cta">
|
||||
<a href="<% if(typeof me === 'undefined') {%>/register<% } else { %>/start<% } %>">
|
||||
<div purpose="cta-image"></div>
|
||||
<div purpose="cta-text">
|
||||
<% if(typeof me === 'undefined'){ %>
|
||||
<h4>Try it out</h4>
|
||||
<p>See what Fleet can do</p>
|
||||
<a purpose="cta-button" class="btn btn-primary docs-cta-continue-button" href="/register">Start now</a>
|
||||
<% } else if (['2 - Aware', '3 - Intrigued'].includes(me.psychologicalStage)) {%>
|
||||
<h4>Tried Fleet yet?</h4>
|
||||
<p>Continue getting started with Fleet</p>
|
||||
<a purpose="cta-button" class="btn btn-primary" href="/start">Continue</a>
|
||||
<% } else if (me.psychologicalStage === '4 - Has use case') {%>
|
||||
<h4>Feeling confident?</h4>
|
||||
<p>Get set up with Fleet</p>
|
||||
<a purpose="cta-button" class="btn btn-primary" hredf="/start">Continue</a>
|
||||
<% } else if (['5 - Personally confident', '6 - Has team buy-in'].includes(me.psychologicalStage)) {%>
|
||||
<h4>Talk to the team</h4>
|
||||
<p>Let’s get you set up!</p>
|
||||
<a purpose="cta-button" class="btn btn-primary" href="/start">Continue</a>
|
||||
<%}%>
|
||||
<div purpose="cta-platform-icons" class="d-flex flex-row justify-content-between align-items-center">
|
||||
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS" />
|
||||
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows" />
|
||||
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux" />
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="article-description" v-if="article.meta.description"><p>{{article.meta.description}}</p></div>
|
||||
<div purpose="publish-date"><js-timestamp format="billing" :at="article.meta.publishedOn"></js-timestamp></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<svg purpose="animated-arrow" style="stroke: #192147;" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
|
||||
<path purpose="arrow-line" d="M1 6H9" stroke-width="2" stroke-linecap="round"/>
|
||||
<path purpose="chevron" d="M1.35712 1L5.64283 6L1.35712 11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div purpose="article-rows">
|
||||
<a :href="article.url" purpose="article-row" class="d-flex flex-lg-row flex-row justify-content-between" v-for="article in articles">
|
||||
<div purpose="article-name-and-description" class="d-flex flex-column">
|
||||
<div class="d-flex flex-column">
|
||||
<p purpose="article-name">{{article.meta.articleTitle}}</p>
|
||||
</div>
|
||||
<div purpose="article-description" v-if="article.meta.description"><p>{{article.meta.description}}</p></div>
|
||||
<div purpose="publish-date"><js-timestamp format="billing" :at="article.meta.publishedOn"></js-timestamp></div>
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<svg purpose="animated-arrow" style="stroke: #192147;" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
|
||||
<path purpose="arrow-line" d="M1 6H9" stroke-width="2" stroke-linecap="round"/>
|
||||
<path purpose="chevron" d="M1.35712 1L5.64283 6L1.35712 11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="articles" class="card-deck d-flex justify-content-center" v-else>
|
||||
<!-- <div purpose="articles" class="card-deck d-flex justify-content-center" v-else>
|
||||
<div purpose="article-card" class="card" v-for="article in articles">
|
||||
<a purpose="article-card-link" :href="article.url">
|
||||
<img style="width: 100%; height: auto;" :src="[article.meta.articleImageUrl ? article.meta.articleImageUrl : '/images/blog-fleet-logo-white-background-800x450@2x.png']" alt="Article hero image">
|
||||
|
|
@ -66,7 +106,7 @@
|
|||
</div>
|
||||
<div purpose="article-card" class="card invisible mb-0 d-none d-sm-flex">
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue