Skip to content

GitLab

Currently we have some license issues. We are working on it.

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