alamin/websurfx
alamin/websurfx
0
0
Fork 0
mirror of https://github.com/neon-mmd/websurfx.git synced 2024-11-21 13:38:21 -05:00
Code Issues Releases Activity

💄 style: replace the search button with a magnifying glass (#483)

Browse Source 
Co-authored-by: neon_arch <mustafadhuleb53@gmail.com>
This commit is contained in:
Леонтий Вартанян 2024-01-06 21:17:11 +03:00 committed by GitHub
parent 3a97a6f621
commit 33846cee34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/images/magnifying_glass.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" width="24px" height="24px"><circle fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" cx="21" cy="20" r="16"/><line fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="32.229" y1="32.229" x2="45.5" y2="45.5"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 610 B

8
public/static/themes/simple.css
View File

@ -95,6 +95,14 @@ button {
color: var(--background-color);
font-weight: 600;
letter-spacing: 0.1rem;
position: relative;
}
.search_bar button img {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
}
.search_bar button:active {

4
src/templates/partials/bar.rs
View File

@ -16,6 +16,8 @@ pub fn bar(query: &str) -> Markup {
html!(
(PreEscaped("<div class=\"search_bar\">"))
input type="search" name="search-box" value=(query) placeholder="Type to search";
button type="submit" onclick="searchWeb()"{"search"}
button type="submit" onclick="searchWeb()" {
img src="./images/magnifying_glass.svg" alt="Info icon for error box";
}
)
}