Skip to content

GitLab

Unverified Commit 4d45f5b0 authored by dmorley's avatar dmorley Committed by GitHub
Browse files

Add filter, paging, update menus to make them mobile (#161) 

* Add filter, paging, update menus to make them mobile

* remove legacy items unused

* switch from images to css and bigger for fingers

* allow search/filter podmin data

* cleanup

* css important there

* footer mobile fix

* changelog
parent 89d41878
Hide whitespace changes
Inline Side-by-side
Showing with 261 additions and 88 deletions
Changelog.md
View file @ 4d45f5b0
......@@ -14,6 +14,8 @@
## End Users
* Show version and update in full view cleaner https://github.com/diasporg/Poduptime/issues/143
* Edit will send to email on file and be less delay, runner of site does not really have anyway to verify email address
* Filter and search on the columns of data
* Paginate the results so they fit per page
# 2.2.0
......
composer.json
View file @ 4d45f5b0
......@@ -9,6 +9,7 @@
"gabordemooij/redbean": "^5.0",
"jaybizzle/crawler-detect" :"1.*",
"commerceguys/enum": "^1.0",
"twbs/bootstrap": "^4.1.0",
"php" : "^7.2"
},
"autoload": {
......
composer.lock
View file @ 4d45f5b0
......@@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
"This file is @generated automatically"
],
"content-hash": "e5874c9bc9ad133f4e558cf61972ae67",
"content-hash": "d9076f2351a2d4457ed852c180ed1864",
"packages": [
{
"name": "commerceguys/enum",
......@@ -87,16 +87,16 @@
},
{
"name": "jaybizzle/crawler-detect",
"version": "v1.2.63",
"version": "v1.2.64",
"source": {
"type": "git",
"url": "https://github.com/JayBizzle/Crawler-Detect.git",
"reference": "3566bc69d0839ab2dfd739a660b00f25a6f02031"
"reference": "f62200a42fdc5ea53c873f38c123a8e6b54ca0de"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/JayBizzle/Crawler-Detect/zipball/3566bc69d0839ab2dfd739a660b00f25a6f02031",
"reference": "3566bc69d0839ab2dfd739a660b00f25a6f02031",
"url": "https://api.github.com/repos/JayBizzle/Crawler-Detect/zipball/f62200a42fdc5ea53c873f38c123a8e6b54ca0de",
"reference": "f62200a42fdc5ea53c873f38c123a8e6b54ca0de",
"shasum": ""
},
"require": {
......@@ -132,7 +132,7 @@
"crawlerdetect",
"php crawler detect"
],
"time": "2018-05-21T19:56:44+00:00"
"time": "2018-06-22T20:32:56+00:00"
},
{
"name": "noplanman/xec",
......@@ -185,6 +185,57 @@
"timeout"
],
"time": "2017-03-12T19:16:23+00:00"
},
{
"name": "twbs/bootstrap",
"version": "v4.1.0",
"source": {
"type": "git",
"url": "https://github.com/twbs/bootstrap.git",
"reference": "8f7bd419935adfcd53c471a0202083464800619e"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/twbs/bootstrap/zipball/8f7bd419935adfcd53c471a0202083464800619e",
"reference": "8f7bd419935adfcd53c471a0202083464800619e",
"shasum": ""
},
"replace": {
"twitter/bootstrap": "self.version"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-master": "3.3.x-dev"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Jacob Thornton",
"email": "jacobthornton@gmail.com"
},
{
"name": "Mark Otto",
"email": "markdotto@gmail.com"
}
],
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
"homepage": "https://getbootstrap.com/",
"keywords": [
"JS",
"css",
"framework",
"front-end",
"mobile-first",
"responsive",
"sass",
"web"
],
"time": "2018-04-09T16:00:23+00:00"
}
],
"packages-dev": [],
......
css/poduptime.css
View file @ 4d45f5b0
body {
padding-top: 54px;
}
.sub-header {
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.sidebar {
background-color: #f5f5f5;
background-color: #fff;
border-right: 1px solid #eee;
bottom: 0;
display: block;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
padding: 10px;
position: fixed;
top: 54px;
z-index: 1000;
top: 56px;
}
.sidebar .nav {
margin-bottom: 20px;
......@@ -95,9 +90,99 @@ table {
#facebox .content {
width: 800px !important;
}
.tablesorter-pager .btn-group-sm .btn {
font-size: 1.2em; /* make pager arrows more visible */
}
.tablesorter-filter-row td {
background: #eee;
line-height: normal;
text-align: center; /* center the input */
-webkit-transition: line-height 0.1s ease;
-moz-transition: line-height 0.1s ease;
-o-transition: line-height 0.1s ease;
transition: line-height 0.1s ease;
}
.tablesorter-filter-row .disabled {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: not-allowed;
}
.tablesorter-filter-row.hideme td {
/*** *********************************************** ***/
/*** change this padding to modify the thickness ***/
/*** of the closed filter row (height = padding x 2) ***/
padding: 1px;
/*** *********************************************** ***/
margin: 0;
line-height: 0;
cursor: pointer;
}
.tablesorter-filter-row.hideme * {
height: 1px;
min-height: 0;
border: 0;
padding: 0;
margin: 0;
/* don't use visibility: hidden because it disables tabbing */
opacity: 0;
filter: alpha(opacity=0);
}
/* filters */
.tablesorter-filter {
width: 98%;
height: inherit;
margin: 1px;
padding: 1px;
background-color: #fff;
border: 1px solid #bbb;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: height 0.1s ease;
-moz-transition: height 0.1s ease;
-o-transition: height 0.1s ease;
transition: height 0.1s ease;
}
.pagination {
display: inline-block;
color: black;
float: left;
padding: 8px 16px;
margin: 0 4px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
cursor: pointer;
}
.pagination.disabled {
color: #f0f0f0;
}
.pagedisplay {
display: inline-block;
color: black;
float: left;
padding: 8px 16px !important;
margin: 0 4px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
cursor: pointer;
}
.tablesorter-header {
background-size: 10px 15px !important;
}
.modal-xlg {
max-width: 92%;
}
db/edit.php
View file @ 4d45f5b0
......@@ -141,3 +141,4 @@ if ('save' === $_action) {
</div>
<?php
index.php
View file @ 4d45f5b0
......@@ -50,72 +50,71 @@ $navs = [
['text' => 'Simple View', 'href' => '/', 'active' => $simpleview],
['text' => 'Detailed View', 'href' => '/?detailedview', 'active' => $detailedview],
['text' => 'Map View', 'href' => '/?mapview', 'active' => $mapview],
['text' => 'Network Stats', 'href' => '/?statsview', 'active' => $statsview],
],
'podmin' => [
['text' => 'Network Stats View', 'href' => '/?statsview', 'active' => $statsview],
['text' => 'Add a pod', 'href' => '/?podmin', 'active' => $podmin],
['text' => 'Edit a pod', 'href' => '/?podminedit', 'active' => $podminedit],
['text' => 'Host a pod', 'href' => 'https://diasporafoundation.org/', 'active' => false],
],
'links' => [
['text' => 'Github', 'href' => 'https://github.com/diasporg/Poduptime', 'active' => false],
['text' => 'Contact', 'href' => 'https://dia.so/support', 'active' => false],
['text' => 'Wiki', 'href' => 'https://github.com/diasporg/Poduptime/wiki', 'active' => false],
['text' => 'API', 'href' => 'https://github.com/diasporg/Poduptime/wiki/API', 'active' => false],
['text' => 'How to host a pod', 'href' => 'https://diasporafoundation.org/', 'active' => false],
],
];
?>
<nav class="navbar navbar-inverse bg-primary fixed-top">
<button class="navbar-toggler navbar-toggler-right hidden-md-up" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/">Poduptime</a>
<div class="collapse navbar-toggleable hidden-md-up" id="navbar">
<ul class="navbar-nav">
<?php
foreach ($navs['views'] as $nav_item) {
printf(
'<li class="nav-item"><a class="nav-link%1$s" href="%2$s">%3$s%4$s</a></li>',
$nav_item['active'] ? ' active' : '',
$nav_item['href'],
$nav_item['text'],
$nav_item['active'] ? ' <span class="sr-only">(current)</span>' : ''
);
}
?>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="sidebar col-md-3 col-lg-1 hidden-sm-down">
<?php foreach ($navs as $nav) : ?>
<ul class="nav nav-pills flex-column">
<?php
/** @var array $nav */
/** @var array $nav_item */
foreach ($nav as $nav_item) {
printf(
'<li class="nav-item"><a class="nav-link%1$s" href="%2$s">%3$s%4$s</a></li>',
$nav_item['active'] ? ' active' : '',
$nav_item['href'],
$nav_item['text'],
$nav_item['active'] ? ' <span class="sr-only">(current)</span>' : ''
);
}
?>
</ul>
<hr>
<?php endforeach; ?>
<p>
<small>Data refreshed: <br><?php echo date('M d Y H:i', filemtime($lastfile)); ?> EST</small>
</p>
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<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>
<?php
foreach ($navs['links'] as $nav_item) {
printf(
'<a href="%2$s">%3$s%4$s</a> | ',
$nav_item['active'] ? ' active' : '',
$nav_item['href'],
$nav_item['text'],
$nav_item['active'] ? ' <span class="sr-only">(current)</span>' : ''
);
}
?>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Views</h4>
<ul class="navbar-nav">
<?php
foreach ($navs['views'] as $nav_item) {
printf(
'<li class="nav-item"><a class="nav-link%1$s" href="%2$s">%3$s%4$s</a></li>',
$nav_item['active'] ? ' active' : '',
$nav_item['href'],
$nav_item['text'],
$nav_item['active'] ? ' <span class="sr-only">(current)</span>' : ''
);
}
?>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
<a href="/" class="navbar-brand d-flex align-items-center">
<strong>Poduptime</strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="main col-md-10 col-lg-11 offset-md-3 offset-lg-1">
<a href="go.php" class="btn btn-sm btn-outline-warning">Confused on how to find a pod? Auto Pick </a>
</header>
<main role="main">
<div class="main">
<a href="go.php" class="btn btn-sm btn-success">Confused? Auto pick a pod for you.</a>
<div class="row placeholders">
</div>
<?php
......@@ -138,6 +137,11 @@ $navs = [
</div>
</div>
</div>
</main>
<br>
<footer class="bd-footer text-muted">
<p>Data refreshed: <?php echo date('M d Y H:i', filemtime($lastfile)); ?> EST </p>
</footer>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/tablesorter/dist/js/jquery.tablesorter.combined.min.js"></script>
<script src="js/podup.js"></script>
......
js/podup.js
View file @ 4d45f5b0
$('.tablesorter-bootstrap').tablesorter()
var $table = $('.tablesorter'),
pagerOptions = {
container: $(".pager"),
output: '{startRow} - {endRow}',
removeRows: true,
cssGoto: '.gotoPage'
};
$table
.tablesorter({
theme: 'default',
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
widthFixed: true,
widgets: ['zebra', 'filter', 'saveSort','resizable', 'columns'],
})
.tablesorterPager(pagerOptions);
$('table').trigger('pageSize', 20);
$(document).ready(function(){
$.facebox.settings.closeImage = 'bower_components/facebox/src/closelabel.png'
$.facebox.settings.loadingImage = 'bower_components/facebox/src/loading.gif'
......
podmin.php
View file @ 4d45f5b0
......@@ -29,8 +29,8 @@ Want your pod listed? Or to claim a listed pod?<br>
</div>
<div class="form-check">
<label class="custom-control custom-checkbox">
<input type="checkbox" name="podmin_notify" class="custom-control-input _form-check-input" aria-describedby="notify-hidden-help" checked>
<label class="custom-checkbox">
<input type="checkbox" name="podmin_notify" class="_form-check-input" aria-describedby="notify-hidden-help" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Notify if pod falls to hidden status</span>
</label>
......
show.php
View file @ 4d45f5b0
......@@ -19,17 +19,16 @@ try {
?>
<meta property="og:title" content="<?php echo count($pods); ?> Federated Pods listed, Come see the privacy aware social networks."/>
<div class="hidden-sm-up">Scroll right or rotate device for more</div>
<div class="table-responsive">
<table class="table table-striped table-bordered table-sm tablesorter-bootstrap table-hover">
<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>
<table class="table table-striped table-bordered table-sm tablesorter table-hover">
<thead class="thead-inverse">
<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="Percent of the time the pod is online.">Uptime %</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><a data-toggle="tooltip" data-placement="bottom" title="Pod location, based on IP Geolocation.">Location</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="External Social Networks this pod can post to.">Services Offered</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>
</tr>
</thead>
......@@ -64,9 +63,15 @@ try {
$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></td>';
echo '<td>' . ($pod['podmin_statement'] ? '<a tabindex="0" data-toggle="popover" data-trigger="focus" data-placement="left" title="Podmin Statement" data-html="true" data-content="' . htmlentities($pod['podmin_statement'], ENT_QUOTES) . '">&#128172;</a>' : '&nbsp;') . '</td></tr>';
echo '<td data-text="'. htmlentities($pod['podmin_statement'], ENT_QUOTES) .'">' . ($pod['podmin_statement'] ? '<a tabindex="0" data-toggle="popover" data-trigger="focus" data-placement="left" title="Podmin Statement" data-html="true" data-content="' . htmlentities($pod['podmin_statement'], ENT_QUOTES) . '">&#128172;</a>' : '&nbsp;') . '</td></tr>';
}
?>
</tbody>
</table>
<div class="pager">
<span class="first pagination" alt="First" title="First page">&laquo;</span>
<span class="prev pagination" alt="Prev" title="Previous page">&lt;</span>
<span class="pagedisplay"></span>
<span class="next pagination" alt="Next" title="Next page">&gt;</span>
<span class="last pagination" alt="Last" title= "Last page">&raquo;</span>
</div>
showfull.php
View file @ 4d45f5b0
......@@ -17,9 +17,9 @@ 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>
<!-- /* Copyright (c) 2011, David Morley. This file is licensed under the Affero General Public License version 3 or later. See the COPYRIGHT file. */ -->
<div class="table-responsive">
<table class="table table-striped table-bordered table-sm tablesorter-bootstrap table-hover tfont">
<table class="table table-striped table-bordered table-sm tablesorter table-hover tfont">
<thead class="thead-inverse">
<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>
......@@ -33,13 +33,13 @@ try {
<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><a data-toggle="tooltip" data-placement="bottom" title="Number of total comments on this pod.">Comments</a></th>
<th><a data-toggle="tooltip" data-placement="bottom" title="How many months have we been watching this pod.">Months</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><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="External Social Networks this pod can post to.">Services</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 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>
</tr>
</thead>
......@@ -71,9 +71,9 @@ try {
echo '<td class="' . $classver . '"><div title="' . $pre . ' version: ' . $pod['shortversion'] . ' master version is: ' . ($pod['masterversion'] ? $pod['masterversion'] : 'unknown') . '" data-toggle="tooltip" data-placement="bottom">' . $version . '</div></td>';
echo '<td>' . $pod['softwarename'] . '</td>';
echo '<td><a rel="facebox" href="podstat.php?domain=' . $pod['domain'] . '">' . ($pod['uptime_alltime'] > 0 ? $pod['uptime_alltime'] . '%' : '') . '</a></td>';
echo '<td>' . ($pod['ipv6'] ? '&#10003;' : '') . '</td>';
echo '<td>' . ($pod['ipv6'] ? 'Y' : 'N') . '</td>';
echo '<td>' . ($pod['latency'] > 0 ? $pod['latency'] : '') . '</td>';
echo '<td>' . ($pod['signup'] ? '&#10003;' : '') . '</td>';
echo '<td>' . ($pod['signup'] ? 'Y' : 'N') . '</td>';
echo '<td>' . ($pod['total_users'] > 0 ? $pod['total_users'] : '') . '</td>';
echo '<td>' . ($pod['active_users_halfyear'] > 0 ? $pod['active_users_halfyear'] : '') . '</td>';
echo '<td>' . ($pod['active_users_monthly'] > 0 ? $pod['active_users_monthly'] : '') . '</td>';
......@@ -82,7 +82,7 @@ try {
echo '<td><div title="Last Check ' . $pod['date_updated'] . '" data-toggle="tooltip" data-placement="bottom">' . $pod['monthsmonitored'] . '</div></td>';
echo '<td><a rel="facebox" href="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>' . ($pod['dnssec'] ? '&#10003;' : '') . '</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="City: ' . ($pod['city'] ?? 'n/a') . ' State: ' . ($pod['state'] ?? 'n/a') . '"><b>' . $pod['country'] . '</b></td>';
} else {
......@@ -96,9 +96,15 @@ try {
$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>';
echo '</td>';
echo '<td>' . ($pod['podmin_statement'] ? '<a tabindex="0" data-toggle="popover" data-trigger="focus" data-placement="left" title="Podmin Statement" data-html="true" data-content="' . htmlentities($pod['podmin_statement'], ENT_QUOTES) . '">&#128172;</a>' : '&nbsp;') . '</td></tr>';
echo '<td data-text="'. htmlentities($pod['podmin_statement'], ENT_QUOTES) .'">' . ($pod['podmin_statement'] ? '<a tabindex="0" data-toggle="popover" data-trigger="focus" data-placement="left" title="Podmin Statement" data-html="true" data-content="' . htmlentities($pod['podmin_statement'], ENT_QUOTES) . '">&#128172;</a>' : '&nbsp;') . '</td></tr>';
}
?>
</tbody>
</table>
<div class="pager">
<span class="first pagination" alt="First" title="First page">&laquo;</span>
<span class="prev pagination" alt="Prev" title="Previous page">&lt;</span>
<span class="pagedisplay"></span>
<span class="next pagination" alt="Next" title="Next page">&gt;</span>
<span class="last pagination" alt="Last" title= "Last page">&raquo;</span>
</div>
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