Add a search bar to simplify looking for a bridge. (#494)

* Add a search bar to simplify looking for a bridge.

* Fix phpcs line length.

* Change the phpcs config.
This commit is contained in:
Teromene 2017-03-21 20:31:10 +00:00 committed by GitHub
parent 2ac0469750
commit 1a4c3f4418
6 changed files with 78 additions and 7 deletions

View file

@ -69,7 +69,7 @@ EOD;
<head> <head>
<meta charset="{$charset}"> <meta charset="{$charset}">
<title>{$title}</title> <title>{$title}</title>
<link href="css/HtmlFormat.css" rel="stylesheet"> <link href="static/HtmlFormat.css" rel="stylesheet">
<meta name="robots" content="noindex, follow"> <meta name="robots" content="noindex, follow">
</head> </head>
<body> <body>

View file

@ -198,10 +198,18 @@ $formats = Format::searchInformation();
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Rss-bridge" /> <meta name="description" content="Rss-bridge" />
<title>RSS-Bridge</title> <title>RSS-Bridge</title>
<link href="css/style.css" rel="stylesheet"> <link href="static/style.css" rel="stylesheet">
<script src="static/search.js"></script>
<noscript>
<style>
.searchbar {
display: none;
}
</style>
</noscript>
</head> </head>
<body> <body onload="search()">
<?php <?php
$status = ''; $status = '';
if(defined('DEBUG') && DEBUG === true){ if(defined('DEBUG') && DEBUG === true){
@ -214,6 +222,13 @@ $formats = Format::searchInformation();
<h2>·Reconnecting the Web·</h2> <h2>·Reconnecting the Web·</h2>
<p class="status">{$status}</p> <p class="status">{$status}</p>
</header> </header>
<section class="searchbar">
<h3>Search</h3>
<input type="text" name="searchfield"
id="searchfield" placeholder="Enter the bridge you want to search for"
onchange="search()" onkeyup="search()">
</section>
EOD; EOD;
$activeFoundBridgeCount = 0; $activeFoundBridgeCount = 0;
@ -231,7 +246,7 @@ EOD;
} }
echo $inactiveBridges; echo $inactiveBridges;
?> ?>
<section> <section class="footer">
<a href="https://github.com/RSS-Bridge/rss-bridge">RSS-Bridge alpha 0.2 ~ Public Domain</a><br /> <a href="https://github.com/RSS-Bridge/rss-bridge">RSS-Bridge alpha 0.2 ~ Public Domain</a><br />
<?= $activeFoundBridgeCount; ?>/<?= count($bridgeList) ?> active bridges. <br /> <?= $activeFoundBridgeCount; ?>/<?= count($bridgeList) ?> active bridges. <br />
<?php <?php

View file

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<ruleset name="RSS-Bridge Ruleset"> <ruleset name="RSS-Bridge Ruleset">
<description>Created with the PHP Coding Standard Generator. http://edorian.github.com/php-coding-standard-generator/</description> <description>Created with the PHP Coding Standard Generator. http://edorian.github.com/php-coding-standard-generator/</description>
<exclude-pattern>./css</exclude-pattern> <exclude-pattern>./static</exclude-pattern>
<exclude-pattern>./vendor</exclude-pattern> <exclude-pattern>./vendor</exclude-pattern>
<!-- Duplicate class names are not allowed --> <!-- Duplicate class names are not allowed -->
<rule ref="Generic.Classes.DuplicateClassName"/> <rule ref="Generic.Classes.DuplicateClassName"/>

27
static/search.js Normal file
View file

@ -0,0 +1,27 @@
function search() {
var searchTerm = document.getElementById('searchfield').value;
var searchableElements = document.getElementsByTagName('section');
var regexMatch = new RegExp(searchTerm, "i");
for(var i = 0; i < searchableElements.length; i++) {
var textValue = searchableElements[i].getAttribute('data-ref');
if(textValue != null) {
if(textValue.match(regexMatch) == null && searchableElements[i].style.display != "none") {
searchableElements[i].style.display = "none";
} else if(textValue.match(regexMatch) != null) {
searchableElements[i].style.display = "block";
}
}
}
}

View file

@ -52,6 +52,35 @@ header > p.status {
color: red; color: red;
} }
.searchbar {
width: 50%;
margin: auto;
}
.searchbar input[type="text"] {
width: 100%;
margin: auto;
font-size: 1.4em;
}
.searchbar input[type="text"]::placeholder {
text-align: center;
}
.searchbar > h3 {
font-size: 150%;
font-weight: bold;
color: #1182DB;
}
section { section {
background-color: #FFFFFF; background-color: #FFFFFF;
@ -65,13 +94,13 @@ section {
} }
section:last-of-type { section.footer {
opacity: 0.5; opacity: 0.5;
} }
section:last-of-type:hover { section.footer:hover {
opacity: 1; opacity: 1;