mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 09:28:54 +00:00
726889bed1
Closes: #22952 Changes: - Removed the categories from the article landing page. - Updated the announcements article category page and article landing page to have a search bar
66 lines
3.5 KiB
Text
Vendored
66 lines
3.5 KiB
Text
Vendored
<div id="articles" v-cloak>
|
|
<div style="max-width: 1200px;" class="container-fluid mx-auto" purpose="page-container">
|
|
<div purpose="category-title">
|
|
<div class="d-flex flex-md-row flex-column justify-content-between align-items-md-center">
|
|
<div class="d-flex flex-column justify-content-between">
|
|
<h1>{{articleCategory}}</h1>
|
|
<p>{{categoryDescription}}</p>
|
|
</div>
|
|
<div purpose="search" id="docsearch-query" v-if="['Articles', 'Announcements', 'Guides'].includes(articleCategory)">
|
|
<div purpose="disabled-search" class="d-flex w-100">
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text border-0 bg-transparent pl-3" >
|
|
<img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
|
|
</span>
|
|
</div>
|
|
<div class="form-control border-0 ">
|
|
<input class="docsearch-input pr-1"
|
|
placeholder="Search" aria-label="Search"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div purpose="articles" class="card-deck d-flex justify-content-center" v-if="articleCategory !== 'Guides'">
|
|
<div purpose="article-card" class="card" v-for="article in selectedArticles">
|
|
<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">
|
|
</a>
|
|
<div purpose="article-card-body" class="card-body d-flex flex-column">
|
|
<p purpose="category-name" class="pb-2 mb-0">{{article.meta.category}}</p>
|
|
<a purpose="article-title" :href="article.url"><h5>{{article.meta.articleTitle}}</h5></a>
|
|
<div purpose="article-details" class="d-flex mt-auto flex-row align-items-center">
|
|
<img alt="The author's GitHub profile picture" style="height: 32px; width: 32px; border-radius: 100%;" :src="'https://github.com/'+article.meta.authorGitHubUsername+'.png?size=200'">
|
|
<p class="pl-2 font-weight-bold">{{article.meta.authorFullName}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div purpose="article-card" class="card invisible mb-0 d-none d-sm-flex">
|
|
</div>
|
|
<div purpose="article-card" class="card invisible mb-0 d-none d-sm-flex">
|
|
</div>
|
|
<div purpose="article-card" class="card invisible mb-0 d-none d-sm-flex">
|
|
</div>
|
|
</div>
|
|
<div purpose="guides-category-page" v-else>
|
|
<div purpose="guides" class="card-columns">
|
|
<div purpose="guide-card" class="card" v-for="article in selectedArticles">
|
|
<a :href="article.url">
|
|
<div purpose="article-card-body" class="card-body d-flex flex-column">
|
|
<div purpose="article-title"><h5>{{article.meta.articleTitle}}</h5></div>
|
|
<p class="small" v-if="article.meta.description">{{article.meta.description}}</p>
|
|
<div purpose="article-details" class="d-flex mt-auto flex-row align-items-center">
|
|
<js-timestamp :at="article.meta.publishedOn" format="timeago" always-show-year="true"></js-timestamp>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
|