Redesign directory page display

- Updated profile card display, added description and tags
- Added column display for profiles
- Tweaked reset button behavior

assets/js/main.js

@@ -1,15 +1,30 @@
 jQuery(function($){
-    
+
     //Mobile menu, hamburger button.
     $('body').on('click', '.hamburger', function(e){
         e.preventDefault();
         $('nav#links').toggleClass('open');
     });
-    
+
-    //Forces the reset to empty the search field, not reset it to the PHP given value.
+    // Show/hide the reset link if the search field is populated/empty
-    $('.search-wrapper').on('click', '.reset', function(e){
+    function updateResetButton() {
-       e.preventDefault();
+        if ($('.search-field').val()) {
-       $(e.target).closest('.search-wrapper').find('.search-field').val('');
+            $('.reset').show();
+        } else {
+            $('.reset').hide();
+        }
+    }
+    $('body').on('keyup', '.search-field', updateResetButton)
+
+    updateResetButton();
+
+    // Makes the entire profile card clickable...
+    $('body').on('click', '.profile', function(event) {
+        window.open(event.currentTarget.dataset.href, '_blank');
     });
-    
+
+    // ...while keeping inner a tags clickable
+    $('body').on('click', '.profile a', function(event) {
+        event.stopPropagation();
+    })
 });

assets/style.css

@@ -15,6 +15,10 @@ html{
 
 a{color:inherit;}
 
+p{
+    margin:0 0 1em 0;
+}
+
 .mobile{
     display:none !important;
 }
@@ -88,17 +92,33 @@ nav#links a{
     border-bottom:2px solid #f00;
 }
 
-.search-results,
 .homepage-wrapper{
     width:500px;
     margin:auto;
     text-align:center;
 }
 
-.search-results{
+.search-results,
+.directory-results{
     margin-bottom:25px;
 }
 
+.directory-results{
+    display:flex;
+    flex-flow:row;
+}
+
+.directory-results > aside{
+    flex:1 6 20%;
+    order:1;
+    padding:0 1em;
+}
+
+.directory-results > section{
+    flex:3 1 80%;
+    order:2;
+}
+
 .homepage-wrapper{
     margin:120px auto;
 }
@@ -121,9 +141,18 @@ nav#links a{
     margin-top:3em;
 }
 
+.profiles{
+    padding:0 10px;
+    column-width:400px;
+}
+
+.profiles > figure{
+    display:inline-block;
+    cursor:pointer;
+}
+
 nav#links a,
-.sub-menu-outer a,
+.sub-menu-outer a{
-.profiles a{
     text-decoration:none;
 }
 
@@ -133,13 +162,15 @@ nav#links a,
 
 .site,
 .profile{
-    display:table;
     width:100%;
     text-decoration:none;
     color:#000;
     padding:2px;
     outline:none;
-    margin:10px 0;
+    margin:5px 0;
+    display:inline;
+    background-color:rgba(0, 0, 0, .01);
+    border-radius:23px .5em 23px .5em;
 }
 
 .site{
@@ -169,6 +200,7 @@ nav#links a,
 }
 
 .profile .profile-photo{
+    float:left;
     margin:8px;
     border-radius:15px;
     border:1px solid #ddd;
@@ -192,6 +224,21 @@ nav#links a,
     font-size:80%;
     margin-bottom:3px;
     color:#555;
+
+    /** @see https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
+    overflow-wrap:break-word;
+    word-wrap:break-word;
+    -ms-word-break:break-all;
+    word-break:break-all;
+    word-break:break-word;
+    -ms-hyphens:auto;
+    -moz-hyphens:auto;
+    -webkit-hyphens:auto;
+    hyphens:auto;
+}
+
+.profile .profile-info .description{
+    margin-bottom:.5em;
 }
 
 .search-wrapper{
@@ -204,45 +251,47 @@ nav#links a,
     height:38px;
     line-height:22px;
 }
-    .search-wrapper .search-field{
+.search-wrapper .search-field{
-        line-height:22px;
+    line-height:22px;
-        display:block;
+    display:block;
-        border:none;
+    border:none;
-        outline:none;
+    outline:none;
-        background:none;
+    background:none;
-        padding:8px 12px;
+    padding:8px 12px;
-        padding-right:117px;
+    padding-right:117px;
-        width:100%;
+    width:100%;
-    }
+}
-    .search-wrapper .reset{
+.search-wrapper .reset{
-        position:absolute;
+    position:absolute;
-        top:0;
+    top:0;
-        right:65px;
+    right:65px;
-        height:25px;
+    height:25px;
-        width:25px;
+    width:25px;
-        margin:6px;
+    margin:6px;
-        padding:0;
+    padding:0;
-        line-height:1;
+    line-height:1;
-        font-size:12px;
+    font-size:12px;
-        color:#555;
+    color:#555;
-        background:#eee;
+    background:#eee;
-        border:1px solid #ddd;
+    border:1px solid #ddd;
-        border-radius:20px;
+    border-radius:20px;
-        font-family:'FontAwesome';
+    font-family:'FontAwesome';
-        font-weight:100;
+    font-weight:100;
-    }
+    line-height:25px;
-    .search-wrapper .search{
+    text-decoration:none;
-        border:none;
+}
-        border-left:1px solid #ddd;
+.search-wrapper .search{
-        color:#555;
+    border:none;
-        background:#eee;
+    border-left:1px solid #ddd;
-        position:absolute;
+    color:#555;
-        top:0;
+    background:#eee;
-        right:0;
+    position:absolute;
-        height:36px;
+    top:0;
-        width:65px;
+    right:0;
-        border-radius:0 8px 8px 0;
+    height:36px;
-    }
+    width:65px;
+    border-radius:0 8px 8px 0;
+}
 
 .health{font-size:120%; vertical-align:bottom;}
 .health.very-bad{ color:#f99; }

include/widget.php

@@ -1,41 +1,47 @@
 <?php
 
-
+function tags_widget()
-function tags_widget() {
+{
 	$o = '';
 
-	$r = q("select distinct(term), count(term) as total from tag group by term order by count(term) desc limit 20");
+	$r = q("SELECT `term`, COUNT(`term`) AS `total` FROM `tag` GROUP BY `term` ORDER BY COUNT(`term`) DESC LIMIT 20");
-	if(count($r)) {
+	if (count($r)) {
 		$o .= '<div class="widget">';
 		$o .= '<h3>' . t('Trending Interests') . '</h3>';
 		$o .= '<ul>';
-		foreach($r as $rr) {
+		foreach ($r as $rr) {
-			$o .= '<li><a href="directory?search=' . $rr['term'] . '" >' . $rr['term'] . '</a></li>';
+			$o .= '<li><a href="search?query=' . $rr['term'] . '" >' . $rr['term'] . '</a> (' . $rr['total'] . ')</li>';
 		}
 		$o .= '</ul></div>';
 	}
 	return $o;
 }
 
-function country_widget() {
+function country_widget()
+{
 	$o = '';
 
-	$r = q("select distinct(`country-name`), count(`country-name`) as total from profile where `country-name` != '' group by `country-name` order by count(`country-name`) desc limit 20");
+	$r = q("SELECT `country-name`, COUNT(`country-name`) AS `total`"
-	if(count($r)) {
+		. " FROM `profile`"
+		. " WHERE `country-name` != ''"
+		. " GROUP BY `country-name`"
+		. " ORDER BY COUNT(`country-name`) DESC"
+		. " LIMIT 20");
+	if (count($r)) {
 		$o .= '<div class="widget">';
 		$o .= '<h3>' . t('Locations') . '</h3>';
 		$o .= '<ul>';
-		foreach($r as $rr) {
+		foreach ($r as $rr) {
-			$o .= '<li><a href="directory?search=' . $rr['country-name'] . '" >' . $rr['country-name'] . '</a></li>';
+			$o .= '<li><a href="search?query=' . $rr['country-name'] . '" >' . $rr['country-name'] . '</a> (' . $rr['total'] . ')</li>';
 		}
 		$o .= '</ul></div>';
 	}
 	return $o;
 }
 
-
+function get_taglist($limit = 50)
-function get_taglist($limit = 50) {
+{
-	$r = q("select distinct(term), count(term) as total from tag group by term order by count(term) desc limit %d",
+	$r = q("SELECT DISTINCT(`term`), COUNT(`term`) AS `total` FROM `tag` GROUP BY `term` ORDER BY COUNT(`term`) DESC LIMIT %d",
 		intval($limit)
 	);
 

mod/directory.php

@@ -1,12 +1,15 @@
 <?php
 
 use Friendica\Directory\App;
+use Friendica\Directory\Rendering\View;
+use Friendica\Directory\Helper\Search as SearchHelper;
+use Friendica\Directory\Helper\Profile as ProfileHelper;
 
 require_once 'include/widget.php';
 
 function directory_init(App $a)
 {
-	$a->set_pager_itemspage(80);
+	$a->set_pager_itemspage(30);
 
 	$a->page['aside'] .= tags_widget();
 	$a->page['aside'] .= country_widget();
@@ -24,51 +27,35 @@ function directory_content(App $a)
 		$alpha = true;
 	}
 
-	$search = ((x($_GET, 'search')) ? notags(trim($_GET['search'])) : '');
-
-	if (isset($_GET['submit']) && $_GET['submit'] === t('Clear')) {
-		goaway($a->get_baseurl());
-	}
-
-	if ($search) {
-		$alpha = true;
-	}
-
 	$tpl = file_get_contents('view/directory_header.tpl');
 
 	$o = replace_macros($tpl, array(
-		'$search'  => $search,
 		'$header'  => t('Global Directory'),
 		'$submit'  => t('Find'),
-		'$clear'   => t('Clear'),
 		'$forum'   => $a->get_baseurl() . (($forums) ? '' : '/directory/forum'),
 		'$toggle'  => (($forums) ? t('Show People') : t('Show Community Forums')),
 		'$alpha'   => (($alpha) ? t('Updated order') : t('Alphabetic order')),
 		'$alink'   => (($alpha) ? str_replace('&alpha=1', '', $a->query_string) : $a->query_string . "&alpha=1"),
 		'$args'    => (($forums) ? '/forum' : ''),
-		'$finding' => (strlen($search) ? '<h4>' . t('Search for: ') . "'" . $search . "'" . '</h4>' : "")
 	));
 
-	if ($search) {
+	$sql_extra = '';
-		$search = dbesc($search);
-	}
-	$sql_extra = ((strlen($search)) ? " AND MATCH (`name`, `pdesc`, `homepage`, `locality`, `region`, `country-name`, `tags`) AGAINST ('$search') " : "");
-
 	if ($forums) {
-		$sql_extra .= " AND `comm` = 1 ";
+		$sql_extra .= ' AND `comm` = 1 ';
 	}
 
 	$sql_extra = str_replace('%', '%%', $sql_extra);
 
 	$r = q("SELECT COUNT(*) AS `total` FROM `profile` WHERE `censored` = 0 $sql_extra ");
 	if (count($r)) {
-		$a->set_pager_total($r[0]['total']);
+		$total = $r[0]['total'];
+		$a->set_pager_total($total);
 	}
 
 	if ($alpha) {
-		$order = " ORDER BY `name` ASC ";
+		$order = ' ORDER BY `name` ASC ';
 	} else {
-		$order = " ORDER BY `updated` DESC, `id` DESC ";
+		$order = ' ORDER BY `updated` DESC, `id` DESC ';
 	}
 
 	$r = q("SELECT * FROM `profile` WHERE `censored` = 0 $sql_extra $order LIMIT %d , %d ",
@@ -76,48 +63,20 @@ function directory_content(App $a)
 		intval($a->pager['itemspage'])
 	);
 
-	if (count($r)) {
+	//Show results.
-		$tpl = file_get_contents('view/directory_item.tpl');
+	$view = new View('directory');
 
-		foreach ($r as $rr) {
+	$view->addHelper('paginate', function() use ($a) {
-			$pdesc = (($rr['pdesc']) ? $rr['pdesc'] . '<br />' : '');
+		return paginate($a);
+	});
+	$view->addHelper('photoUrl', ProfileHelper::get('photoUrl'));
+	$view->addHelper('filterAllUrl', SearchHelper::get('filterAllUrl'));
+	$view->addHelper('filterPeopleUrl', SearchHelper::get('filterPeopleUrl'));
+	$view->addHelper('filterForumsUrl', SearchHelper::get('filterForumsUrl'));
 
-			$details = '';
+	$view->output(array(
-			if (strlen($rr['locality'])) {
+		'total'   => number_format($total),
-				$details .= $rr['locality'];
+		'results' => $r,
-			}
+		'filter'  => $forums ? 'forums' : '',
-			if (strlen($rr['region'])) {
+	));
-				if (strlen($rr['locality'])) {
-					$details .= ', ';
-				}
-				$details .= $rr['region'];
-			}
-			if (strlen($rr['country-name'])) {
-				if (strlen($details)) {
-					$details .= ', ';
-				}
-				$details .= $rr['country-name'];
-			}
-
-			$o .= replace_macros($tpl, array(
-				'$id'           => $rr['id'],
-				'$mod'          => '<div class="moderate"><a href="flag/' . $rr['id'] . '" title="' . t('Flag this entry') . '" ><img src="images/shield_2_16.png" alt="' . t('Flag this entry') . '" title="' . t('Flag this entry') . '"></a></div>',
-				'$star'         => (($rr['tags']) ? '<div class="star" title="' . strip_tags($rr['tags']) . '"></div>' : ''),
-				'$profile-link' => zrl($rr['homepage']),
-				'$photo'        => $a->get_baseurl() . '/photo/' . $rr['id'],
-				'$alt-text'     => $rr['name'] . ' ' . '(' . $rr['homepage'] . ')',
-				'$name'         => $rr['name'],
-				'$pclass'       => (($rr['comm']) ? ' group' : ''),
-				'$pgroup'       => (($rr['comm']) ? '<div class="directory-group">' . t('[Public Group]') . '</div>' : ''),
-				'$details'      => $pdesc . $details
-			));
-		}
-
-		$o .= '<div class="directory-end" ></div>' . PHP_EOL;
-		$o .= paginate($a);
-	} else {
-		notice(t('No matching entries.') . EOL);
-	}
-
-	return $o;
 }

src/templates/layout/_navigation.php

@@ -2,6 +2,7 @@
 <nav id="links">
     <div class="viewport">
         <a href="/home" class="mobile">Home</a>
+        <a href="/directory">Directory</a>
         <a href="/servers">Public Servers</a>
         <a href="/stats">Stats</a>
         <a href="/help">Help</a>

src/templates/layout/_searcher.php

@@ -1,7 +1,7 @@
 <form action="/search" method="get" class="search-form">
     <div class="search-wrapper">
         <input class="search-field" type="text" name="query" placeholder="Search your friends" tabindex="1" value="<?php echo isset($query)? $query : ''; ?>" />
-        <input class="reset" type="reset" value="&#xf00d;" tabindex="3" />
+        <a href="/directory" class="reset" tabindex="3">&#xf00d;</a>
         <input class="search" type="submit" value="Search" tabindex="2" />
     </div>
 </form>

src/templates/view/_profile.php

@@ -1,23 +1,37 @@
-<a class="profile" href="<?php echo $profile['homepage']; ?>" target="_blank">
+<figure class="profile" data-href="<?php echo $profile['homepage']; ?>" id="profile-<?php echo $profile['id']; ?>">
-    
     <img class="profile-photo" src="<?php echo $this->photoUrl($profile['id']); ?>" />
     <div class="profile-info">
         <strong class="name"><?php echo $profile['name']; ?></strong>
         <div class="url"><?php echo $profile['homepage']; ?></div>
-        <div class="description"><?php echo $profile['pdesc']; ?></div>
+		<?php if ($profile['pdesc']): ?>
+        <p class="description"><?php echo $profile['pdesc']; ?></p>
+		<?php endif; ?>
         <div class="location">
             <?php
                 $parts = array();
                 if(!empty($profile['locality'])) $parts[] = $profile['locality'];
                 if(!empty($profile['country-name'])) $parts[] = $profile['country-name'];
             ?>
-            
+
             <?php if (count($parts)): ?>
-                <i class="fa fa-globe"></i>    
+                <i class="fa fa-globe"></i>
                 <?php echo implode(', ', $parts); ?>
             <?php endif ?>
-            
+
         </div>
+		<?php if ($profile['tags']): ?>
+		<div class="tags">
+			<i class="fa fa-tag"></i>
+			<?php
+				$tags = array_map('trim', explode(' ', $profile['tags']));
+
+				foreach($tags as $tag):?>
+
+			<a href="/search?query=<?php echo urlencode($tag) ?>">#<?php echo htmlspecialchars($tag) ?></a>
+
+			<?php endforeach;?>
+		</div>
+		<?php endif; ?>
     </div>
-    
+
-</a>
+</figure>

src/templates/view/directory.php

@@ -0,0 +1,35 @@
+<div class="sub-menu-outer">
+    <div class="sub-menu-inner search-options">
+        <a class="option <?php echo $filter === null    ? 'active' : '' ?>" href="<?php echo $this->filterAllUrl(''); ?>">All</a>
+        <a class="option <?php echo $filter == 'people' ? 'active' : '' ?>" href="<?php echo $this->filterPeopleUrl(''); ?>">People</a>
+        <a class="option <?php echo $filter == 'forums' ? 'active' : '' ?>" href="<?php echo $this->filterForumsUrl(''); ?>">Forums</a>
+    </div>
+</div>
+
+<div class="directory-results">
+	<aside>
+		<?php echo tags_widget() ?>
+		<?php echo country_widget() ?>
+	</aside>
+	<section>
+		<div class="profiles">
+			<?php if (count($results)): ?>
+
+				<?php
+
+					foreach ($results as $profile) {
+						echo $this->view('_profile', array('profile' => $profile));
+					}
+				?>
+
+
+			<?php else: ?>
+
+				<h3>There were no results</h3>
+
+			<?php endif ?>
+
+		</div>
+		<?php echo $this->paginate();?>
+	</section>
+</div>