Skip to content

Commit ce55cd2

Browse files
leekahungleekahung
authored
Merge pull request #684 from codeforpdx/issue-682/documents-styling-fixes
[Enhancement] - Issue 682/documents styling fixes
2 parents 6f49b99 + 25c0c30 commit ce55cd2

File tree

7 files changed

+94
-62
lines changed

7 files changed

+94
-62
lines changed

‎src/components/Contacts/ContactListTable.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const ContactListTable = ({ contacts = [], deleteContact, handleDeleteContact, a
3535
const contactWebIds = contacts.map(({ webId }) => webId);
3636
const theme = useTheme();
3737
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
38+
const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
3839

3940
const handleSendMessage = (contactId) => {
4041
setShowMessageModal(!showMessageModal);
@@ -55,7 +56,7 @@ const ContactListTable = ({ contacts = [], deleteContact, handleDeleteContact, a
5556
minHeight: '500px'
5657
}}
5758
>
58-
{isSmallScreen ? (
59+
{isSmallScreen || isSmallScreenHeight ? (
5960
<ContactListTableMobile
6061
data-testid="ContactListTableMobile"
6162
contacts={contacts}

‎src/components/Documents/DocumentTable.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) =>
3737
const { documentListObject, loadingDocuments } = useContext(DocumentListContext);
3838

3939
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
40+
const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
4041

4142
/**
4243
* Handles the local display of a document by opening it in a new window.
@@ -98,7 +99,7 @@ const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) =>
9899
}}
99100
data-testid="document-table"
100101
>
101-
{isMobile ? (
102+
{isMobile || isSmallScreenHeight ? (
102103
<DocumentsMobile documents={documents} handlers={handlers} data-testid="documents-mobile" />
103104
) : (
104105
<DocumentsDesktop

‎src/components/Footer/Footer.jsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import RenderCopyrightAndLinksSection from './RenderCopyrightAndLinksSection';
2121
const Footer = () => {
2222
const theme = useTheme();
2323
const isReallySmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
24+
const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
2425

2526
return (
2627
<Box
@@ -38,14 +39,18 @@ const Footer = () => {
3839
>
3940
<Stack
4041
alignItems="center"
41-
direction={isReallySmallScreen ? 'column' : 'row'}
42-
spacing={isReallySmallScreen ? 1 : 4}
42+
direction={isReallySmallScreen || isSmallScreenHeight ? 'column' : 'row'}
43+
spacing={isReallySmallScreen || isSmallScreenHeight ? 1 : 4}
4344
divider={
4445
<Divider
45-
orientation={isReallySmallScreen ? 'horizontal' : 'vertical'}
46-
flexItem={isReallySmallScreen ? null : true}
46+
orientation={isReallySmallScreen || isSmallScreenHeight ? 'horizontal' : 'vertical'}
47+
flexItem={isReallySmallScreen || isSmallScreenHeight ? null : true}
4748
color={theme.palette.primary.main}
48-
sx={isReallySmallScreen ? { height: '3px', width: 3 / 4 } : { width: '3px' }}
49+
sx={
50+
isReallySmallScreen || isSmallScreenHeight
51+
? { height: '3px', width: 3 / 4 }
52+
: { width: '3px' }
53+
}
4954
/>
5055
}
5156
>

‎src/layouts/Breadcrumbs.jsx

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,11 @@ const Breadcrumbs = () => {
3636
<MUIBreadcrumbs
3737
aria-label="breadcrumb"
3838
separator={<NavigateNextIcon fontSize="small" />}
39-
sx={{ margin: { xs: '20px', sm: '20px 80px' } }}
39+
sx={{
40+
margin: { xs: '20px', sm: '20px 80px' },
41+
wordWrap: 'break-word',
42+
overflowWrap: 'break-word'
43+
}}
4044
>
4145
{crumbs.map((crumb, index) =>
4246
index !== crumbs.length - 1 ? (
@@ -47,11 +51,20 @@ const Breadcrumbs = () => {
4751
.replaceAll(' ', '-')
4852
.toLowerCase()}`}
4953
key={crumb}
54+
style={{
55+
wordBreak: 'break-word'
56+
}}
5057
>
5158
{crumb}
5259
</Link>
5360
) : (
54-
<Typography component="h2" key={crumb}>
61+
<Typography
62+
component="h2"
63+
key={crumb}
64+
sx={{
65+
wordBreak: 'break-word'
66+
}}
67+
>
5568
{crumb}
5669
</Typography>
5770
)

‎src/pages/Documents.jsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const Documents = () => {
2828
const { setContact } = useContext(DocumentListContext);
2929
const theme = useTheme();
3030
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
31+
const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
3132

3233
// Documents related states
3334
const { session } = useSession();
@@ -107,7 +108,7 @@ const Documents = () => {
107108
size="small"
108109
onClick={() => handleAclPermissionsModal('container')}
109110
sx={{
110-
width: isSmallScreen ? '165px' : '200px',
111+
width: isSmallScreen || isSmallScreenHeight ? '165px' : '200px',
111112
borderColor: 'primary.main',
112113
padding: '6px 12px'
113114
}}
@@ -119,7 +120,10 @@ const Documents = () => {
119120
color="primary"
120121
size="small"
121122
onClick={() => setShowAddDocModal(true)}
122-
sx={{ width: isSmallScreen ? '140px' : '180px', padding: '6px 12px' }}
123+
sx={{
124+
width: isSmallScreen || isSmallScreenHeight ? '140px' : '180px',
125+
padding: '6px 12px'
126+
}}
123127
>
124128
Add Document
125129
</Button>

‎src/pages/Home.jsx

Lines changed: 58 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ import { HomeSection, KeyFeatures } from '@components/Home';
2727
const Home = () => {
2828
const theme = useTheme();
2929
const isReallySmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
30-
const iconSize = isReallySmallScreen ? 'medium' : 'large';
30+
const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
31+
const iconSize = isReallySmallScreen || isSmallScreenHeight ? 'medium' : 'large';
3132
const aboutRef = useRef(null);
3233

3334
const handleClick = () => aboutRef.current.scrollIntoView({ behavior: 'smooth' });
@@ -45,64 +46,70 @@ const Home = () => {
4546
);
4647
const subheading = 'Personal Access System for Services';
4748

48-
const logoSection = isReallySmallScreen ? (
49-
<Typography component="h1" color="primary">
50-
<Stack
51-
component="span"
52-
justifyContent="center"
53-
alignItems="center"
54-
spacing={2}
55-
mb={2}
56-
data-testid="testStack"
57-
>
58-
<Typography
59-
color="primary.text"
60-
variant="h1"
61-
component="span"
62-
fontWeight="500"
63-
fontSize="72px"
64-
>
65-
{heading}
66-
</Typography>
67-
<Box component="img" src="/assets/PASSLogolightmode.png" alt="" width="50%" />
68-
<Typography color="primary.text" variant="h4" component="span" fontWeight="600" mb={8}>
69-
{subheading}
70-
</Typography>
71-
</Stack>
72-
</Typography>
73-
) : (
74-
<Typography component="h1" color="primary.text">
75-
<Stack
76-
justifyContent="center"
77-
alignItems="center"
78-
spacing={4}
79-
mb={18}
80-
data-testid="testStack"
81-
>
49+
const logoSection =
50+
isReallySmallScreen || isSmallScreenHeight ? (
51+
<Typography component="h1" color="primary">
8252
<Stack
8353
component="span"
84-
direction="row"
8554
justifyContent="center"
8655
alignItems="center"
87-
spacing={4}
56+
spacing={2}
57+
mb={2}
58+
data-testid="testStack"
8859
>
89-
<Box component="img" src="/assets/PASSLogolightmode.png" alt="" width="150px" />
9060
<Typography
9161
color="primary.text"
9262
variant="h1"
9363
component="span"
9464
fontWeight="500"
95-
fontSize="144px"
65+
fontSize="72px"
9666
>
9767
{heading}
9868
</Typography>
69+
<Box
70+
component="img"
71+
src="/assets/PASSLogolightmode.png"
72+
alt=""
73+
width={isSmallScreenHeight ? '20%' : '50%'}
74+
/>
75+
<Typography color="primary.text" variant="h4" component="span" fontWeight="600" mb={8}>
76+
{subheading}
77+
</Typography>
9978
</Stack>
100-
<Typography color="primary.text" variant="h3" component="span" fontWeight="600">
101-
{subheading}
102-
</Typography>
103-
</Stack>
104-
</Typography>
105-
);
79+
</Typography>
80+
) : (
81+
<Typography component="h1" color="primary.text">
82+
<Stack
83+
justifyContent="center"
84+
alignItems="center"
85+
spacing={4}
86+
mb={18}
87+
data-testid="testStack"
88+
>
89+
<Stack
90+
component="span"
91+
direction="row"
92+
justifyContent="center"
93+
alignItems="center"
94+
spacing={4}
95+
>
96+
<Box component="img" src="/assets/PASSLogolightmode.png" alt="" width="150px" />
97+
<Typography
98+
color="primary.text"
99+
variant="h1"
100+
component="span"
101+
fontWeight="500"
102+
fontSize="144px"
103+
>
104+
{heading}
105+
</Typography>
106+
</Stack>
107+
<Typography color="primary.text" variant="h3" component="span" fontWeight="600">
108+
{subheading}
109+
</Typography>
110+
</Stack>
111+
</Typography>
112+
);
106113

107114
return (
108115
<Container sx={{ width: '100vw' }}>
@@ -135,7 +142,7 @@ const Home = () => {
135142
</Box>
136143
<div ref={aboutRef}>
137144
<HomeSection
138-
isReallySmallScreen={isReallySmallScreen}
145+
isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
139146
componentImageSrc="/assets/web-security-blue.webp"
140147
componentImageAlt=""
141148
title="Keep Your Documents Safe and Secure Using Decentralized Technology"
@@ -145,33 +152,33 @@ const Home = () => {
145152
hasMargin
146153
/>
147154
<HomeSection
148-
isReallySmallScreen={isReallySmallScreen}
155+
isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
149156
componentImageSrc="/assets/app-blue.webp"
150157
componentImageAlt=""
151158
title="An App for Caseworkers"
152159
description="PASS allows users to quickly and securely share documents of their clients within the app. The app helps caseworkers verify and share documents such as ID and proof of income while retaining total control of them."
153160
hasMargin
154161
/>
155162
<HomeSection
156-
isReallySmallScreen={isReallySmallScreen}
163+
isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
157164
componentImageSrc="/assets/key-features-blue.webp"
158165
componentImageAlt=""
159166
title="Key Features"
160167
/>
161168
<KeyFeatures
162-
isReallySmallScreen={isReallySmallScreen}
169+
isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
163170
icon={<SecurityIcon fontSize={iconSize} />}
164171
title="Secure Storage"
165172
description="Store vital documents like IDs, Social Security information, birth certificates, medical records, and bank statements in a valid digital format."
166173
/>
167174
<KeyFeatures
168-
isReallySmallScreen={isReallySmallScreen}
175+
isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
169176
icon={<Diversity1Icon fontSize={iconSize} />}
170177
title="Nonprofit-Caseworker Integration"
171178
description="The platform facilitates smooth communication between nonprofit organizations, case workers, and the individuals they serve. It allows nonprofit organizations to maintain a contact list, and caseworkers are assigned contacts whose data they can access securely."
172179
/>
173180
<KeyFeatures
174-
isReallySmallScreen={isReallySmallScreen}
181+
isReallySmallScreen={isReallySmallScreen || isSmallScreenHeight}
175182
icon={<SupportIcon fontSize={iconSize} />}
176183
title="Support Service"
177184
description="Verified documents can be used to facilitate access to service such as housing support and shelter accommodation. The platform simplifies the process of submitting necessary documents for such services."

‎src/pages/Profile.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ const Profile = () => {
135135
alignItems: 'center',
136136
width: '100%',
137137
height: isSmallScreen ? 'auto' : '60dvh',
138+
minHeight: '500px',
138139
margin: '20px auto',
139140
justifyContent: 'center'
140141
}}

0 commit comments

Comments
 (0)