Unverified Commit 5b751f3c authored by David Morley's avatar David Morley Committed by GitHub

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
......@@ -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>
......
......@@ -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');
}
......
......@@ -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>
This diff is collapsed.
......@@ -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