glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Add "Close Search" Button

Browse Source
This commit is contained in:
glax 2024-10-19 20:57:03 +02:00
parent 68887d65a7
commit da002df3f2
3 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Website/App.tsx
View File

@ -40,7 +40,7 @@ export default function App(){
? <> ? <>
{showSearch {showSearch
? <> ? <>
<Search onJobsChanged={JobsChanged}/> <Search onJobsChanged={JobsChanged} closeSearch={() => setShowSearch(false)} />
<hr/> <hr/>
</> </>
: <></>} : <></>}

5
Website/modules/Search.tsx
View File

@ -7,7 +7,7 @@ import IManga, {SearchResult} from "./interfaces/IManga";
import '../styles/search.css'; import '../styles/search.css';
import '../styles/MangaSearchResult.css' import '../styles/MangaSearchResult.css'
export default function Search({onJobsChanged} : {onJobsChanged: EventHandler<any>}) { export default function Search({onJobsChanged, closeSearch} : {onJobsChanged: EventHandler<any>, closeSearch(): void}) {
const [mangaConnectors, setConnectors] = useState<IMangaConnector[]>(); const [mangaConnectors, setConnectors] = useState<IMangaConnector[]>();
const [selectedConnector, setSelectedConnector] = useState<IMangaConnector>(); const [selectedConnector, setSelectedConnector] = useState<IMangaConnector>();
const [selectedLanguage, setSelectedLanguage] = useState<string>(); const [selectedLanguage, setSelectedLanguage] = useState<string>();
@ -88,7 +88,7 @@ export default function Search({onJobsChanged} : {onJobsChanged: EventHandler<an
const changeSelectedLanguage : ChangeEventHandler<HTMLSelectElement> = (event) => setSelectedLanguage(event.target.value); const changeSelectedLanguage : ChangeEventHandler<HTMLSelectElement> = (event) => setSelectedLanguage(event.target.value);
return (<div> return (<div id="Search">
<div id="SearchBox"> <div id="SearchBox">
<input type="text" placeholder="Manganame" id="Searchbox-Manganame" onChange={searchBoxValueChanged}></input> <input type="text" placeholder="Manganame" id="Searchbox-Manganame" onChange={searchBoxValueChanged}></input>
<select id="Searchbox-Connector" value={selectedConnector === undefined ? "" : selectedConnector.name} onChange={selectedConnectorChanged}> <select id="Searchbox-Connector" value={selectedConnector === undefined ? "" : selectedConnector.name} onChange={selectedConnectorChanged}>
@ -105,6 +105,7 @@ export default function Search({onJobsChanged} : {onJobsChanged: EventHandler<an
</select> </select>
<button id="Searchbox-button" type="submit" onClick={ExecuteSearch}>Search</button> <button id="Searchbox-button" type="submit" onClick={ExecuteSearch}>Search</button>
</div> </div>
<img id="closeSearch" src="../media/close-x.svg" onClick={closeSearch} />
<div id="SearchResults"> <div id="SearchResults">
{searchResults === undefined {searchResults === undefined
? <p></p> ? <p></p>

18
Website/styles/search.css
View File

@ -1,3 +1,9 @@
#Search{
position: relative;
width: 98vw;
margin: auto;
}
#SearchBox{ #SearchBox{
display: flex; display: flex;
align-content: center; align-content: center;
@ -6,8 +12,7 @@
} }
#SearchResults { #SearchResults {
max-width: 98vw; width: 100%;
margin: 0 auto;
} }
#SearchBox select, #SearchBox button, #SearchBox input { #SearchBox select, #SearchBox button, #SearchBox input {
@ -41,4 +46,13 @@
border-top-right-radius: 2px; border-top-right-radius: 2px;
border-right-width: 2px !important; border-right-width: 2px !important;
width: 90px; width: 90px;
}
#closeSearch {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(20deg) brightness(103%) contrast(101%);
} }