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

[frontend]: Make CSS more responsive for small screens

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2025-03-08 14:20:13 +00:00
parent 1382cf5dc0
commit b126046c94
3 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.jsx
View File

@ -303,7 +303,9 @@ function App() {
<div <div
style={{ style={{
position: "absolute", position: "absolute",
top: "10px", top: "1vh",
height: "5vh",
width: "250px", minWidth: "50px",
left: "50%", left: "50%",
transform: "translateX(-50%)", transform: "translateX(-50%)",
zIndex: 1000 zIndex: 1000

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

@ -5,7 +5,7 @@ const LoadingOverlay = ({ message }) => (
<div style={{ <div style={{
position: "absolute", top: 0, left: 0, width: "100%", height: "100%", position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
background: "rgba(0, 0, 0, 0.5)", display: "flex", background: "rgba(0, 0, 0, 0.5)", display: "flex",
alignItems: "center", justifyContent: "center", alignItems: "center", justifyContent: "center", textAlign: "center",
color: "white", fontSize: "20px", fontWeight: "bold", color: "white", fontSize: "20px", fontWeight: "bold",
zIndex: 1000 zIndex: 1000
}}> }}>

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

@ -132,7 +132,7 @@ const CheckboxItem = ({ item, selectedSources, setSelectedSources, enabledSource
}; };
const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setClusteringEnabled, fetchData }) => { const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setClusteringEnabled, fetchData }) => {
const [isOpen, setIsOpen] = useState(true); const [isOpen, setIsOpen] = useState(false);
const [enabledSources, setEnabledSources] = useState([]); // New state to track enabled sources const [enabledSources, setEnabledSources] = useState([]); // New state to track enabled sources
// Load selected sources from cookies or set all as default checked // Load selected sources from cookies or set all as default checked
@ -153,11 +153,11 @@ const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setCl
return ( return (
<div style={{ <div style={{
position: "absolute", top: "10px", right: "10px", position: "absolute", top: window.innerWidth < 900 ? "8vh" : "1vh", 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",
height: isOpen ? "auto" : "40px", display: "flex", flexDirection: "column", height: isOpen ? "auto" : "5vh", display: "flex", flexDirection: "column",
alignItems: "center", zIndex: 1000, overflow: "hidden", justifyContent: "center" alignItems: "center", zIndex: 1000, overflow: "hidden", justifyContent: "center"
}}> }}>
<button onClick={() => setIsOpen(!isOpen)} style={{ background: "none", border: "none", color: "black" }}> <button onClick={() => setIsOpen(!isOpen)} style={{ background: "none", border: "none", color: "black" }}>