From 543797e75682b67a6cae8342e3fa6f67241e5620 Mon Sep 17 00:00:00 2001 From: Yasandu Imanjith <89386702+yasandu0505@users.noreply.github.com> Date: Tue, 6 Jan 2026 12:36:41 +0530 Subject: [PATCH 01/15] style : configure padding on the ui component --- src/pages/LandingPage/screens/LandingPage.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/LandingPage/screens/LandingPage.jsx b/src/pages/LandingPage/screens/LandingPage.jsx index 6b3fecd..46b2126 100644 --- a/src/pages/LandingPage/screens/LandingPage.jsx +++ b/src/pages/LandingPage/screens/LandingPage.jsx @@ -180,7 +180,7 @@ const LandingPage = () => { style={{ transform: `translateX(-${currentIndex * 100}%)` }} > {/* Card 1 */} -
+
{/* Soft light gradient overlay for frosted effect */}
@@ -223,7 +223,7 @@ const LandingPage = () => {
{/* Card 2 */} -
+
From 9ddec0024f66970c9a6660ff9ca6bf42b62be684 Mon Sep 17 00:00:00 2001 From: Yasandu Imanjith <89386702+yasandu0505@users.noreply.github.com> Date: Tue, 6 Jan 2026 12:42:54 +0530 Subject: [PATCH 02/15] style : minimize the header of the dashboard --- src/components/ShareLinkButton.jsx | 2 +- src/pages/HomePage/screens/HomePage.jsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ShareLinkButton.jsx b/src/components/ShareLinkButton.jsx index b0a0afc..72ee9f6 100644 --- a/src/components/ShareLinkButton.jsx +++ b/src/components/ShareLinkButton.jsx @@ -18,7 +18,7 @@ const ShareLinkButton = () => { `} > - Share + Share
); diff --git a/src/pages/HomePage/screens/HomePage.jsx b/src/pages/HomePage/screens/HomePage.jsx index 311045f..c499306 100644 --- a/src/pages/HomePage/screens/HomePage.jsx +++ b/src/pages/HomePage/screens/HomePage.jsx @@ -210,11 +210,11 @@ export default function HomePage() { > {/* Header */}
-
+
-

+

Sri Lanka

@@ -226,7 +226,7 @@ export default function HomePage() { >
- Learn + Learn
From fbd98f9d411f6835ec208d8a1b33314be2dda6d0 Mon Sep 17 00:00:00 2001 From: Yasandu Imanjith <89386702+yasandu0505@users.noreply.github.com> Date: Wed, 7 Jan 2026 14:49:36 +0530 Subject: [PATCH 03/15] style: making the department, people views responsive with all the components --- .../HomePage/components/TimeRangeSelector.jsx | 10 +- .../components/DepartmentTab.jsx | 63 +++- .../components/GazetteTimeline.jsx | 9 +- .../components/MinistryCardGrid.jsx | 224 +++++++++---- .../components/PersonsTab.jsx | 302 +++++++++++++----- .../OrganizationPage/screens/Organization.jsx | 2 +- 6 files changed, 464 insertions(+), 146 deletions(-) diff --git a/src/pages/HomePage/components/TimeRangeSelector.jsx b/src/pages/HomePage/components/TimeRangeSelector.jsx index da0206d..b7227c9 100644 --- a/src/pages/HomePage/components/TimeRangeSelector.jsx +++ b/src/pages/HomePage/components/TimeRangeSelector.jsx @@ -694,10 +694,10 @@ export default function TimeRangeSelector({ return (
{/* Presets and calendar */} -
+
Select a Date range
-
+
{/* Year presets */} {[ { label: "1Y", years: 1 }, @@ -1196,8 +1196,8 @@ export default function TimeRangeSelector({
{/* Selected range display */} -
-
+
+
{new Date( tempStartDate.toISOString().split("T")[0] ).toLocaleDateString("en-GB", { @@ -1207,7 +1207,7 @@ export default function TimeRangeSelector({ })}
→ -
+
{new Date( tempEndDate.toISOString().split("T")[0] ).toLocaleDateString("en-GB", { diff --git a/src/pages/OrganizationPage/components/DepartmentTab.jsx b/src/pages/OrganizationPage/components/DepartmentTab.jsx index 41a6d91..c0cb8b6 100644 --- a/src/pages/OrganizationPage/components/DepartmentTab.jsx +++ b/src/pages/OrganizationPage/components/DepartmentTab.jsx @@ -50,6 +50,7 @@ const DepartmentTab = ({ selectedDate, ministryId }) => { justifyContent: "center", alignItems: "center", height: "20vh", + }} > { display: "flex", flexDirection: "column", alignItems: "flex-start", - width: "40%", - border: `1px solid ${colors.backgroundWhite}`, - p: 2, + width: {xs:"100%", sm:"100%", md:"40%"}, + border: {xs:0,sm:0,md:`1px solid ${colors.backgroundWhite}`}, + p: {xs:0,sm:0,md:2}, backgroundColor: colors.backgroundWhite, - borderRadius: "14px", + borderRadius: {xs:0,sm:0,md:"14px"} }} > { width: "100%", }} > - - + + {/* Count on small screens, Icon on larger screens */} + {totalDepartments} + + + Total Departments{" "} @@ -123,8 +143,10 @@ const DepartmentTab = ({ selectedDate, ministryId }) => { /> + {/* Count on larger screens */} { }} > - + {/* Count on small screens, Icon on larger screens */} + + {newDepartments} + + { /> + {/* Count on larger screens */} { sx={{ display: "flex", justifyContent: "space-between", - alignItems: "center", + alignItems: {xs:"flex-start", sm:"flex-start", md:"center"}, + flexDirection: {xs:"column",sm:"column",md:"row"}, mt: 2, }} > @@ -196,12 +236,15 @@ const DepartmentTab = ({ selectedDate, ministryId }) => { color: colors.textPrimary, fontFamily: "poppins", fontWeight: 500, + mb:{xs:"6px",sm:"6px",md:0} }} > Departments - + {selectedPresident && ( @@ -153,6 +154,8 @@ export default function GazetteTimeline() { scroll("left")} sx={{ + width: { xs: 32, sm: 40 }, + height: { xs: 32, sm: 40 }, zIndex: 10, mt: -6.8, backgroundColor: colors.backgroundPrimary, @@ -162,6 +165,7 @@ export default function GazetteTimeline() { backgroundColor: colors.backgroundPrimary, }, color: colors.timelineColor, + "& svg": { fontSize: { xs: "1rem", sm: "1.2rem" } }, }} > @@ -428,6 +432,8 @@ export default function GazetteTimeline() { scroll("right")} sx={{ + width: { xs: 32, sm: 40 }, + height: { xs: 32, sm: 40 }, zIndex: 9, mt: -6.8, backgroundColor: colors.backgroundPrimary, @@ -437,6 +443,7 @@ export default function GazetteTimeline() { backgroundColor: colors.backgroundPrimary, }, color: colors.timelineColor, + "& svg": { fontSize: { xs: "1rem", sm: "1.2rem" } }, }} > diff --git a/src/pages/OrganizationPage/components/MinistryCardGrid.jsx b/src/pages/OrganizationPage/components/MinistryCardGrid.jsx index 8d62de1..8d24300 100644 --- a/src/pages/OrganizationPage/components/MinistryCardGrid.jsx +++ b/src/pages/OrganizationPage/components/MinistryCardGrid.jsx @@ -1,5 +1,5 @@ import { - Box, Grid, Typography, Alert, AlertTitle, TextField, Select, MenuItem, FormControl, InputLabel, Button, Card, DialogContent, Avatar, + Box, Grid, Typography, Alert, AlertTitle, TextField, Select, MenuItem, FormControl, InputLabel, Button, Card, DialogContent, Avatar, ToggleButtonGroup, ToggleButton, } from "@mui/material"; import { useEffect, useRef, useState, useMemo } from "react"; @@ -281,8 +281,8 @@ const MinistryCardGrid = () => { width: "100%", gap: { xs: 2, sm: 2, md: 2, lg: 4, xl: 3 }, mb: 3, - py: 2, - px: 3, + py: { xs: 1, sm: 1, md: 2, lg: 2, xl: 2 }, + px: { xs: 1, sm: 1, md: 3, lg: 3, xl: 3 }, backgroundColor: colors.backgroundWhite, borderRadius: 2, border: "1px solid", @@ -312,7 +312,10 @@ const MinistryCardGrid = () => { }, }} > - + {primeMinister.person && primeMinister.relation && selectedPresident ? ( @@ -321,6 +324,7 @@ const MinistryCardGrid = () => { display: "flex", alignItems: "center", justifyContent: "flex-start", + gap: { xs: 1.5, sm: 1.5, md: 0 }, ml: 2, }} > @@ -333,7 +337,10 @@ const MinistryCardGrid = () => { backgroundColor: colors.backgroundPrimary, }} /> - + { display: "flex", flexDirection: "column", justifyContent: "center", - mb: { xs: 2, md: 0 }, + mb: { xs: 1, md: 0 }, borderRadius: 2, }} > { > {/* Active Ministries */} {activeMinistriesCount > 0 && ( - + @@ -498,7 +509,7 @@ const MinistryCardGrid = () => { {/* New Ministries */} {newMinistriesCount > 0 && ( - + @@ -534,7 +545,7 @@ const MinistryCardGrid = () => { {/* New Ministers */} {newMinistersCount > 0 && ( - + @@ -570,7 +581,7 @@ const MinistryCardGrid = () => { {/* Ministries under president */} {ministriesUnderPresident > 0 && ( - + @@ -614,7 +625,8 @@ const MinistryCardGrid = () => { display: "flex", flexDirection: "column", gap: 2, - py: 2, + py: {xs: 0, md: 2}, + pb: {xs: 2}, borderRadius: 2, backgroundColor: colors.backgroundWhite, border: "1px solid", @@ -653,6 +665,7 @@ const MinistryCardGrid = () => { flex: 1, minWidth: { xs: "100%", sm: 200 }, maxWidth: { sm: 300 }, + mb: {xs: "10px", md: 0}, }} > { sx={{ minWidth: { xs: "100%", sm: 120 }, flexShrink: 0, + mb: {xs: "8px", md: 0}, }} > { sx={{ width: "100%", display: "flex", - pl: viewMode == "Grid" ? 6.5 : 0, + pl: { + xs: 0, + sm: 0, + md: viewMode == "Grid" ? 6.5 : 0, + }, + px: { xs: 1, sm: 1, md: 6.5} + }} > {viewMode == "Grid" ? ( @@ -787,7 +807,7 @@ const MinistryCardGrid = () => { width: "100%", "& .MuiStepConnector-line": { borderColor: colors.textMuted, - }, + } }} orientation="vertical" > @@ -958,22 +978,21 @@ const MinistryCardGrid = () => { step.label == "Departments & People" && ( { }, }} > - {["departments", "people"].map((tab) => { - const label = - tab.charAt(0).toUpperCase() + - tab.slice(1); - const isActive = tab == activeTab; - return ( - - ); - })} + {/* Toggle for xs and sm screens */} + { + if (newValue !== null) { + setActiveTab(newValue); + } + }} + sx={{ + display: { xs: "flex", sm: "flex", md: "none" }, + gap: 0, + "& .MuiToggleButtonGroup-grouped": { + border: `1px solid ${selectedPresident.themeColorLight}`, + borderRadius: "50px", + "&:not(:first-of-type)": { + borderLeft: `1px solid ${selectedPresident.themeColorLight}`, + marginLeft: "-1px", + }, + "&:first-of-type": { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + }, + "&:last-of-type": { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, + }, + }} + > + {["departments", "people"].map((tab) => { + const label = + tab.charAt(0).toUpperCase() + + tab.slice(1); + const isActive = activeTab === tab; + const IconComponent = tab === "departments" ? ApartmentIcon : PeopleIcon; + return ( + + {isActive ? ( + label + ) : ( + + )} + + ); + })} + + + {/* Buttons for md and larger screens */} + + {["departments", "people"].map((tab) => { + const label = + tab.charAt(0).toUpperCase() + + tab.slice(1); + const isActive = tab == activeTab; + return ( + + ); + })} + - + <> {selectedCard && activeTab === "departments" && ( diff --git a/src/pages/OrganizationPage/components/PersonsTab.jsx b/src/pages/OrganizationPage/components/PersonsTab.jsx index d865cd0..819c3a1 100644 --- a/src/pages/OrganizationPage/components/PersonsTab.jsx +++ b/src/pages/OrganizationPage/components/PersonsTab.jsx @@ -114,11 +114,11 @@ const PersonsTab = ({ selectedDate }) => { display: "flex", flexDirection: "column", alignItems: "flex-start", - width: "40%", - border: `2px solid ${colors.backgroundWhite}`, - p: 2, + width: {xs:"100%", sm:"100%", md:"40%"}, + border: {xs:0,sm:0,md:`1px solid ${colors.backgroundWhite}`}, + p: {xs:0,sm:0,md:2}, backgroundColor: colors.backgroundWhite, - borderRadius: "14px", + borderRadius: {xs:0,sm:0,md:"14px"} }} > { }} > - + {/* Count on small screens, Icon on larger screens */} + + {ministerListForMinistry.length} + + { /> + {/* Count on larger screens */} { }} > - + {/* Count on small screens, Icon on larger screens */} + + {ministerListForMinistry.filter((p) => p.isNew).length} + + { /> + {/* Count on larger screens */} { variant="subtitle1" sx={{ mt: 2, + mb: {xs:2,sm:2,md:0}, fontSize: "1rem", color: colors.textPrimary, fontWeight: 500, @@ -246,92 +281,215 @@ const PersonsTab = ({ selectedDate }) => { key={idx} sx={{ display: "flex", - alignItems: "center", - justifyContent: "space-between", - // boxShadow: "0 2px 5px rgba(0, 0, 0, 0.05)", - padding: "12px 16px", + flexDirection: "column", + p: { xs: 0, sm: 0, md: "12px 16px" }, + gap: { xs: 1.5, sm: 1.5, md: 0 }, marginBottom: "12px", transition: "all 0.3s ease", cursor: "pointer", borderBottom: `1px solid ${colors.backgroundWhite}`, }} > - - - + {/* Icon column */} + - {utils.extractNameFromProtobuf(person.name)} - - {/* President Badge */} - {person.isPresident && ( - + + + {/* Content column */} + + {/* Name + badges */} + + + {utils.extractNameFromProtobuf(person.name)} + + {person.isPresident && ( + + President + + )} + {person.isNew && ( + + New + + )} + + + {/* View profile link */} + { + e.target.style.textDecoration = "underline"; + }} + onMouseLeave={(e) => { + e.target.style.textDecoration = "none"; }} > - President - - )} - {person.isNew && ( + View Profile + + + + + {/* Large screens (md+): original layout */} + + + - New + {utils.extractNameFromProtobuf(person.name)} - )} - + {person.isPresident && ( + + President + + )} + {person.isNew && ( + + New + + )} + - { - e.target.style.textDecoration = "underline"; - }} - onMouseLeave={(e) => { - e.target.style.textDecoration = "none"; - }} - > - View Profile - + { + e.target.style.textDecoration = "underline"; + }} + onMouseLeave={(e) => { + e.target.style.textDecoration = "none"; + }} + > + View Profile + + ))} diff --git a/src/pages/OrganizationPage/screens/Organization.jsx b/src/pages/OrganizationPage/screens/Organization.jsx index 21776b9..daa7bfd 100644 --- a/src/pages/OrganizationPage/screens/Organization.jsx +++ b/src/pages/OrganizationPage/screens/Organization.jsx @@ -29,7 +29,7 @@ const Organization = ({ dateRange }) => {
{/* FilteredPresidentCards Component */} {dateRange[0] && dateRange[1] && ( -
+
)} From 1bf25ee633c0f84bf0ef5b1e748f30f271e98a9d Mon Sep 17 00:00:00 2001 From: Yasandu Imanjith <89386702+yasandu0505@users.noreply.github.com> Date: Wed, 7 Jan 2026 16:01:19 +0530 Subject: [PATCH 04/15] style: make the graph view and its content mobile responsive, handling landscape detection --- src/components/landscapeRequired.jsx | 45 +++++++++++++++++++ .../ministryViewModeToggleButton.jsx | 2 +- .../components/MinistryCardGrid.jsx | 9 +++- .../components/graphComponent.jsx | 2 +- .../components/graphDrawer.jsx | 4 +- 5 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 src/components/landscapeRequired.jsx diff --git a/src/components/landscapeRequired.jsx b/src/components/landscapeRequired.jsx new file mode 100644 index 0000000..2d932ea --- /dev/null +++ b/src/components/landscapeRequired.jsx @@ -0,0 +1,45 @@ +import { useEffect, useState } from "react"; + +export default function LandscapeRequired({ + smallMaxWidth = 768, + children, + message = "Rotate your device to landscape 📱↔️" +}) { + const [isLandscape, setIsLandscape] = useState( + window.innerWidth > window.innerHeight + ); + + const isSmallScreen = window.innerWidth < smallMaxWidth; + + useEffect(() => { + const onResize = () => { + setIsLandscape(window.innerWidth > window.innerHeight); + }; + window.addEventListener("resize", onResize); + return () => window.removeEventListener("resize", onResize); + }, []); + + if (isSmallScreen && !isLandscape) { + return ( +
+ {message} +
+ ); + } + + return children; +} + +const overlayStyle = { + position: "fixed", + inset: 0, + display: "flex", + justifyContent: "center", + alignItems: "center", + background: "rgba(0,0,0,0.9)", + color: "#fff", + fontSize: "20px", + textAlign: "center", + zIndex: 9999, + padding: "16px" +}; diff --git a/src/components/ministryViewModeToggleButton.jsx b/src/components/ministryViewModeToggleButton.jsx index 05b336a..2e6db73 100644 --- a/src/components/ministryViewModeToggleButton.jsx +++ b/src/components/ministryViewModeToggleButton.jsx @@ -5,7 +5,7 @@ export default function MinistryViewModeToggleButton({ viewMode, setViewMode }) const isGraph = viewMode === "Graph"; return ( -
+
{ @@ -1159,10 +1162,12 @@ const MinistryCardGrid = () => { })} ) : ( - + + )} diff --git a/src/pages/OrganizationPage/components/graphComponent.jsx b/src/pages/OrganizationPage/components/graphComponent.jsx index 624a287..70b21ad 100644 --- a/src/pages/OrganizationPage/components/graphComponent.jsx +++ b/src/pages/OrganizationPage/components/graphComponent.jsx @@ -646,7 +646,7 @@ export default function GraphComponent({ activeMinistries, filterType }) {
+
{drawerContentList && Object.keys(drawerContentList).length > visibleCount && ( - + {isExpanded ? : } + +
@@ -203,10 +221,11 @@ export default function HomePage() {
- {/* Main content */} + {/* Main content - Fixed margin on mobile, responsive margin on desktop */}
{/* Header */}
@@ -252,4 +271,4 @@ export default function HomePage() {
); -} +} \ No newline at end of file From 0c457aa2b6e3e96a57e1ffae78cecb3b3a57fb74 Mon Sep 17 00:00:00 2001 From: Yasandu Imanjith <89386702+yasandu0505@users.noreply.github.com> Date: Thu, 8 Jan 2026 19:53:59 +0530 Subject: [PATCH 06/15] resolve : use SSR-safety patterns --- src/components/landscapeRequired.jsx | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/src/components/landscapeRequired.jsx b/src/components/landscapeRequired.jsx index 2d932ea..8a967f7 100644 --- a/src/components/landscapeRequired.jsx +++ b/src/components/landscapeRequired.jsx @@ -5,26 +5,25 @@ export default function LandscapeRequired({ children, message = "Rotate your device to landscape 📱↔️" }) { - const [isLandscape, setIsLandscape] = useState( - window.innerWidth > window.innerHeight - ); - - const isSmallScreen = window.innerWidth < smallMaxWidth; + // Initialize with safe defaults + const [isLandscape, setIsLandscape] = useState(false); + const [isSmallScreen, setIsSmallScreen] = useState(false); useEffect(() => { - const onResize = () => { + const updateSizes = () => { setIsLandscape(window.innerWidth > window.innerHeight); + setIsSmallScreen(window.innerWidth < smallMaxWidth); }; - window.addEventListener("resize", onResize); - return () => window.removeEventListener("resize", onResize); - }, []); + + // Set initial values on mount + updateSizes(); + + window.addEventListener("resize", updateSizes); + return () => window.removeEventListener("resize", updateSizes); + }, [smallMaxWidth]); // depend on smallMaxWidth prop if (isSmallScreen && !isLandscape) { - return ( -
- {message} -
- ); + return
{message}
; } return children; From 761dc8a68264697d8e0ec2c0596515d7a542c631 Mon Sep 17 00:00:00 2001 From: Yasandu Imanjith <89386702+yasandu0505@users.noreply.github.com> Date: Thu, 8 Jan 2026 19:56:09 +0530 Subject: [PATCH 07/15] fix : fixing typo --- src/pages/LandingPage/screens/LandingPage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/LandingPage/screens/LandingPage.jsx b/src/pages/LandingPage/screens/LandingPage.jsx index 46b2126..d0a546c 100644 --- a/src/pages/LandingPage/screens/LandingPage.jsx +++ b/src/pages/LandingPage/screens/LandingPage.jsx @@ -180,7 +180,7 @@ const LandingPage = () => { style={{ transform: `translateX(-${currentIndex * 100}%)` }} > {/* Card 1 */} -
+
{/* Soft light gradient overlay for frosted effect */}
From 6fff006a9253638e24f89c45ece4d2efb562b03d Mon Sep 17 00:00:00 2001 From: Yasandu Imanjith <89386702+yasandu0505@users.noreply.github.com> Date: Thu, 8 Jan 2026 19:58:31 +0530 Subject: [PATCH 08/15] fix : fixing a code Quality issue --- src/pages/HomePage/screens/HomePage.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/HomePage/screens/HomePage.jsx b/src/pages/HomePage/screens/HomePage.jsx index 6e4bf50..05a0f52 100644 --- a/src/pages/HomePage/screens/HomePage.jsx +++ b/src/pages/HomePage/screens/HomePage.jsx @@ -27,6 +27,7 @@ export default function HomePage() { const navigate = useNavigate(); const location = useLocation(); const { tab } = useParams(); + const MOBILE_BREAKPOINT = 768; const selectedTab = tab || "organization"; @@ -137,7 +138,7 @@ export default function HomePage() { }); // Close sidebar on mobile after selecting a tab - if (window.innerWidth < 768) { + if (window.innerWidth < MOBILE_BREAKPOINT) { setIsExpanded(false); } }; From f66aee13e84468ef64877bcc3f9b5c287c7969f4 Mon Sep 17 00:00:00 2001 From: Yasandu Imanjith <89386702+yasandu0505@users.noreply.github.com> Date: Mon, 19 Jan 2026 10:31:16 +0530 Subject: [PATCH 09/15] modify : modify the footer to be centre on mbile screen --- src/pages/LandingPage/components/footer.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/LandingPage/components/footer.jsx b/src/pages/LandingPage/components/footer.jsx index c296234..e9ce35f 100644 --- a/src/pages/LandingPage/components/footer.jsx +++ b/src/pages/LandingPage/components/footer.jsx @@ -6,21 +6,23 @@ export default function Footer() { className={`absolute lg:bottom-0 z-100 border-t border-border px-2 lg:px-6 w-full`} >
-
+
{/* Copyright */}

Open Data ©{" "} +
{new Date().getFullYear()}. All rights reserved.

{/* Social Media Links */} -
+
); -} +} \ No newline at end of file From 012d1c079566fd00e2cccb3b28feb5e9e845410d Mon Sep 17 00:00:00 2001 From: Yasandu Imanjith <89386702+yasandu0505@users.noreply.github.com> Date: Mon, 19 Jan 2026 10:48:20 +0530 Subject: [PATCH 10/15] fix : remove unnecessary z indexes from components --- src/components/ShareLinkButton.jsx | 2 +- src/pages/HomePage/components/TimeRangeSelector.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ShareLinkButton.jsx b/src/components/ShareLinkButton.jsx index 72ee9f6..6a1c50c 100644 --- a/src/components/ShareLinkButton.jsx +++ b/src/components/ShareLinkButton.jsx @@ -10,7 +10,7 @@ const ShareLinkButton = () => { }; return ( -
+
))} +
+ + {/* Presidents dropdown */} -
+
{/* Main button */}
{/* Selected range display */} -
+
{new Date( tempStartDate.toISOString().split("T")[0] @@ -1217,6 +1221,7 @@ export default function TimeRangeSelector({ })}
+
{/* Scrollable chart */} From 82d3ec206ac4354735c66af0bdfc3bb9f8f7b011 Mon Sep 17 00:00:00 2001 From: Yasandu Imanjith <89386702+yasandu0505@users.noreply.github.com> Date: Mon, 19 Jan 2026 12:25:08 +0530 Subject: [PATCH 12/15] modify : configured the calendar headers for mobile view --- .../HomePage/components/TimeRangeSelector.jsx | 176 +++++++++--------- src/pages/HomePage/screens/HomePage.jsx | 2 +- 2 files changed, 85 insertions(+), 93 deletions(-) diff --git a/src/pages/HomePage/components/TimeRangeSelector.jsx b/src/pages/HomePage/components/TimeRangeSelector.jsx index 7ad6796..f68089a 100644 --- a/src/pages/HomePage/components/TimeRangeSelector.jsx +++ b/src/pages/HomePage/components/TimeRangeSelector.jsx @@ -100,7 +100,7 @@ export default function TimeRangeSelector({ const newEnd = endDate.toISOString().split("T")[0]; const currentStart = params.get("startDate"); const currentEnd = params.get("endDate"); - + // merge with existing URL params params.set("startDate", newStart); params.set("endDate", newEnd); @@ -126,7 +126,7 @@ export default function TimeRangeSelector({ // SelectedDate year is within the URL range → keep URL range as-is if (targetDate >= urlStart && targetDate <= urlEnd) { - + } // SelectedDate year is outside URL range but within available range → override range to full year else if (targetDate >= minDate && targetDate <= maxDate) { @@ -699,67 +699,65 @@ export default function TimeRangeSelector({
- {/* Year presets */} - {[ - { label: "1Y", years: 1 }, - { label: "2Y", years: 2 }, - { label: "3Y", years: 3 }, - { label: "5Y", years: 5 }, - { label: "All", years: endYear - startYear + 1 }, - ].map((preset) => ( - - ))} + }`} + > + {preset.label} + + ))}
- - + + {/* Presidents dropdown */}
{/* Main button */} {calendarOpen && ( -
+
{/* From date */}
@@ -940,7 +935,7 @@ export default function TimeRangeSelector({ ); return ( -
+