mirrors/thebadspace
1
0
Fork 0
mirror of https://koodu.h-i.works/projects/thebadspace synced 2025-05-06 14:41:02 -05:00
Code Packages Releases Activity

feat: replace search icon with an SVG

Browse Source 
this change allows us to use the font colour for the icon. it might also be nice to use a sprite.svg for all icons. this would use the same <use> mechanism as i did here.

this also optimises the SVG a bit
This commit is contained in:
Zoë 2025-05-02 17:23:49 +02:00
parent 3e070676e4
commit d165d0c2bd
No known key found for this signature in database
GPG Key ID: B4CA6F5B4034F028
3 changed files with 9 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/assets/css/front/index.css
View File

@ -38,8 +38,9 @@ form.index-search-form > button {
right: 0; right: 0;
} }
form.index-search-form > button > img#search-icon { form.index-search-form > button > svg {
float: none; width: 48px;
height: 48px;
} }
form.index-search-form > button > label { form.index-search-form > button > label {
@ -116,8 +117,4 @@ table.index-meta td {
form.index-search-form > button > label { form.index-search-form > button > label {
display: inline; display: inline;
} }
form.index-search-form > button > img#search-icon {
float: right;
}
} }

10
public/assets/images/global/icon-search.svg
View File

@ -1,8 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" id="search">
<!-- Generated by Pixelmator Pro 3.3.8 --> <path fill="none" stroke="currentcolor" stroke-width="8.777778" stroke-linecap="round" stroke-linejoin="round" d="M 11 41.722221 C 11 58.68964 24.754808 72.444443 41.722221 72.444443 C 58.68964 72.444443 72.444443 58.68964 72.444443 41.722221 C 72.444443 24.754807 58.68964 11 41.722221 11 C 24.754808 11 11 24.754807 11 41.722221"/>
<svg width="101" height="100" viewBox="0 0 101 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="currentcolor" stroke-width="8.777778" stroke-linecap="round" stroke-linejoin="round" d="M 90 90 L 63.666668 63.666668"/>
<g id="Group-copy">
<path id="Path-copy-2" fill="none" stroke="#efebe3" stroke-width="8.777778" stroke-linecap="round" stroke-linejoin="round" d="M 11 41.722221 C 11 58.68964 24.754808 72.444443 41.722221 72.444443 C 58.68964 72.444443 72.444443 58.68964 72.444443 41.722221 C 72.444443 24.754807 58.68964 11 41.722221 11 C 24.754808 11 11 24.754807 11 41.722221"/>
<path id="Path-copy" fill="none" stroke="#efebe3" stroke-width="8.777778" stroke-linecap="round" stroke-linejoin="round" d="M 90 90 L 63.666668 63.666668"/>
</g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 729 B

After

Width:  |  Height:  |  Size: 571 B

4
resources/views/front/index.blade.php
View File

@ -7,7 +7,9 @@
<input type="text" name="index_search" value="" placeholder="Hi! This is where you search." /> <input type="text" name="index_search" value="" placeholder="Hi! This is where you search." />
<button aria-label="search-button"> <button aria-label="search-button">
<label id="search-label">LOOK FOR IT</label> <label id="search-label">LOOK FOR IT</label>
<img id="search-icon" class="button-icon" src="assets/images/global/icon-search.svg" /> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="trye">
<use href="assets/images/global/icon-search.svg#search" />
</svg>
</button> </button>
@csrf @csrf
</form> </form>