Merge pull request #1141 from isaacphysics/improvement/further-bootstrap-fixes

Further Bootstrap / React styling fixes

Author: mwtrew

src/app/components/elements/Gameboards.tsx

@@ -94,7 +94,7 @@ const CSTable = (props: GameboardsTableProps) => {
     </tr>;
 
     return <div className={siteSpecific("", "mb-5 mb-md-6")}>
-        <Table className="my-gameboard-table" responsive>
+        <Table className={classNames("my-gameboard-table", {"mb-0" : isPhy})} responsive>
             <thead>
                 {tableHeader}
             </thead>
@@ -157,4 +157,4 @@ const Cards = (props: GameboardsCardsProps) => {
 };
 
 export const GameboardsCards = Cards;
-export const GameboardsTable = siteSpecific(PhyTable, CSTable);
+export const GameboardsTable = siteSpecific(PhyTable, CSTable);

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

@@ -292,17 +292,16 @@ export const BoardCard = ({user, board, boardView, assignees, toggleAssignModal,
             <Card className="board-card card-neat" data-testid={"gameboard-card"}>
                 <CardBody className="d-flex flex-column pb-4 pt-4">
                     <button className="close" onClick={confirmDeleteBoard} aria-label="Delete gameboard">×</button>
-                    <Row className="mt-1 mb-2">
+                    <Row className="mt-1 mb-2 justify-content-between">
                         <Col lg={8} md={8} sm={10} xs={8}>
                             <CardTitle><Link to={boardLink}>{board.title}</Link></CardTitle>
                             <CardSubtitle data-testid={"owner"}>By: <strong>{formatBoardOwner(user, board)}</strong></CardSubtitle>
                         </Col>
-                        {isSetAssignments ? <Col>
+                        {isSetAssignments ? <Col className="d-flex justify-content-center">
                             <PhyHexagon {...infoShapeProps} percentageDisplayed={board.percentageAttempted ?? 0} />
                         </Col>
                             : <>
-                                <Spacer/>
-                                <Col xs={2} className="card-share-link col-auto">
+                                <Col xs={2} className="card-share-link col-auto px-3">
                                     <ShareLink linkUrl={boardLink} gameboardId={board.id} reducedWidthLink clickAwayClose />
                                 </Col>
                             </>}
@@ -389,14 +388,18 @@ export const BoardCard = ({user, board, boardView, assignees, toggleAssignModal,
                                     <AdaCircle {...infoShapeProps} percentageDisplayed={board.percentageCorrect ?? 0} />
                                 </Col>
                             </Col> :
-                                <Col xs={4} className="ps-0 d-flex flex-column">
-                                    <Row className="d-flex flex-column p-0 align-items-center">
-                                        <span>Attempted</span>
-                                        <AdaCircle {...infoShapeProps} percentageDisplayed={board.percentageAttempted ?? 0} />
+                                <Col xs={4} className="ps-0 d-flex flex-column justify-content-start">
+                                    <Row className="p-0 align-items-center">
+                                        <Col className="d-flex flex-column align-items-center">
+                                            <span>Attempted</span>
+                                            <AdaCircle {...infoShapeProps} percentageDisplayed={board.percentageAttempted ?? 0} />
+                                        </Col>
                                     </Row>
-                                    <Row className="d-flex flex-column p-0 align-items-center">
-                                        <span className="pt-2">Correct</span>
-                                        <AdaCircle {...infoShapeProps} percentageDisplayed={board.percentageCorrect ?? 0} />
+                                    <Row className="p-0 align-items-center">
+                                        <Col className="d-flex flex-column align-items-center">
+                                            <span className="pt-2">Correct</span>
+                                            <AdaCircle {...infoShapeProps} percentageDisplayed={board.percentageCorrect ?? 0} />
+                                        </Col>
                                     </Row>
                                 </Col>
                         )}

src/app/components/pages/AssignmentSchedule.tsx

@@ -31,6 +31,7 @@ import {
     Row, Table
 } from "reactstrap";
 import {
+    above,
     BoardLimit, determineGameboardStagesAndDifficulties, determineGameboardSubjects, difficultyShortLabelMap,
     formatBoardOwner,
     getAssignmentStartDate,
@@ -42,7 +43,8 @@ import {
     nthHourOf, PATHS,
     selectOnChange,
     siteSpecific, stageLabelMap, TAG_ID, TAG_LEVEL, tags,
-    TODAY
+    TODAY,
+    useDeviceSize
 } from "../../services";
 import {AppGroup, AssignmentScheduleContext, BoardOrder, ValidAssignmentWithListingDate} from "../../../IsaacAppTypes";
 import {calculateHexagonProportions, Hexagon} from "../elements/svg/Hexagon";
@@ -72,6 +74,7 @@ const AssignmentScheduleStickyHeader = ({user, groups, assignmentsSetByMe, viewB
     const headerScrollerFlag = useRef(false);
     const headerScrollerObserver = useRef<IntersectionObserver>();
     const stickyHeaderListContainer = useRef<HTMLDivElement>(null);
+    const deviceSize = useDeviceSize();
 
     const headerScrollerCallback = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
         for (const entry of entries) {
@@ -140,13 +143,13 @@ const AssignmentScheduleStickyHeader = ({user, groups, assignmentsSetByMe, viewB
                 {/*</Button>*/}
                 {assignmentsSetByMe && assignmentsSetByMe.length > 0 && <>
                     <ButtonGroup className={"w-100 pt-3"}>
-                        <Button size={"md"} className={"border-end-0"} id={"start-date-button"}
+                        <Button size={above["lg"](deviceSize) ? "md" : "sm"} className={"border-end-0 px-1 px-lg-3"} id={"start-date-button"}
                                 color={viewBy === "startDate" ? "secondary" : "primary"}
                                 outline={viewBy !== "startDate"}
                                 onClick={() => setViewBy("startDate")}>
                             By start date
                         </Button>
-                        <Button size={"md"} className={"border-start-0"} id={"due-date-button"}
+                        <Button size={above["lg"](deviceSize) ? "md" : "sm"} className={"border-start-0 px-1 px-lg-3"} id={"due-date-button"}
                                 color={viewBy === "dueDate" ? "secondary" : "primary"}
                                 outline={viewBy !== "dueDate"}
                                 onClick={() => setViewBy("dueDate")}>

src/app/components/pages/Groups.tsx

@@ -361,8 +361,8 @@ const GroupEditor = ({group, allGroups, user, createNewGroup, groupNameInputRef}
                                                 id="self-removal"
                                                 onChange={toggleSelfRemoval}
                                                 checked={!!group.selfRemoval}
+                                                label={<span>Allow students to remove themselves from this group</span>}
                                             />
-                                            <Label for="self-removal" className="d-inline-block me-2">Allow students to remove themselves from this group</Label>
                                         </div>
                                     </Col>
                                 </Row>

src/scss/cs/boards.scss

@@ -43,7 +43,7 @@
 }
 
 .question-progress-icon {
-  min-width: 75px !important;
+  min-width: 86px !important;
   display: block;
   padding: 14px 0 !important;
   position: relative;

src/scss/phy/table.scss

@@ -11,3 +11,7 @@
         border-bottom-style: none;
     }
 }
+
+#boards-table .my-gameboard-table-header > th {
+    border-top: none;
+}