Skip to content

Feature/4.0 dev a11y com finder refactor search result #30550

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wilsonge merged 29 commits into from
Sep 15, 2020
Merged

Feature/4.0 dev a11y com finder refactor search result #30550

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
53c3728
reduce if-else construction
hans2103 Sep 2, 2020
89edb19
move mime to span element using font-awesome instead of image
hans2103 Sep 2, 2020
a7088c9
rename className of li to result__item
hans2103 Sep 2, 2020
068820e
replace header block by paragraph. No heading element needed
hans2103 Sep 2, 2020
b9fd201
adjust className result__url
hans2103 Sep 2, 2020
aab0999
adjust className result__date and add datetime attribute
hans2103 Sep 2, 2020
fd9a1dc
rename className result__description
hans2103 Sep 2, 2020
9a7389b
put result taxonomy in a ul
hans2103 Sep 2, 2020
965e725
set className to taxonomy list item
hans2103 Sep 2, 2020
67e9cf6
remove badge styling and put type in a span.
hans2103 Sep 2, 2020
3d07fa4
if all is wrapped in <?php ?> why not this part
hans2103 Sep 2, 2020
11ffa0a
codestyle indent
hans2103 Sep 2, 2020
33dc2b3
change UL into OL
hans2103 Sep 2, 2020
98454b0
apply className uniform with the rest on default_results.php
hans2103 Sep 2, 2020
be77a6f
add attribute start on OL to ensure multi page search results start w…
hans2103 Sep 2, 2020
78a2219
search result description directly after search result title
hans2103 Sep 2, 2020
4106787
:wastebasket: #advanced-search not used in Joomla 4
hans2103 Sep 2, 2020
2d11929
replace #search-query-explained by .com-finder__explained
hans2103 Sep 2, 2020
31557cc
:wastebasket: awesomeplete replaces autocomplete. This css is obsolete
hans2103 Sep 2, 2020
c809e93
:recycle: replace highlight styling. No more ugly gap around highligh…
hans2103 Sep 2, 2020
3509016
:wastebasket: removal obsolete css
hans2103 Sep 2, 2020
be4c2c8
:lipstick: styling search result item
hans2103 Sep 2, 2020
5b9a18d
:lipstick: styling search result page
hans2103 Sep 2, 2020
b2fec88
:lipstick: styling taxonomy-item
hans2103 Sep 2, 2020
03cac53
:recycle: refactor a search result to make it look more like Google S…
hans2103 Sep 5, 2020
95adf9c
fix id reference
hans2103 Sep 6, 2020
89c6f72
Merge branch '4.0-dev' into feature/4.0-dev-a11y--com_finder-refactor…
hans2103 Sep 6, 2020
22f2574
Update components/com_finder/tmpl/search/default_result.php
hans2103 Sep 7, 2020
0791571
equalize spacing between elements of result__item.
hans2103 Sep 8, 2020
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
184 changes: 86 additions & 98 deletions build/media_source/com_finder/css/finder.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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