Skip to content

Commit e14ec00

Browse files
maxskewesmaxskewes
committed
Clean Up 6.6.22
Deleted unused styles/divs. Refactored usage of mui's Grid
1 parent caf9020 commit e14ec00

File tree

5 files changed

+226
-369
lines changed

5 files changed

+226
-369
lines changed

‎src/components/ContributorThumbnail.js‎

Lines changed: 64 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,38 @@
33
import React, { useEffect, useState } from 'react';
44
import Box from '@material-ui/core/Box';
55
import CardMedia from '@material-ui/core/CardMedia';
6-
import Grid from '@material-ui/core/Grid';
76
import Link from '@material-ui/core/Link';
87
import Typography from '@material-ui/core/Typography';
98
import makeStyles from '@material-ui/core/styles/makeStyles';
109
import { getOrganizationLinks } from './getOrganizationLinks.js';
1110
import spectrum from '../theme-spectrum';
1211

1312
const useStyles = makeStyles((theme) => ({
14-
affThumbnailText: {
15-
width: '85%',
16-
},
1713
thumbnailWrapper: {
1814
display: 'flex',
1915
flexDirection: 'row',
20-
alignItems: 'flex-end',
21-
padding: '13px',
16+
alignItems: 'center',
2217
flexWrap: 'nowrap',
18+
padding: '12px 16px',
19+
[theme.breakpoints.down('md')]: {
20+
padding: '8px 16px',
21+
},
2322
[theme.breakpoints.down('sm')]: {
24-
padding: '0px',
25-
marginTop: '1px',
26-
marginLeft: '1px',
23+
padding: '8px 8px',
24+
// marginTop: '1px',
25+
// marginLeft: '1px',
2726
},
2827
},
28+
// thumbnailWrapperContributor: {
29+
// display: 'flex',
30+
// flexDirection: 'row',
31+
// alignItems: 'flex-end',
32+
// padding: '13px',
33+
// flexWrap: 'nowrap',
34+
// [theme.breakpoints.down('sm')]: {
35+
// padding: '5px',
36+
// },
37+
// },
2938
thumbnailImage: {
3039
width: '48px',
3140
height: '48px',
@@ -34,6 +43,17 @@ const useStyles = makeStyles((theme) => ({
3443
height: '26px',
3544
},
3645
},
46+
thumbnailChildImage: {
47+
width: '32px',
48+
height: '32px',
49+
[theme.breakpoints.down('sm')]: {
50+
width: '20px',
51+
height: '20px',
52+
},
53+
},
54+
textElipsisLimiter: {
55+
width: '97%',
56+
},
3757
orgText: {
3858
paddingLeft: '9px',
3959
'& a:link': {
@@ -103,36 +123,16 @@ const useStyles = makeStyles((theme) => ({
103123
right: 0,
104124
},
105125
},
106-
thumbnailWrapperContributor: {
107-
display: 'flex',
108-
flexDirection: 'row',
109-
alignItems: 'flex-end',
110-
padding: '13px',
111-
flexWrap: 'nowrap',
112-
position: 'relative',
113-
[theme.breakpoints.down('sm')]: {
114-
padding: '5px',
115-
},
116-
},
117-
thumbnailChildImage: {
118-
width: '32px',
119-
height: '32px',
120-
[theme.breakpoints.down('sm')]: {
121-
width: '20px',
122-
height: '20px',
123-
},
124-
},
125126
contributorIcon: {
127+
margin: '24px',
126128
width: '24px',
127129
height: '24px',
128130
[theme.breakpoints.down('sm')]: {
131+
margin: '17px',
129132
width: '17px',
130133
height: '17px',
131134
},
132135
},
133-
parentText: {
134-
alignItems: 'center',
135-
},
136136
}));
137137

138138
export const ContributorThumbnail = ({
@@ -143,7 +143,7 @@ export const ContributorThumbnail = ({
143143
checkboxValue,
144144
filtersActive,
145145
}) => {
146-
const classes = useStyles();
146+
147147
const [thumbnailInfo, setThumbnailInfo] = useState({});
148148

149149
useEffect(() => {
@@ -152,26 +152,24 @@ export const ContributorThumbnail = ({
152152

153153
return (
154154
<>
155-
<Box style={{ position: 'relative', width: '100%' }}>
156-
{thumbnailInfo.organizationUrl ? (
157-
<Thumbnail
158-
thumbnailInfo={thumbnailInfo}
159-
organization={organization}
160-
isOpen={isOpen}
161-
dropdownLength={dropdownLength}
162-
isChildThumbnail={isChildThumbnail}
163-
checkboxValue={checkboxValue}
164-
filtersActive={filtersActive}
165-
/>
166-
) : (
167-
<Grid className={classes.textWrapperWithoutImage} component='span'>
168-
<Typography component='span'>
169-
{' '}
170-
No URL Data for {organization.name}{' '}
171-
</Typography>
172-
</Grid>
173-
)}
174-
</Box>
155+
{thumbnailInfo.organizationUrl ? (
156+
<Thumbnail
157+
thumbnailInfo={thumbnailInfo}
158+
organization={organization}
159+
isOpen={isOpen}
160+
dropdownLength={dropdownLength}
161+
isChildThumbnail={isChildThumbnail}
162+
checkboxValue={checkboxValue}
163+
filtersActive={filtersActive}
164+
/>
165+
) : (
166+
<>
167+
<Typography component='span'>
168+
{' '}
169+
No URL Data for {organization.name}{' '}
170+
</Typography>
171+
</>
172+
)}
175173
</>
176174
);
177175
};
@@ -188,11 +186,11 @@ const Thumbnail = ({
188186
const classes = useStyles();
189187
let thumbnailImageStyle, thumbnailWrapperStyle;
190188

191-
if (organization.cti_contributor) {
192-
thumbnailWrapperStyle = classes.thumbnailWrapperContributor;
193-
} else {
194-
thumbnailWrapperStyle = `${classes.thumbnailWrapper} ${classes.parentText}`;
195-
}
189+
// if (organization.cti_contributor) {
190+
// thumbnailWrapperStyle = classes.thumbnailWrapperContributor;
191+
// } else {
192+
// thumbnailWrapperStyle = classes.thumbnailWrapper;
193+
// }
196194
if (organization.affiliated && organization.depth === 3) {
197195
thumbnailImageStyle = classes.thumbnailImage;
198196
} else if (organization.depth === 4) {
@@ -218,21 +216,8 @@ const Thumbnail = ({
218216
'childNodes' in organization && organization.depth === 2;
219217

220218
return (
221-
<>
222-
<Box className={classes.contributorItem}>
223-
{organization.depth === 4 &&
224-
checkboxValue &&
225-
organization.cti_contributor ? (
226-
<img
227-
alt='contributor-icon'
228-
data-cy='contributor-icon'
229-
className={classes.contributorIcon}
230-
src='/images/Child_contributed.svg'
231-
/>
232-
) : null}
233-
</Box>
234-
<Grid container className={thumbnailWrapperStyle}>
235-
<Grid item className={classes.imageWrapper}>
219+
<Box className={classes.thumbnailWrapper}>
220+
<Box className={classes.imageWrapper}>
236221
<CardMedia
237222
component='img'
238223
src={thumbnailInfo.imageUrl}
@@ -246,8 +231,8 @@ const Thumbnail = ({
246231
alt={`${organization.name} logo`}
247232
loading='lazy'
248233
/>
249-
</Grid>
250-
<Grid item className={classes.affThumbnailText}>
234+
</Box>
235+
<Box className={classes.textElipsisLimiter}>
251236
<Typography
252237
variant={isChildThumbnail ? 'h6' : 'h5'}
253238
aria-level={isChildThumbnail ? '4' : '3'}
@@ -266,8 +251,9 @@ const Thumbnail = ({
266251
</Link>{' '}
267252
{showtotalChildCount()}
268253
</Typography>
269-
</Grid>
270-
<Grid>
254+
</Box>
255+
{/* what is gparenticon? */}
256+
{/* <Box>
271257
<Typography>
272258
{organization.childNodes?.length > 0 && checkboxValue ? (
273259
<img
@@ -280,8 +266,7 @@ const Thumbnail = ({
280266
' '
281267
)}
282268
</Typography>
283-
</Grid>
284-
</Grid>
285-
</>
269+
</Box> */}
270+
</Box>
286271
);
287272
};

‎src/components/Dropdown.js‎

Lines changed: 33 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,45 @@ import { ContributorThumbnail } from './ContributorThumbnail';
44
import { DropdownArrow } from './DropdownArrow';
55
import Grid from '@material-ui/core/Grid';
66
import clsx from 'clsx';
7+
import { Box } from '@material-ui/core';
78

89
const useStyles = makeStyles((theme) => ({
910
dropdown: {
10-
margin: '24px auto',
11+
width: '100%',
12+
margin: '16px 0 0 0',
1113
display: 'flex',
1214
alignItems: 'center',
15+
justifyContent: 'space-between',
1316
backgroundColor: theme.palette.background.default,
1417
boxSizing: 'border-box',
1518
border: '1px solid',
1619
borderColor: theme.palette.outline.gray,
1720
borderRadius: '6px',
1821
height: '80px',
19-
padding: '12px 16px',
2022
[theme.breakpoints.down('sm')]: {
2123
height: '49px',
2224
},
2325
},
26+
arrowBox: {
27+
display: 'flex',
28+
alignItems: 'center',
29+
padding: '0 16px',
30+
[theme.breakpoints.down('md')]: {
31+
padding: '0 16px',
32+
},
33+
[theme.breakpoints.down('sm')]: {
34+
padding: '0 8px',
35+
},
36+
},
2437
open: {
2538
backgroundColor: theme.palette.secondary.dark,
2639
color: theme.palette.text.secondary,
40+
borderRadius: '6px 6px 0 0',
2741
marginBottom: 0,
2842
[theme.breakpoints.down('sm')]: {
2943
height: '49px',
3044
},
3145
},
32-
flexGrid: {
33-
flexGrow: 1,
34-
justifyContent: 'flex-end',
35-
},
3646
}));
3747

3848
export const Dropdown = ({
@@ -60,49 +70,36 @@ export const Dropdown = ({
6070
}, [isOpen]);
6171

6272
return (
63-
<Grid data-cy='thumbnail-dropdown'>
73+
<Box data-cy='thumbnail-dropdown'>
6474
{dropdownLength > 0 ? (
65-
<Grid
66-
item
67-
xs={10}
75+
<Box
6876
className={clsx(classes.dropdown, {
6977
[classes.open]: isOpen,
7078
})}
7179
>
72-
<Grid>
73-
<ContributorThumbnail
74-
organization={organization}
75-
filtersActive={filtersActive}
76-
checkboxValue={checkboxValue}
77-
dropdownLength={dropdownLength}
78-
isOpen={isOpen}
79-
isChildThumbnail={false}
80-
/>
81-
</Grid>
82-
<Grid className={classes.flexGrid}></Grid>
83-
<Grid
84-
item
85-
container
86-
className={classes.flexGrid}
87-
onClick={handleClick}
88-
>
89-
<DropdownArrow
90-
open={isOpen}
91-
handleArrow={handleClick}
92-
/>
93-
</Grid>
94-
</Grid>
80+
<ContributorThumbnail
81+
organization={organization}
82+
filtersActive={filtersActive}
83+
checkboxValue={checkboxValue}
84+
dropdownLength={dropdownLength}
85+
isOpen={isOpen}
86+
isChildThumbnail={false}
87+
/>
88+
<Box onClick={handleClick} className={classes.arrowBox}>
89+
<DropdownArrow open={isOpen} />
90+
</Box>
91+
</Box>
9592
) : (
96-
<Grid item xs={10} className={classes.dropdown}>
93+
<Box item className={classes.dropdown}>
9794
<ContributorThumbnail
9895
organization={organization}
9996
checkboxValue={checkboxValue}
10097
isChildThumbnail={false}
10198
/>
102-
</Grid>
99+
</Box>
103100
)}
104101
{isOpen && children}
105-
</Grid>
102+
</Box>
106103
);
107104
};
108105
export default Dropdown;

0 commit comments

Comments
 (0)