[Posts] Replace the search submit icon with a lucide one (#910)

This commit is contained in:
Cinder 2025-02-11 22:27:16 -08:00 committed by GitHub
parent aa606b7125
commit 9135ccd4b9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 27 additions and 13 deletions

View File

@ -28,6 +28,7 @@ module IconHelper
ellipsis: %(<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>), ellipsis: %(<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>),
# Posts # Posts
search: %(<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>),
fullscreen: %(<path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><rect width="10" height="8" x="7" y="8" rx="1"/>), fullscreen: %(<path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><rect width="10" height="8" x="7" y="8" rx="1"/>),
}.freeze }.freeze

View File

@ -30,7 +30,7 @@
// Disable manual resizing // Disable manual resizing
resize: none; resize: none;
border-radius: 3px 0 0 3px; border-radius: 0.25rem 0 0 0.25rem;
box-sizing: border-box; box-sizing: border-box;
flex: 1; flex: 1;
@ -43,19 +43,27 @@
font-size: unset; font-size: unset;
max-width: unset; max-width: unset;
font-size: 1rem; display: flex;
line-height: 1rem; align-items: center;
padding: 0.5rem; padding: 0.5rem;
border-radius: 0 3px 3px 0; border-radius: 0 0.25rem 0.25rem 0;
background: white; background: white;
color: black;
span { display: none; } svg {
height: 1.5rem;
width: 1.5rem;
margin: -0.25rem 0 -0.25rem;
}
} }
@include window-larger-than(800px) { @include window-larger-than(800px) {
textarea, button[type="submit"] { textarea { font-size: 0.85rem; }
font-size: 0.85rem; button[type="submit"] svg {
height: 1.25rem;
width: 1.25rem;
margin: -0.125rem 0 -0.125rem;
} }
} }
} }

View File

@ -39,7 +39,7 @@ body.c-static.a-home {
input[type="text"] { input[type="text"] {
flex: 1; flex: 1;
border: 0; border: 0;
border-radius: 3px 0 0 3px; border-radius: 0.25rem 0 0 0.25rem;
padding: 0.5rem; padding: 0.5rem;
font-size: 1rem; font-size: 1rem;
@ -53,9 +53,14 @@ body.c-static.a-home {
button[type="submit"] { button[type="submit"] {
background: white; background: white;
border-radius: 0 3px 3px 0; border-radius: 0 0.25rem 0.25rem 0;
padding: 0 0.5em; padding: 0 0.5rem;
font-size: 1rem;
svg {
height: 1.25rem;
width: 1.25rem;
margin: -0.125rem 0 -0.125rem;
}
} }
} }

View File

@ -10,6 +10,6 @@
<% end %> <% end %>
<%= text_area_tag("tags", tags, placeholder: "Search posts by tag", rows: 1, data: { shortcut: "q", autocomplete: "tag-query" }) %> <%= text_area_tag("tags", tags, placeholder: "Search posts by tag", rows: 1, data: { shortcut: "q", autocomplete: "tag-query" }) %>
<%= tag.button(tag.i(class: "fa-solid fa-magnifying-glass"), type: "submit", title: "Search") %> <%= tag.button(svg_icon(:search), type: "submit", title: "Search") %>
<% end %> <% end %>
</section> </section>

View File

@ -9,7 +9,7 @@
<!-- Primary Searchbar --> <!-- Primary Searchbar -->
<div class="home-search"> <div class="home-search">
<%= text_field_tag("tags", "", autofocus: "autofocus", placeholder: "Search posts by tag", data: { shortcut: "q", autocomplete: "tag-query" }) %> <%= text_field_tag("tags", "", autofocus: "autofocus", placeholder: "Search posts by tag", data: { shortcut: "q", autocomplete: "tag-query" }) %>
<%= tag.button(tag.i(class: "fa-solid fa-magnifying-glass"), type: "submit") %> <%= tag.button(svg_icon(:search), type: "submit") %>
</div> </div>
<!-- Secondary search buttons --> <!-- Secondary search buttons -->