Skip to content

Commit 4e5681e

Browse files
axlewinaxlewin
authored
Merge pull request #1334 from isaacphysics/redesign/bug-sweep-1
Redesign bug sweep 1
2 parents b962870 + 3a90e77 commit 4e5681e

23 files changed

+128
-70
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -502,7 +502,7 @@ const IsaacClozeQuestion = ({doc, questionId, readonly, validationResponse}: Isa
502502
{(!(deviceSize === "xs" || (isTouchDevice() && below['md'](deviceSize)))) && <>
503503
{/* The item attached to the users cursor while dragging (just for display, shouldn't contain useDraggable/useSortable hooks) */}
504504
<DragOverlay>
505-
{activeItem && <Badge className="p-1 cloze-item is-dragging">
505+
{activeItem && <Badge className="p-1 cloze-item is-dragging" color="theme">
506506
<IsaacContentValueOrChildren value={activeItem.value} encoding={activeItem.encoding || "html"}>
507507
{activeItem.children as ContentDTO[]}
508508
</IsaacContentValueOrChildren>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ export const IsaacQuestion = withRouter(({doc, location}: {doc: ApiTypes.Questio
276276
}
277277
{primaryAction &&
278278
<div
279-
className={classNames("m-auto pt-3 w-100 w-sm-100 w-md-50 w-lg-50", siteSpecific("pb-3", "pb-1"), {"ps-sm-2 ps-md-0 ps-lg-3": secondaryAction})}>
279+
className={classNames("m-auto pt-3 w-100 w-sm-100 w-md-50 w-lg-50", siteSpecific("px-4 px-md-0 pb-3", "pb-1"), {"ps-sm-2 ps-md-0 ps-lg-3": secondaryAction})}>
280280
<input {...primaryAction} className="h-100 btn btn-secondary w-100"/>
281281
</div>
282282
}

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@ export function FastTrackProgress({doc, search}: {doc: IsaacFastTrackQuestionPag
7171
}, [search]);
7272

7373
const deviceSize = useDeviceSize();
74-
const hexagonUnitLength = {xl: 28, lg: 26, md: 22, sm: 22, xs: 12.5}[deviceSize];
75-
const hexagonPadding = {xl: 4, lg: 4, md: 3, sm: 3, xs: 2}[deviceSize];
74+
const hexagonUnitLength = {xxl: 28, xl: 28, lg: 26, md: 22, sm: 22, xs: 12.5}[deviceSize];
75+
const hexagonPadding = {xxl: 4, xl: 4, lg: 4, md: 3, sm: 3, xs: 2}[deviceSize];
7676
const hexagonHalfWidth = hexagonUnitLength;
7777
const hexagonQuarterHeight = hexagonUnitLength / Math.sqrt(3);
7878
const progressBarPadding = ["xs"].includes(deviceSize) ? 1 : 5;
@@ -115,7 +115,7 @@ export function FastTrackProgress({doc, search}: {doc: IsaacFastTrackQuestionPag
115115
quarterHeight: hexagonQuarterHeight,
116116
base: {
117117
stroke: {
118-
width: {xl: 3, lg: 3, md: 2, sm: 2, xs: 2}[deviceSize],
118+
width: {xxl: 3, xl: 3, lg: 3, md: 2, sm: 2, xs: 2}[deviceSize],
119119
colour: '#ddd'
120120
},
121121
fill: {
@@ -127,7 +127,7 @@ export function FastTrackProgress({doc, search}: {doc: IsaacFastTrackQuestionPag
127127
},
128128
questionPartProgress: {
129129
stroke: {
130-
width: {xl: 3, lg: 3, md: 2, sm: 2, xs: 2}[deviceSize],
130+
width: {xxl: 3, xl: 3, lg: 3, md: 2, sm: 2, xs: 2}[deviceSize],
131131
colour: '#009acd'
132132
},
133133
fill: {colour: 'none'},
@@ -137,7 +137,7 @@ export function FastTrackProgress({doc, search}: {doc: IsaacFastTrackQuestionPag
137137
const conceptConnectionProperties = {
138138
fill: 'none',
139139
stroke: '#fea100',
140-
strokeWidth: {xl: 3, lg: 3, md: 2, sm: 2, xs: 2}[deviceSize],
140+
strokeWidth: {xxl: 3, xl: 3, lg: 3, md: 2, sm: 2, xs: 2}[deviceSize],
141141
strokeDasharray: 4
142142
};
143143

@@ -289,12 +289,12 @@ export function FastTrackProgress({doc, search}: {doc: IsaacFastTrackQuestionPag
289289

290290
function generateHexagonTitle(title: string, isCurrentQuestion: boolean) {
291291
const isTwoCharLength = ("" + title).length > 1;
292-
const xSingleCharPosition = hexagon.halfWidth - {xl: 8, lg: 8, md: 6, sm: 6, xs: 5}[deviceSize];
293-
const xTwoCharPosition = hexagon.halfWidth - {xl: 14, lg: 14, md: 11, sm: 11, xs: 10}[deviceSize];
294-
const yPosition = hexagon.quarterHeight * 2 + {xl: 9, lg: 9, md: 7, sm: 7, xs: 6}[deviceSize];
292+
const xSingleCharPosition = hexagon.halfWidth - {xxl: 8, xl: 8, lg: 8, md: 6, sm: 6, xs: 5}[deviceSize];
293+
const xTwoCharPosition = hexagon.halfWidth - {xxl: 14, xl: 14, lg: 14, md: 11, sm: 11, xs: 10}[deviceSize];
294+
const yPosition = hexagon.quarterHeight * 2 + {xxl: 9, xl: 9, lg: 9, md: 7, sm: 7, xs: 6}[deviceSize];
295295
return <text
296296
fontFamily="Exo 2"
297-
fontSize={{xl: 26, lg: 26, md: 18, sm: 18, xs: 18}[deviceSize]}
297+
fontSize={{xxl: 26, xl: 26, lg: 26, md: 18, sm: 18, xs: 18}[deviceSize]}
298298
fontStyle="italic"
299299
fontWeight={["xs"].includes(deviceSize) ? 500 : 600}
300300
fill={isCurrentQuestion ? '#333' : '#ccc'}
@@ -310,10 +310,10 @@ export function FastTrackProgress({doc, search}: {doc: IsaacFastTrackQuestionPag
310310
function generateCompletionTick(isCurrentQuestion: boolean) {
311311
return <image
312312
href="/assets/common/icons/tick-bg.png"
313-
height={{xl: 36, lg: 34, md: 29, sm: 29, xs: 18}[deviceSize]}
314-
width={{xl: 36, lg: 34, md: 29, sm: 29, xs: 18}[deviceSize]}
315-
x={hexagon.halfWidth - {xl: 18, lg: 17, md: 15, sm: 15, xs: 9}[deviceSize]}
316-
y={hexagon.quarterHeight - {xl: 2, lg: 2, md: 2, sm: 2, xs: 2}[deviceSize]}
313+
height={{xxl: 36, xl: 36, lg: 34, md: 29, sm: 29, xs: 18}[deviceSize]}
314+
width={{xxl: 36, xl: 36, lg: 34, md: 29, sm: 29, xs: 18}[deviceSize]}
315+
x={hexagon.halfWidth - {xxl: 18, xl: 18, lg: 17, md: 15, sm: 15, xs: 9}[deviceSize]}
316+
y={hexagon.quarterHeight - {xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 2}[deviceSize]}
317317
opacity={isCurrentQuestion ? 1 : 0.3}
318318
/>;
319319
}

‎src/app/components/elements/inputs/InlineNumericEntryZone.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const InlineNumericEntryZone = ({questionDTO, setModified, correctness, f
2727
? "NOT_SUBMITTED"
2828
: attempt?.correctValue
2929
? "CORRECT"
30-
: attempt?.correctValue === undefined
30+
: attempt?.correctValue === undefined && questionDTO.requireUnits
3131
? "NOT_SUBMITTED" // this fixes an edge case caused by the value not being marked (i.e. correctValue === undefined) if the units are not answered; we should not colour the value in this case
3232
: (attempt?.answer as QuantityDTO | undefined)?.value
3333
? "INCORRECT"

‎src/app/components/elements/layout/SidebarLayout.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -404,6 +404,8 @@ interface MyGameboardsSidebarProps extends SidebarProps {
404404
export const MyGameboardsSidebar = (props: MyGameboardsSidebarProps) => {
405405
const { displayMode, setDisplayMode, displayLimit, setDisplayLimit, boardTitleFilter, setBoardTitleFilter, boardCreatorFilter, setBoardCreatorFilter, boardCompletionFilter, setBoardCompletionFilter, ...rest } = props;
406406

407+
const deviceSize = useDeviceSize();
408+
407409
return <ContentSidebar {...rest} className={classNames(rest.className, "pt-0")}>
408410
<div className="section-divider"/>
409411
<h5>Search gameboards</h5>
@@ -415,12 +417,12 @@ export const MyGameboardsSidebar = (props: MyGameboardsSidebarProps) => {
415417
/>
416418
<div className="section-divider"/>
417419
<h5 className="mb-4">Display</h5>
418-
<div className="d-flex">
420+
<div className="d-flex flex-xl-column flex-xxl-row">
419421
<Input className="w-auto" type="select" value={displayMode} onChange={e => setDisplayMode(e.target.value as BoardViews)}>
420422
{Object.values(BoardViews).map(view => <option key={view} value={view}>{view}</option>)}
421423
</Input>
422-
<Spacer/>
423-
<div className="select-pretext">Limit:</div>
424+
{deviceSize === "xl" ? <div className="mt-2"/> : <Spacer/>}
425+
<div className="select-pretext me-2">Limit:</div>
424426
<Input className="w-auto" type="select" value={displayLimit} onChange={e => setDisplayLimit(e.target.value as BoardLimit)}>
425427
{Object.values(BoardLimit).map(limit => <option key={limit} value={limit}>{limit}</option>)}
426428
</Input>

‎src/app/components/elements/list-groups/ListView.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export interface ListViewCardProps extends ListGroupItemProps {
1515
icon: TitleIconProps;
1616
subject?: Subject;
1717
linkTags?: ListViewTagProps[];
18+
url?: string;
1819
}
1920

2021
export const ListViewCard = ({item, icon, subject, linkTags, ...rest}: ListViewCardProps) => {

‎src/app/components/elements/markup/portals/InlineDropZones.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export function Item({item, id, type, overrideOver, isCorrect}: {item: Immutable
3838
// eslint-disable-next-line react-hooks/exhaustive-deps
3939
}, [dropRegionContext?.shouldGetFocus]);
4040

41-
return <Badge id={id} className={classNames(type === "item-section" && "m-2", "p-1 cloze-item feedback-zone", isDefined(isCorrect) && "feedback-showing")} style={style} innerRef={setNodeRef} {...listeners} {...attributes}>
41+
return <Badge id={id} className={classNames(type === "item-section" && "m-2", "p-1 cloze-item feedback-zone", isDefined(isCorrect) && "feedback-showing")} color="theme" style={style} innerRef={setNodeRef} {...listeners} {...attributes}>
4242
<span className={"visually-hidden"}>{item.altText ?? item.value ?? "cloze item without a description"}</span>
4343
<span aria-hidden={true}>
4444
<IsaacContentValueOrChildren value={item.value} encoding={item.encoding || "html"}>

‎src/app/components/site/ScrollToTop.tsx

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React, { useCallback, useEffect } from "react";
22
import classNames from "classnames";
3+
import { siteSpecific } from "../../services";
4+
import { Button } from "reactstrap";
35

46
export const ScrollToTop = ({mainContent}: {mainContent: React.MutableRefObject<HTMLElement | null>}) => {
57
const [sticky, setSticky] = React.useState(false);
@@ -15,10 +17,24 @@ export const ScrollToTop = ({mainContent}: {mainContent: React.MutableRefObject<
1517
};
1618
}, [isSticky]);
1719

18-
return <button
19-
onClick={() => mainContent.current?.scrollIntoView({behavior: 'smooth'})}
20-
className={classNames("scroll-btn d-print-none", {"is-sticky": sticky})}
21-
>
22-
<img src="/assets/common/icons/chevron-up.svg" alt="Scroll to top of page"/>
23-
</button>;
24-
};
20+
return siteSpecific(
21+
<Button
22+
color="keyline"
23+
className={classNames("scroll-btn d-print-none p-2", {"is-sticky": sticky})}
24+
onClick={() => mainContent.current?.scrollIntoView({behavior: 'smooth'})}
25+
tabIndex={sticky ? 0 : -1}
26+
aria-label="Scroll to top of page"
27+
data-bs-theme="neutral"
28+
>
29+
<i className="icon icon-chevron-up"/>
30+
</Button>,
31+
32+
<button
33+
onClick={() => mainContent.current?.scrollIntoView({behavior: 'smooth'})}
34+
className={classNames("scroll-btn d-print-none", {"is-sticky": sticky})}
35+
tabIndex={sticky ? 0 : -1}
36+
>
37+
<img src="/assets/common/icons/chevron-up.svg" alt="Scroll to top of page"/>
38+
</button>
39+
);
40+
};

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,8 @@ const getListViewSubjectCard = (sc: subjectCategory) => {
124124
item: item,
125125
icon: {type: "img", icon: `/assets/phy/icons/redesign/subject-${sc.subject}.svg`},
126126
subject: sc.subject as Subject,
127-
linkTags: sc.subcategories.map((subcat) => ({tag: subcat.humanStage, url: subcat.href}))
127+
linkTags: sc.subcategories.map((subcat) => ({tag: subcat.humanStage, url: subcat.href})),
128+
url: `/${sc.subject}`,
128129
};
129130

130131
return listViewSubjectCard;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Accordion, AccordionBody, AccordionHeader, AccordionItem, Dropdown, Dro
33
import { Spacer } from "../../elements/Spacer";
44
import { MainSearchInput } from "../../elements/SearchInputs";
55
import classNames from "classnames";
6-
import { HUMAN_STAGES, HUMAN_SUBJECTS, PHY_NAV_STAGES, PHY_NAV_SUBJECTS, above, isTeacherOrAbove, useDeviceSize } from "../../../services";
6+
import { HUMAN_STAGES, HUMAN_SUBJECTS, PHY_NAV_STAGES, PHY_NAV_SUBJECTS, above, below, isTeacherOrAbove, useDeviceSize } from "../../../services";
77
import { selectors, useAppSelector } from "../../../state";
88
import { LoginLogoutButton } from "./HeaderPhy";
99
import { useAssignmentsCount } from "../../navigation/NavigationBar";
@@ -113,7 +113,7 @@ const StaticNavigationDropdown = (props: NavigationDropdownProps) => {
113113
<DropdownToggle nav className="py-4 px-3 px-lg-4" tabIndex={0}>
114114
{title}
115115
</DropdownToggle>
116-
<DropdownMenu>
116+
<DropdownMenu onClick={() => toggle()}>
117117
{children}
118118
</DropdownMenu>
119119
</Dropdown>;
@@ -235,7 +235,7 @@ const ContentNavProfile = ({toggleMenu}: {toggleMenu: () => void}) => {
235235
const deviceSize = useDeviceSize();
236236

237237
const NavigationItemClose = (props: NavigationItemProps) => {
238-
return <NavigationItem {...props} onClick={toggleMenu} />;
238+
return <NavigationItem {...props} onClick={() => below['sm'](deviceSize) && toggleMenu()} />;
239239
};
240240

241241
const profileTabContents = <>

‎src/app/services/device.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export const isTouchDevice = () => {
1414
export const isNotTouchDevice = () => !isTouchDevice();
1515

1616
export enum DeviceSize {
17+
XXL = "xxl",
1718
XL = "xl",
1819
LG = "lg",
1920
MD = "md",
@@ -26,12 +27,13 @@ export enum DeviceOrientation {
2627
LANDSCAPE = "landscape",
2728
}
2829

29-
const descDeviceSizes = [DeviceSize.XL, DeviceSize.LG, DeviceSize.MD, DeviceSize.SM, DeviceSize.XS];
30+
const descDeviceSizes = [DeviceSize.XXL, DeviceSize.XL, DeviceSize.LG, DeviceSize.MD, DeviceSize.SM, DeviceSize.XS];
3031

3132
export const useDeviceSize = () => {
3233
const getSize = (): DeviceSize => {
3334
const width = window.innerWidth;
34-
if (width >= 1200) return DeviceSize.XL;
35+
if (width >= 1400) return DeviceSize.XXL;
36+
else if (width >= 1200) return DeviceSize.XL;
3537
else if (width >= 992) return DeviceSize.LG;
3638
else if (width >= 768) return DeviceSize.MD;
3739
else if (width >= 576) return DeviceSize.SM;
@@ -52,7 +54,8 @@ export const useDeviceSize = () => {
5254
export const useDeviceHeight = () => {
5355
const getHeight = (): DeviceSize => {
5456
const height = window.innerHeight;
55-
if (height >= 1200) return DeviceSize.XL;
57+
if (height >= 1400) return DeviceSize.XXL;
58+
else if (height >= 1200) return DeviceSize.XL;
5659
else if (height >= 992) return DeviceSize.LG;
5760
else if (height >= 768) return DeviceSize.MD;
5861
else if (height >= 576) return DeviceSize.SM;

‎src/scss/common/finder.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
background-size: 20px 20px;
1313
border: 1px solid black;
1414
border-left: none;
15-
border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
15+
border-radius: 0 $border-radius-lg $border-radius-lg 0;
1616
padding: 0.45rem 0;
1717
width: $search-button-offset;
1818
min-width: 0;

‎src/scss/common/questions.scss

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ $inline-feedback-padding: 2px;
9999

100100
.inline-container {
101101
display: inline-flex;
102-
border-radius: var(--bs-border-radius);
102+
border-radius: $border-radius-lg;
103103
width: 100%;
104104

105105
.feedback-wrapper {
@@ -184,7 +184,7 @@ $inline-feedback-padding: 2px;
184184

185185
@media screen {
186186
.units-shown {
187-
border-radius: 5px 0 0 5px !important;
187+
border-radius: $border-radius-lg 0 0 $border-radius-lg !important;
188188
}
189189
}
190190

@@ -193,19 +193,14 @@ $inline-feedback-padding: 2px;
193193
display: block;
194194
height: 100%;
195195
min-width: 36px !important;
196-
border-radius: 0 5px 5px 0;
197-
border: none;
198-
&:active {
199-
border: none !important;
200-
}
196+
border-radius: 0 $border-radius-lg $border-radius-lg 0;
201197
&.feedback-shown {
202198
padding-right: 36px !important;
203199
}
204200

205201
> div {
206202
// force contents of button to fit in $inline-feedback-size, so we can use it at all sizes
207203
height: $inline-feedback-size;
208-
margin-top: -9.5px;
209204
}
210205
}
211206
&.display-unit {

‎src/scss/common/scroll-button.scss

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,31 @@
1-
.scroll-btn {
1+
button.btn.scroll-btn {
22
position: fixed;
3-
display: none; // If not in use hide
3+
opacity: 0;
44
height: 45px;
55
width: 45px;
66
justify-content: center;
77
align-items: center;
88
bottom: 10px;
99
right: 10px;
1010
box-shadow: 2px 2px 10px 0 #0004;
11-
background-color: #fff !important;
11+
background-color: #fff;
1212
border-radius: 50%;
1313
transition: opacity 0.1s linear;
1414
z-index: 101;
15-
img {
15+
16+
&.is-sticky {
17+
opacity: 1;
18+
display: flex;
19+
// TODO: animate opacity on destruction
20+
}
21+
22+
> img {
1623
margin-top: -4px;
1724
height: 80%;
1825
width: 80%;
1926
}
20-
}
2127

22-
.is-sticky {
23-
display: flex;
28+
> i {
29+
mask-size: 20px;
30+
}
2431
}

‎src/scss/phy/elements.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@import '../common/elements.scss';
2+
3+
.dropdown {
4+
.dropdown-toggle::after {
5+
border: none;
6+
position: relative;
7+
vertical-align: middle;
8+
margin-left: 0.5rem;
9+
@include svg-icon('/assets/phy/icons/redesign/chevron-down.svg', 16px, 16px);
10+
transform: rotate3d(1, 0, 0, 0deg);
11+
transition: transform 0.21s ease-in-out;
12+
}
13+
14+
&.show .dropdown-toggle::after {
15+
transform: rotate3d(1, 0, 0, 180deg);
16+
}
17+
}
18+
19+
.accordion .accordion-button::after {
20+
@include svg-icon('/assets/phy/icons/redesign/chevron-down.svg', 16px, 16px);
21+
}

‎src/scss/phy/fonts.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -433,14 +433,10 @@
433433

434434
@font-face {
435435
font-family: 'hanken-grotesk';
436-
font-weight: normal;
437-
font-style: normal;
438436
src: url('/assets/phy/fonts/hanken-grotesk-variable-wght.ttf') format('truetype');
439437
}
440438

441439
@font-face {
442440
font-family: 'hanken-grotsek-italic';
443-
font-weight: normal;
444-
font-style: normal;
445441
src: url('/assets/phy/fonts/hanken-grotesk-italic-variable-wght.ttf') format('truetype');
446442
}

0 commit comments

Comments
 (0)