Redesign directory page display
- Updated profile card display, added description and tags - Added column display for profiles - Tweaked reset button behavior
This commit is contained in:
Hypolite Petovan
parent
9af47634e3
commit
de87a461c0
8 changed files with 219 additions and 140 deletions
|
|
@ -6,10 +6,25 @@ jQuery(function($){
|
|||
$('nav#links').toggleClass('open');
|
||||
});
|
||||
|
||||
//Forces the reset to empty the search field, not reset it to the PHP given value.
|
||||
$('.search-wrapper').on('click', '.reset', function(e){
|
||||
e.preventDefault();
|
||||
$(e.target).closest('.search-wrapper').find('.search-field').val('');
|
||||
// Show/hide the reset link if the search field is populated/empty
|
||||
function updateResetButton() {
|
||||
if ($('.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();
|
||||
})
|
||||
});
|
||||
|
|
|
|||
139
assets/style.css
139
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,
|
||||
.profiles a{
|
||||
.sub-menu-outer 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{
|
||||
line-height:22px;
|
||||
display:block;
|
||||
border:none;
|
||||
outline:none;
|
||||
background:none;
|
||||
padding:8px 12px;
|
||||
padding-right:117px;
|
||||
width:100%;
|
||||
}
|
||||
.search-wrapper .reset{
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:65px;
|
||||
height:25px;
|
||||
width:25px;
|
||||
margin:6px;
|
||||
padding:0;
|
||||
line-height:1;
|
||||
font-size:12px;
|
||||
color:#555;
|
||||
background:#eee;
|
||||
border:1px solid #ddd;
|
||||
border-radius:20px;
|
||||
font-family:'FontAwesome';
|
||||
font-weight:100;
|
||||
}
|
||||
.search-wrapper .search{
|
||||
border:none;
|
||||
border-left:1px solid #ddd;
|
||||
color:#555;
|
||||
background:#eee;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
height:36px;
|
||||
width:65px;
|
||||
border-radius:0 8px 8px 0;
|
||||
}
|
||||
.search-wrapper .search-field{
|
||||
line-height:22px;
|
||||
display:block;
|
||||
border:none;
|
||||
outline:none;
|
||||
background:none;
|
||||
padding:8px 12px;
|
||||
padding-right:117px;
|
||||
width:100%;
|
||||
}
|
||||
.search-wrapper .reset{
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:65px;
|
||||
height:25px;
|
||||
width:25px;
|
||||
margin:6px;
|
||||
padding:0;
|
||||
line-height:1;
|
||||
font-size:12px;
|
||||
color:#555;
|
||||
background:#eee;
|
||||
border:1px solid #ddd;
|
||||
border-radius:20px;
|
||||
font-family:'FontAwesome';
|
||||
font-weight:100;
|
||||
line-height:25px;
|
||||
text-decoration:none;
|
||||
}
|
||||
.search-wrapper .search{
|
||||
border:none;
|
||||
border-left:1px solid #ddd;
|
||||
color:#555;
|
||||
background:#eee;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
height:36px;
|
||||
width:65px;
|
||||
border-radius:0 8px 8px 0;
|
||||
}
|
||||
|
||||
.health{font-size:120%; vertical-align:bottom;}
|
||||
.health.very-bad{ color:#f99; }
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
if(count($r)) {
|
||||
$r = q("SELECT `term`, COUNT(`term`) AS `total` FROM `tag` GROUP BY `term` ORDER BY COUNT(`term`) DESC LIMIT 20");
|
||||
if (count($r)) {
|
||||
$o .= '<div class="widget">';
|
||||
$o .= '<h3>' . t('Trending Interests') . '</h3>';
|
||||
$o .= '<ul>';
|
||||
foreach($r as $rr) {
|
||||
$o .= '<li><a href="directory?search=' . $rr['term'] . '" >' . $rr['term'] . '</a></li>';
|
||||
foreach ($r as $rr) {
|
||||
$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");
|
||||
if(count($r)) {
|
||||
$r = q("SELECT `country-name`, COUNT(`country-name`) AS `total`"
|
||||
. " 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) {
|
||||
$o .= '<li><a href="directory?search=' . $rr['country-name'] . '" >' . $rr['country-name'] . '</a></li>';
|
||||
foreach ($r as $rr) {
|
||||
$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) {
|
||||
$r = q("select distinct(term), count(term) as total from tag group by term order by count(term) desc limit %d",
|
||||
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",
|
||||
intval($limit)
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
$search = dbesc($search);
|
||||
}
|
||||
$sql_extra = ((strlen($search)) ? " AND MATCH (`name`, `pdesc`, `homepage`, `locality`, `region`, `country-name`, `tags`) AGAINST ('$search') " : "");
|
||||
|
||||
$sql_extra = '';
|
||||
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)) {
|
||||
$tpl = file_get_contents('view/directory_item.tpl');
|
||||
//Show results.
|
||||
$view = new View('directory');
|
||||
|
||||
foreach ($r as $rr) {
|
||||
$pdesc = (($rr['pdesc']) ? $rr['pdesc'] . '<br />' : '');
|
||||
$view->addHelper('paginate', function() use ($a) {
|
||||
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 = '';
|
||||
if (strlen($rr['locality'])) {
|
||||
$details .= $rr['locality'];
|
||||
}
|
||||
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;
|
||||
$view->output(array(
|
||||
'total' => number_format($total),
|
||||
'results' => $r,
|
||||
'filter' => $forums ? 'forums' : '',
|
||||
));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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="" tabindex="3" />
|
||||
<a href="/directory" class="reset" tabindex="3"></a>
|
||||
<input class="search" type="submit" value="Search" tabindex="2" />
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<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();
|
||||
|
|
@ -18,6 +19,19 @@
|
|||
<?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>
|
||||
35
src/templates/view/directory.php
Normal file
35
src/templates/view/directory.php
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue