Skip to content
Jump to bottom

Convert search results to tabs, and provide better generalization for the inclusion of future models (CFM-322) #125

Merged
merged 1 commit into from
Sep 21, 2023
+74 −69
Merged

Convert search results to tabs, and provide better generalization for the inclusion of future models (CFM-322) #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions app/resources/locales/en_US/result.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,7 @@ msgid "search.none"
msgstr "No results found"

msgid "search.result.found"
msgstr "Found"

msgid "search.result.found.modelCount"
msgstr "{0} {1}"
msgstr "Found {0} results"

msgid "search.result.id"
msgstr "ID {0}"
Expand Down
106 changes: 54 additions & 52 deletions app/templates/Dashboards/search.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,22 @@
'id' => 'search'
];

$noResults = true;
$resultsCount = 0;
// Count only People and Groups for now. Other models can come later.
foreach(['People', 'Groups'] as $pm) {
$resultsCount += count($vv_results[$pm]);
}
?>

<div class="pageTitleContainer">
<div class="pageTitle">
<h1><?= $vv_title; ?></h1>
</div>
<?php if($resultsCount): ?>
<ul id="search-results-meta">
<li class="search-results-found"><?= __d('result','search.result.found', [$resultsCount]); ?></li>
</ul>
<?php endif; ?>
</div>

<!-- Flash Messages and defined Info Banners -->
Expand All @@ -60,48 +69,43 @@
<?php endforeach; // $banners ?>
<?php endif; // $banners ?>
</div>

<?php
$peopleResultsCount = count($vv_results['People']);
$groupsResultsCount = count($vv_results['Groups']);
?>
<?php if($peopleResultsCount || $groupsResultsCount): ?>
<?php $noResults = false; ?>
<ul id="search-results-meta">
<li class="search-results-found"><?= __d('result', 'search.result.found') ?></li>
<?php if($peopleResultsCount): ?>
<li>
<a href="#search-results-people" class="nospin">
<?= __d('result','search.result.found.modelCount', [$peopleResultsCount, __d('controller', "People", [$peopleResultsCount])]); ?>
</a>
</li>
<?php endif; ?>
<?php if($groupsResultsCount): ?>
<li>
<a href="#search-results-groups" class="nospin">
<?= __d('result','search.result.found.modelCount', [$groupsResultsCount, __d('controller', "Groups", [$groupsResultsCount])]); ?>
</a>
</li>
<?php endif; ?>
</ul>
<?php endif; ?>

<div id="search-results" class="accordion">
<!-- Start with the Primary Registry objects -->
<?php foreach(['People', 'Groups'] as $pm): ?>
<?php if(!empty($vv_results[$pm])): ?>
<div id="search-results-<?= strtolower($pm) ?>" class="search-results-group-container accordion-item">
<div id="search-results-<?= strtolower($pm) ?>-header" class="search-results-group-title accordion-header">
<button class="accordion-button"
data-bs-toggle="collapse"
data-bs-target="#search-results-<?= strtolower($pm) ?>-body"
aria-expanded="true"
aria-controls="search-results-<?= strtolower($pm) ?>-body">
<?= __d('controller', $pm, 2); ?>
</button>
</div>
<div id="search-results-<?= strtolower($pm) ?>-body" class="accordion-collapse collapse show">
<div class="accordion-body">
<div id="search-results">
<?php if($resultsCount): ?>
<nav id="cm-searchresults-subnav-tabs" class="cm-subnav-tabs">
<ul class="nav nav-tabs" role="tablist">
<?php $isFirstTab = true; ?>
<?php foreach(['People', 'Groups'] as $i=>$pm): ?>
<?php if(!empty($vv_results[$pm])): ?>
<li class="nav-item" role="presentation">
<button class="nav-link search-result-tab<?= $isFirstTab ? ' active' : '' ?>"
id="search-results-<?= strtolower($pm) ?>-tab"
data-bs-toggle="tab"
data-bs-target="#search-results-<?= strtolower($pm) ?>"
type="button" role="tab"
aria-controls="search-results-<?= strtolower($pm) ?>"
aria-selected="true">
<span class="tab-title">
<?= __d('controller', $pm, 2) ?>
</span>
<span class="badge rounded-pill bg-outline-primary">
<?= count($vv_results[$pm]) ?>
</span>
</button>
</li>
<?php $isFirstTab = false; ?>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</nav>
<div id="search-results-tab-content ?>" class="search-results-group-container tab-content">
<?php $isFirstTab = true; ?>
<?php foreach(['People', 'Groups'] as $i=>$pm): ?>
<?php if(!empty($vv_results[$pm])): ?>
<div id="search-results-<?= strtolower($pm) ?>"
class="tab-pane fade<?= $isFirstTab ? ' show active' : '' ?>"
role="tabpanel"
aria-labelledby="search-results-<?= strtolower($pm) ?>-tab">
<ul class="search-results-group">
<?php foreach($vv_results[$pm] as $pkey => $matches): ?>
<?php
Expand Down Expand Up @@ -148,15 +152,13 @@
<?php endforeach; ?>
</ul>
</div>
</div>
<?php $isFirstTab = false; ?>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php endforeach; ?>

<?php if($noResults): ?>
<p>
<?= __d('result','search.retry'); ?>
</p>
<?php endif; ?>

<?php else: ?>
<p>
<?= __d('result','search.retry'); ?>
</p>
<?php endif; ?>
</div>
18 changes: 8 additions & 10 deletions app/webroot/css/co-base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -705,23 +705,16 @@ ul.form-list li.alert-banner .co-alert {
list-style: none;
display: inline;
}
#search-results-meta li:after {
content: ",";
}
#search-results-meta li:first-child:after,
#search-results-meta li:last-child:after {
content: "";
}
#search-results ul.search-results-group {
padding: 0;
list-style: none;
display: grid;
gap: 1em;
margin-bottom: 0;
margin: 1.5em 0 0;
}
#search-results li.search-result {
padding: 0;
margin-bottom: 1.5em;
border: 1px dashed var(--cmg-color-bg-008);
break-inside: avoid;
}
#search-results li.search-result a {
display: block;
Expand All @@ -740,6 +733,11 @@ ul.form-list li.alert-banner .co-alert {
#search-results .search-result-match-info {
font-size: 0.8em;
}
#search-results .search-result-tab {
display: flex;
align-items: center;
gap: 0.5em;
}
#search-results .accordion-body {
padding: 1em;
}
Expand Down
14 changes: 11 additions & 3 deletions app/webroot/css/co-responsive.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,8 +199,13 @@
border-right: 1px dashed var(--cmg-color-bg-006);
}
/* SEARCH RESULTS */
body.search .pageTitleContainer {
justify-content: start;
gap: 1em;
}
#search-results ul.search-results-group {
grid-template-columns: repeat(2,1fr);
column-count: 2;
column-gap: 1.25em;
}
#top-menu {
z-index: 30;
Expand Down Expand Up @@ -423,15 +428,18 @@
}
/* SEARCH RESULTS */
#search-results ul.search-results-group {
grid-template-columns: repeat(4,1fr);
column-count: 3;
}
}

/* EXTRA LARGE */
/**************************************************************************************************************/
/* Extra large devices (desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

/* SEARCH RESULTS */
#search-results ul.search-results-group {
column-count: 4;
}
}

/* SPECIAL */
Expand Down