moving searchbar to homepage
This commit is contained in:
spleenftw committed
1 parent
e10bd1c82a
commit
3846811164
4 files changed
+150
-51
No files matched your search
+85
-1
@@ -446,7 +446,91 @@ img.nav-svg-icon {
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
POST CARDS (home listing)
|
||||
HOME SEARCH (relocated under the hero)
|
||||
======================================== */
|
||||
.home-search {
|
||||
max-width: 720px;
|
||||
margin: 0 auto var(--space-xl);
|
||||
}
|
||||
|
||||
.home-search .plugin {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Hide the "Search" label — Popeye-style bare search bar */
|
||||
.home-search .plugin-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.home-search .plugin-content,
|
||||
.home-search form {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
align-items: stretch;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.home-search .form-control {
|
||||
flex: 1 1 auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.home-search button {
|
||||
flex-shrink: 0;
|
||||
margin-top: 0 !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.home-search .plugin-content,
|
||||
.home-search form {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
POST LIST (titles only)
|
||||
======================================== */
|
||||
.post-list-item {
|
||||
padding: var(--space-md) 0;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.post-list-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.post-list-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: var(--space-md);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.post-list-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.post-list-head a:hover .post-list-title {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.post-list-date {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-size-sm);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
POST CARDS (single page / post)
|
||||
======================================== */
|
||||
.card-modern {
|
||||
background: transparent;
|
||||
|
||||
@@ -11,6 +11,28 @@
|
||||
<!-- Navbar -->
|
||||
<?php include(THEME_DIR_PHP.'navbar.php'); ?>
|
||||
|
||||
<?php
|
||||
// Split the siteSidebar plugins into "search" and "everything else".
|
||||
// This lets us relocate the search box under the hero on the homepage
|
||||
// (Popeye-style) while keeping the other plugins in the right sidebar.
|
||||
// Mirrors Bludit's own Theme::plugins() loop, but captures the output.
|
||||
global $plugins;
|
||||
$sidebarSearchHtml = '';
|
||||
$sidebarOtherHtml = '';
|
||||
if (isset($plugins['siteSidebar'])) {
|
||||
foreach ($plugins['siteSidebar'] as $plugin) {
|
||||
$out = $plugin->siteSidebar();
|
||||
if (strpos($out, 'plugin-search') !== false) {
|
||||
$sidebarSearchHtml .= $out;
|
||||
} else {
|
||||
$sidebarOtherHtml .= $out;
|
||||
}
|
||||
}
|
||||
}
|
||||
// The hero (and the relocated search) only appear on the blog front page.
|
||||
$heroVisible = ($WHERE_AM_I === 'home' && Paginator::currentPage() == 1);
|
||||
?>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
+33
-49
@@ -26,6 +26,13 @@
|
||||
</div>
|
||||
<?php endif ?>
|
||||
</header>
|
||||
|
||||
<!-- Search box, relocated from the sidebar (Popeye-style) -->
|
||||
<?php if (!empty($sidebarSearchHtml)) : ?>
|
||||
<div class="home-search">
|
||||
<?php echo $sidebarSearchHtml; ?>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
|
||||
<?php if (empty($content)) : ?>
|
||||
@@ -34,65 +41,42 @@
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php foreach ($content as $page) : ?>
|
||||
<!-- Post -->
|
||||
<article class="card card-modern my-5">
|
||||
<!-- Post list (titles only) -->
|
||||
<div class="post-list">
|
||||
<?php foreach ($content as $page) : ?>
|
||||
<article class="post-list-item">
|
||||
|
||||
<!-- Load Bludit Plugins: Page Begin -->
|
||||
<?php Theme::plugins('pageBegin'); ?>
|
||||
<!-- Load Bludit Plugins: Page Begin -->
|
||||
<?php Theme::plugins('pageBegin'); ?>
|
||||
|
||||
<!-- Cover image -->
|
||||
<?php if ($page->coverImage()) : ?>
|
||||
<a href="<?php echo $page->permalink(); ?>" class="cover-image-wrapper d-block">
|
||||
<img class="card-img-top" alt="<?php echo $page->title(); ?>" src="<?php echo $page->coverImage(); ?>" />
|
||||
</a>
|
||||
<?php endif ?>
|
||||
|
||||
<div class="card-body">
|
||||
<!-- Title -->
|
||||
<a href="<?php echo $page->permalink(); ?>">
|
||||
<h2 class="title"><?php echo $page->title(); ?></h2>
|
||||
</a>
|
||||
|
||||
<!-- Creation date and reading time -->
|
||||
<div class="metadata mb-4">
|
||||
<span><i class="bi bi-calendar3"></i><?php echo $page->date(); ?></span>
|
||||
<span><i class="bi bi-clock-history"></i><?php echo $L->get('Reading time') . ': ' . $page->readingTime(); ?></span>
|
||||
</div>
|
||||
|
||||
<!-- Breaked content -->
|
||||
<?php echo $page->contentBreak(); ?>
|
||||
|
||||
<!-- "Read more" button -->
|
||||
<?php if ($page->readMore()) : ?>
|
||||
<a class="btn-primary-gradient mt-3" href="<?php echo $page->permalink(); ?>">
|
||||
<?php echo $L->get('Read more'); ?>
|
||||
<i class="bi bi-arrow-right"></i>
|
||||
<div class="post-list-head">
|
||||
<a href="<?php echo $page->permalink(); ?>">
|
||||
<h2 class="post-list-title"><?php echo $page->title(); ?></h2>
|
||||
</a>
|
||||
<?php endif ?>
|
||||
<span class="post-list-date"><?php echo $page->date(); ?></span>
|
||||
</div>
|
||||
|
||||
<!-- Tags and Category -->
|
||||
<?php $tagsList = $page->tags(true); $categoryKey = $page->categoryKey(); ?>
|
||||
<?php if (!empty($tagsList) || $categoryKey) : ?>
|
||||
<div class="post-taxonomy mt-4">
|
||||
<?php if ($categoryKey) : ?>
|
||||
<a class="taxonomy-badge" href="<?php echo $page->categoryPermalink(); ?>">
|
||||
<i class="bi bi-folder2"></i><?php echo $page->category(); ?>
|
||||
</a>
|
||||
<?php endif ?>
|
||||
<?php foreach ($tagsList as $tagKey => $tagName) : ?>
|
||||
<a class="taxonomy-badge" href="<?php echo DOMAIN_TAGS . $tagKey; ?>"><i class="bi bi-tag"></i><?php echo $tagName; ?></a>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
<div class="post-taxonomy mt-2">
|
||||
<?php if ($categoryKey) : ?>
|
||||
<a class="taxonomy-badge" href="<?php echo $page->categoryPermalink(); ?>">
|
||||
<i class="bi bi-folder2"></i><?php echo $page->category(); ?>
|
||||
</a>
|
||||
<?php endif ?>
|
||||
<?php foreach ($tagsList as $tagKey => $tagName) : ?>
|
||||
<a class="taxonomy-badge" href="<?php echo DOMAIN_TAGS . $tagKey; ?>"><i class="bi bi-tag"></i><?php echo $tagName; ?></a>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
</div>
|
||||
<!-- Load Bludit Plugins: Page End -->
|
||||
<?php Theme::plugins('pageEnd'); ?>
|
||||
|
||||
<!-- Load Bludit Plugins: Page End -->
|
||||
<?php Theme::plugins('pageEnd'); ?>
|
||||
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<?php if (Paginator::numberOfPages() > 1) : ?>
|
||||
|
||||
+10
-1
@@ -17,5 +17,14 @@
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php Theme::plugins('siteSidebar') ?>
|
||||
<?php
|
||||
// On the homepage front page the search box is shown under the hero,
|
||||
// so only render the remaining sidebar plugins here. Everywhere else
|
||||
// the sidebar shows the full set (search included).
|
||||
if ($heroVisible) {
|
||||
echo $sidebarOtherHtml;
|
||||
} else {
|
||||
echo $sidebarSearchHtml . $sidebarOtherHtml;
|
||||
}
|
||||
?>
|
||||
</aside>
|
||||
Reference in new issue
Block a user