{
static displayName: string;
+ isMobile = window.innerWidth < MAX_MOBILE_WIDTH;
render() {
const { challengeFiles, toggleVisibleEditor, visibleEditors } = this.props;
+ const isMobile = window.innerWidth < MAX_MOBILE_WIDTH;
+ const isRenderChallengeFiles =
+ /* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access */
+ !isMobile || sortChallengeFiles(challengeFiles).length > 1;
return (
-
- {/* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */}
- {sortChallengeFiles(challengeFiles).map(
- (challengeFile: ChallengeFile) => (
-
- )
- )}
-
+ isRenderChallengeFiles && (
+
+ {
+ /* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
+ sortChallengeFiles(challengeFiles).map(
+ (challengeFile: ChallengeFile) => (
+
+ )
+ )
+ }
+
+ )
);
}
}
diff --git a/client/src/templates/Challenges/classic/editor.css b/client/src/templates/Challenges/classic/editor.css
index 645ad78a80d..7bf459bdf1b 100644
--- a/client/src/templates/Challenges/classic/editor.css
+++ b/client/src/templates/Challenges/classic/editor.css
@@ -38,6 +38,13 @@ textarea.inputarea {
height: var(--breadcrumbs-height);
}
+@media screen and (max-height: 300px) {
+ .default-layout:has(#mobile-layout) .breadcrumbs-demo {
+ height: auto;
+ padding-block: 2px;
+ }
+}
+
.editor-upper-jaw,
.editor-lower-jaw {
padding-inline: 0 15px;
@@ -65,6 +72,51 @@ textarea.inputarea {
margin: 0.1em 0 0.6rem;
}
+.description-container .breadcrumbs {
+ display: flex;
+ justify-content: start;
+ gap: 1rem;
+ list-style-type: none;
+ font-size: 16px;
+ text-align: center;
+ margin-bottom: 0.8rem;
+ padding-inline-start: 0;
+ width: 100%;
+ min-width: 0;
+ color: var(--foreground-quaternary);
+}
+
+.description-container .breadcrumbs li:first-child {
+ position: relative;
+ max-width: 35%;
+}
+
+.description-container .breadcrumbs li:first-child:after {
+ content: ' >';
+ font-size: 17px;
+ position: absolute;
+ top: 0;
+ right: -0.7rem;
+}
+
+.description-container .breadcrumbs li:nth-child(2) {
+ min-width: 0;
+}
+
+.description-container .breadcrumbs a {
+ width: 100%;
+ text-decoration: none;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: block;
+ border-bottom: 1px solid var(--foreground-quaternary);
+}
+
+.description-container .breadcrumbs a:focus {
+ background-color: inherit;
+}
+
.description-container h1 {
color: var(--secondary-color);
font-size: 1.1rem;
diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx
index 4f26d5fe002..5517e4559c4 100644
--- a/client/src/templates/Challenges/classic/editor.tsx
+++ b/client/src/templates/Challenges/classic/editor.tsx
@@ -77,6 +77,8 @@ export interface EditorProps {
challengeFiles: ChallengeFiles;
challengeType: number;
containerRef?: React.RefObject;
+ block: string;
+ superBlock: string;
description: string;
dimensions?: Dimensions;
editorRef: MutableRefObject;
@@ -243,7 +245,7 @@ const initialData: EditorProperties = {
const Editor = (props: EditorProps): JSX.Element => {
const reduxStore = useStore();
const { t } = useTranslation();
- const { editorRef, initTests, resetAttempts } = props;
+ const { editorRef, initTests, resetAttempts, isMobileLayout } = props;
// These refs are used during initialisation of the editor as well as by
// callbacks. Since they have to be initialised before editorWillMount and
// editorDidMount are called, we cannot use useState. Reason being that will
@@ -804,6 +806,7 @@ const Editor = (props: EditorProps): JSX.Element => {
descContainer.classList.add('description-container');
domNode.classList.add('editor-upper-jaw');
domNode.appendChild(descContainer);
+ if (isMobileLayout) descContainer.appendChild(createBreadcrumb());
descContainer.appendChild(jawHeading);
descContainer.appendChild(desc);
desc.innerHTML = description;
@@ -896,6 +899,35 @@ const Editor = (props: EditorProps): JSX.Element => {
updateFile({ fileKey, editorValue, editableRegionBoundaries });
};
+ function createBreadcrumb(): HTMLElement {
+ const { block, superBlock } = props;
+ const breadcrumb = document.createElement('nav');
+ breadcrumb.setAttribute('aria-label', `${t('aria.breadcrumb-nav')}`);
+ const breadcrumbList = document.createElement('ol'),
+ breadcrumbLeft = document.createElement('li'),
+ breadcrumbLeftLink = document.createElement('a'),
+ breadcrumbRight = document.createElement('li'),
+ breadcrumbRightLink = document.createElement('a');
+ breadcrumbLeftLink.innerHTML = t(`intro:${superBlock}.title`);
+ breadcrumbRightLink.innerHTML = t(
+ `intro:${superBlock}.blocks.${block}.title`
+ );
+ breadcrumbLeftLink.setAttribute('href', `/learn/${superBlock}`);
+ breadcrumbRightLink.setAttribute('href', `/learn/${superBlock}/#${block}`);
+ breadcrumbLeft.appendChild(breadcrumbLeftLink);
+ breadcrumbRight.appendChild(breadcrumbRightLink);
+ breadcrumbList.setAttribute(
+ 'data-playwright-test-label',
+ 'breadcrumb-mobile'
+ );
+ breadcrumbList.className = 'breadcrumbs';
+ breadcrumbList.appendChild(breadcrumbLeft);
+ breadcrumbList.appendChild(breadcrumbRight);
+ breadcrumb.appendChild(breadcrumbList);
+
+ return breadcrumb;
+ }
+
// TODO: DRY this and the update function
function initializeEditableRegion(
range: IRange,
diff --git a/client/src/templates/Challenges/classic/multifile-editor.tsx b/client/src/templates/Challenges/classic/multifile-editor.tsx
index 18f82e449c6..842c7c9066c 100644
--- a/client/src/templates/Challenges/classic/multifile-editor.tsx
+++ b/client/src/templates/Challenges/classic/multifile-editor.tsx
@@ -35,6 +35,8 @@ type MultifileEditorProps = Pick<
| 'initialTests'
| 'editorRef'
| 'containerRef'
+ | 'block'
+ | 'superBlock'
| 'challengeFiles'
| 'description'
// We use dimensions to trigger a re-render of the editor
@@ -65,6 +67,8 @@ const mapStateToProps = createSelector(
const MultifileEditor = (props: MultifileEditorProps) => {
const {
+ block,
+ superBlock,
challengeFiles,
containerRef,
description,
@@ -133,6 +137,8 @@ const MultifileEditor = (props: MultifileEditorProps) => {
>
-
+
-
diff --git a/e2e/bread-crumb.spec.ts b/e2e/bread-crumb.spec.ts
index f519ddcc435..a8b44e3a032 100644
--- a/e2e/bread-crumb.spec.ts
+++ b/e2e/bread-crumb.spec.ts
@@ -2,34 +2,49 @@ import { test, expect } from '@playwright/test';
test.beforeEach(async ({ page }) => {
await page.goto(
- '/learn/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/trophy-write-your-first-code-using-c-sharp'
+ '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
);
});
-test.describe('Challenge Breadcrumb Component Tests', () => {
- test('should display correctly', async ({ page }) => {
- const superBlock = page.getByRole('listitem').first();
- await expect(superBlock).toBeVisible();
+test.describe('Challenge Breadcrumb Tests', () => {
+ test('should display correctly', async ({ page, isMobile }) => {
+ const breadcrumbTest = async (testId: string) => {
+ const superBlock = page.getByTestId(testId).getByRole('listitem').first();
+ await expect(superBlock).toBeVisible();
- const superBlockLink = superBlock.getByRole('link', {
- name: '(New) Foundational C# with Microsoft'
- });
- await expect(superBlockLink).toBeVisible();
- await expect(superBlockLink).toHaveAttribute(
- 'href',
- '/learn/foundational-c-sharp-with-microsoft'
- );
+ const superBlockLink = superBlock.getByRole('link', {
+ name: 'Responsive Web Design'
+ });
+ await expect(superBlockLink).toBeVisible();
+ await expect(superBlockLink).toHaveAttribute(
+ 'href',
+ '/learn/2022/responsive-web-design'
+ );
- const block = page.getByRole('listitem').last();
- await expect(superBlock).toBeVisible();
+ const block = page.getByTestId(testId).getByRole('listitem').last();
+ await expect(superBlock).toBeVisible();
- const blockLink = block.getByRole('link', {
- name: 'Write Your First Code Using C#'
- });
- await expect(blockLink).toBeVisible();
- await expect(blockLink).toHaveAttribute(
- 'href',
- '/learn/foundational-c-sharp-with-microsoft/#write-your-first-code-using-c-sharp'
- );
+ const blockLink = block.getByRole('link', {
+ name: 'Learn HTML by Building a Cat Photo App'
+ });
+ await expect(blockLink).toBeVisible();
+ await expect(blockLink).toHaveAttribute(
+ 'href',
+ '/learn/2022/responsive-web-design/#learn-html-by-building-a-cat-photo-app'
+ );
+ };
+
+ if (!isMobile) {
+ await expect(page.getByTestId('breadcrumb-mobile')).toBeHidden();
+ await breadcrumbTest('breadcrumb-desktop');
+
+ await page.setViewportSize({
+ width: 766,
+ height: 1080
+ });
+ }
+
+ await expect(page.getByTestId('breadcrumb-desktop')).toBeHidden();
+ await breadcrumbTest('breadcrumb-mobile');
});
});