Skip to content

Commit d915356

Browse files
sjd210sjd210
committed
Restore Ada to original list format
1 parent b075de4 commit d915356

File tree

7 files changed

+85
-49
lines changed

7 files changed

+85
-49
lines changed

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

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { AffixButton } from "../AffixButton";
88
import { Spacer } from "../Spacer";
99
import { CompletionState } from "../../../../IsaacApiTypes";
1010
import { determineAudienceViews } from "../../../services/userViewingContext";
11-
import { TAG_ID, tags } from "../../../services";
11+
import { above, below, TAG_ID, tags, useDeviceSize } from "../../../services";
1212
import { PhyHexIcon } from "../svg/PhyHexIcon";
1313
import { TitleIconProps } from "../PageTitle";
1414

@@ -82,11 +82,14 @@ export interface AbstractListViewItemProps {
8282
previewUrl?: string;
8383
testUrl?: string;
8484
isCard?: boolean;
85+
fullWidth?: boolean;
8586
}
8687

87-
export const AbstractListViewItem = ({icon, title, subject, subtitle, breadcrumb, status, tags, testTag, url, audienceViews, previewUrl, testUrl, isCard}: AbstractListViewItemProps) => {
88+
export const AbstractListViewItem = ({icon, title, subject, subtitle, breadcrumb, status, tags, testTag, url, audienceViews, previewUrl, testUrl, isCard, fullWidth}: AbstractListViewItemProps) => {
89+
const deviceSize = useDeviceSize();
8890
const isQuiz: boolean = (previewUrl && testUrl) ? true : false;
89-
const fullWidth: boolean = (status || audienceViews || previewUrl || testUrl) ? false : true;
91+
92+
fullWidth = fullWidth || below["sm"](deviceSize) || ((status || audienceViews || previewUrl || testUrl) ? false : true);
9093
const colWidths = fullWidth ? [12,12,12,12,12] : isQuiz ? [12,6,6,6,6] : [12,8,7,6,7];
9194
const cardBody =
9295
<Row className="w-100 flex-row">
@@ -107,29 +110,33 @@ export const AbstractListViewItem = ({icon, title, subject, subtitle, breadcrumb
107110
{breadcrumb && <div className="hierarchy-tags">
108111
<Breadcrumb breadcrumb={breadcrumb}/>
109112
</div>}
110-
{audienceViews && <div className="d-flex d-md-none">
113+
{audienceViews && fullWidth && <div className="d-flex">
111114
<StageAndDifficultySummaryIcons audienceViews={audienceViews} stack/>
112115
</div>}
113-
{status && <div className="d-flex d-xl-none">
116+
{status && (below["lg"](deviceSize) || fullWidth) && <div className="d-flex">
114117
<StatusDisplay status={status}/>
115118
</div>}
116119
{tags && <div className="d-flex py-3">
117120
<Tags tags={tags}/>
118121
</div>}
119-
{previewUrl && testUrl && <div className="d-flex d-md-none align-items-center">
122+
{previewUrl && testUrl && fullWidth && <div className="d-flex d-md-none align-items-center">
120123
<QuizLinks previewUrl={previewUrl} testUrl={testUrl}/>
121124
</div>}
122125
</div>
123126
</Col>
124-
{!isQuiz && (audienceViews || status) && <Col xl={2} className={classNames("d-none d-xl-flex", {"list-view-border": (status && status !== CompletionState.NOT_ATTEMPTED)})}>
125-
<StatusDisplay status={status ?? CompletionState.NOT_ATTEMPTED}/>
126-
</Col>}
127-
{audienceViews && <Col md={4} lg={5} xl={4} xxl={3} className="d-none d-md-flex justify-content-end">
128-
<StageAndDifficultySummaryIcons audienceViews={audienceViews} stack spacerWidth={5} className={classNames({"list-view-border": audienceViews.length > 0})}/>
129-
</Col>}
130-
{previewUrl && testUrl && <Col md={6} className="d-none d-md-flex align-items-center justify-content-end">
131-
<QuizLinks previewUrl={previewUrl} testUrl={testUrl}/>
132-
</Col>}
127+
{!fullWidth &&
128+
<>
129+
{!isQuiz && (audienceViews || status) && <Col xl={2} className={classNames("d-none d-xl-flex", {"list-view-border": (status && status !== CompletionState.NOT_ATTEMPTED)})}>
130+
<StatusDisplay status={status ?? CompletionState.NOT_ATTEMPTED}/>
131+
</Col>}
132+
{audienceViews && <Col md={4} lg={5} xl={4} xxl={3} className="d-none d-md-flex justify-content-end">
133+
<StageAndDifficultySummaryIcons audienceViews={audienceViews} stack spacerWidth={5} className={classNames({"list-view-border": audienceViews.length > 0})}/>
134+
</Col>}
135+
{previewUrl && testUrl && <Col md={6} className="d-none d-md-flex align-items-center justify-content-end">
136+
<QuizLinks previewUrl={previewUrl} testUrl={testUrl}/>
137+
</Col>}
138+
</>
139+
}
133140
</Row>;
134141

135142
return <ListGroupItem className="content-summary-item" data-bs-theme={subject}>
@@ -157,8 +164,8 @@ export const AbstractListView = ({items}: {items: ShortcutResponse[]}) => {
157164
</ListGroup>;
158165
};
159166

160-
export const AbstractListViewWithProps = ({items}: {items: AbstractListViewItemProps[]}) => {
167+
/*export const AbstractListViewWithProps = ({items}: {items: AbstractListViewItemProps[]}) => {
161168
return <ListGroup data-bs-theme="physics" className="link-list list-group-links">
162169
{items.map(item => <AbstractListViewItem key={item.title} {...item}/>)}
163170
</ListGroup>;
164-
};
171+
};*/

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

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import { DOCUMENT_TYPE, SEARCH_RESULT_TYPE, TAG_ID, TAG_LEVEL, tags } from "../.
66
import { ListGroup } from "reactstrap";
77
import { TitleIconProps } from "../PageTitle";
88

9-
export const QuestionListViewItem = (item: ShortcutResponse) => {
9+
export const QuestionListViewItem = ({item, ...rest} : {item: ShortcutResponse}) => {
1010
const breadcrumb = tags.getByIdsAsHierarchy((item.tags || []) as TAG_ID[]).map(tag => tag.title);
1111
const audienceViews: ViewingContext[] = determineAudienceViews(item.audience);
1212
const itemSubject = tags.getSpecifiedTag(TAG_LEVEL.subject, item.tags as TAG_ID[])?.id as Subject;
1313

14-
return <AbstractListViewItem
14+
return <AbstractListViewItem
1515
icon={{type: "hex", icon: "list-icon-question", size: "sm"}}
1616
title={item.title ?? ""}
1717
subject={itemSubject}
@@ -20,23 +20,24 @@ export const QuestionListViewItem = (item: ShortcutResponse) => {
2020
status={item.state}
2121
url={item.url}
2222
audienceViews={audienceViews}
23+
{...rest}
2324
/>;
2425
};
2526

26-
export const ConceptListViewItem = (item: ShortcutResponse) => {
27+
export const ConceptListViewItem = ({item, ...rest}: {item: ShortcutResponse}) => {
2728
const itemSubject = tags.getSpecifiedTag(TAG_LEVEL.subject, item.tags as TAG_ID[])?.id as Subject;
2829

2930
return <AbstractListViewItem
3031
icon={{type: "hex", icon: "list-icon-concept", size: "sm"}}
3132
title={item.title ?? ""}
32-
3333
subject={itemSubject}
3434
subtitle={item.subtitle}
3535
url={item.url}
36+
{...rest}
3637
/>;
3738
};
3839

39-
export const EventListViewItem = (item: ShortcutResponse) => {
40+
export const EventListViewItem = ({item, ...rest}: {item: ShortcutResponse}) => {
4041
const itemSubject = tags.getSpecifiedTag(TAG_LEVEL.subject, item.tags as TAG_ID[])?.id as Subject;
4142

4243
return <AbstractListViewItem
@@ -45,21 +46,23 @@ export const EventListViewItem = (item: ShortcutResponse) => {
4546
subject={itemSubject}
4647
subtitle={item.subtitle}
4748
url={item.url}
49+
{...rest}
4850
/>;
4951
};
5052

51-
export const ListViewCard = ({item, subject, icon, tagList}: {item: ShortcutResponse, subject: Subject, icon: TitleIconProps, tagList: ListViewTagProps[]}) => {
53+
export const ListViewCard = ({item, subject, icon, tagList, ...rest}: {item: ShortcutResponse, subject: Subject, icon: TitleIconProps, tagList: ListViewTagProps[]}) => {
5254
return <AbstractListViewItem
5355
icon={icon}
5456
title={item.title ?? ""}
5557
subject={subject}
5658
subtitle={item.subtitle}
5759
tags={tagList}
5860
isCard
61+
{...rest}
5962
/>;
6063
};
6164

62-
export const ListView = ({items}: {items: ShortcutResponse[]}) => {
65+
export const ListView = ({items, ...rest}: {items: ShortcutResponse[], fullWidth?: boolean}) => {
6366

6467
// Cards (e.g. the subjects on the homepage) X
6568
// Questions X
@@ -71,21 +74,20 @@ export const ListView = ({items}: {items: ShortcutResponse[]}) => {
7174

7275
return <ListGroup className="link-list list-group-links">
7376
{items.map((item, index) => {
74-
console.log("tig tags", item.tags);
7577
switch (item.type) {
7678
case (SEARCH_RESULT_TYPE.SHORTCUT):
77-
return <QuestionListViewItem key={index} {...item}/>;
79+
return <QuestionListViewItem key={index} item={item} {...rest}/>;
7880
case (DOCUMENT_TYPE.QUESTION):
7981
case (DOCUMENT_TYPE.FAST_TRACK_QUESTION):
80-
return <QuestionListViewItem key={index} {...item}/>;
82+
return <QuestionListViewItem key={index} item={item} {...rest}/>;
8183
case (DOCUMENT_TYPE.CONCEPT):
82-
return <ConceptListViewItem key={index} {...item}/>;
84+
return <ConceptListViewItem key={index} item={item} {...rest}/>;
8385
case (DOCUMENT_TYPE.EVENT):
84-
return <EventListViewItem key={index} {...item}/>;
86+
return <EventListViewItem key={index} item={item} {...rest}/>;
8587
case (DOCUMENT_TYPE.TOPIC_SUMMARY):
86-
return <QuestionListViewItem key={index} {...item}/>;
88+
return <QuestionListViewItem key={index} item={item} {...rest}/>;
8789
case (DOCUMENT_TYPE.GENERIC):
88-
return <QuestionListViewItem key={index} {...item}/>;
90+
return <QuestionListViewItem key={index} item={item} {...rest}/>;
8991
default:
9092
// Do not render this item if there is no matching DOCUMENT_TYPE
9193
console.error("Not able to display item as a ListViewItem: ", item);

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@ import {AppState, fetchConcepts, selectors, useAppDispatch, useAppSelector} from
44
import {Badge, Card, CardBody, CardHeader, Container} from "reactstrap";
55
import queryString from "query-string";
66
import {ShowLoading} from "../handlers/ShowLoading";
7-
import {matchesAllWordsInAnyOrder, pushConceptsToHistory, searchResultIsPublic, shortcuts, TAG_ID, tags} from "../../services";
7+
import {isPhy, matchesAllWordsInAnyOrder, pushConceptsToHistory, searchResultIsPublic, shortcuts, TAG_ID, tags} from "../../services";
88
import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
99
import {ShortcutResponse, Tag} from "../../../IsaacAppTypes";
1010
import {IsaacSpinner} from "../handlers/IsaacSpinner";
1111
import { SubjectSpecificConceptListSidebar, MainContent, SidebarLayout } from "../elements/layout/SidebarLayout";
1212
import { ListView } from "../elements/list-groups/ListView";
13+
import { ContentTypeVisibility, LinkToContentSummaryList } from "../elements/list-groups/ContentSummaryListGroupItem";
1314

1415
// This component is Isaac Physics only (currently)
1516
export const Concepts = withRouter((props: RouteComponentProps) => {
@@ -104,7 +105,12 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
104105
<CardBody>
105106
<ShowLoading until={shortcutAndFilteredSearchResults}>
106107
{shortcutAndFilteredSearchResults ?
107-
<ListView items={shortcutAndFilteredSearchResults} />
108+
isPhy ?
109+
<ListView items={shortcutAndFilteredSearchResults}/> :
110+
<LinkToContentSummaryList
111+
items={shortcutAndFilteredSearchResults} showBreadcrumb={false}
112+
contentTypeVisibility={ContentTypeVisibility.ICON_ONLY}
113+
/>
108114
: <em>No results found</em>}
109115
</ShowLoading>
110116
</CardBody>

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

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@ import {
1111
import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
1212
import {Alert, Card, CardBody, Col, Container, Row} from "reactstrap";
1313
import {
14+
below,
1415
HUMAN_QUESTION_TAGS,
1516
HUMAN_QUESTION_TYPES,
1617
isPhy,
1718
isTeacherOrAbove,
1819
safePercentage,
19-
siteSpecific
20+
siteSpecific,
21+
useDeviceSize
2022
} from "../../services";
2123
import {RouteComponentProps, withRouter} from "react-router-dom";
2224
import {PotentialUser} from "../../../IsaacAppTypes";
@@ -28,6 +30,7 @@ import {FlushableRef, QuestionProgressCharts} from "../elements/views/QuestionPr
2830
import {ActivityGraph} from "../elements/views/ActivityGraph";
2931
import {ProgressBar} from "../elements/views/ProgressBar";
3032
import {ContentTypeVisibility, LinkToContentSummaryList} from "../elements/list-groups/ContentSummaryListGroupItem";
33+
import { ListView } from '../elements/list-groups/ListView';
3134

3235
const siteSpecificStats = siteSpecific(
3336
// Physics
@@ -75,6 +78,7 @@ const MyProgress = withRouter((props: MyProgressProps) => {
7578
const achievements = useAppSelector(selectors.user.achievementsRecord);
7679
const myAnsweredQuestionsByDate = useAppSelector(selectors.user.answeredQuestionsByDate);
7780
const userAnsweredQuestionsByDate = useAppSelector(selectors.teacher.userAnsweredQuestionsByDate);
81+
const screenSize = useDeviceSize();
7882

7983
useEffect(() => {
8084
if (viewingOwnData && user.loggedIn) {
@@ -201,19 +205,23 @@ const MyProgress = withRouter((props: MyProgressProps) => {
201205
<Row id="progress-questions">
202206
{progress?.mostRecentQuestions && progress?.mostRecentQuestions.length > 0 && <Col md={12} lg={6} className="mt-4">
203207
<h4>Most recently answered questions</h4>
204-
<LinkToContentSummaryList
205-
items={progress.mostRecentQuestions}
206-
contentTypeVisibility={ContentTypeVisibility.FULLY_HIDDEN}
207-
ignoreIntendedAudience
208-
/>
208+
{isPhy ?
209+
<ListView items={progress.mostRecentQuestions} fullWidth={below["lg"](screenSize)}/> :
210+
<LinkToContentSummaryList
211+
items={progress.mostRecentQuestions}
212+
contentTypeVisibility={ContentTypeVisibility.FULLY_HIDDEN}
213+
ignoreIntendedAudience
214+
/>}
209215
</Col>}
210216
{progress?.oldestIncompleteQuestions && progress?.oldestIncompleteQuestions.length > 0 && <Col md={12} lg={6} className="mt-4">
211217
<h4>Oldest unsolved questions</h4>
212-
<LinkToContentSummaryList
213-
items={progress.oldestIncompleteQuestions}
214-
contentTypeVisibility={ContentTypeVisibility.FULLY_HIDDEN}
215-
ignoreIntendedAudience
216-
/>
218+
{isPhy ?
219+
<ListView items={progress.oldestIncompleteQuestions} fullWidth={below["lg"](screenSize)}/> :
220+
<LinkToContentSummaryList
221+
items={progress.oldestIncompleteQuestions}
222+
contentTypeVisibility={ContentTypeVisibility.FULLY_HIDDEN}
223+
ignoreIntendedAudience
224+
/>}
217225
</Col>}
218226
</Row>
219227
</div>,

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525
import {ContentSummaryDTO, Difficulty, ExamBoard} from "../../../IsaacApiTypes";
2626
import {IsaacSpinner} from "../handlers/IsaacSpinner";
2727
import {RouteComponentProps, useHistory, withRouter} from "react-router";
28-
import {ContentTypeVisibility, LinkToContentSummaryList} from "../elements/list-groups/ContentSummaryListGroupItem";
2928
import {ShowLoading} from "../handlers/ShowLoading";
3029
import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
3130
import {MetaDescription} from "../elements/MetaDescription";
@@ -39,6 +38,7 @@ import {QuestionFinderFilterPanel} from "../elements/panels/QuestionFinderFilter
3938
import {Tier, TierID} from "../elements/svg/HierarchyFilter";
4039
import { MainContent, QuestionFinderSidebar, SidebarLayout } from "../elements/layout/SidebarLayout";
4140
import { ListView } from "../elements/list-groups/ListView";
41+
import { ContentTypeVisibility, LinkToContentSummaryList } from "../elements/list-groups/ContentSummaryListGroupItem";
4242

4343
// Type is used to ensure that we check all query params if a new one is added in the future
4444
const FILTER_PARAMS = ["query", "topics", "fields", "subjects", "stages", "difficulties", "examBoards", "book", "excludeBooks", "statuses"] as const;
@@ -452,8 +452,14 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
452452
</CardHeader>
453453
<CardBody className={classNames({"border-0": isPhy, "p-0": displayQuestions?.length, "m-0": isAda && displayQuestions?.length})}>
454454
<ShowLoading until={displayQuestions} placeholder={loadingPlaceholder}>
455-
{displayQuestions?.length
456-
? <ListView items={displayQuestions}/>
455+
{displayQuestions?.length ?
456+
isPhy ?
457+
<ListView items={displayQuestions}/> :
458+
<LinkToContentSummaryList
459+
items={displayQuestions} className="m-0"
460+
contentTypeVisibility={ContentTypeVisibility.ICON_ONLY}
461+
ignoreIntendedAudience noCaret
462+
/>
457463
: noResultsMessage }
458464
</ShowLoading>
459465
</CardBody>

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
DOCUMENT_TYPE,
1818
documentDescription,
1919
isAda,
20+
isPhy,
2021
parseLocationSearch,
2122
pushSearchToHistory,
2223
searchResultIsPublic,
@@ -33,6 +34,7 @@ import classNames from "classnames";
3334
import {SearchPageSearch} from "../elements/SearchInputs";
3435
import {StyledSelect} from "../elements/inputs/StyledSelect";
3536
import { ListView } from "../elements/list-groups/ListView";
37+
import { ContentTypeVisibility, LinkToContentSummaryList } from "../elements/list-groups/ContentSummaryListGroupItem";
3638

3739
interface Item<T> {
3840
value: T;
@@ -164,7 +166,12 @@ export const Search = withRouter((props: RouteComponentProps) => {
164166
{urlQuery != "" && <CardBody className={classNames({"p-0 m-0": isAda && gotResults})}>
165167
<ShowLoading until={shortcutAndFilteredSearchResults}>
166168
{gotResults ?
167-
<ListView items={shortcutAndFilteredSearchResults}/>
169+
isPhy ?
170+
<ListView items={shortcutAndFilteredSearchResults}/> :
171+
<LinkToContentSummaryList
172+
items={shortcutAndFilteredSearchResults} showBreadcrumb={true}
173+
contentTypeVisibility={ContentTypeVisibility.SHOWN}
174+
/>
168175
: <em>No results found</em>}
169176
</ShowLoading>
170177
</CardBody>}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ export const HomepagePhy = () => {
130130

131131
<section id="navigation-cards">
132132
<Container>
133-
Explore and learn!
133+
<h2>Explore and learn!</h2>
134134
{a}
135135
</Container>
136136
</section>

0 commit comments

Comments
 (0)