diff --git a/assets/css/simple.css b/assets/css/simple.css
index def6125..f425496 100644
--- a/assets/css/simple.css
+++ b/assets/css/simple.css
@@ -119,6 +119,38 @@
background-color: var(--dark-blue);
}
+.search-body {
+ background-color: var(--light-warm-gray);
+ border: outset var(--light-warm-gray) 0.18rem;
+ padding: 0.5em 0.5em;
+ display: flex;
+ flex-flow: column;
+ gap: 1em;
+ margin-top: 0.25em;
+}
+
+.search-field {
+ display: flex;
+ flex-flow: row;
+ gap: 0;
+}
+
+#search { width: 100%; }
+
+.search-button {
+ border: outset var(--light-blue) 0.18rem;
+ background-color: var(--light-blue);
+ text-align: left;
+ color: black;
+}
+
+.search-button::first-letter { text-decoration: underline; }
+
+.search-button:active {
+ border: inset var(--dark-blue) 0.18rem;
+ background-color: var(--dark-blue);
+}
+
.field-with-error {
border: dashed var(--highlight-red);
padding: 0.5em 0.25em;
diff --git a/t/search.t b/t/search.t
index 4ebbef9..6e6b47a 100644
--- a/t/search.t
+++ b/t/search.t
@@ -18,15 +18,12 @@ subtest 'Search after CAPTCHA', sub {
->status_is(302)
->header_like(Location => qr{human/search});
- $t->get_ok('/human/search')->status_is(200)
- ->text_like(h2 => qr/Search Posts/);
+ $t->get_ok('/human/search?q=lmao')->status_is(200)
+ ->text_like(h2 => qr/Search Results/);
$t->get_ok('/human/search?q=aaaaaaaaaa')->status_is(404)
->text_like(p => qr/No posts found/);
- $t->get_ok('/human/search?q=lmao')->status_is(200)
- ->text_like(h3 => qr/Results/);
-
$t->get_ok("/human/search?q=$invalid_query")->status_is(400)
->text_like(p => qr/Must be between/);
};
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 0da6d6c..7556788 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -62,6 +62,21 @@
<%= link_to Demote => demote_admin => (class => 'click') %>
<% } =%>
+ <%= form_for search_page => (class => 'search-body'), begin %>
+
+ <% if (my $error = validation->error('q')) { =%>
+
Must be between <%= $error->[2] %>
+ and <%= $error->[3] %> characters.
+ <% } =%>
+ <%= text_field q => (
+ id => 'search',
+ maxlength => 2047,
+ minlength => 1,
+ required => undef
+ ) %>
+
+
+ <% end %>
<% if (flash 'error') { =%>
<%= flash 'error' %>
diff --git a/templates/page/search.html.ep b/templates/page/search.html.ep
index fab866f..1279300 100644
--- a/templates/page/search.html.ep
+++ b/templates/page/search.html.ep
@@ -1,5 +1,5 @@
% layout 'default';
-% title 'Search Posts';
+% title 'Search Results';
<% content_for open_graph => begin %>
@@ -10,26 +10,8 @@
<% end %>
<%= title %>
-
<% if (scalar @{$search_results}) { =%>