aindreas/fyp
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[frontend]: Fix filters / search bar overlapping on mobile

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2025-03-12 22:31:20 +00:00
parent ecf7a00cdd
commit 994087829d
2 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/App.jsx
View File

@ -379,30 +379,31 @@ function App() {
path="/" path="/"
element={ element={
<div style={{ height: "100vh", width: "100vw", display: "flex", position: "relative", paddingTop: "5vh" }}> <div style={{ height: "100vh", width: "100vw", display: "flex", position: "relative", paddingTop: "5vh" }}>
{loading && <LoadingOverlay message={"Loading data..."} />} <div {loading && <LoadingOverlay message={"Loading data..."} />}
style={{ <div
position: "absolute",
top: "1vh",
height: "5vh",
width: "250px", minWidth: "50px",
left: "50%",
transform: "translateX(-50%)",
zIndex: 1000
}}
>
<input
type="text"
onChange={(e) => handleSearchChange(e)}
placeholder="Search..."
style={{ style={{
width: "250px", fontSize: "16px", position: "absolute",
top: "6vh", marginTop: "5vh", top: "1vh",
padding: "10px", background: "rgba(255, 255, 255, 0.9)", color: "black", height: "5vh",
borderRadius: "10px", overflow: "hidden" width: "250px", minWidth: "50px",
left: "50%",
transform: "translateX(-50%)",
zIndex: 1000,
...(window.innerWidth < 800 ? { top: "auto", bottom: "10vh" } : {})
}} }}
/> >
</div> <input
type="text"
onChange={(e) => handleSearchChange(e)}
placeholder="Search..."
style={{
width: "250px", fontSize: "16px",
top: "6vh", marginTop: "5vh",
padding: "10px", background: "rgba(255, 255, 255, 0.9)", color: "black",
borderRadius: "10px", overflow: "hidden"
}}
/>
</div>
<Sidebar <Sidebar
selectedSources={selectedSources} selectedSources={selectedSources}
setSelectedSources={setSelectedSources} setSelectedSources={setSelectedSources}

2
frontend/src/components/Sidebar.jsx
View File

@ -161,7 +161,7 @@ const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setCl
return ( return (
<div style={{ <div style={{
position: "absolute", top: window.innerWidth < 900 ? "8vh" : "6vh", right: "1vh", position: "absolute", top: "6vh", right: "1vh",
width: "250px", minWidth: "50px", width: "250px", minWidth: "50px",
padding: isOpen ? "10px" : "5px 10px", background: "rgba(255, 255, 255, 0.9)", color: "black", padding: isOpen ? "10px" : "5px 10px", background: "rgba(255, 255, 255, 0.9)", color: "black",
borderRadius: "10px", transition: "height 0.2s ease-in-out, padding 0.2s ease-in-out", borderRadius: "10px", transition: "height 0.2s ease-in-out, padding 0.2s ease-in-out",