@@ -22,4 +32,8 @@ const SkillsBuilderHeader = () => {
);
};
+SkillsBuilderHeader.propTypes = {
+ isMedium: PropTypes.func.isRequired,
+};
+
export default SkillsBuilderHeader;
diff --git a/src/skills-builder/skills-builder-header/messages.js b/src/skills-builder/skills-builder-header/messages.js
index 1c7fabf..a39bcb2 100644
--- a/src/skills-builder/skills-builder-header/messages.js
+++ b/src/skills-builder/skills-builder-header/messages.js
@@ -11,6 +11,11 @@ const messages = defineMessages({
defaultMessage: 'Let edX be your guide',
description: 'Subheading to the Skills Builder title in the header component',
},
+ skillsBuilderHeaderTitleIsMedium: {
+ id: 'skills.builder.header.title.is.medium',
+ defaultMessage: 'edX Skills builder',
+ description: 'Title for the Skills Builder feature when screen size is medium or less',
+ },
});
export default messages;
diff --git a/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx b/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx
index 4bff358..deab56c 100644
--- a/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx
+++ b/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx
@@ -1,6 +1,6 @@
import React, { useState, useContext } from 'react';
import {
- Button, Container, Stepper, ModalDialog, Form, Hyperlink,
+ Button, Container, Stepper, ModalDialog, Form, Hyperlink, useMediaQuery, breakpoints,
} from '@edx/paragon';
import { getConfig } from '@edx/frontend-platform';
import { useIntl } from '@edx/frontend-platform/i18n';
@@ -19,6 +19,7 @@ import headerImage from '../images/headerImage.png';
const SkillsBuilderModal = () => {
const { formatMessage } = useIntl();
+ const isMedium = useMediaQuery({ maxWidth: breakpoints.medium.maxWidth });
const { state } = useContext(SkillsBuilderContext);
const { currentGoal, currentJobTitle, careerInterests } = state;
const [currentStep, setCurrentStep] = useState(STEP1);
@@ -59,16 +60,16 @@ const SkillsBuilderModal = () => {
isOpen
onClose={closeButtonHandle}
>
-
+
- 
+ { !isMedium && }
-
+
-
+
diff --git a/src/skills-builder/skills-builder-modal/skillsBuilderModal.scss b/src/skills-builder/skills-builder-modal/skillsBuilderModal.scss
index c543e8a..5f80033 100644
--- a/src/skills-builder/skills-builder-modal/skillsBuilderModal.scss
+++ b/src/skills-builder/skills-builder-modal/skillsBuilderModal.scss
@@ -1,5 +1,16 @@
.skills-builder-modal {
button[aria-label="Close"][type="button"]{
- color: #ffffff;
+ color: $white;
+ }
+}
+
+
+$breakpoint-medium: 992px;
+@media (max-width: $breakpoint-medium) {
+ .med-min-height {
+ min-height: map-get($spacers, 6);
+ }
+ .pgn__modal-close-container {
+ top: 1rem;
}
}