Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00
Code Issues Projects Releases Wiki Activity

fix: mobile view (#801)

Browse Source 
* fix: mobile view project roles

* fix: mobile view users
This commit is contained in:
Youssef Khedher 2022-03-24 14:04:42 +01:00 committed by GitHub
parent fe23fe8472
commit 4f0ef3d761
6 changed files with 50 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx
View File

@ -17,12 +17,14 @@ import useProjectRolesApi from '../../../../../hooks/api/actions/useProjectRoles
import useToast from '../../../../../hooks/useToast';
import ProjectRoleDeleteConfirm from '../ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm';
import { formatUnknownError } from '../../../../../utils/format-unknown-error';
import { useStyles } from './ProjectRoleListItem/ProjectRoleListItem.styles';
const ROOTROLE = 'root';
const ProjectRoleList = () => {
const { hasAccess } = useContext(AccessContext);
const { roles } = useProjectRoles();
const styles = useStyles();
const paginationFilter = (role: IRole) => role?.type !== ROOTROLE;
@ -76,9 +78,11 @@ const ProjectRoleList = () => {
<Table>
<TableHead>
<TableRow>
<TableCell></TableCell>
<TableCell className={styles.hideXS}></TableCell>
<TableCell>Project Role</TableCell>
<TableCell>Description</TableCell>
<TableCell className={styles.hideSM}>
Description
</TableCell>
<TableCell align="right">
{hasAccess(ADMIN) ? 'Action' : ''}
</TableCell>

17
frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.styles.ts
View File

@ -13,4 +13,21 @@ export const useStyles = makeStyles(theme => ({
icon: {
color: theme.palette.grey[600],
},
description: {
textAlign: 'left',
maxWidth: '300px',
[theme.breakpoints.down('sm')]: {
display: 'none',
},
},
hideSM: {
[theme.breakpoints.down('sm')]: {
display: 'none',
},
},
hideXS: {
[theme.breakpoints.down('xs')]: {
display: 'none',
},
},
}));

4
frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
View File

@ -33,7 +33,7 @@ const RoleListItem = ({
return (
<>
<TableRow className={styles.tableRow}>
<TableCell>
<TableCell className={styles.hideXS}>
<SupervisedUserCircleIcon className={styles.icon} />
</TableCell>
<TableCell className={styles.leftTableCell}>
@ -41,7 +41,7 @@ const RoleListItem = ({
{name}
</Typography>
</TableCell>
<TableCell className={styles.leftTableCell}>
<TableCell className={styles.description}>
<Typography variant="body2" data-loading>
{description}
</Typography>

10
frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.styles.ts
View File

@ -9,4 +9,14 @@ export const useStyles = makeStyles(theme => ({
leftTableCell: {
textAlign: 'left',
},
hideSM: {
[theme.breakpoints.down('sm')]: {
display: 'none',
},
},
hideXS: {
[theme.breakpoints.down('xs')]: {
display: 'none',
},
},
}));

8
frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx
View File

@ -37,7 +37,7 @@ const UserListItem = ({
return (
<TableRow key={user.id} className={styles.tableRow}>
<TableCell>
<TableCell className={styles.hideXS}>
<Avatar
data-loading
alt={user.name}
@ -47,7 +47,7 @@ const UserListItem = ({
})`}
/>
</TableCell>
<TableCell>
<TableCell className={styles.hideSM}>
<span data-loading>
{formatDateYMD(user.createdAt, locationSettings.locale)}
</span>
@ -57,12 +57,12 @@ const UserListItem = ({
{user.name}
</Typography>
</TableCell>
<TableCell className={styles.leftTableCell}>
<TableCell className={`${styles.leftTableCell} ${styles.hideSM}`}>
<Typography variant="body2" data-loading>
{user.username || user.email}
</Typography>
</TableCell>
<TableCell align="center">
<TableCell align="center" className={styles.hideXS}>
<Typography variant="body2" data-loading>
{renderRole(user.rootRole)}
</Typography>

16
frontend/src/component/admin/users/UsersList/UsersList.tsx
View File

@ -25,8 +25,10 @@ import IRole from '../../../../interfaces/role';
import useToast from '../../../../hooks/useToast';
import { useLocationSettings } from '../../../../hooks/useLocationSettings';
import { formatUnknownError } from '../../../../utils/format-unknown-error';
import { useStyles } from './UserListItem/UserListItem.styles';
const UsersList = () => {
const styles = useStyles();
const { users, roles, refetch, loading } = useUsers();
const { setToastData, setToastApiError } = useToast();
const {
@ -133,13 +135,17 @@ const UsersList = () => {
<Table>
<TableHead>
<TableRow>
<TableCell></TableCell>
<TableCell>Created</TableCell>
<TableCell className={styles.hideXS}></TableCell>
<TableCell className={styles.hideSM}>Created</TableCell>
<TableCell>Name</TableCell>
<TableCell>Username</TableCell>
<TableCell align="center">Role</TableCell>
<TableCell className={styles.hideSM}>
Username
</TableCell>
<TableCell align="center" className={styles.hideXS}>
Role
</TableCell>
<TableCell align="right">
{hasAccess(ADMIN) ? 'Action' : ''}
{hasAccess(ADMIN) ? 'Actions' : ''}
</TableCell>
</TableRow>
</TableHead>