From 1a4c3f4418552de5e2efc514bdd18e1b6da5bc82 Mon Sep 17 00:00:00 2001 From: Teromene Date: Tue, 21 Mar 2017 20:31:10 +0000 Subject: [PATCH] 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. --- formats/HtmlFormat.php | 2 +- index.php | 21 ++++++++++++++++++--- phpcs.xml | 2 +- {css => static}/HtmlFormat.css | 0 static/search.js | 27 +++++++++++++++++++++++++++ {css => static}/style.css | 33 +++++++++++++++++++++++++++++++-- 6 files changed, 78 insertions(+), 7 deletions(-) rename {css => static}/HtmlFormat.css (100%) create mode 100644 static/search.js rename {css => static}/style.css (89%) diff --git a/formats/HtmlFormat.php b/formats/HtmlFormat.php index 3e5e59de..2c26a0e4 100644 --- a/formats/HtmlFormat.php +++ b/formats/HtmlFormat.php @@ -69,7 +69,7 @@ EOD; {$title} - + diff --git a/index.php b/index.php index c65917a6..5a24b537 100644 --- a/index.php +++ b/index.php @@ -198,10 +198,18 @@ $formats = Format::searchInformation(); RSS-Bridge - + + + - + ·Reconnecting the Web·

{$status}

+
+

Search

+ +
+ EOD; $activeFoundBridgeCount = 0; @@ -231,7 +246,7 @@ EOD; } echo $inactiveBridges; ?> -
+
RSS-Bridge alpha 0.2 ~ Public Domain
/ active bridges.
Created with the PHP Coding Standard Generator. http://edorian.github.com/php-coding-standard-generator/ - ./css + ./static ./vendor diff --git a/css/HtmlFormat.css b/static/HtmlFormat.css similarity index 100% rename from css/HtmlFormat.css rename to static/HtmlFormat.css diff --git a/static/search.js b/static/search.js new file mode 100644 index 00000000..3ddd99bd --- /dev/null +++ b/static/search.js @@ -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"; + + } + + } + + } + +} diff --git a/css/style.css b/static/style.css similarity index 89% rename from css/style.css rename to static/style.css index 4a0c6778..bade93f6 100644 --- a/css/style.css +++ b/static/style.css @@ -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;