Pretty things up

This commit is contained in:
swaggboi 2023-11-01 21:58:47 -04:00
parent 3342ad40c6
commit 7c765b3790
5 changed files with 50 additions and 40 deletions

View File

@ -119,6 +119,38 @@
background-color: var(--dark-blue); 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 { .field-with-error {
border: dashed var(--highlight-red); border: dashed var(--highlight-red);
padding: 0.5em 0.25em; padding: 0.5em 0.25em;

View File

@ -18,15 +18,12 @@ subtest 'Search after CAPTCHA', sub {
->status_is(302) ->status_is(302)
->header_like(Location => qr{human/search}); ->header_like(Location => qr{human/search});
$t->get_ok('/human/search')->status_is(200) $t->get_ok('/human/search?q=lmao')->status_is(200)
->text_like(h2 => qr/Search Posts/); ->text_like(h2 => qr/Search Results/);
$t->get_ok('/human/search?q=aaaaaaaaaa')->status_is(404) $t->get_ok('/human/search?q=aaaaaaaaaa')->status_is(404)
->text_like(p => qr/No posts found/); ->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) $t->get_ok("/human/search?q=$invalid_query")->status_is(400)
->text_like(p => qr/Must be between/); ->text_like(p => qr/Must be between/);
}; };

View File

@ -62,6 +62,21 @@
<%= link_to Demote => demote_admin => (class => 'click') %> <%= link_to Demote => demote_admin => (class => 'click') %>
</nav> </nav>
<% } =%> <% } =%>
<%= form_for search_page => (class => 'search-body'), begin %>
<div class="search-field">
<% if (my $error = validation->error('q')) { =%>
<p class="field-with-error">Must be between <%= $error->[2] %>
and <%= $error->[3] %> characters.</p>
<% } =%>
<%= text_field q => (
id => 'search',
maxlength => 2047,
minlength => 1,
required => undef
) %>
<button type="submit" class="search-button">Search</button>
</div>
<% end %>
</header> </header>
<% if (flash 'error') { =%> <% if (flash 'error') { =%>
<p class="stash-with-error" id="error"><%= flash 'error' %></p> <p class="stash-with-error" id="error"><%= flash 'error' %></p>

View File

@ -1,5 +1,5 @@
% layout 'default'; % layout 'default';
% title 'Search Posts'; % title 'Search Results';
<% content_for open_graph => begin %> <% content_for open_graph => begin %>
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:title" content="<%= title %>"> <meta property="og:title" content="<%= title %>">
@ -10,26 +10,8 @@
<meta name="twitter:description" content="Search for posts."> <meta name="twitter:description" content="Search for posts.">
<% end %> <% end %>
<h2 class="page-title"><%= title %></h2> <h2 class="page-title"><%= title %></h2>
<form method="get" class="form-body">
<div class="form-field">
<% if (my $error = validation->error('q')) { =%>
<p class="field-with-error">Must be between <%= $error->[2] %>
and <%= $error->[3] %> characters.</p>
<% } =%>
<%= label_for search => 'Search' %>
<%= text_field q => (
id => 'search',
maxlength => 2047,
minlength => 1,
required => undef,
autofocus => undef
) %>
</div>
<button type="submit" class="form-button">Search</button>
</form>
<% if (scalar @{$search_results}) { =%> <% if (scalar @{$search_results}) { =%>
<main class="pager" id="results"> <main class="pager" id="results">
<h3 class="pager__title">Results</h3>
<% for my $result (@{$search_results}) { =%> <% for my $result (@{$search_results}) { =%>
<article class="post"> <article class="post">
<h4 class="post__title"> <h4 class="post__title">

View File

@ -12,22 +12,6 @@
<h2 class="page-title"><%= title %></h2> <h2 class="page-title"><%= title %></h2>
<% if (scalar @{$threads}) { =%> <% if (scalar @{$threads}) { =%>
<main class="pager"> <main class="pager">
<%= form_for search_page => (class => 'form-body'), begin %>
<div class="form-field">
<% if (my $error = validation->error('q')) { =%>
<p class="field-with-error">Must be between <%= $error->[2] %>
and <%= $error->[3] %> characters.</p>
<% } =%>
<%= label_for search => 'Search' %>
<%= text_field q => (
id => 'search',
maxlength => 2047,
minlength => 1,
required => undef
) %>
</div>
<button type="submit" class="form-button">Search</button>
<% end %>
<% for my $thread (@{$threads}) { =%> <% for my $thread (@{$threads}) { =%>
<article class="post"> <article class="post">
<h3 class="post__title"> <h3 class="post__title">