Commit 17e6d253 authored by noplanman's avatar noplanman Committed by GitHub

Merge pull request #103 from noplanman/102-optimise_bootstrap_usage

Optimise bootstrap usage
parents 9d397237 e4b493d9
......@@ -19,7 +19,7 @@
"tests"
],
"dependencies": {
"bootstrap": "v4.0.0-alpha.5",
"bootstrap": "v4.0.0-alpha.6",
"jquery-ui": "^1.12.1",
"tablesorter": "jquery.tablesorter#^2.28.3",
"leaflet": "^1.0.2",
......
......@@ -13,7 +13,8 @@ $numrows = pg_num_rows($result);
<meta property="og:title" content="<?php echo $numrows; ?> #Diaspora Pods listed, Come see the privacy aware social network."/><?php echo $numrows; ?> pods that are open for signup now.
<meta charset="utf-8">
<!-- /* Copyright (c) 2011, David Morley. This file is licensed under the Affero General Public License version 3 or later. See the COPYRIGHT file. */ -->
<table id="myTable" class="table table-striped table-sm tablesorter table-hover tfont">
<div class="table-responsive">
<table class="table table-striped table-sm tablesorter table-hover tfont">
<thead>
<tr>
<th>Pod<a class="tipsy" title="A pod is a site for you to set up your account.">?</a></th>
......@@ -99,3 +100,4 @@ $numrows = pg_num_rows($result);
?>
</tbody>
</table>
</div>
......@@ -2,9 +2,9 @@
* Base structure
*/
/* Move down content because we have a fixed navbar that is 50px tall */
/* Move down content because we have a fixed navbar that is 54px tall */
body {
padding-top: 50px;
padding-top: 54px;
}
......@@ -13,59 +13,32 @@ body {
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
border: 0;
padding-bottom: 10px;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
background-color: #f5f5f5;
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;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
.sidebar .nav {
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
.sidebar .nav .nav-link {
padding: .3em .7em;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #696969;
}
/*
* Main content
......@@ -74,13 +47,6 @@ body {
.main {
padding: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 80px;
}
}
/*
* Placeholder dashboard ideas
......@@ -97,7 +63,6 @@ body {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 50%;
display: inline-block;
}
......@@ -28,45 +28,81 @@ $simpleview = !($detailedview || $mapview || $cleanup || $podmin || $podminedi
<meta http-equiv="x-ua-compatible" content="ie=edge">
</head>
<body>
<nav class="navbar navbar-dark navbar-fixed-top bg-primary">
<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Poduptime</a>
<div id="navbar" class="text-muted collapse">
<nav class="nav navbar-nav float-xs-left">
<a class="nav-item nav-link<?php $simpleview && print ' active'; ?>" href="/">Simple View</a>
<a class="nav-item nav-link<?php $detailedview && print ' active'; ?>" href="/?detailedview">Detailed View</a>
<a class="nav-item nav-link<?php $mapview && print ' active'; ?>" href="/?mapview">Map View</a>
<a class="nav-item nav-link<?php $statsview && print ' active'; ?>" href="/?statsview">Network Stats</a>
</nav>
<?php
$navs = [
'views' => [
['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' => '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],
],
];
?>
<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">
<ul class="nav nav-sidebar">
<li<?php $simpleview && print ' class="active"'; ?>><a href="/">Simple View<?php $simpleview && print ' <span class="sr-only bg-dark">(current)</span>'; ?></a></li>
<li<?php $detailedview && print ' class="active"'; ?>><a href="/?detailedview">Detailed View<?php $detailedview && print ' <span class="sr-only bg-dark">(current)</span>'; ?></a></li>
<li<?php $mapview && print ' class="active"'; ?>><a href="/?mapview">Map View<?php $mapview && print ' <span class="sr-only bg-dark">(current)</span>'; ?></a></li>
<li<?php $statsview && print ' class="active"'; ?>><a href="/?statsview">Network Stats<?php $statsview && print ' <span class="sr-only bg-dark">(current)</span>'; ?></a></li>
</ul>
<ul class="nav nav-sidebar">
<li<?php $podmin && print ' class="active"'; ?>><a href="/?podmin">Add a pod<?php $podmin && print ' <span class="sr-only bg-dark">(current)</span>'; ?></a></li>
<li<?php $podminedit && print ' class="active"'; ?>><a href="/?podminedit">Edit a pod<?php $podminedit && print ' <span class="sr-only bg-dark">(current)</span>'; ?></a></li>
<li><a href="https://diasporafoundation.org/">Host a pod</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="https://github.com/diasporg/Poduptime">Github</a></li>
<li><a href="https://dia.so/support">Contact</a></li>
<li><a href="https://github.com/diasporg/Poduptime/wiki">Wiki</a></li>
<li><a href="https://github.com/diasporg/Poduptime/wiki/API">API</a></li>
</ul>
<p><small>Data refreshed: <br><?php echo date('M d y H:i', filemtime($lastfile)); ?> EST</small></p>
<div class="sidebar col-md-3 col-lg-2 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>
</div>
<div class="main offset-md-1">
<div class="main col-md-9 col-lg-10 offset-md-3 offset-lg-2">
<a href="go.php" class="btn btn-sm btn-success">Confused? Auto pick a pod for you.</a>
<div class="row placeholders">
</div>
<div class="table-responsive">
<?php
if ($detailedview) {
include_once __DIR__ . '/showfull.php';
......@@ -84,7 +120,6 @@ $simpleview = !($detailedview || $mapview || $cleanup || $podmin || $podminedi
include_once __DIR__ . '/show.php';
}
?>
</div>
</div>
</div>
</div>
......
......@@ -2,7 +2,7 @@ $(document).ready(function(){
$.facebox.settings.closeImage = 'bower_components/facebox/src/closelabel.png'
$.facebox.settings.loadingImage = 'bower_components/facebox/src/loading.gif'
$('a[rel*=facebox]').facebox()
$('#myTable').tablesorter()
$('.tablesorter').tablesorter()
$('[data-toggle="tooltip"]').tooltip()
$(function () {
$('[data-toggle="popover"]').popover()
......
......@@ -2,9 +2,42 @@
Want your pod listed? Or to claim a listed pod?<br>
<br>
<form action="db/add.php" method="get">
<label>Pod Domain Name: <input type="text" name="domain" class="xlarge span4 required" placeholder="domain.com"></label>*<br>
<label>Podmin Statement (You can include links to your terms and policies and information about your pod you wish to share with users. HTML is ok.) <br><textarea cols="100" rows="7" name="podmin_statement"></textarea></label><br>
<label>Your Email: <input type="text" name="email" class="xlarge span4" placeholder="user@domain.com"></label><br>
<label>Notify if pod falls to hidden status? <input type="checkbox" name="podmin_notify" CHECKED ></label><br>
<input type="submit" value="submit">
<div class="form-group row">
<label for="domain-input" class="col-2 col-form-label">Pod Domain *</label>
<div class="col-10">
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">https://</div>
<input type="text" id="domain-input" name="domain" class="form-control" placeholder="domain.com" aria-describedby="domain-help" aria-required="true" required>
</div>
<small id="domain-help" class="form-text text-muted">The base domain name of your pod (without trailing slash).</small>
</div>
</div>
<div class="form-group row">
<label for="email-input" class="col-2 col-form-label">Your Email</label>
<div class="col-10">
<input type="email" id="email-input" name="email" class="form-control" placeholder="user@domain.com" aria-describedby="email-help">
<small id="email-help" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</div>
<div class="form-group">
<label for="podmin-statement-textarea">Podmin Statement</label>
<textarea id="podmin-statement-textarea" name="podmin_statement" class="form-control" rows="7" aria-describedby="podmin-statement-help"></textarea>
<small id="podmin-statement-help" class="form-text text-muted">You can include links to your terms and policies and information about your pod you wish to share with users. HTML is ok.</small>
</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>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Notify if pod falls to hidden status</span>
</label>
<small id="notify-hidden-help" class="form-text text-muted">You will get a notification if the pod gets hidden due to a bad score.</small>
</div>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<form action="db/gettoken.php" method="post">
<label>Pod Domain Name: <input type="text" name="domain"></label>
<label>Registered Email: <input type="text" name="email" placeholder="Ok to leave blank if you forgot"></label>
<input type="submit" value="send">
<div class="form-group row">
<label for="domain-input" class="col-2 col-form-label">Pod Domain *</label>
<div class="col-10">
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">https://</div>
<input type="text" id="domain-input" name="domain" class="form-control" placeholder="domain.com" aria-describedby="domain-help" aria-required="true" required>
</div>
<small id="domain-help" class="form-text text-muted">The base domain name of your pod (without trailing slash).</small>
</div>
</div>
<div class="form-group row">
<label for="email-input" class="col-2 col-form-label">Registered Email</label>
<div class="col-10">
<input type="email" id="email-input" name="email" class="form-control" placeholder="user@domain.com" aria-describedby="email-help">
<small id="email-help" class="form-text text-muted">Ok to leave blank if you forgot.</small>
</div>
</div>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
......@@ -18,7 +18,8 @@ $numrows = pg_num_rows($result);
<meta property="og:title" content="<?php echo $numrows; ?> Federated Pods listed, Come see the privacy aware social networks."/>
<div class="hidden-sm-up">Scroll right or rotate device for more</div>
<table class="table table-striped table-sm tablesorter table-hover" id="myTable">
<div class="table-responsive">
<table class="table table-striped 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>
......@@ -65,3 +66,4 @@ $numrows = pg_num_rows($result);
?>
</tbody>
</table>
</div>
......@@ -18,7 +18,8 @@ $numrows = pg_num_rows($result);
<meta property="og:title" content="<?php echo $numrows; ?> Federated Pods listed, Come see the privacy aware social networks."/>
<!-- /* Copyright (c) 2011, David Morley. This file is licensed under the Affero General Public License version 3 or later. See the COPYRIGHT file. */ -->
<table id="myTable" class="table table-striped table-sm tablesorter table-hover tfont">
<div class="table-responsive">
<table class="table table-striped 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>
......@@ -102,3 +103,4 @@ $numrows = pg_num_rows($result);
?>
</tbody>
</table>
</div>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-6 col-md-4">Users by network<br>
<div class="col-xs-12 col-sm-6 col-lg-4 text-center">Users by network<br>
<canvas id="total_network_users" width="100" height="100"></canvas>
</div>
<div class="col-6 col-md-4">Pods by network<br>
<div class="col-xs-12 col-sm-6 col-lg-4 text-center">Pods by network<br>
<canvas id="total_network_pods" width="100" height="100"></canvas>
</div>
<div class="col-6 col-md-4">Uptime by network<br>
<div class="col-xs-12 col-sm-6 col-lg-4 text-center">Uptime by network<br>
<canvas id="total_network_uptime" width="100" height="100"></canvas>
</div>
</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