Skip to content

Commit

Permalink
Convert search results to tabs, and provide better generalization for…
Browse files Browse the repository at this point in the history 
… the inclusion of future models (CFM-322) (#125)
  • Loading branch information
@arlen
arlen authored Sep 21, 2023
1 parent 2d0577a commit 67fd942
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 69 deletions.
5 changes: 1 addition & 4 deletions app/resources/locales/en_US/result.po
View file
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
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
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
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

0 comments on commit 67fd942

Please sign in to comment.