Skip to content

Commit 6159e2a

Browse files
jacbnjacbn
authored
Merge pull request #1424 from isaacphysics/redesign/spacing-fixes
Redesign: spacing improvements
2 parents 4a4f08b + a9bb386 commit 6159e2a

21 files changed

+59
-57
lines changed

‎src/app/components/content/IsaacNumericQuestion.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ const IsaacNumericQuestion = ({doc, questionId, validationResponse, readonly}: I
129129
<Dropdown className="flex-grow-1" disabled={readonly} isOpen={isOpen && noDisplayUnit} toggle={() => {setIsOpen(!isOpen);}}>
130130
<DropdownToggle
131131
disabled={readonly || !noDisplayUnit}
132-
className={classNames("feedback-zone w-md-auto h-100 px-2 py-1", {"border-dark display-unit": !noDisplayUnit, "feedback-showing": currentAttemptUnitsWrong && noDisplayUnit, "bg-white": isPhy})}
132+
className={classNames("feedback-zone w-md-auto h-100 px-2 py-1", {"border-dark display-unit": !noDisplayUnit, "feedback-showing": currentAttemptUnitsWrong && noDisplayUnit, "bg-white my-2": isPhy})}
133133
color={noDisplayUnit ? siteSpecific("dropdown", undefined) : "white"}
134134
caret={isPhy && noDisplayUnit}
135135
>
@@ -140,7 +140,7 @@ const IsaacNumericQuestion = ({doc, questionId, validationResponse, readonly}: I
140140
<span className={"feedback incorrect"}>✘</span>
141141
</div>}
142142
</DropdownToggle>
143-
<DropdownMenu end className="w-max-content">
143+
<DropdownMenu end className="w-100 w-md-50">
144144
{selectedUnits.map((unit) =>
145145
<DropdownItem key={wrapUnitForSelect(unit)}
146146
data-unit={unit || 'None'}

‎src/app/components/elements/Tabs.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const DropdownNavbar = ({children, activeTab, changeTab, tabTitleClass=""}: Tabs
8888
{!!Object.keys(children).length && <h5 className="text-theme mb-2">Need some help?</h5>}
8989
<div>
9090
{Object.keys(children).map((tabTitle, i) =>
91-
<AffixButton key={tabTitle} color="tint" className={classNames("btn-dropdown me-2", tabTitleClass, {"active": activeTab === i + 1})} onClick={() => changeTab(i + 1)} affix={{
91+
<AffixButton key={tabTitle} color="tint" className={classNames("btn-dropdown me-2 mb-2", tabTitleClass, {"active": activeTab === i + 1})} onClick={() => changeTab(i + 1)} affix={{
9292
affix: "icon-chevron-down",
9393
position: "suffix",
9494
type: "icon",

‎src/app/components/elements/TeacherDashboard.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,8 +181,8 @@ export const TeacherDashboard = ({ assignmentsSetByMe, quizzesSetByMe, myAssignm
181181
const nameToDisplay = extractTeacherName(user as UserSummaryDTO);
182182

183183
return <div className="dashboard dashboard-outer w-100">
184-
<div className="d-flex">
185-
{nameToDisplay && <h3>Welcome back, {nameToDisplay}!</h3>}
184+
<div className="d-flex flex-wrap">
185+
{nameToDisplay && <h3 className="text-wrap">Welcome back, {nameToDisplay}!</h3>}
186186
<span className="ms-auto">
187187
<div className="text-center">Dashboard view</div>
188188
<StyledToggle

‎src/app/components/pages/AssignmentProgress.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -508,6 +508,7 @@ export function AssignmentProgress({user}: {user: RegisteredUserDTO}) {
508508
help={pageHelp}
509509
modalId="help_modal_assignment_progress"
510510
icon={{type: "hex", icon: "icon-revision"}}
511+
className={siteSpecific("mb-4", "")}
511512
/>
512513
<PageFragment fragmentId={siteSpecific("help_toptext_assignment_progress", "markbook_help")} ifNotFound={RenderNothing} />
513514
<div className="w-100 text-end">

‎src/app/components/pages/Groups.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -664,9 +664,8 @@ const GroupsComponent = ({user, hashAnchor}: {user: RegisteredUserDTO, hashAncho
664664
</span>;
665665

666666
const GroupsPhy = <Container>
667-
<TitleAndBreadcrumb
668-
currentPageTitle="Manage groups" className="mb-4" help={pageHelp} modalId="help_modal_groups" icon={{type: "hex", icon: "icon-group"}}
669-
/>
667+
<TitleAndBreadcrumb currentPageTitle="Manage groups" className="mb-4" help={pageHelp} modalId="help_modal_groups" icon={{type: "hex", icon: "icon-group"}}/>
668+
<PageFragment fragmentId={siteSpecific("help_toptext_groups", "groups_help")} ifNotFound={RenderNothing} />
670669
<ShowLoadingQuery query={groupQuery} defaultErrorTitle={"Error fetching groups"}>
671670
<SidebarLayout>
672671
<GroupsSidebar user={user} groups={groups} allGroups={allGroups} selectedGroup={selectedGroup} setSelectedGroupId={setSelectedGroupId}

‎src/app/components/pages/MyAssignments.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,7 @@ const PhyMyAssignments = ({user}: {user: RegisteredUserDTO}) => {
5959
</span>;
6060

6161
return <Container>
62-
<TitleAndBreadcrumb currentPageTitle="My assignments" icon={{type: "hex", icon: "icon-question-deck"}} help={pageHelp} modalId="help_modal_my_assignments" />
63-
<PageFragment fragmentId={`${siteSpecific("help_toptext_assignments", "assignments_help")}_${isTutorOrAbove(user) ? "teacher" : "student"}`} ifNotFound={<div className={"mt-5"}/>} />
62+
<TitleAndBreadcrumb currentPageTitle="My assignments" icon={{type: "hex", icon: "icon-question-deck"}} help={pageHelp} modalId="help_modal_my_assignments" className="mb-4" />
6463
<SidebarLayout>
6564
<MyAssignmentsSidebar
6665
statusFilter={assignmentStateFilter} setStatusFilter={setAssignmentStateFilter}
@@ -71,6 +70,7 @@ const PhyMyAssignments = ({user}: {user: RegisteredUserDTO}) => {
7170
assignmentQuery={assignmentQuery}
7271
/>
7372
<MainContent>
73+
<PageFragment fragmentId={`${siteSpecific("help_toptext_assignments", "assignments_help")}_${isTutorOrAbove(user) ? "teacher" : "student"}`} ifNotFound={<div className={"mt-5"}/>} />
7474
<ShowLoadingQuery
7575
query={assignmentQuery}
7676
defaultErrorTitle={"Error fetching your assignments"}

‎src/app/components/pages/MyGameboards.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,8 +181,7 @@ export const MyGameboards = () => {
181181
};
182182

183183
return <Container>
184-
<TitleAndBreadcrumb currentPageTitle={siteSpecific("My question decks", "My quizzes")} icon={{type: "hex", icon: "icon-question-deck"}} help={pageHelp} />
185-
<PageFragment fragmentId={`${siteSpecific("gameboards", "quizzes")}_help_${isTutorOrAbove(user) ? "teacher" : "student"}`} ifNotFound={RenderNothing} />
184+
<TitleAndBreadcrumb currentPageTitle={siteSpecific("My question decks", "My quizzes")} icon={{type: "hex", icon: "icon-question-deck"}} help={pageHelp} className={siteSpecific("mb-4", "")} />
186185
<SidebarLayout>
187186
<MyGameboardsSidebar
188187
displayMode={boardView} setDisplayMode={setBoardView}
@@ -192,6 +191,7 @@ export const MyGameboards = () => {
192191
boardCompletionFilter={boardCompletion} setBoardCompletionFilter={setBoardCompletion}
193192
/>
194193
<MainContent>
194+
<PageFragment fragmentId={`${siteSpecific("gameboards", "quizzes")}_help_${isTutorOrAbove(user) ? "teacher" : "student"}`} ifNotFound={RenderNothing} />
195195
{boards && boards.totalResults == 0 ?
196196
<>
197197
<h3 className="text-center mt-4">You have no {siteSpecific("question decks", "quizzes")} to view.</h3>

‎src/app/components/pages/SetAssignments.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -532,8 +532,8 @@ export const SetAssignments = () => {
532532
assignees={(isDefined(modalBoard) && isDefined(modalBoard?.id) && groupsByGameboard[modalBoard.id]) || []}
533533
/>
534534

535-
<TitleAndBreadcrumb currentPageTitle={siteSpecific("Set assignments", "Manage assignments")} icon={{type: "hex", icon: "icon-question-deck"}} help={pageHelp} modalId="help_modal_set_assignments"/>
536-
<PageFragment fragmentId={siteSpecific("help_toptext_set_gameboards", "set_quizzes_help")} ifNotFound={RenderNothing} />
535+
<TitleAndBreadcrumb currentPageTitle={siteSpecific("Set assignments", "Manage assignments")} icon={{type: "hex", icon: "icon-question-deck"}} help={pageHelp}
536+
modalId="help_modal_set_assignments" className={siteSpecific("mb-4", "")} />
537537
<SidebarLayout>
538538
<SetAssignmentsSidebar
539539
displayMode={boardView} setDisplayMode={setBoardView}
@@ -544,7 +544,8 @@ export const SetAssignments = () => {
544544
boardCreator={boardCreator} setBoardCreator={setBoardCreator}
545545
sortDisabled={!!boards && boards.boards.length !== boards.totalResults}
546546
/>
547-
<MainContent>
547+
<MainContent>
548+
<PageFragment fragmentId={siteSpecific("help_toptext_set_gameboards", "set_quizzes_help")} ifNotFound={RenderNothing} />
548549
{isPhy && <PhyAddGameboardButtons className={"mb-4"} redirectBackTo={PATHS.SET_ASSIGNMENTS}/>}
549550
{groups && groups.length === 0 && <Alert color="warning">
550551
You have not created any groups to assign work to.

‎src/app/components/pages/SubjectLandingPage.tsx

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import debounce from "lodash/debounce";
1515
import { Loading } from "../handlers/IsaacSpinner";
1616
import classNames from "classnames";
1717
import { NewsCard } from "../elements/cards/NewsCard";
18-
import { Stage } from "../../../IsaacApiTypes";
1918

2019

2120
const RandomQuestionBanner = ({context}: {context?: PageContextState}) => {
@@ -61,28 +60,24 @@ const RandomQuestionBanner = ({context}: {context?: PageContextState}) => {
6160
const question = questions?.[0];
6261

6362
return <div className="py-4 container-override random-question-panel">
64-
<Row className="my-3">
65-
<div className="d-flex justify-content-between align-items-center">
66-
<h4 className="m-0">Try a random question!</h4>
67-
<button className="btn btn-link invert-underline d-flex align-items-center gap-2" onClick={handleGetDifferentQuestion}>
68-
Get a different question
69-
<i className="icon icon-refresh icon-color-black"/>
70-
</button>
71-
</div>
72-
</Row>
73-
<Row style={{margin: "auto"}}>
74-
<Card className="px-0">
75-
{question
76-
? <ListView items={[{
77-
type: DOCUMENT_TYPE.QUESTION,
78-
title: question.title,
79-
tags: question.tags,
80-
id: question.id,
81-
audience: question.audience,
82-
}]}/>
83-
: <Loading />}
84-
</Card>
85-
</Row>
63+
<div className="d-flex my-3 justify-content-between align-items-center">
64+
<h4 className="m-0">Try a random question!</h4>
65+
<button className="btn btn-link invert-underline d-flex align-items-center gap-2" onClick={handleGetDifferentQuestion}>
66+
Get a different question
67+
<i className="icon icon-refresh icon-color-black"/>
68+
</button>
69+
</div>
70+
<Card className="w-100 px-0">
71+
{question
72+
? <ListView items={[{
73+
type: DOCUMENT_TYPE.QUESTION,
74+
title: question.title,
75+
tags: question.tags,
76+
id: question.id,
77+
audience: question.audience,
78+
}]}/>
79+
: <Loading />}
80+
</Card>
8681
</div>;
8782
};
8883

‎src/app/components/pages/quizzes/MyQuizzes.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const PhyQuizItem = ({quiz}: QuizAssignmentProps) => {
9696
<PhyHexIcon icon="icon-tests" subject={subject as Subject} className="assignment-hex ps-3"/>
9797
</div>
9898
<div className="d-flex flex-column flex-grow-1">
99-
<h4>{quiz.title || quiz.id }</h4>
99+
<h4>{quiz.title || quiz.id}</h4>
100100
{above['sm'](deviceSize) && isDefined(subject) && <div className="d-flex align-items-center mb-2">
101101
<span className="badge rounded-pill bg-theme me-1" data-bs-theme={subject}>{HUMAN_SUBJECTS[subject]}</span>
102102
</div>}
@@ -113,8 +113,8 @@ const PhyQuizItem = ({quiz}: QuizAssignmentProps) => {
113113
{quiz.assignerSummary && <> by {extractTeacherName(quiz.assignerSummary)}</>}
114114
</p>}
115115
{quiz.attempt && <p>
116-
{quiz.status === QuizStatus.Complete ?
117-
<>Completed: <strong>{getFriendlyDaysUntil(quiz.attempt.completedDate as Date)}</strong></>
116+
{quiz.status === QuizStatus.Complete
117+
? <>Completed: <strong>{getFriendlyDaysUntil(quiz.attempt.completedDate as Date)}</strong></>
118118
: <>Started: <strong>{getFriendlyDaysUntil(quiz.attempt.startDate as Date)}</strong></>
119119
}
120120
</p>}
@@ -443,12 +443,12 @@ const MyQuizzesPageComponent = ({user}: QuizzesPageProps) => {
443443
}</span>;
444444

445445
return <Container>
446-
<TitleAndBreadcrumb currentPageTitle={siteSpecific("My Tests", "My tests")} icon={{type: "hex", icon: "icon-tests"}} help={pageHelp} />
447-
<PageFragment fragmentId={`tests_help_${isTutorOrAbove(user) ? "teacher" : "student"}`} ifNotFound={<div className={"mt-5"}/>} />
446+
<TitleAndBreadcrumb currentPageTitle={siteSpecific("My Tests", "My tests")} icon={{type: "hex", icon: "icon-tests"}} help={pageHelp} className={siteSpecific("mb-4", "")} />
448447
<SidebarLayout>
449448
<MyQuizzesSidebar setQuizTitleFilter={setQuizTitleFilter} setQuizCreatorFilter={setQuizCreatorFilter} quizStatusFilter={quizStatusFilter}
450449
setQuizStatusFilter={setQuizStatusFilter} activeTab={tabOverride ?? 1} displayMode={displayMode} setDisplayMode={setDisplayMode}/>
451450
<MainContent>
451+
<PageFragment fragmentId={`tests_help_${isTutorOrAbove(user) ? "teacher" : "student"}`} ifNotFound={<div className={"mt-5"}/>} />
452452
<Tabs className="mb-5 mt-4" tabContentClass="mt-4" activeTabOverride={tabOverride} onActiveTabChange={(index) => {
453453
history.replace({...history.location, hash: tabAnchors[index - 1]});
454454
setBoardOrder(index === 1 ? QuizzesBoardOrder.dueDate : QuizzesBoardOrder.title);

‎src/app/components/pages/quizzes/PracticeQuizzes.tsx

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -90,21 +90,22 @@ const PracticeQuizzesComponent = () => {
9090
<TitleAndBreadcrumb
9191
currentPageTitle={siteSpecific("Practice Tests", "Practice tests")}
9292
icon={{"type": "hex", "icon": "icon-tests"}}
93+
className={siteSpecific("mb-4", "")}
9394
/>
94-
<div className="d-flex align-items-center">
95-
<span><PageFragment fragmentId="help_toptext_practice_tests"/></span>
96-
{isPhy && <div className="no-print d-flex gap-2 ms-auto">
97-
<div className="question-actions question-actions-leftmost">
98-
<ShareLink linkUrl={isFullyDefinedContext(pageContext) ? `/${pageSubject}/${pageStage}/practice_tests` : "/practice_tests"}/>
99-
</div>
100-
<div className="question-actions not-mobile">
101-
<PrintButton/>
102-
</div>
103-
</div>}
104-
</div>
10595
<SidebarLayout>
10696
<PracticeQuizzesSidebar {...sidebarProps}/>
10797
<MainContent>
98+
<div className="d-flex align-items-center">
99+
<span><PageFragment fragmentId="help_toptext_practice_tests"/></span>
100+
{isPhy && <div className="no-print d-flex gap-2 ms-auto">
101+
<div className="question-actions question-actions-leftmost">
102+
<ShareLink linkUrl={isFullyDefinedContext(pageContext) ? `/${pageSubject}/${pageStage}/practice_tests` : "/practice_tests"}/>
103+
</div>
104+
<div className="question-actions not-mobile">
105+
<PrintButton/>
106+
</div>
107+
</div>}
108+
</div>
108109
{!user
109110
? <b>You must be logged in to view practice tests.</b>
110111
: <ShowLoading until={quizzes}>

‎src/app/components/pages/quizzes/SetQuizzes.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -383,8 +383,7 @@ const SetQuizzesPageComponent = ({user}: SetQuizzesPageProps) => {
383383
</div>;
384384

385385
return <Container>
386-
<TitleAndBreadcrumb currentPageTitle={pageTitle} icon={{type: "hex", icon: "icon-tests"}} help={pageHelp} modalId={isPhy ? "help_modal_set_tests" : undefined} />
387-
<PageFragment fragmentId={siteSpecific("help_toptext_set_tests", "set_tests_help")} ifNotFound={RenderNothing} />
386+
<TitleAndBreadcrumb currentPageTitle={pageTitle} icon={{type: "hex", icon: "icon-tests"}} help={pageHelp} modalId={isPhy ? "help_modal_set_tests" : undefined} className={siteSpecific("mb-4", "")} />
388387
<SidebarLayout>
389388
{activeTab === MANAGE_QUIZ_TAB.set
390389
? <SetQuizzesSidebar titleFilter={titleFilter} setTitleFilter={setTitleFilter} />
@@ -394,6 +393,7 @@ const SetQuizzesPageComponent = ({user}: SetQuizzesPageProps) => {
394393
quizDueDateFilterType={quizDueDateFilterType} setQuizDueDateFilterType={setQuizDueDateFilterType}
395394
manageQuizzesGroupNameFilter={manageQuizzesGroupNameFilter} setManageQuizzesGroupNameFilter={setManageQuizzesGroupNameFilter}/>}
396395
<MainContent>
396+
<PageFragment fragmentId={siteSpecific("help_toptext_set_tests", "set_tests_help")} ifNotFound={RenderNothing} />
397397
<Tabs className="my-4 mb-5" tabContentClass="mt-4" activeTabOverride={activeTab} onActiveTabChange={setActiveTab}>
398398
{{
399399
[siteSpecific("Set Tests", "Available tests")]:

‎src/app/components/site/phy/NavigationMenuPhy.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,7 @@ const ContentNavProfile = ({toggleMenu}: {toggleMenu: () => void}) => {
290290
const profileTabContents = <>
291291
{user?.loggedIn
292292
? <div>
293-
<div className="d-flex flex-column flex-sm-row">
293+
<div className="d-flex flex-column flex-sm-row gap-sm-5 gap-md-0">
294294
<div>
295295
{isTutorOrAbove(user) && <h5>STUDENT</h5>}
296296
<NavigationItemClose href={PATHS.MY_GAMEBOARDS}>

‎src/scss/phy/homepage.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,11 @@ a:has(.assignment-card) {
281281

282282
.random-question-panel {
283283
background-color: $color-neutral-100;
284+
285+
.content-summary-item {
286+
min-height: 100px;
287+
padding-top: 1.15rem;
288+
}
284289
}
285290

286291
.dashboard-scroll-shadow {

‎src/test/pages/__image_snapshots__/phy/Assignment Progress should have no visual regressions #0.png

168 Bytes
Loading

‎src/test/pages/__image_snapshots__/phy/Groups should have no visual regressions #0.png

7.28 KB
Loading

‎src/test/pages/__image_snapshots__/phy/My Assignments should have no visual regressions #0.png

127 Bytes
Loading

‎src/test/pages/__image_snapshots__/phy/My Gameboards should have no visual regressions in card view #0.png

-17 Bytes
Loading

‎src/test/pages/__image_snapshots__/phy/My Gameboards should have no visual regressions in table view #0.png

-11 Bytes
Loading

‎src/test/pages/__image_snapshots__/phy/Question types' regression test page should have no visual regressions #0.png

333 Bytes
Loading

‎src/test/pages/__image_snapshots__/phy/Set Assignments should have no visual regressions #0.png

25 Bytes
Loading

0 commit comments

Comments
 (0)