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

Restyle transfer credits #536

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Restyle transfer credits #536

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5b928b9
initial style consistency
Cadecraft Nov 27, 2024
3806be1
transfer modal column widths adjust
Cadecraft Nov 30, 2024
6cf846b
transfer modal width and font size
Cadecraft Dec 1, 2024
59e022e
Merge branch 'main' of https://github.com/icssc/peterportal-client in…
Cadecraft Dec 1, 2024
2786cd1
Merge branch 'main' of https://github.com/icssc/peterportal-client in…
Cadecraft Dec 6, 2024
6d33b22
Merge branch 'main' of https://github.com/icssc/peterportal-client in…
Cadecraft Dec 7, 2024
1e51585
feat: transfer button style improve
Cadecraft Dec 7, 2024
dea7a1e
Merge branch 'main' of https://github.com/icssc/peterportal-client in…
Cadecraft Dec 9, 2024
0b9edc5
feat: further improve add entry button style
Cadecraft Dec 9, 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
36 changes: 34 additions & 2 deletions site/src/pages/RoadmapPage/Transfer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
border-top-color: var(--overlay3);
}
}
.transfer {

.transfer-body {
max-height: 75vh;
overflow-y: auto;
}
Expand All @@ -16,11 +17,42 @@
overflow-x: scroll;
}

.transfer .list-group .list-group-item {
.transfer-body .list-group .list-group-item {
min-width: max-content;
background-color: var(--overlay3);
}

.entry {
margin-top: 1%;
}

.add-entry {
background-color: transparent;
color: var(--peterportal-primary-color-1);
font-size: 17px;
font-weight: 500;
width: fit-content;
margin-inline: auto;
}

.add-entry:hover {
background-color: transparent;
color: var(--peterportal-primary-color-1);
}

[data-theme='dark'] {
.add-entry,
.add-entry:hover {
color: var(--peterportal-primary-color-2);
}
}

.transfer-modal {
.modal-dialog {
max-width: 500px;
max-height: 80%;
}
p {
font-size: 16px;
}
}
30 changes: 16 additions & 14 deletions site/src/pages/RoadmapPage/Transfer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import CloseButton from 'react-bootstrap/CloseButton';
import { PlusLg } from 'react-bootstrap-icons';

import { setShowTransfer, deleteTransfer, setTransfer, addTransfer } from '../../store/slices/roadmapSlice';
import { useAppSelector, useAppDispatch } from '../../store/hooks';
Expand Down Expand Up @@ -45,13 +46,13 @@ const TransferEntry: FC<TransferEntryProps> = (props) => {

return (
<Row className="g-2 mb-1" xs={3}>
<Col xs="auto" md="auto" className="d-flex flex-row justify-content-center">
<Col xs="1" md="1" className="d-flex flex-row justify-content-center p-0">
<CloseButton onClick={() => dispatch(deleteTransfer(props.index))} />
</Col>
<Col xs md>
<Col xs="8" md="7" className="pr-0">
<Form.Control type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
</Col>
<Col xs md>
<Col xs="3" md="4" className="pr-0">
<Form.Control
type="number"
placeholder="Units"
Expand Down Expand Up @@ -80,11 +81,11 @@ const Transfer: FC<MissingCoursesProps> = ({ missingPrereqNames }) => {
};

return (
<Modal show={show} onHide={handleClose} centered>
<Modal.Header className="transfer-header" closeButton>
<Modal.Title>Transfer Credits</Modal.Title>
<Modal className="transfer-modal ppc-modal" show={show} onHide={handleClose} centered>
<Modal.Header closeButton>
<h2>Transfer Credits</h2>
</Modal.Header>
<Modal.Body className="transfer">
<Modal.Body className="transfer-body">
<p>
Record your AP Credits or Community College Credits here. Doing so will clear the prerequisites on the
roadmap.
Expand All @@ -100,19 +101,20 @@ const Transfer: FC<MissingCoursesProps> = ({ missingPrereqNames }) => {
</>
)}
<Container className="entry">
<Form>
<Form className="ppc-modal-form">
{transfers.map((transfer, i) => (
<TransferEntry key={`transfer-${i}`} index={i} {...transfer}></TransferEntry>
))}
</Form>
</Container>
</Modal.Body>
<Modal.Footer className="transfer-footer d-flex flex-row justify-content-between">
<Button variant="primary" onClick={() => dispatch(addTransfer({ name: '', units: undefined }))}>
Add Entry
</Button>
<Button variant="secondary" onClick={handleClose}>
Close
<Modal.Footer className="transfer-footer d-flex flex-row justify-content-between pt-0">
<Button
className="add-entry"
variant="none"
onClick={() => dispatch(addTransfer({ name: '', units: undefined }))}
>
<PlusLg /> Add Entry
</Button>
</Modal.Footer>
</Modal>
Expand Down
Loading