Skip to content

Commit c3765d9

Browse files
PintoGideonPintoGideon
committed
feat: Responsive layout for the feed detail view page
1 parent f1d568d commit c3765d9

File tree

7 files changed

+148
-74
lines changed

7 files changed

+148
-74
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@
8888
"react-lazylog": "^4.5.3",
8989
"react-redux": "^9.1.2",
9090
"react-resizable-panels": "^2.1.4",
91+
"react-responsive": "^10.0.0",
9192
"react-router": "^6.26.2",
9293
"react-router-dom": "^6.26.2",
9394
"redux-saga": "^1.3.0",

‎pnpm-lock.yaml‎

Lines changed: 39 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/api/common.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as React from "react";
1+
import React from "react";
22
import axios, { type AxiosProgressEvent } from "axios";
33
import ChrisAPIClient from "./chrisapiclient";
44
import type {

‎src/components/Icons/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
CheckCircleIcon,
3333
BarsIcon,
3434
GripVerticalIcon,
35+
ToolsIcon,
3536
} from "@patternfly/react-icons";
3637

3738
const CartIcon = ({
@@ -308,4 +309,5 @@ export {
308309
RetryIcon,
309310
BarsIcon,
310311
GripVerticalIcon,
312+
ToolsIcon,
311313
};

‎src/components/Pacs/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
} from "@patternfly/react-core";
1414
import SearchIcon from "@patternfly/react-icons/dist/esm/icons/search-icon";
1515
import { Alert, Spin } from "../Antd";
16-
import * as React from "react";
16+
import React from "react";
1717
import { useNavigate } from "react-router";
1818
import { useSearchParams } from "react-router-dom";
1919
import { pluralize } from "../../api/common";

‎src/components/Wrapper/Toolbar.tsx‎

Lines changed: 103 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,23 @@ import {
66
Flex,
77
FlexItem,
88
MenuToggle,
9+
Modal,
910
Switch,
11+
Tooltip,
1012
} from "@patternfly/react-core";
13+
import { BarsIcon } from "@patternfly/react-icons"; // Add a tools icon
1114
import { useQueryClient } from "@tanstack/react-query";
12-
import * as React from "react";
15+
import React from "react";
1316
import { useCookies } from "react-cookie";
17+
import { useMediaQuery } from "react-responsive";
1418
import { useLocation, useNavigate } from "react-router";
1519
import ChrisAPIClient from "../../api/chrisapiclient";
20+
import { clearCartOnLogout } from "../../store/cart/cartSlice";
1621
import { useAppDispatch, useAppSelector } from "../../store/hooks";
1722
import { setLogoutSuccess } from "../../store/user/userSlice";
1823
import { ThemeContext } from "../DarkTheme/useTheme";
1924
import FeedDetails from "../FeedDetails";
2025
import CartNotify from "./CartNotify";
21-
import { clearCartOnLogout } from "../../store/cart/cartSlice";
2226

2327
type ToolbarComponentProps = {
2428
showToolbar: boolean;
@@ -29,6 +33,8 @@ type ToolbarComponentProps = {
2933
const ToolbarComponent: React.FC<ToolbarComponentProps> = (
3034
props: ToolbarComponentProps,
3135
) => {
36+
const isSmallerScreen = useMediaQuery({ maxWidth: 1224 });
37+
3238
const { token, titleComponent } = props;
3339
const dispatch = useAppDispatch();
3440
const navigate = useNavigate();
@@ -38,6 +44,7 @@ const ToolbarComponent: React.FC<ToolbarComponentProps> = (
3844
const queryClient = useQueryClient();
3945
const username = useAppSelector((state) => state.user.username);
4046
const [dropdownOpen, setIsDropdownOpen] = React.useState(false);
47+
const [trayOpen, setTrayOpen] = React.useState(false); // State for tray visibility
4148

4249
const handleChange = () => {
4350
toggleTheme();
@@ -81,78 +88,103 @@ const ToolbarComponent: React.FC<ToolbarComponentProps> = (
8188
</DropdownItem>,
8289
];
8390

91+
const toggleTray = () => {
92+
setTrayOpen(!trayOpen);
93+
};
94+
8495
return (
85-
<Flex
86-
justifyContent={{ default: "justifyContentSpaceBetween" }}
87-
alignItems={{ default: "alignItemsCenter" }}
88-
style={{
89-
width: "100%",
90-
}}
91-
>
92-
<FlexItem>{titleComponent && titleComponent}</FlexItem>
93-
{/* Center */}
94-
<FlexItem flex={{ default: "flex_1" }}>
95-
{props.showToolbar && <FeedDetails />}
96-
</FlexItem>
96+
<>
97+
<Flex
98+
justifyContent={{ default: "justifyContentSpaceBetween" }}
99+
alignItems={{ default: "alignItemsCenter" }}
100+
style={{
101+
width: "100%",
102+
}}
103+
>
104+
<FlexItem>{titleComponent && titleComponent}</FlexItem>
105+
{/* Center */}
106+
<FlexItem flex={{ default: "flex_1" }}>
107+
{props.showToolbar && !isSmallerScreen && <FeedDetails />}
108+
</FlexItem>
97109

98-
{/* Right section */}
99-
<FlexItem align={{ default: "alignRight" }}>
100-
<Flex
101-
alignItems={{ default: "alignItemsCenter" }}
102-
spaceItems={{ default: "spaceItemsMd" }}
103-
>
104-
<FlexItem>
105-
<CartNotify />
106-
</FlexItem>
107-
<FlexItem>
108-
<Switch
109-
id="simple-switch"
110-
label="Theme"
111-
isChecked={isDarkTheme}
112-
onChange={handleChange}
113-
ouiaId="Basic Switch"
114-
/>
115-
</FlexItem>
116-
<FlexItem>
117-
{token ? (
118-
<Dropdown
119-
isPlain
120-
onSelect={onDropdownToggle}
121-
isOpen={dropdownOpen}
122-
toggle={(toggleRef) => (
123-
<MenuToggle ref={toggleRef} onClick={onDropdownToggle}>
124-
{username}
125-
</MenuToggle>
126-
)}
127-
>
128-
<DropdownList>{userDropdownItems}</DropdownList>
129-
</Dropdown>
130-
) : (
131-
<>
132-
<Button
133-
style={{ padding: "0.25em" }}
134-
variant="link"
135-
onClick={() => {
136-
navigate(
137-
`/login?redirectTo=${location.pathname}${location.search}`,
138-
);
139-
}}
140-
>
141-
Login
142-
</Button>
143-
<Button
144-
style={{ padding: "0.25em" }}
145-
variant="link"
146-
onClick={() => navigate("/signup")}
147-
>
148-
Sign Up
149-
</Button>
150-
</>
110+
{/* Right section */}
111+
<FlexItem align={{ default: "alignRight" }}>
112+
<Flex
113+
alignItems={{ default: "alignItemsCenter" }}
114+
spaceItems={{ default: "spaceItemsMd" }}
115+
>
116+
{isSmallerScreen && (
117+
<FlexItem>
118+
<Tooltip position="bottom" content="Configure Panels">
119+
<Button
120+
variant="plain"
121+
aria-label="Tools"
122+
onClick={toggleTray}
123+
icon={<BarsIcon />}
124+
/>
125+
</Tooltip>
126+
</FlexItem>
151127
)}
152-
</FlexItem>
153-
</Flex>
154-
</FlexItem>
155-
</Flex>
128+
<FlexItem>
129+
<CartNotify />
130+
</FlexItem>
131+
<FlexItem>
132+
<Switch
133+
id="simple-switch"
134+
label="Theme"
135+
isChecked={isDarkTheme}
136+
onChange={handleChange}
137+
ouiaId="Basic Switch"
138+
/>
139+
</FlexItem>
140+
<FlexItem>
141+
{token ? (
142+
<Dropdown
143+
isPlain
144+
onSelect={onDropdownToggle}
145+
isOpen={dropdownOpen}
146+
toggle={(toggleRef) => (
147+
<MenuToggle ref={toggleRef} onClick={onDropdownToggle}>
148+
{username}
149+
</MenuToggle>
150+
)}
151+
>
152+
<DropdownList>{userDropdownItems}</DropdownList>
153+
</Dropdown>
154+
) : (
155+
<>
156+
<Button
157+
style={{ padding: "0.25em" }}
158+
variant="link"
159+
onClick={() => {
160+
navigate(
161+
`/login?redirectTo=${location.pathname}${location.search}`,
162+
);
163+
}}
164+
>
165+
Login
166+
</Button>
167+
<Button
168+
style={{ padding: "0.25em" }}
169+
variant="link"
170+
onClick={() => navigate("/signup")}
171+
>
172+
Sign Up
173+
</Button>
174+
</>
175+
)}
176+
</FlexItem>
177+
</Flex>
178+
</FlexItem>
179+
</Flex>
180+
181+
{/* Modal tray for FeedDetails */}
182+
{isSmallerScreen && trayOpen && (
183+
<Modal isOpen={trayOpen} onClose={toggleTray} title="" variant="small">
184+
<FeedDetails />
185+
</Modal>
186+
)}
187+
</>
156188
);
157189
};
158190

‎src/routes.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as React from "react";
1+
import React from "react";
22
import {
33
useNavigate,
44
useRoutes,

0 commit comments

Comments
 (0)