Added search bar to header.

This commit is contained in:
Joshua Ramon Enslin 2018-06-15 23:41:25 +02:00 committed by Stefan Rohde-Enslin
parent 916eddc099
commit 2ae4196546
5 changed files with 61 additions and 14 deletions

View File

@ -399,6 +399,10 @@ function searchMDObjects(array $arguments, array $settings):string {
$i = 0; $i = 0;
$lastToDisplay = end($toDisplay); $lastToDisplay = end($toDisplay);
// Display option to go to start
if (!in_array(0, $toDisplay)) $output .= '<a href="search.php?startwert=0' . write_get_vars(['q', 'id']) . '#mdSearchObjs">1</a>';
while ($i < $contents[0]['total']) { while ($i < $contents[0]['total']) {
if (!in_array($i, $toDisplay)) { if (!in_array($i, $toDisplay)) {
@ -408,13 +412,17 @@ function searchMDObjects(array $arguments, array $settings):string {
$output .= ' $output .= '
<a '; <a ';
if ($i == $current) $output .= ' class="navicurrent"'; if ($i == $current) $output .= ' class="navicurrent"';
$output .= ' href="search.php?startwert=' . (string)$i . write_get_vars(['q', 'id']) . '#mdSearchObjs">' . strval($i / 24) . '</a> $output .= ' href="search.php?startwert=' . (string)$i . write_get_vars(['q', 'id']) . '#mdSearchObjs">' . strval(($i / 24) + 1) . '</a>
'; ';
$i += 24; $i += 24;
if ($i == $lastToDisplay) break; if ($i == $lastToDisplay) break;
} }
// Display option to go to start
$last = $contents[0]["total"] - ($contents[0]["total"] % 24);
if (!in_array($last, $toDisplay)) $output .= '<a href="search.php?startwert=' . (string)$last . write_get_vars(['q', 'id']) . '#mdSearchObjs">' . (string)(($last / 24) + 1) . '</a>';
// Generate pagination // Generate pagination
$output .= ' $output .= '

View File

@ -28,15 +28,15 @@ function printPublicHead(array $settings, string $page = "home", string $title =
<meta http-equiv="Content-Security-Policy" content="default-src \'none\'; script-src \'self\'; connect-src \'self\' ' . $settings['mdVersion'] . '; img-src \'self\' ' . $settings['mdVersion'] . '; style-src \'self\' \'unsafe-inline\'; font-src \'self\';" /> <meta http-equiv="Content-Security-Policy" content="default-src \'none\'; script-src \'self\'; connect-src \'self\' ' . $settings['mdVersion'] . '; img-src \'self\' ' . $settings['mdVersion'] . '; style-src \'self\' \'unsafe-inline\'; font-src \'self\';" />
<title>' . $title . '</title> <title>' . $title . '</title>
<link rel="stylesheet" type="text/css" href="themes/default/default.css"> <link rel="stylesheet" type="text/css" href="themes/default/default.css" />
<link rel="stylesheet" type="text/css" href="themes/imports.css"> <link rel="stylesheet" type="text/css" href="themes/imports.css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8">'; <meta http-equiv="content-type" content="text/html;charset=utf-8" />';
$output .= $additional; $output .= $additional;
if ($icon) { if ($icon) {
$output .= ' $output .= '
<link rel="shortcut icon" sizes="16x16 32x32" href="' . $icon . '" /> <link rel="shortcut icon" href="' . $icon . '" />
'; ';
} }
@ -74,6 +74,8 @@ function printPublicHeader(string $title = "Home"):string {
<h1>' . $title . '</h1> <h1>' . $title . '</h1>
' . generateSearchBar() . '
</header> </header>
'; ';
@ -190,4 +192,21 @@ function generatePublicNav($pages):string {
return $output; return $output;
} }
/**
* Function for printing the search bar.
*
* @return string
*/
function generateSearchBar():string {
$output = '
<form action="search.php" method="GET">
<input type="search" name="q" />
</form>
';
return $output;
}
?> ?>

View File

@ -148,10 +148,22 @@ document.addEventListener("DOMContentLoaded", function() {
} }
} }
/**
* Set placeholder for all input element of type="search".
*/
(function() {
let toTranslate = document.getElementsByTagName("input");
for (let i = 0, max = toTranslate.length; i < max; i++) {
console.log(toTranslate[i].type);
if (toTranslate[i].type !== "search") continue;
toTranslate[i].placeholder = getTranslation(translations, "Search");
}
})();
(function() { (function() {
let toTranslate = document.getElementsByClassName("toTranslate"); let toTranslate = document.getElementsByClassName("toTranslate");
for (let i = 0, max = toTranslate.length; i < max; i++) { for (let i = 0, max = toTranslate.length; i < max; i++) {
console.log(toTranslate[i].getAttribute("data-content")); if (debugging === true) console.log(toTranslate[i].getAttribute("data-content"));
toTranslate[i].textContent = getTranslation(translations, toTranslate[i].getAttribute("data-content")); toTranslate[i].textContent = getTranslation(translations, toTranslate[i].getAttribute("data-content"));
} }
})(); })();

View File

@ -43,11 +43,10 @@ if (!isset($_GET['q'])) {
echo ' echo '
<h1><span class="toTranslate" data-content="Search"></span></h1> <h1><span class="toTranslate" data-content="Search"></span></h1>
<form action="" method="GET">
<input type="search" name="q" />
</form>
'; ';
generateSearchBar();
} }
else { else {

View File

@ -69,7 +69,6 @@ th { text-align: left; }
input.h1Input { display: block; width: 100%; font-size: 1.5em; border-radius: 0; } input.h1Input { display: block; width: 100%; font-size: 1.5em; border-radius: 0; }
#inputSection > * { display: block; width: 100%; } #inputSection > * { display: block; width: 100%; }
aside { width: 300px; margin-right: 3em; }
aside > * { display: block; padding: 1em; border: 1px solid #D6D6D6; } aside > * { display: block; padding: 1em; border: 1px solid #D6D6D6; }
/**************************** /****************************
@ -81,9 +80,10 @@ aside > * { display: block; padding: 1em; border: 1px solid #D6D6D6; }
* Displays current position and offers access * Displays current position and offers access
*/ */
#mainHeader { display: table; width: 100%; padding: 0 5vw; border-bottom: 1px solid #D6D6D6; } #mainHeader { display: table; width: 100%; padding: 0 5vw; border-bottom: 1px solid #D6D6D6; }
#mainHeader > * { display: table-cell; padding: .5rem 0; color: #666; vertical-align: middle; } #mainHeader > * { display: block; padding: .5rem 0; color: #666; vertical-align: middle; }
#mainHeader h1 { color: #333; } #mainHeader h1 { color: #333; }
#mainHeader input { width: 100%; }
/************ /************
* Banner * Banner
@ -129,7 +129,7 @@ body > nav > ul > li a:hover { background: #000; color: #FFF; }
* Main part of the page. * Main part of the page.
*/ */
main { padding: .5em 5em 3em 0; text-align: justify; } main { padding: 1em 0 1em 0; text-align: justify; }
/************ /************
* Main footer. * Main footer.
@ -203,6 +203,15 @@ body > footer { margin: 1em 5vw 2em 5vw; padding: 1em 0; background: #FFF; color
body > nav, body > nav,
div#mainWrapper, div#mainWrapper,
body > footer { margin: 0 0; padding-left: 15rem; padding-right: 15rem; } body > footer { margin: 0 0; padding-left: 15rem; padding-right: 15rem; }
aside { width: 300px; margin-right: 3em; }
#mainHeader { display: table; }
#mainHeader > * { display: table-cell; }
#mainHeader form { text-align: right; }
#mainHeader input { width: initial; }
main { padding: .5em 5em 3em 0; }
} }
/**************************** /****************************