Skip to content

GitLab

Unverified Commit 5b751f3c authored by dmorley's avatar dmorley Committed by GitHub
Browse files

few easy UI fixes (#189) 

* few easy UI fixes

* Make table headers DIV instead of A tags. (#190)

Add tooltips to services images.

* leave page menu on screen
parent d862e510
Hide whitespace changes
Inline Side-by-side
Showing with 74 additions and 71 deletions
index.php
View file @ 5b751f3c
......@@ -80,17 +80,18 @@ $navs = [
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Poduptime helps you find a diaspora, friendica, hubzilla or socialhome pod to use and join the federated social network.</p>
<ul class="navbar-nav">
<?php
foreach ($navs['links'] as $nav_item) {
printf(
'<a href="%2$s">%3$s%4$s</a> | ',
$nav_item['active'] ? ' active' : '',
'<li class="nav-item"><a href="%1$s">%2$s%3$s</a></li>',
$nav_item['href'],
$nav_item['text'],
$nav_item['active'] ? ' <span class="sr-only">(current)</span>' : ''
);
}
?>
</ul>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Views</h4>
......@@ -150,7 +151,7 @@ $navs = [
?>
</div>
</main>
<footer class="ml-2 text-muted">
<footer class="m-2 p-2 text-muted">
<small>Data refreshed <?php echo Carbon::createFromTimestamp(filemtime($lastfile))->diffForHumans(); ?></small>
</footer>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
......
js/podup.js
View file @ 5b751f3c
......@@ -17,7 +17,7 @@ $(document).ready(function () {
theme: 'bootstrap',
headerTemplate: '{content} {icon}',
widthFixed: true,
widgets: ['filter', 'saveSort'],
widgets: ['filter', 'saveSort', 'zebra', 'columns'],
initialized() {
$('.table-responsive').css("visibility", "visible").fadeIn('loading');
}
......
show.php
View file @ 5b751f3c
......@@ -29,15 +29,15 @@ try {
<meta property="og:title" content="<?php echo count($pods); ?> Federated Pods listed, Come see the privacy aware social networks." xmlns="http://www.w3.org/1999/html"/>
<div class="d-md-none">Scroll right or rotate device for more</div>
<div class="table-responsive loadingtable">
<table class="table table-striped table-bordered table-sm tablesorter table-hover">
<table class="table table-bordered table-sm tablesorter table-hover">
<thead class="thead-dark">
<tr>
<th><a data-toggle="tooltip" data-placement="bottom" title="A pod is a site for you to set up your account.">Pod</a></th>
<th data-placeholder="Try: >= 99.94"><a data-toggle="tooltip" data-placement="bottom" title="Percent of the time the pod is online.">Uptime %</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="Number of users active last 6 months on this pod.">Active Users</a></th>
<th <?php echo($country_code ? 'data-placeholder="Try: $country_code"' : 'data-placeholder="Try: US"') ?>><a data-toggle="tooltip" data-placement="bottom" title="Pod location, based on IP Geolocation.">Location</a></th>
<th class="filter-false"><a data-toggle="tooltip" data-placement="bottom" title="External Social Networks this pod can post to.">Services Offered</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="More information from the host of this pod.">Info</a></th>
<th><div data-toggle="tooltip" title="A pod is a site for you to set up your account.">Pod</div></th>
<th><div data-toggle="tooltip" title="Percent of the time the pod is online." data-placeholder="Try: >= 99.94">Uptime %</div></th>
<th><div data-toggle="tooltip" title="Number of users active last 6 months on this pod.">Active Users</div></th>
<th><div data-toggle="tooltip" title="Pod location, based on IP Geolocation." data-placeholder="Try: <?php echo $country_code ?: 'US'; ?>">Location</div></th>
<th><div data-toggle="tooltip" title="External Social Networks this pod can post to." class="filter-false">Services Offered</div></th>
<th><div data-toggle="tooltip" title="More information from the host of this pod.">Info</div></th>
</tr>
</thead>
<tbody>
......@@ -46,41 +46,43 @@ try {
foreach ($pods as $pod) {
$humanmonitored = Carbon::now()->subDays($pod['daysmonitored'])->diffForHumans(null, true);
$tip = "This {$pod['softwarename']} pod's uptime is {$pod['uptime_alltime']}% over {$humanmonitored}.";
echo '<tr>';
if (($_COOKIE['domain'] ?? null) === $pod['domain']) {
echo '<tr><td class="bg-secondary"><div title="This is the last pod you visited from this site. ' . $tip . '" data-toggle="tooltip" data-placement="bottom"><a class="text-warning url" target="_self" href="/go.php?domain=' . $pod['domain'] . '">' . $pod['domain'] . '</a></div></td>';
echo '<td data-toggle="tooltip" title="This is the last pod you visited from this site. ' . $tip . '" class="bg-secondary"><a class="text-warning url" target="_self" href="/go.php?domain=' . $pod['domain'] . '">' . $pod['domain'] . '</a></td>';
} else {
echo '<tr><td><div title="' . $tip . '" data-toggle="tooltip" data-placement="bottom"><a class="text-success url" target="_self" href="/go.php?domain=' . $pod['domain'] . '">' . $pod['domain'] . '</a></div></td>';
echo '<td data-toggle="tooltip" title="' . $tip . '"><a class="text-success url" target="_self" href="/go.php?domain=' . $pod['domain'] . '">' . $pod['domain'] . '</a></td>';
}
echo '<td><a href="#" data-featherlight-variant="table-responsive" data-featherlight="podstat-uptime.php?domain=' . $pod['domain'] . '">' . ($pod['uptime_alltime'] > 0 ? $pod['uptime_alltime'] . '%' : '') . '</a></td>';
if ($pod['active_users_halfyear'] > 0) {
echo '<td data-toggle="tooltip" data-placement="bottom" title="Active users six months: ' . $pod['active_users_halfyear'] . ', Active users one month: ' . $pod['active_users_monthly'] . '">' . $pod['active_users_halfyear'] . '</td>';
echo '<td data-toggle="tooltip" title="Active users six months: ' . $pod['active_users_halfyear'] . ' Active users one month: ' . $pod['active_users_monthly'] . '">' . $pod['active_users_halfyear'] . '</td>';
} else {
echo '<td data-toggle="tooltip" data-placement="bottom" title="Pod does not share user data."></td>';
echo '<td data-toggle="tooltip" title="Pod does not share user data."></td>';
}
if ($country_code === $pod['country']) {
echo '<td class="text-success" data-toggle="tooltip" data-placement="bottom" title="Country: ' . ($pod['countryname'] ?? 'n/a') . '&#0010;City: ' . ($pod['city'] ?? 'n/a') . '&#0010;State: ' . ($pod['state'] ?? 'n/a') . '"><b>' . $pod['country'] . '</b></td>';
echo '<td class="text-success" data-toggle="tooltip" title="Country: ' . ($pod['countryname'] ?? 'n/a') . '&#0010;City: ' . ($pod['city'] ?? 'n/a') . '&#0010;State: ' . ($pod['state'] ?? 'n/a') . '"><b>' . $pod['country'] . '</b></td>';
} else {
echo '<td data-toggle="tooltip" data-placement="bottom" title="Country: ' . ($pod['countryname'] ?? 'n/a') . '&#0010;City: ' . ($pod['city'] ?? 'n/a') . '&#0010;State: ' . ($pod['state'] ?? 'n/a') . '">' . $pod['country'] . '</td>';
echo '<td data-toggle="tooltip" title="Country: ' . ($pod['countryname'] ?? 'n/a') . '&#0010;City: ' . ($pod['city'] ?? 'n/a') . '&#0010;State: ' . ($pod['state'] ?? 'n/a') . '">' . $pod['country'] . '</td>';
}
echo '<td>';
$pod['service_facebook'] && print '<div class="smlogo smlogo-facebook" title="Publish to Facebook"></div>';
$pod['service_twitter'] && print '<div class="smlogo smlogo-twitter" title="Publish to Twitter"></div>';
$pod['service_tumblr'] && print '<div class="smlogo smlogo-tumblr" title="Publish to Tumblr"></div>';
$pod['service_wordpress'] && print '<div class="smlogo smlogo-wordpress" title="Publish to WordPress"></div>';
$pod['service_xmpp'] && print '<div class="smlogo smlogo-xmpp"><img src="/images/icon-xmpp.png" width="16" height="16" title="XMPP chat server" alt="XMPP chat server"></div>';
$pod['service_facebook'] && print '<div class="smlogo smlogo-facebook" data-toggle="tooltip" title="Publish to Facebook"></div>';
$pod['service_twitter'] && print '<div class="smlogo smlogo-twitter" data-toggle="tooltip" title="Publish to Twitter"></div>';
$pod['service_tumblr'] && print '<div class="smlogo smlogo-tumblr" data-toggle="tooltip" title="Publish to Tumblr"></div>';
$pod['service_wordpress'] && print '<div class="smlogo smlogo-wordpress" data-toggle="tooltip" title="Publish to WordPress"></div>';
$pod['service_xmpp'] && print '<div class="smlogo smlogo-xmpp"><img src="/images/icon-xmpp.png" width="16" height="16" data-toggle="tooltip" title="XMPP chat server" alt="XMPP chat server"></div>';
echo '</td>';
$podmin_statement = htmlentities($pod['podmin_statement'] ?? '', ENT_QUOTES);
echo '<td>' . ($podmin_statement ? '<a href="#" data-featherlight="<p>' . $podmin_statement . '</p>">&#128172;</a>' : '&nbsp;') . '</td></tr>';
echo '<td>' . ($podmin_statement ? '<a href="#" data-featherlight="<p>' . $podmin_statement . '</p>">&#128172;</a>' : '&nbsp;') . '</td>';
echo '</tr>';
}
?>
</tbody>
</table>
<div class="pager">
<span class="first pagination" title="First page">&laquo;</span>
<span class="prev pagination" title="Previous page">&lt;</span>
<span class="pagedisplay"></span>
<span class="next pagination" title="Next page">&gt;</span>
<span class="last pagination" title="Last page">&raquo;</span>
</div>
</div>
<div class="pager">
<span class="first pagination" title="First page">&laquo;</span>
<span class="prev pagination" title="Previous page">&lt;</span>
<span class="pagedisplay"></span>
<span class="next pagination" title="Next page">&gt;</span>
<span class="last pagination" title="Last page">&raquo;</span>
</div>
showfull.php
View file @ 5b751f3c
......@@ -37,29 +37,29 @@ try {
<meta property="og:title" content="<?php echo count($pods); ?> Federated Pods listed, Come see the privacy aware social networks."/>
<div class="d-md-none">Scroll right or rotate device for more</div>
<div class="table-responsive loadingtable">
<table class="table table-striped table-bordered table-sm tablesorter table-hover tfont">
<table class="table table-bordered table-sm tablesorter table-hover tfont">
<thead class="thead-dark">
<tr>
<th><a data-toggle="tooltip" data-placement="bottom" title="A pod is a site for you to set up your account.">Pod</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="Version of software this pod runs">Version</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="Type of software this pod runs">Software</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="Percent of the time the pod is online.">Uptime</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="Does this pod offer ipv6 connection.">IPv6</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="Average connection latency time in ms from Los Angeles.">Latency</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="Does this pod allow new users.">Signups</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="Number of total users on this pod.">Users</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="Number of users active last 6 months on this pod.">6m</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="Number of users active last 1 month on this pod.">1m</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="Number of total posts on this pod.">Posts</a></th>
<th data-placeholder="Try: 10 - 50"><a data-toggle="tooltip" data-placement="bottom" title="Number of total comments on this pod.">Comments</a></th>
<th data-placeholder="Try: ! 0"><a data-toggle="tooltip" data-placement="bottom" title="How many months have we been watching this pod.">Months</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="User rating for this pod.">Rating</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="System Score on a 100 point scale.">Score</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="Does this domain use DNSSEC.">DNSSEC</a></th>
<th <?php echo($country_code ? 'data-placeholder="Try: $country_code"' : 'data-placeholder="Try: US"') ?>><a data-toggle="tooltip" data-placement="bottom" title="Pod location, based on IP Geolocation.">Country</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="Pod language detected from their main page text.">Language</a></th>
<th class="filter-false"><a data-toggle="tooltip" data-placement="bottom" title="External Social Networks this pod can post to.">Services</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="Click for more information about this pod from the pod host (podmin).">Info</a></th>
<th><div data-toggle="tooltip" title="A pod is a site for you to set up your account.">Pod</div></th>
<th><div data-toggle="tooltip" title="Version of software this pod runs">Version</div></th>
<th><div data-toggle="tooltip" title="Type of software this pod runs">Software</div></th>
<th><div data-toggle="tooltip" title="Percent of the time the pod is online.">Uptime</div></th>
<th><div data-toggle="tooltip" title="Does this pod offer ipv6 connection.">IPv6</div></th>
<th><div data-toggle="tooltip" title="Average connection latency time in ms from Los Angeles.">Latency</div></th>
<th><div data-toggle="tooltip" title="Does this pod allow new users.">Signups</div></th>
<th><div data-toggle="tooltip" title="Number of total users on this pod.">Users</div></th>
<th><div data-toggle="tooltip" title="Number of users active last 6 months on this pod.">6m</div></th>
<th><div data-toggle="tooltip" title="Number of users active last 1 month on this pod.">1m</div></th>
<th><div data-toggle="tooltip" title="Number of total posts on this pod.">Posts</div></th>
<th><div data-toggle="tooltip" title="Number of total comments on this pod." data-placeholder="Try: 10 - 50">Comments</div></th>
<th><div data-toggle="tooltip" title="How many months have we been watching this pod." data-placeholder="Try: ! 0">Months</div></th>
<th><div data-toggle="tooltip" title="User rating for this pod.">Rating</div></th>
<th><div data-toggle="tooltip" title="System Score on a 100 point scale.">Score</div></th>
<th><div data-toggle="tooltip" title="Does this domain use DNSSEC.">DNSSEC</div></th>
<th><div data-toggle="tooltip" title="Pod location, based on IP Geolocation." data-placeholder="Try: <?php echo $country_code ?: 'US'; ?>">Location</div></th>
<th><div data-toggle="tooltip" title="Pod language detected from their main page text.">Language</div></th>
<th><div data-toggle="tooltip" title="External Social Networks this pod can post to." class="filter-false">Services</div></th>
<th><div data-toggle="tooltip" title="Click for more information about this pod from the pod host (podmin).">Info</div></th>
</tr>
</thead>
<tbody>
......@@ -71,9 +71,9 @@ try {
$tip = "Over the last {$humanmonitored} pod uptime was {$pod['uptime_alltime']}% and response time from Los Angeles was {$pod['latency']}ms, with a SSL cert that expires {$humansslexpire}. This pod was last checked {$humanlastcheck}";
if (($_COOKIE['domain'] ?? null) === $pod['domain']) {
echo '<tr><td class="bg-secondary"><a title="This is the last pod you visited from this site. ' . $tip . '" class="text-warning url" data-toggle="tooltip" data-placement="bottom" target="_self" href="/go.php?domain=' . $pod['domain'] . '">' . $pod['domain'] . '</a></td>';
echo '<tr><td class="bg-secondary"><a title="This is the last pod you visited from this site. ' . $tip . '" class="text-warning url" data-toggle="tooltip" target="_self" href="/go.php?domain=' . $pod['domain'] . '">' . $pod['domain'] . '</a></td>';
} else {
echo '<tr><td><a title="' . $tip . '" class="text-success url" data-toggle="tooltip" data-placement="bottom" target="_self" href="/go.php?domain=' . $pod['domain'] . '">' . $pod['domain'] . '</a></td>';
echo '<tr><td><a title="' . $tip . '" class="text-success url" data-toggle="tooltip" target="_self" href="/go.php?domain=' . $pod['domain'] . '">' . $pod['domain'] . '</a></td>';
}
if ($pod['shortversion'] > $pod['masterversion']) {
......@@ -93,7 +93,7 @@ try {
} elseif (version_compare($pod['shortversion'] ?? '', $pod['masterversion'] ?? '', '<')) {
$classver = 'text-warning';
}
echo '<td class="' . $classver . '"><div title="' . $pre . ' version: ' . $pod['shortversion'] . ' master version is: ' . ($pod['masterversion'] ?: 'unknown') . '" data-toggle="tooltip" data-placement="bottom">' . $version . '</div></td>';
echo '<td class="' . $classver . '"><div title="' . $pre . ' version: ' . $pod['shortversion'] . ' master version is: ' . ($pod['masterversion'] ?: 'unknown') . '" data-toggle="tooltip">' . $version . '</div></td>';
echo '<td>' . $pod['softwarename'] . '</td>';
echo '<td><a href="#" data-featherlight-variant="table-responsive" data-featherlight="podstat-uptime.php?domain=' . $pod['domain'] . '">' . ($pod['uptime_alltime'] > 0 ? $pod['uptime_alltime'] . '%' : '') . '</a></td>';
......@@ -105,22 +105,22 @@ try {
echo '<td>' . ($pod['active_users_monthly'] > 0 ? $pod['active_users_monthly'] : '') . '</td>';
echo '<td>' . ($pod['local_posts'] > 0 ? $pod['local_posts'] : '') . '</td>';
echo '<td>' . ($pod['comment_counts'] > 0 ? $pod['comment_counts'] : '') . '</td>';
echo '<td><div title="This pod has been monitored ' . $humanmonitored . '" data-toggle="tooltip" data-placement="bottom">' . $pod['monthsmonitored'] . '</div></td>';
echo '<td><div title="This pod has been monitored ' . $humanmonitored . '" data-toggle="tooltip">' . $pod['monthsmonitored'] . '</div></td>';
echo '<td><a href="#" data-featherlight-variant="table-responsive" data-featherlight="rate.php?domain=' . $pod['domain'] . '">' . $pod['userrating'] . '</a></td>';
echo '<td><div title="Pod Status is: ' . PodStatus::getKey((int) $pod['status']) . '" data-toggle="tooltip" data-placement="bottom">' . $pod['score'] . '</div></td>';
echo '<td><div title="Pod Status is: ' . PodStatus::getKey((int) $pod['status']) . '" data-toggle="tooltip">' . $pod['score'] . '</div></td>';
echo '<td>' . ($pod['dnssec'] ? 'Y' : 'N') . '</td>';
if ($country_code === $pod['country']) {
echo '<td class="text-success" data-toggle="tooltip" data-placement="bottom" title="Country: ' . ($pod['countryname'] ?? 'n/a') . ' City: ' . ($pod['city'] ?? 'n/a') . ' State: ' . ($pod['state'] ?? 'n/a') . '"><b>' . $pod['country'] . '</b></td>';
echo '<td class="text-success" data-toggle="tooltip" title="Country: ' . ($pod['countryname'] ?? 'n/a') . ' City: ' . ($pod['city'] ?? 'n/a') . ' State: ' . ($pod['state'] ?? 'n/a') . '"><b>' . $pod['country'] . '</b></td>';
} else {
echo '<td data-toggle="tooltip" data-placement="bottom" title="Country: ' . ($pod['countryname'] ?? 'n/a') . ' City: ' . ($pod['city'] ?? 'n/a') . ' State: ' . ($pod['state'] ?? 'n/a') . '">' . $pod['country'] . '</td>';
echo '<td data-toggle="tooltip" title="Country: ' . ($pod['countryname'] ?? 'n/a') . ' City: ' . ($pod['city'] ?? 'n/a') . ' State: ' . ($pod['state'] ?? 'n/a') . '">' . $pod['country'] . '</td>';
}
echo '<td>' . ($pod['detectedlanguage'] ?: '') . '</td>';
echo '<td class="text-truncate">';
$pod['service_facebook'] && print '<div class="smlogo smlogo-facebook" title="Publish to Facebook"></div>';
$pod['service_twitter'] && print '<div class="smlogo smlogo-twitter" title="Publish to Twitter"></div>';
$pod['service_tumblr'] && print '<div class="smlogo smlogo-tumblr" title="Publish to Tumblr"></div>';
$pod['service_wordpress'] && print '<div class="smlogo smlogo-wordpress" title="Publish to WordPress"></div>';
$pod['service_xmpp'] && print '<div class="smlogo smlogo-xmpp"><img src="/images/icon-xmpp.png" width="16" height="16" title="XMPP chat server" alt="XMPP chat server"></div>';
$pod['service_facebook'] && print '<div class="smlogo smlogo-facebook" data-toggle="tooltip" title="Publish to Facebook"></div>';
$pod['service_twitter'] && print '<div class="smlogo smlogo-twitter" data-toggle="tooltip" title="Publish to Twitter"></div>';
$pod['service_tumblr'] && print '<div class="smlogo smlogo-tumblr" data-toggle="tooltip" title="Publish to Tumblr"></div>';
$pod['service_wordpress'] && print '<div class="smlogo smlogo-wordpress" data-toggle="tooltip" title="Publish to WordPress"></div>';
$pod['service_xmpp'] && print '<div class="smlogo smlogo-xmpp"><img src="/images/icon-xmpp.png" width="16" height="16" data-toggle="tooltip" title="XMPP chat server" alt="XMPP chat server"></div>';
echo '</td>';
$podmin_statement = htmlentities($pod['podmin_statement'] ?? '', ENT_QUOTES);
......@@ -129,11 +129,11 @@ try {
?>
</tbody>
</table>
<div class="pager">
<span class="first pagination" title="First page">&laquo;</span>
<span class="prev pagination" title="Previous page">&lt;</span>
<span class="pagedisplay"></span>
<span class="next pagination" title="Next page">&gt;</span>
<span class="last pagination" title="Last page">&raquo;</span>
</div>
</div>
<div class="pager">
<span class="first pagination" title="First page">&laquo;</span>
<span class="prev pagination" title="Previous page">&lt;</span>
<span class="pagedisplay"></span>
<span class="next pagination" title="Next page">&gt;</span>
<span class="last pagination" title="Last page">&raquo;</span>
</div>
statsviewjs.php
View file @ 5b751f3c
......@@ -84,7 +84,7 @@ try {
borderColor: "#2ecc71",
backgroundColor: "#2ecc71",
borderWidth: 2,
pointHoverRadius: 2
pointHoverRadius: 6
}]
},
options: {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment