Align audience views for all Question Finder sizes

Author: sjd210

src/app/components/elements/StageAndDifficultySummaryIcons.tsx

@@ -11,10 +11,11 @@ interface StageAndDifficultySummaryIconsProps {
     className?: string,
     iconClassName?: string,
     stack?: boolean,
+    spacerWidth?: number,
 }
 
 export const StageAndDifficultySummaryIcons = (props: StageAndDifficultySummaryIconsProps) => {
-    const {audienceViews, className, iconClassName, stack} = props;
+    const {audienceViews, className, iconClassName, stack, spacerWidth} = props;
     const difficulties: Difficulty[] = audienceViews.map(v => v.difficulty).filter(v => v !== undefined);
     return siteSpecific(
         <div className={classNames(className, "d-flex flex-column")}>
@@ -23,7 +24,7 @@ export const StageAndDifficultySummaryIcons = (props: StageAndDifficultySummaryI
                     {view.stage && view.stage !== STAGE.ALL && stageLabelMap[view.stage] + " "}
                     {view.difficulty && <>
                         {simpleDifficultyLabelMap[view.difficulty]}
-                        <Spacer/>
+                        <Spacer width={spacerWidth}/>
                         <DifficultyIcons className={classNames("d-inline-block ps-1", iconClassName)} difficulty={view.difficulty} />
                     </>}
                 </span>

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

@@ -86,10 +86,11 @@ export interface AbstractListViewItemProps {
 
 export const AbstractListViewItem = ({icon, title, subject, subtitle, breadcrumb, status, tags, testTag, url, audienceViews, previewUrl, testUrl, isCard}: AbstractListViewItemProps) => { 
     const isQuiz: boolean = (previewUrl && testUrl) ? true : false;
-    const colWidths = isCard ? [12,12,12,12] : isQuiz ? [12,6,6,6] : [12,8,9,8];
+    const fullWidth: boolean = (status || audienceViews || previewUrl || testUrl) ? false : true;
+    const colWidths = fullWidth ? [12,12,12,12,12] : isQuiz ? [12,6,6,6,6] : [12,8,7,6,7];
     const cardBody =
-    <Row className="w-100">
-        <Col xs={colWidths[0]} md={colWidths[1]} lg={colWidths[2]} xl={colWidths[3]} className={classNames("d-flex", {"mt-3": isCard})}>
+    <Row className="w-100 flex-row">
+        <Col xs={colWidths[0]} md={colWidths[1]} lg={colWidths[2]} xl={colWidths[3]} xxl={colWidths[4]} className={classNames("d-flex", {"mt-3": isCard})}>
             <div>
                 {icon && (
                     icon.type === "img" ? <img src={icon.icon} alt="" className="me-3"/> 
@@ -107,7 +108,7 @@ export const AbstractListViewItem = ({icon, title, subject, subtitle, breadcrumb
                     <Breadcrumb breadcrumb={breadcrumb}/>
                 </div>}
                 {audienceViews && <div className="d-flex d-md-none"> 
-                    <StageAndDifficultySummaryIcons audienceViews={audienceViews} stack={true}/> 
+                    <StageAndDifficultySummaryIcons audienceViews={audienceViews} stack/> 
                 </div>}
                 {status && <div className="d-flex d-xl-none">
                     <StatusDisplay status={status}/>
@@ -120,11 +121,11 @@ export const AbstractListViewItem = ({icon, title, subject, subtitle, breadcrumb
                 </div>}
             </div>
         </Col>
-        {!isQuiz && (audienceViews || status) && <Col xl={2} className={classNames("d-none d-xl-flex", {" list-view-border": (status && status !== CompletionState.NOT_ATTEMPTED)})}>
+        {!isQuiz && (audienceViews || status) && <Col xl={2} className={classNames("d-none d-xl-flex", {"list-view-border": (status && status !== CompletionState.NOT_ATTEMPTED)})}>
             <StatusDisplay status={status ?? CompletionState.NOT_ATTEMPTED}/>
         </Col>}
-        {audienceViews && <Col md={4} lg={3} xl={2} className={classNames("d-none d-md-flex", {" list-view-border": audienceViews.length > 0})}>
-            <StageAndDifficultySummaryIcons audienceViews={audienceViews} stack={true}/> 
+        {audienceViews && <Col md={4} lg={5} xl={4} xxl={3} className="d-none d-md-flex justify-content-end">
+            <StageAndDifficultySummaryIcons audienceViews={audienceViews} stack spacerWidth={5} className={classNames({"list-view-border": audienceViews.length > 0})}/> 
         </Col>}
         {previewUrl && testUrl && <Col md={6} className="d-none d-md-flex align-items-center justify-content-end">
             <QuizLinks previewUrl={previewUrl} testUrl={testUrl}/> 

src/app/components/pages/Concepts.tsx

@@ -4,12 +4,12 @@ import {AppState, fetchConcepts, selectors, useAppDispatch, useAppSelector} from
 import {Badge, Card, CardBody, CardHeader, Container} from "reactstrap";
 import queryString from "query-string";
 import {ShowLoading} from "../handlers/ShowLoading";
-import {ContentTypeVisibility, LinkToContentSummaryList} from "../elements/list-groups/ContentSummaryListGroupItem";
 import {matchesAllWordsInAnyOrder, pushConceptsToHistory, searchResultIsPublic, shortcuts, TAG_ID, tags} from "../../services";
 import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
 import {ShortcutResponse, Tag} from "../../../IsaacAppTypes";
 import {IsaacSpinner} from "../handlers/IsaacSpinner";
 import { SubjectSpecificConceptListSidebar, MainContent, SidebarLayout } from "../elements/layout/SidebarLayout";
+import { ListView } from "../elements/list-groups/ListView";
 
 // This component is Isaac Physics only (currently)
 export const Concepts = withRouter((props: RouteComponentProps) => {
@@ -104,10 +104,7 @@ export const Concepts = withRouter((props: RouteComponentProps) => {
                         <CardBody>
                             <ShowLoading until={shortcutAndFilteredSearchResults}>
                                 {shortcutAndFilteredSearchResults ?
-                                    <LinkToContentSummaryList 
-                                        items={shortcutAndFilteredSearchResults} showBreadcrumb={false} 
-                                        contentTypeVisibility={ContentTypeVisibility.ICON_ONLY}
-                                    />
+                                    <ListView items={shortcutAndFilteredSearchResults} />
                                     : <em>No results found</em>}
                             </ShowLoading>
                         </CardBody>

src/scss/phy/list-groups.scss

@@ -8,6 +8,10 @@
 
 .list-view-border {
   border-left: 1px solid $color-neutral-200;
+  padding-left: 1rem;
+  &.flex-column {
+    min-width: 220px;
+  }
 }
 
 .status-tag {