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

7
frontend/src/App.jsx
View File

@ -379,7 +379,8 @@ 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..."} />}
<div
style={{ style={{
position: "absolute", position: "absolute",
top: "1vh", top: "1vh",
@ -387,7 +388,8 @@ function App() {
width: "250px", minWidth: "50px", width: "250px", minWidth: "50px",
left: "50%", left: "50%",
transform: "translateX(-50%)", transform: "translateX(-50%)",
zIndex: 1000 zIndex: 1000,
...(window.innerWidth < 800 ? { top: "auto", bottom: "10vh" } : {})
}} }}
> >
<input <input
@ -402,7 +404,6 @@ function App() {
}} }}
/> />
</div> </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",