Add resultl number to left hand side of result

This commit is contained in:
Starbeamrainbowlabs 2015-10-31 14:16:19 +00:00
parent 559191757f
commit 3baf2535ab
4 changed files with 25 additions and 9 deletions

View File

@ -264,12 +264,15 @@ h1 { text-align: center; }
.logo { max-width: 4rem; max-height: 4rem; vertical-align: middle; }
main:not(.printable) { padding: 2rem; background: #faf8fb; box-shadow: 0 0.1rem 1rem 0.3rem rgba(50, 50, 50, 0.5); }
.search-result::before { content: attr(data-result-number); position: relative; top: 3.2rem; color: rgba(33, 33, 33, 0.3); font-size: 2rem; }
.search-result > h2 { margin-left: 2rem; }
label:not(.link-display-label) { display: inline-block; min-width: 7rem; }
input[type=text]:not(.link-display), input[type=password], textarea { margin: 0.5rem 0.8rem; }
input[type=text], input[type=password], textarea, #search-box { padding: 0.5rem 0.8rem; background: #d5cbf9; border: 0; border-radius: 0.3rem; font-size: 1rem; color: #442772; }
textarea { width: calc(100% - 2rem); min-height: 35rem; font-size: 1.25rem; }
textarea ~ input[type=submit], #search-box { width: calc(100% - 0.3rem); margin: 0.5rem 0.8rem; padding: 0.5rem; }
textarea ~ input[type=submit] { font-weight: bolder; }
textarea { min-height: 35rem; font-size: 1.25rem; }
textarea ~ input[type=submit], #search-box { width: calc(100% - 0.3rem); }
textarea ~ input[type=submit] { margin: 0.5rem 0.8rem; padding: 0.5rem; font-weight: bolder; }
.editform input[type=text] { width: calc(100% - 0.3rem); box-sizing: border-box; }
.page-tags-display { margin: 0.5rem 0 0 0; padding: 0; list-style-type: none; }
@ -1376,6 +1379,7 @@ register_module([
$content .= " <input type='hidden' name='action' value='search' />\n";
$content .= "</form>";
$i = 0; // todo use $_GET["offset"] and $_GET["result-count"] or something
foreach($results as $result)
{
$link = "?page=" . rawurlencode($result["pagename"]);
@ -1383,10 +1387,14 @@ register_module([
$context = search::extract_context($_GET["query"], $pagesource);
$context = search::highlight_context($_GET["query"], $context);
$content .= "<div>\n";
// We add 1 to $i here to convert it from an index to a result
// number as people expect it to start from 1
$content .= "<div class='search-result' data-result-number='" . ($i + 1) . "' data-rank='" . $result["rank"] . "'>\n";
$content .= " <h2><a href='$link'>" . $result["pagename"] . "</a></h2>\n";
$content .= " <p>$context</p>\n";
$content .= "</div>\n";
$i++;
}
$content .= "</section>\n";

View File

@ -50,7 +50,7 @@
"author": "Starbeamrainbowlabs",
"description": "Adds proper search functionality to Pepperminty Wiki. Note that this module, at the moment, just contains test code while I figure out how best to write a search engine.",
"id": "feature-search",
"lastupdate": 1446300290,
"lastupdate": 1446300948,
"optional": false
},
{

View File

@ -51,6 +51,7 @@ register_module([
$content .= " <input type='hidden' name='action' value='search' />\n";
$content .= "</form>";
$i = 0; // todo use $_GET["offset"] and $_GET["result-count"] or something
foreach($results as $result)
{
$link = "?page=" . rawurlencode($result["pagename"]);
@ -58,10 +59,14 @@ register_module([
$context = search::extract_context($_GET["query"], $pagesource);
$context = search::highlight_context($_GET["query"], $context);
$content .= "<div>\n";
// We add 1 to $i here to convert it from an index to a result
// number as people expect it to start from 1
$content .= "<div class='search-result' data-result-number='" . ($i + 1) . "' data-rank='" . $result["rank"] . "'>\n";
$content .= " <h2><a href='$link'>" . $result["pagename"] . "</a></h2>\n";
$content .= " <p>$context</p>\n";
$content .= "</div>\n";
$i++;
}
$content .= "</section>\n";

View File

@ -261,12 +261,15 @@ h1 { text-align: center; }
.logo { max-width: 4rem; max-height: 4rem; vertical-align: middle; }
main:not(.printable) { padding: 2rem; background: #faf8fb; box-shadow: 0 0.1rem 1rem 0.3rem rgba(50, 50, 50, 0.5); }
.search-result::before { content: attr(data-result-number); position: relative; top: 3.2rem; color: rgba(33, 33, 33, 0.3); font-size: 2rem; }
.search-result > h2 { margin-left: 2rem; }
label:not(.link-display-label) { display: inline-block; min-width: 7rem; }
input[type=text]:not(.link-display), input[type=password], textarea { margin: 0.5rem 0.8rem; }
input[type=text], input[type=password], textarea, #search-box { padding: 0.5rem 0.8rem; background: #d5cbf9; border: 0; border-radius: 0.3rem; font-size: 1rem; color: #442772; }
textarea { width: calc(100% - 2rem); min-height: 35rem; font-size: 1.25rem; }
textarea ~ input[type=submit], #search-box { width: calc(100% - 0.3rem); margin: 0.5rem 0.8rem; padding: 0.5rem; }
textarea ~ input[type=submit] { font-weight: bolder; }
textarea { min-height: 35rem; font-size: 1.25rem; }
textarea ~ input[type=submit], #search-box { width: calc(100% - 0.3rem); }
textarea ~ input[type=submit] { margin: 0.5rem 0.8rem; padding: 0.5rem; font-weight: bolder; }
.editform input[type=text] { width: calc(100% - 0.3rem); box-sizing: border-box; }
.page-tags-display { margin: 0.5rem 0 0 0; padding: 0; list-style-type: none; }