♻️ refactor a search result to make it look more like Google Search R…

…esult
joomla · Sep 5, 2020 · 03cac53 · 03cac53
1 parent b2fec88
commit 03cac53
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 22 deletions.
diff --git a/build/media_source/com_finder/css/finder.css b/build/media_source/com_finder/css/finder.css
@@ -51,8 +51,37 @@
   margin-top: .75em;
 }
 
-.result__title {
-  font-size: 1.2rem;
+.result__title-link {
+  display: flex;
+  flex-direction: column;
+}
+
+.result__title-text {
+  font-size: 1.3rem;
+}
+
+.result__title-url {
+  order: -1;
+  color: hsl(0, 0%, 34%);
+  font-style: normal;
+}
+
+.result__title-link:focus,
+.result__title-link:hover {
+  text-decoration: none;
+}
+
+.result__title-link:focus .result__title-text,
+.result__title-link:hover .result__title-text {
+  text-decoration: underline;
+}
+
+.result__date {
+  color: hsl(0, 0%, 34%);
+}
+
+.result__date:after {
+  content: "-";
 }
 
 .result__taxonomy {
@@ -65,11 +94,12 @@
 }
 
 .result__taxonomy-item + .result__taxonomy-item {
-  margin-left: .75em;
+  margin-left: .5em;
 }
 
-.result__date {
-  display: block;
+.result__taxonomy-item + .result__taxonomy-item:before {
+  content: "|";
+  padding-right: .5em;
 }
 
 /**

diff --git a/components/com_finder/tmpl/search/default_result.php b/components/com_finder/tmpl/search/default_result.php
@@ -19,9 +19,6 @@
 
 $user = Factory::getUser();
 
-// Get the mime type class.
-$mime = !empty($this->result->mime) ? 'fas fa-file-' . $this->result->mime : null;
-
 $show_description = $this->params->get('show_description', 1);
 
 if ($show_description)
@@ -50,20 +47,38 @@
 
 	$description = HTMLHelper::_('string.truncate', StringHelper::substr($full_description, $start), $desc_length, true);
 }
+
+$icon = '';
+if (!empty($this->result->mime)) :
+	$icon = '<span class="fas fa-file-' . $this->result->mime . '" aria-hidden="true"></span> ';
+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 ($mime) : ?>
-			<span class="<?php echo $mime; ?>" aria-hidden="true"></span>
-		<?php endif; ?>
 		<?php if ($this->result->route) : ?>
-			<?php echo HTMLHelper::link(Route::_($this->result->route), $this->result->title); ?>
+			<?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__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; ?>
@@ -88,14 +103,6 @@
 			<?php endforeach; ?>
 		</ul>
 	<?php endif; ?>
-	<?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 if ($this->params->get('show_url', 1)) : ?>
-		<p class="result__url">
-			<?php echo $this->baseUrl, Route::_($this->result->cleanURL); ?>
-		</p>
-	<?php endif; ?>
+
+
 </li>