Polish up the search results page
This commit is contained in:
Andy Smith
@@ -438,13 +438,18 @@
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card--search {
|
||||
--card-color: var(--color-ink);
|
||||
--card-padding-inline: 1rem;
|
||||
--card-padding-block: 0.75rem;
|
||||
--card-padding-inline: 0.75rem;
|
||||
|
||||
background-color: var(--color-canvas);
|
||||
|
||||
&:not(&:hover) {
|
||||
box-shadow: 0 0 0 1px var(--color-ink-lighter);
|
||||
}
|
||||
|
||||
.card__collection {
|
||||
background-color: var(--color-canvas);
|
||||
color: var(--color-ink-medium);
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
background: none;
|
||||
color: var(--circled-color);
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
span {
|
||||
opacity: 0.5;
|
||||
|
||||
@@ -35,11 +35,6 @@
|
||||
/* hyphens: auto; */
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
@@ -12,68 +12,79 @@
|
||||
}
|
||||
}
|
||||
|
||||
.search__form {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
/* Form
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
.search__field {
|
||||
.search__form {
|
||||
--search-form-padding: 1ch;
|
||||
--search-btn-size: 2rem;
|
||||
|
||||
position: relative;
|
||||
background-color: var(--color-canvas);
|
||||
inset-block-start: 0;
|
||||
grid-column: 1 / -1;
|
||||
margin-inline: calc(-1 * var(--search-form-padding));
|
||||
padding: var(--search-form-padding);
|
||||
position: sticky;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.btn {
|
||||
--btn-icon-size: 1rem;
|
||||
--btn-size: var(--search-btn-size);
|
||||
--hover-size: 0;
|
||||
.search__form-icon {
|
||||
border-radius: 0;
|
||||
inset: 50% auto auto calc(var(--search-form-padding) * 2);
|
||||
opacity: 0.66;
|
||||
position: absolute;
|
||||
translate: 0 -50%;
|
||||
}
|
||||
|
||||
inset-block-start: 50%;
|
||||
translate: 0 -50%;
|
||||
.search__form-input {
|
||||
padding-inline:var(--search-btn-size);
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
--clear-icon-size: 0.75rem;
|
||||
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m14.3 12.179a.25.25 0 0 1 0-.354l9.263-9.262a1.5 1.5 0 0 0 -2.124-2.121l-9.262 9.258a.25.25 0 0 1 -.354 0l-9.262-9.258a1.5 1.5 0 0 0 -2.122 2.121l9.261 9.262a.25.25 0 0 1 0 .354l-9.261 9.263a1.5 1.5 0 0 0 2.122 2.121l9.262-9.263a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 0 0 2.122-2.121z"/></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-size: var(--clear-icon-size);
|
||||
block-size: var(--clear-icon-size);
|
||||
cursor: pointer;
|
||||
inline-size: var(--clear-icon-size);
|
||||
inset-inline-end: 1ch;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.search__field-icon {
|
||||
border-radius: 0;
|
||||
inset-inline-start: 2px;
|
||||
opacity: 0.66;
|
||||
}
|
||||
|
||||
.search__field-clear {
|
||||
inset-inline-end: 2px;
|
||||
}
|
||||
|
||||
.input {
|
||||
padding-inline:var(--search-btn-size);
|
||||
|
||||
::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
|
||||
background-size: 10px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search__list,
|
||||
.search__history {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
text-align: start;
|
||||
}
|
||||
/* Content
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
.search__list {
|
||||
display: grid;
|
||||
gap: 1ch;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.search__empty {
|
||||
opacity: 0.66;
|
||||
border: 2px dashed var(--color-ink-light);
|
||||
border-radius: 1ch;
|
||||
padding: calc(var(--gap) / 2);
|
||||
}
|
||||
|
||||
.search__history {
|
||||
border-inline-start: 1px solid var(--color-ink-lighter);
|
||||
padding-inline-start: var(--gap);
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 1ch;
|
||||
text-align: start;
|
||||
|
||||
@media (max-width: 639px) {
|
||||
display: none;
|
||||
/* Only show on larger screens when there's a search history to show */
|
||||
@media (min-width: 640px) {
|
||||
&:has(.search__list li) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +1,4 @@
|
||||
<%= form_with url: search_path, method: :get, class: "search__form" do |form| %>
|
||||
<div class="search__field">
|
||||
<%= text_field_tag :q, query_terms, class: "input", type: "search", placeholder: "What are you looking for?" %>
|
||||
<span class="search__field-icon btn btn--circle borderless">
|
||||
<%= icon_tag "search" %>
|
||||
</span>
|
||||
<%= link_to search_path, class: "search__field-clear btn btn--circle borderless" do %>
|
||||
<%= icon_tag "close" %>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= text_field_tag :q, query_terms, class: "search__form-input input", type: "search", placeholder: "What are you looking for?" %>
|
||||
<%= icon_tag "search", class: "search__form-icon" %>
|
||||
<% end %>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<li>
|
||||
<%= link_to search_query.terms, search_path(q: search_query.terms) %>
|
||||
<%= link_to search_query.terms, search_path(q: search_query.terms), class: "btn txt-small" %>
|
||||
</li>
|
||||
|
||||
@@ -17,15 +17,22 @@
|
||||
<section class="search">
|
||||
<%= render "searches/form", query_terms: @query_terms %>
|
||||
|
||||
<% if @query_terms.present? && @search_results.none? %>
|
||||
<p>No search results</p>/
|
||||
<% end %>
|
||||
<div class="search__results">
|
||||
<% if @query_terms.present? && @search_results.none? %>
|
||||
<div class="search__empty">
|
||||
No search results
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<ul class="search__list">
|
||||
<%= render partial: "searches/result", collection: @search_results %>
|
||||
</ul>
|
||||
<ul class="search__list">
|
||||
<%= render partial: "searches/result", collection: @search_results %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="search__history">
|
||||
<%= render partial: "searches/search_query", collection: @recent_search_queries %>
|
||||
</ul>
|
||||
<aside class="search__history">
|
||||
<h3>Your recent searches…</h3>
|
||||
<ul class="search__list">
|
||||
<%= render partial: "searches/search_query", collection: @recent_search_queries.first(10) %>
|
||||
</ul>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user