Skip to content

Commit

Permalink
Feature/4.0 dev a11y com finder refactor search result (joomla#30550)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hans2103 @sakiss
hans2103 authored and sakiss committed Oct 16, 2020
1 parent eec50c9 commit d0a27fc
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 151 deletions.
184 changes: 86 additions & 98 deletions build/media_source/com_finder/css/finder.css
View file
Original file line number Diff line number Diff line change
@@ -1,139 +1,127 @@
#advanced-search {
text-align:l eft;
width: 100%;
padding: 5px 0 15px;
/**
* Styling search results page
*/
.com-finder * {
margin-bottom: 0;
}

#advanced-search-toggle {
cursor: pointer;
.com-finder > * + *,
.com-finder__results > * + * {
margin-top: 1.5em;
}

#search-query-explained {
padding: 10px 0;
/**
* Styling search explained
*/
.com-finder__explained span.term,
.com-finder__explained span.date,
.com-finder__explained span.when,
.com-finder__explained span.branch,
.com-finder__explained span.node,
.com-finder__explained span.op {
font-weight: 800;
}

#search-query-explained span.term,
#search-query-explained span.date,
#search-query-explained span.when,
#search-query-explained span.branch,
#search-query-explained span.node,
#search-query-explained span.op {
font-weight: bold;
.com-finder__explained span.op {
text-transform: uppercase;
}

#search-query-explained span.op {
text-transform: uppercase;
/**
* Styling search result items list
*/
.com-finder__results-list {
list-style: none;
padding: 0;
}

#search-results li.search-result .mime-pdf {
padding-left: 20px;
background: url(../../system/images/pdf_button.png) no-repeat;
/**
* Styling search result item
*/
.result__item + .result__item {
margin-top: 1.5em;
padding-top: 1.5em;
border-top: 1px solid currentColor;
}

#search-results .search-pagination,
#search-results .pagination,
#search-results .search-pages-counter {
clear: both;
margin: 0 auto;
.result__item > * {
margin-bottom: 0;
}

#highlighter-start, #highlighter-end {
display: none;
height: 0;
opacity: 0;
.result__item > * + * {
margin-top: .25em;
}

span.highlight {
background-color: #ffffcc;
font-weight: 900;
padding: 1px 4px;
color: #343a40;
.result__title-link {
display: flex;
flex-direction: column;
}

.result-taxonomy .badge {
padding: 0.45em 0.8em;
font-size: 85%;
.result__title-text {
font-size: 1.3rem;
}

ul.autocompleter-choices {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #eee;
background-color: #fff;
border-right-color: #ddd;
border-bottom-color: #ddd;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
z-index: 50;
.result__title-url {
order: -1;
margin-bottom: .25em;
color: hsl(0, 0%, 34%);
font-style: normal;
}

ul.autocompleter-choices li {
background: none;
position: relative;
padding: .1em 1.5em .1em 1em;
cursor: pointer;
font-weight: normal;
font-size: 1em;
.result__title-link:focus,
.result__title-link:hover {
text-decoration: none;
}

ul.autocompleter-choices li.autocompleter-selected {
background-color: #444;
color: #fff;
.result__title-link:focus .result__title-text,
.result__title-link:hover .result__title-text {
text-decoration: underline;
}

ul.autocompleter-choices span.autocompleter-queried {
font-weight: bold;
.result__date {
color: hsl(0, 0%, 34%);
}

ul.autocompleter-choices li.autocompleter-selected span.autocompleter-queried {
color: #9fcfff;
.result__date:after {
content: "-";
}

.autocomplete-suggestions {
border: 1px solid #999;
background: #fff;
cursor: default;
overflow: auto;
box-shadow: 1px 4px 3px rgba(50, 50, 50, .64);
.result__taxonomy {
padding: 0;
list-style: none;
}

.autocomplete-suggestion {
padding: 2px 5px;
white-space: nowrap;
overflow: hidden;
.result__taxonomy-item {
display: inline-block;
}

.autocomplete-no-suggestion {
padding: 2px 5px;
.result__taxonomy-item + .result__taxonomy-item {
margin-left: .5em;
}

.autocomplete-selected {
background: #f0f0f0;
.result__taxonomy-item + .result__taxonomy-item:before {
content: "|";
padding-right: .5em;
}

.autocomplete-suggestions strong {
font-weight: bold;
color: #000;
/**
* Styling search word highlight
*/
.result__item .highlight {
position: relative;
}

.autocomplete-group {
padding: 2px 5px;
}

.autocomplete-group strong {
font-weight: bold;
font-size: 16px;
color: #000;
display: block;
border-bottom: 1px solid #000;
}

ul#finder-filter-select-list {
top: 4em !important;
}

.finder-selects .inputbox {
width: 180px;
.result__item .highlight:before {
content: '';
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: calc(100% + 6px);
height: calc(100% + 2px);
background: hsla(60, 100%, 50%, .5);
pointer-events: none;
border-radius: 3px;
}
101 changes: 50 additions & 51 deletions components/com_finder/tmpl/search/default_result.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,6 @@

$user = Factory::getUser();

// Get the mime type class.
$mime = !empty($this->result->mime) ? 'mime-' . $this->result->mime : null;

$show_description = $this->params->get('show_description', 1);

if ($show_description)
Expand All @@ -32,14 +29,11 @@
$pad_length = $term_length < $desc_length ? (int) floor(($desc_length - $term_length) / 2) : 0;

// Make sure we highlight term both in introtext and fulltext
$full_description = $this->result->description;
if (!empty($this->result->summary) && !empty($this->result->body))
{
$full_description = Helper::parse($this->result->summary . $this->result->body);
}
else
{
$full_description = $this->result->description;
}

// Find the position of the search term
$pos = $term_length ? StringHelper::strpos(StringHelper::strtolower($full_description), StringHelper::strtolower($this->query->input)) : false;
Expand All @@ -53,55 +47,60 @@

$description = HTMLHelper::_('string.truncate', StringHelper::substr($full_description, $start), $desc_length, true);
}
?>
<li class="result-title">
<header class="result-title">
<h4 class="result-title <?php echo $mime; ?>">
<?php if ($this->result->route) : ?>
<a href="<?php echo Route::_($this->result->route); ?>">
<?php echo $this->result->title; ?>
</a>
<?php else : ?>
<?php echo $this->result->title; ?>
<?php endif; ?>
</h4>
</header>

<?php $taxonomies = $this->result->getTaxonomy(); ?>
<?php if (count($taxonomies) && $this->params->get('show_taxonomy', 1)) : ?>
<p class="result-taxonomy">
<?php foreach ($taxonomies as $type => $taxonomy) : ?>
<?php $branch = Taxonomy::getBranch($type); ?>
<?php if ($branch->state == 1 && in_array($branch->access, $user->getAuthorisedViewLevels())) : ?>
<?php
$taxonomy_text = array();

foreach ($taxonomy as $node) :
if ($node->state == 1 && in_array($node->access, $user->getAuthorisedViewLevels())) :
$taxonomy_text[] = $node->title;
endif;
endforeach;
$icon = '';
if (!empty($this->result->mime)) :
$icon = '<span class="fas fa-file-' . $this->result->mime . '" aria-hidden="true"></span> ';
endif;

if (count($taxonomy_text)) : ?>
<span class="badge badge-secondary"><?php echo $type . ': ' . implode(',', $taxonomy_text); ?></span>
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
</p>
<?php endif; ?>
$show_url = '';
if ($this->params->get('show_url', 1)) :
$show_url = '<cite class="result__title-url">' . $this->baseUrl . Route::_($this->result->cleanURL) . '</cite>';
endif;
?>
<li class="result__item">
<p class="result__title">
<?php if ($this->result->route) : ?>
<?php echo HTMLHelper::link(
Route::_($this->result->route),
'<span class="result__title-text">' . $icon . $this->result->title . '</span>' . $show_url,
[
'class' => 'result__title-link'
]
); ?>
<?php else : ?>
<?php echo $this->result->title; ?>
<?php endif; ?>
</p>
<?php if ($show_description && $description !== '') : ?>
<p class="result-text">
<p class="result__description">
<?php if ($this->result->start_date && $this->params->get('show_date', 1)) : ?>
<time class="result__date" datetime="<?php echo HTMLHelper::_('date', $this->result->start_date, 'c'); ?>">
<?php echo HTMLHelper::_('date', $this->result->start_date, Text::_('DATE_FORMAT_LC3')); ?>
</time>
<?php endif; ?>
<?php echo $description; ?>
</p>
<?php endif; ?>
<?php if ($this->result->start_date && $this->params->get('show_date', 1)) : ?>
<time class="result-date small">
<?php echo HTMLHelper::_('date', $this->result->start_date, Text::_('DATE_FORMAT_LC3')); ?>
</time>
<?php endif; ?>
<?php if ($this->params->get('show_url', 1)) : ?>
<p class="result-url small">
<?php echo $this->baseUrl, Route::_($this->result->cleanURL); ?>
</p>
<?php $taxonomies = $this->result->getTaxonomy(); ?>
<?php if (count($taxonomies) && $this->params->get('show_taxonomy', 1)) : ?>
<ul class="result__taxonomy">
<?php foreach ($taxonomies as $type => $taxonomy) : ?>
<?php $branch = Taxonomy::getBranch($type); ?>
<?php if ($branch->state == 1 && in_array($branch->access, $user->getAuthorisedViewLevels())) : ?>
<?php $taxonomy_text = []; ?>
<?php foreach ($taxonomy as $node) : ?>
<?php if ($node->state == 1 && in_array($node->access, $user->getAuthorisedViewLevels())) : ?>
<?php $taxonomy_text[] = $node->title; ?>
<?php endif; ?>
<?php endforeach; ?>
<?php if (count($taxonomy_text)) : ?>
<li class="result__taxonomy-item result__taxonomy--<?php echo $type; ?>">
<span><?php echo $type; ?>:</span> <?php echo implode(',', $taxonomy_text); ?>
</li>
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li>
4 changes: 2 additions & 2 deletions components/com_finder/tmpl/search/default_results.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,15 +52,15 @@
<?php endif; ?>
<?php // Display a list of results ?>
<br id="highlighter-start" />
<ul id="search-results-list" class="search-results list-unstyled">
<ol id="search-result-list" class="com-finder__results-list" start="<?php echo (int) $this->pagination->limitstart + 1; ?>">
<?php $this->baseUrl = Uri::getInstance()->toString(array('scheme', 'host', 'port')); ?>
<?php foreach ($this->results as $i => $result) : ?>
<?php $this->result = &$result; ?>
<?php $this->result->counter = $i + 1; ?>
<?php $layout = $this->getLayoutFile($this->result->layout); ?>
<?php echo $this->loadTemplate($layout); ?>
<?php endforeach; ?>
</ul>
</ol>
<br id="highlighter-end" />
<?php // Display the pagination ?>
<div class="com-finder__navigation search-pagination">
Expand Down

0 comments on commit d0a27fc

Please sign in to comment.