diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index d6282acda..3eb141c51 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -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); diff --git a/app/assets/stylesheets/circled-text.css b/app/assets/stylesheets/circled-text.css index 999eabe79..9c3e87f48 100644 --- a/app/assets/stylesheets/circled-text.css +++ b/app/assets/stylesheets/circled-text.css @@ -6,6 +6,7 @@ background: none; color: var(--circled-color); position: relative; + white-space: nowrap; span { opacity: 0.5; diff --git a/app/assets/stylesheets/reset.css b/app/assets/stylesheets/reset.css index 039c14d90..362181e0d 100644 --- a/app/assets/stylesheets/reset.css +++ b/app/assets/stylesheets/reset.css @@ -35,11 +35,6 @@ /* hyphens: auto; */ } - html, - body { - overflow-x: hidden; - } - html { scroll-behavior: smooth; } diff --git a/app/assets/stylesheets/search.css b/app/assets/stylesheets/search.css index 5d53286e5..3709e0b49 100644 --- a/app/assets/stylesheets/search.css +++ b/app/assets/stylesheets/search.css @@ -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,'); + 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; + } } } diff --git a/app/views/searches/_form.html.erb b/app/views/searches/_form.html.erb index 8238a7e85..9b345f5a6 100644 --- a/app/views/searches/_form.html.erb +++ b/app/views/searches/_form.html.erb @@ -1,11 +1,4 @@ <%= form_with url: search_path, method: :get, class: "search__form" do |form| %> -
- <%= text_field_tag :q, query_terms, class: "input", type: "search", placeholder: "What are you looking for?" %> - - <%= icon_tag "search" %> - - <%= link_to search_path, class: "search__field-clear btn btn--circle borderless" do %> - <%= icon_tag "close" %> - <% end %> -
+ <%= 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 %> diff --git a/app/views/searches/_search_query.html.erb b/app/views/searches/_search_query.html.erb index 318ea3956..f092ba9c7 100644 --- a/app/views/searches/_search_query.html.erb +++ b/app/views/searches/_search_query.html.erb @@ -1,3 +1,3 @@
  • - <%= 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" %>
    • diff --git a/app/views/searches/show.html.erb b/app/views/searches/show.html.erb index 7cd475f63..3aa1df8b4 100644 --- a/app/views/searches/show.html.erb +++ b/app/views/searches/show.html.erb @@ -17,15 +17,22 @@
    <%= render "searches/form", query_terms: @query_terms %> - <% if @query_terms.present? && @search_results.none? %> -

    No search results

    / - <% end %> +
    + <% if @query_terms.present? && @search_results.none? %> +
    + No search results +
    + <% end %> - + +
    - +