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:
parent
2ac0469750
commit
1a4c3f4418
6 changed files with 78 additions and 7 deletions
|
@ -69,7 +69,7 @@ EOD;
|
|||
<head>
|
||||
<meta charset="{$charset}">
|
||||
<title>{$title}</title>
|
||||
<link href="css/HtmlFormat.css" rel="stylesheet">
|
||||
<link href="static/HtmlFormat.css" rel="stylesheet">
|
||||
<meta name="robots" content="noindex, follow">
|
||||
</head>
|
||||
<body>
|
||||
|
|
21
index.php
21
index.php
|
@ -198,10 +198,18 @@ $formats = Format::searchInformation();
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Rss-bridge" />
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<body onload="search()">
|
||||
<?php
|
||||
$status = '';
|
||||
if(defined('DEBUG') && DEBUG === true){
|
||||
|
@ -214,6 +222,13 @@ $formats = Format::searchInformation();
|
|||
<h2>·Reconnecting the Web·</h2>
|
||||
<p class="status">{$status}</p>
|
||||
</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;
|
||||
|
||||
$activeFoundBridgeCount = 0;
|
||||
|
@ -231,7 +246,7 @@ EOD;
|
|||
}
|
||||
echo $inactiveBridges;
|
||||
?>
|
||||
<section>
|
||||
<section class="footer">
|
||||
<a href="https://github.com/RSS-Bridge/rss-bridge">RSS-Bridge alpha 0.2 ~ Public Domain</a><br />
|
||||
<?= $activeFoundBridgeCount; ?>/<?= count($bridgeList) ?> active bridges. <br />
|
||||
<?php
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<ruleset name="RSS-Bridge Ruleset">
|
||||
<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>
|
||||
<!-- Duplicate class names are not allowed -->
|
||||
<rule ref="Generic.Classes.DuplicateClassName"/>
|
||||
|
|
27
static/search.js
Normal file
27
static/search.js
Normal 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";
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
|
@ -52,6 +52,35 @@ header > p.status {
|
|||
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 {
|
||||
|
||||
background-color: #FFFFFF;
|
||||
|
@ -65,13 +94,13 @@ section {
|
|||
}
|
||||
|
||||
|
||||
section:last-of-type {
|
||||
section.footer {
|
||||
|
||||
opacity: 0.5;
|
||||
|
||||
}
|
||||
|
||||
section:last-of-type:hover {
|
||||
section.footer:hover {
|
||||
|
||||
opacity: 1;
|
||||
|
Loading…
Reference in a new issue