Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactored CSS files in src/screens/Users #2600

Merged
merged 10 commits into from
Dec 13, 2024
Merged

refactored CSS files in src/screens/Users #2600

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7a6b974
refactor: Users-css
antriksh-9 Dec 4, 2024
d3bb962
Update Users.tsx
antriksh-9 Dec 4, 2024
05888d0
Update app.module.css
antriksh-9 Dec 4, 2024
1d2de65
Updated app.module.css
antriksh-9 Dec 12, 2024
6489422
Fixed formatting isuess
antriksh-9 Dec 12, 2024
ee39e3e
Merge branch 'refractor-users' of github.com:antriksh-9/talawa-admin …
antriksh-9 Dec 12, 2024
1b8052f
Fixed formatting isuess
antriksh-9 Dec 12, 2024
9e766cf
Merge branch 'develop-postgres' into refractor-users
antriksh-9 Dec 12, 2024
0925a4e
fixed issues
antriksh-9 Dec 12, 2024
1965a0a
Fix linting issues
antriksh-9 Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 0 additions & 95 deletions src/screens/Users/Users.module.css
View file
Open in desktop

This file was deleted.

42 changes: 30 additions & 12 deletions src/screens/Users/Users.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import TableLoader from 'components/TableLoader/TableLoader';
import UsersTableItem from 'components/UsersTableItem/UsersTableItem';
import InfiniteScroll from 'react-infinite-scroll-component';
import type { InterfaceQueryUserListItem } from 'utils/interfaces';
import styles from './Users.module.css';
import styles from '../../style/app.module.css';
import useLocalStorage from 'utils/useLocalstorage';
import type { ApolloError } from '@apollo/client';
/**
Expand Down Expand Up @@ -91,8 +91,16 @@ const Users = (): JSX.Element => {
}: {
data?: { users: InterfaceQueryUserListItem[] };
loading: boolean;
fetchMore: any;
refetch: any;
fetchMore: (options: {
variables: Record<string, unknown>;
updateQuery: (
previousQueryResult: { users: InterfaceQueryUserListItem[] },
options: {
fetchMoreResult?: { users: InterfaceQueryUserListItem[] };
},
) => { users: InterfaceQueryUserListItem[] };
}) => void;
refetch: (variables?: Record<string, unknown>) => void;
error?: ApolloError;
} = useQuery(USER_LIST, {
variables: {
Expand Down Expand Up @@ -171,9 +179,11 @@ const Users = (): JSX.Element => {
setHasMore(true);
};

const handleSearchByEnter = (e: any): void => {
const handleSearchByEnter = (
e: React.KeyboardEvent<HTMLInputElement>,
): void => {
if (e.key === 'Enter') {
const { value } = e.target;
const { value } = e.target as HTMLInputElement;
handleSearch(value);
}
};
Expand Down Expand Up @@ -211,16 +221,16 @@ const Users = (): JSX.Element => {
{
fetchMoreResult,
}: {
fetchMoreResult: { users: InterfaceQueryUserListItem[] } | undefined;
fetchMoreResult?: { users: InterfaceQueryUserListItem[] };
},
): { users: InterfaceQueryUserListItem[] } | undefined => {
) => {
setIsLoadingMore(false);
if (!fetchMoreResult) return prev;
if (!fetchMoreResult) return prev || { users: [] };
if (fetchMoreResult.users.length < perPageResult) {
setHasMore(false);
}
return {
users: [...(prev?.users || []), ...(fetchMoreResult.users || [])],
users: [...(prev?.users || []), ...fetchMoreResult.users],
};
},
});
Expand Down Expand Up @@ -401,15 +411,23 @@ const Users = (): JSX.Element => {
usersData &&
displayedUsers.length === 0 &&
searchByName.length > 0 ? (
<div className={styles.notFound}>
<section
className={styles.notFound}
role="alert"
aria-label="No results found"
>
<h4>
{tCommon('noResultsFoundFor')} &quot;{searchByName}&quot;
</h4>
</div>
</section>
) : isLoading == false &&
usersData === undefined &&
displayedUsers.length === 0 ? (
<div className={styles.notFound}>
<div
className={styles.notFound}
role="alert"
aria-label="No results found"
>
<h4>{t('noUserFound')}</h4>
</div>
) : (
Expand Down
74 changes: 40 additions & 34 deletions src/style/app.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,6 @@
align-items: center;
gap: 10px;
/* Adjust spacing between items */
margin: 2.5rem 0;
}

.btnsContainer .btnsBlock {
Expand All @@ -95,15 +94,28 @@
align-items: center;
}

.btnsContainer .input {
.btnsContainer .inputContainer {
flex: 1;
position: relative;
}

.btnsContainer .input button {
.btnsContainer .input {
width: 70%;
}

.btnsContainer input {
outline: 1px solid var(--bs-gray-400);
}

.btnsContainer .inputContainer button {
width: 52px;
}

.listBox {
width: 100%;
flex: 1;
}
antriksh-9 marked this conversation as resolved.
Show resolved Hide resolved

.inputField {
margin-top: 10px;
margin-bottom: 10px;
Expand Down Expand Up @@ -499,37 +511,6 @@ hr {
outline-offset: -2px;
}

@media (max-width: 520px) {
.btnsContainer {
margin-bottom: 0;
}

.btnsContainer .btnsBlock {
display: block;
margin-top: 1rem;
margin-right: 0;
}

.btnsContainer .btnsBlock div {
flex: 1;
}

.btnsContainer .btnsBlock div[title='Sort organizations'] {
margin-right: 0.5rem;
}

.btnsContainer .btnsBlock button {
margin-bottom: 1rem;
margin-right: 0;
width: 100%;
}
}

.listBox {
width: 100%;
flex: 1;
}

.listTable {
width: 100%;
box-sizing: border-box;
Expand Down Expand Up @@ -636,6 +617,31 @@ hr {
}
}

@media (max-width: 520px) {
.btnsContainer {
margin-bottom: 0;
}

.btnsContainer .btnsBlock {
display: block;
margin-top: 1rem;
}

.btnsContainer .btnsBlock div {
flex: 1;
}

.btnsContainer .btnsBlock div[title='Sort organizations'] {
margin-right: 0.5rem;
}

.btnsContainer .btnsBlock button {
margin-bottom: 1rem;
margin-right: 0;
width: 100%;
}
}
antriksh-9 marked this conversation as resolved.
Show resolved Hide resolved

@media (max-width: 1120px) {
.contract {
padding-left: calc(250px + 2rem + 1.5rem);
Expand Down
Loading