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 8 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.

16 changes: 12 additions & 4 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 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,8 @@
}: {
data?: { users: InterfaceQueryUserListItem[] };
loading: boolean;
fetchMore: any;

Check failure on line 94 in src/screens/Users/Users.tsx

View workflow job for this annotation

GitHub Actions / Performs linting, formatting, type-checking, checking for different source and target branch 

Unexpected any. Specify a different type
refetch: any;

Check failure on line 95 in src/screens/Users/Users.tsx

View workflow job for this annotation

GitHub Actions / Performs linting, formatting, type-checking, checking for different source and target branch 

Unexpected any. Specify a different type
error?: ApolloError;
} = useQuery(USER_LIST, {
variables: {
Expand Down Expand Up @@ -171,7 +171,7 @@
setHasMore(true);
};

const handleSearchByEnter = (e: any): void => {

Check failure on line 174 in src/screens/Users/Users.tsx

View workflow job for this annotation

GitHub Actions / Performs linting, formatting, type-checking, checking for different source and target branch 

Unexpected any. Specify a different type
if (e.key === 'Enter') {
const { value } = e.target;
handleSearch(value);
Expand Down Expand Up @@ -401,15 +401,23 @@
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
82 changes: 48 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,36 @@
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

.notFound {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
antriksh-9 marked this conversation as resolved.
Show resolved Hide resolved

.inputField {
margin-top: 10px;
margin-bottom: 10px;
Expand Down Expand Up @@ -499,37 +519,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 +625,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