Skip to content

Commit cf9c1d3

Browse files
committed
Improve Set Assignments card styling at sm width
1 parent d3c60ca commit cf9c1d3

File tree

1 file changed

+12
-6
lines changed

1 file changed

+12
-6
lines changed

src/app/components/elements/cards/GameboardCard.tsx

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const GameboardCard = (props: GameboardCardProps) => {
4949

5050
const card = <div className="px-3 py-2 flex-grow-1">
5151
<Row data-testid="my-assignment">
52-
<Col md={8} className="d-flex flex-column align-items-start">
52+
<Col sm={isSetAssignments ? 8 : 12} md={8} className="d-flex flex-column align-items-start">
5353
<div className="d-flex align-items-center">
5454
<div className="d-flex justify-content-center board-subject-hexagon-size me-4 my-2">
5555
<div className="board-subject-hexagon-container justify-content-center">
@@ -75,13 +75,13 @@ export const GameboardCard = (props: GameboardCardProps) => {
7575

7676
<Spacer/>
7777

78-
{above['md'](deviceSize) && <Button className="my-2 btn-underline" color="link" onClick={(e) => {e.preventDefault(); setShowMore(!showMore);}}>
78+
{above[isSetAssignments ? 'sm' : 'md'](deviceSize) && <Button className="my-2 btn-underline" color="link" onClick={(e) => {e.preventDefault(); setShowMore(!showMore);}}>
7979
{showMore ? "Hide details" : "Show details"}
8080
</Button>}
8181
</Col>
8282

83-
<Col md={4} className="d-flex flex-column justify-content-between">
84-
<div className={classNames("d-flex flex-wrap justify-content-center justify-content-md-end",
83+
<Col sm={isSetAssignments ? 4 : 12} md={4} className="d-flex flex-column justify-content-between">
84+
<div className={classNames("d-flex flex-wrap justify-content-center justify-content-sm-end",
8585
{"justify-content-lg-center justify-content-xl-end column-gap-5 column-gap-md-4": !isSetAssignments},
8686
)}>
8787
{!isSetAssignments
@@ -111,15 +111,21 @@ export const GameboardCard = (props: GameboardCardProps) => {
111111
}
112112
</div>
113113
{isSetAssignments
114-
? <Button className="mb-2" color="keyline" onClick={(e) => {e.preventDefault(); setAssignmentsDetails.toggleAssignModal?.();}}>
114+
? above['md'](deviceSize) && <Button className="mb-2" color="keyline" onClick={(e) => {e.preventDefault(); setAssignmentsDetails.toggleAssignModal?.();}}>
115115
Assign{!isDefined(setAssignmentsDetails.groupCount) || setAssignmentsDetails.groupCount > 0 && " / Unassign"}
116116
</Button>
117117
: boardLink && <div className="card-share-link">
118118
<ShareLink linkUrl={boardLink} gameboardId={gameboard.id} reducedWidthLink clickAwayClose />
119119
</div>
120120
}
121121

122-
{!above['md'](deviceSize) && <Button className="my-2 btn-underline w-max-content" color="link" onClick={(e) => {e.preventDefault(); setShowMore(!showMore);}}>
122+
{isSetAssignments && !above['md'](deviceSize) &&
123+
<Button className="mb-2" color="keyline" onClick={(e) => {e.preventDefault(); setAssignmentsDetails.toggleAssignModal?.();}}>
124+
Assign{!isDefined(setAssignmentsDetails.groupCount) || setAssignmentsDetails.groupCount > 0 && " / Unassign"}
125+
</Button>
126+
}
127+
128+
{!above[isSetAssignments ? 'sm' : 'md'](deviceSize) && <Button className="my-2 btn-underline w-max-content" color="link" onClick={(e) => {e.preventDefault(); setShowMore(!showMore);}}>
123129
{showMore ? "Hide details" : "Show details"}
124130
</Button>}
125131
</Col>

0 commit comments

Comments
 (0)