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

Jump to bottom

fix(fp-737): make ui closer to design #655

Merged
merged 14 commits into from
Jun 14, 2022
Merged

fix(fp-737): make ui closer to design #655

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
b8b5ded
fix(fp-737): make ui closer to design
wesleyboar Jun 3, 2022
2f81a86
docs(fp-737): note why set button position static
wesleyboar Jun 3, 2022
dd950bb
Merge branch 'task/FP-737-final-UI' into task/FP-737-final-UI--table-…
wesleyboar Jun 3, 2022
939c00d
Merge branch 'task/FP-737-final-UI' into task/FP-737-final-UI--table-…
wesleyboar Jun 9, 2022
3e44316
Merge branch 'task/FP-737-final-UI' into task/FP-737-final-UI--table-…
rstijerina Jun 13, 2022
5d16dee
Merge branch 'task/FP-737-final-UI' into task/FP-737-final-UI--table-…
rstijerina Jun 13, 2022
0f7b3a3
fix(fp-1678): manage team list wrap height change
wesleyboar Jun 13, 2022
7fcfddd
fix(fp-1678): validation error
wesleyboar Jun 13, 2022
c82db8c
fix(fp-1678): add space below manage team table
wesleyboar Jun 13, 2022
9f21ad5
fix(fp-1678): revert change to font size
wesleyboar Jun 13, 2022
7c99daf
fix(fp-1650): `<td>` vert padding to match design
wesleyboar Jun 14, 2022
f5f3dd1
fix(fp-1650): port classname validation error fix
wesleyboar Jun 14, 2022
8de45f1
fix(fp-1650): npm run prettier:fix
wesleyboar Jun 14, 2022
52dcce2
Merge branch 'task/FP-737-final-UI' into task/FP-737-final-UI--table-…
rstijerina Jun 14, 2022
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
7 changes: 4 additions & 3 deletions ...s/Allocations/AllocationsModals/AllocationsManageTeamTable/AllocationsManageTeamTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { Table, Button } from 'reactstrap';
import { Table } from 'reactstrap';
import { Button } from '_common';
import { useDispatch, useSelector } from 'react-redux';
import { useTable } from 'react-table';
import { LoadingSpinner, Message, DropdownSelector } from '_common';
Expand Down Expand Up @@ -83,7 +84,7 @@ const AllocationsManageTeamTable = ({ rawData, projectId }) => {
{deleteOperationOccuring && <LoadingSpinner placement="inline" />}
{removable && (
<Button
wesleyboar marked this conversation as resolved.
Show resolved Hide resolved
color="link"
type="link"
disabled={removingUserOperation.loading}
onClick={(e) => {
dispatch({
Expand Down Expand Up @@ -115,7 +116,7 @@ const AllocationsManageTeamTable = ({ rawData, projectId }) => {
hover
borderless
size="sm"
className={styles['manage-team-table']}
className={`${styles['manage-team-table']} o-fixed-header-table`}
wesleyboar marked this conversation as resolved.
Show resolved Hide resolved
{...getTableProps()}
>
<thead>
Expand Down
55 changes: 38 additions & 17 deletions ...tions/AllocationsModals/AllocationsManageTeamTable/AllocationsManageTeamTable.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,62 @@
.listing-wrapper {
height: 31.125vh;
overflow-y: scroll;
overflow-x: hidden;
overflow-y: auto;
padding-left: 0;
padding-right: 0;
}
.manage-team-table {
font-size: 0.875rem;
line-height: 2rem;
margin: 0 1rem;
thead {
border-bottom: 1px solid black;
}
font-size: 12px; /* 10px design * 1.2 design-to-app ratio */
margin-bottom: 0; /* overwrite bootstrap */
border-collapse: separate; /* keep <th> border-bottom visible on scroll */
border-spacing: 0;
wesleyboar marked this conversation as resolved.
Show resolved Hide resolved

td,
th {
padding: 0;
padding: 6px 15px;
vertical-align: middle;
}
th {
font-weight: bold;
background-color: var(--global-color-primary--xx-light);
}
td {
padding: 0.25rem;
font-weight: normal;
thead th /* specificity overwrites bootstrap */ {
border-bottom: 1px solid var(--global-color-primary--dark);
}
tr:nth-child(even) td {
background-color: rgb(112 112 112 / 15%);
background-color: var(--global-color-primary--x-light);
}
/* action */
tr > *:nth-child(3) {
text-align: right;
padding-right: 40px;

/* To not let button appear atop header on scroll */
button {
position: static; /* overwrite <Button> */
}
}
wesleyboar marked this conversation as resolved.
Show resolved Hide resolved
}
.search-bar-wrapper {
margin: 0 1rem;
wesleyboar marked this conversation as resolved.
Show resolved Hide resolved
/* wide screen */
@media (--medium-and-below) {
.manage-team-table {
/* member */
tr > *:nth-child(1) {
width: 60%;
}
/* role */
tr > *:nth-child(2) {
width: 15%;
}
/* action */
tr > *:nth-child(3) {
width: 20%;
}
}
}
.search-bar-header-text {
font-size: 13px;
}
.help-text {
font-size: 12px;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
display: block;
}
wesleyboar marked this conversation as resolved.
Show resolved Hide resolved
10 changes: 5 additions & 5 deletions ...nents/Allocations/AllocationsModals/AllocationsTeamViewModal/AllocationsTeamViewModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const AllocationsTeamViewModal = ({
{isManager && <Tab label="Manage Team" />}
</Tabs>
</ModalHeader>
<ModalBody className={selectedTab === 0 ? 'd-flex p-0' : 'p-2'}>
<ModalBody className={selectedTab === 0 && 'd-flex p-0'}>
wesleyboar marked this conversation as resolved.
Show resolved Hide resolved
{selectedTab === 0 && (
<Container>
{error ? (
Expand Down Expand Up @@ -137,9 +137,9 @@ const AllocationsTeamViewModal = ({
searchResults={search.results}
placeholder=""
/>
<i className={manageStyles['help-text']}>
<small className={manageStyles['help-text']}>
Search by entering the full username, email, or last name.
</i>
</small>
</div>
<div className={manageStyles['listing-wrapper']}>
{error ? (
Expand All @@ -157,9 +157,9 @@ const AllocationsTeamViewModal = ({
/>
)}
</div>
<i className={manageStyles['help-text']}>
<small className={manageStyles['help-text']}>
The PI, Co-PIs, and Allocation Managers can manage the team.
</i>
</small>
</>
)}
</ModalBody>
Expand Down