diff --git a/src/data/services/LmsApiService.js b/src/data/services/LmsApiService.js new file mode 100644 index 000000000..16198740a --- /dev/null +++ b/src/data/services/LmsApiService.js @@ -0,0 +1,22 @@ +import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; +import { getConfig, ensureConfig } from '@edx/frontend-platform'; + +ensureConfig([ + 'LMS_BASE_URL', +], 'LMS API service'); + +const lmsBaseUrl = getConfig().LMS_BASE_URL; + +class LmsApiService { + static getCourseDetailsUrl(courseID) { + return `${lmsBaseUrl}/api/courses/v1/courses/${courseID}`; + } + + static getCourseDetailsData(courseID) { + const apiClient = getAuthenticatedHttpClient(); + const url = LmsApiService.getCourseDetailsUrl(courseID); + return apiClient.get(url); + } +} + +export default LmsApiService; diff --git a/src/index.scss b/src/index.scss index 5c7b5f703..94e2ba80f 100755 --- a/src/index.scss +++ b/src/index.scss @@ -1,8 +1,5 @@ @import '~@edx/paragon/scss/edx/theme.scss'; -@import './example/index.scss'; - -@import "~@edx/frontend-component-header/dist/index"; @import "~@edx/frontend-component-footer/dist/footer"; @import "proctored-exam-settings/proctoredExamSettings.scss"; diff --git a/src/studio-header/DesktopHeader.jsx b/src/studio-header/DesktopHeader.jsx index 812dd5239..8673eccac 100644 --- a/src/studio-header/DesktopHeader.jsx +++ b/src/studio-header/DesktopHeader.jsx @@ -1,13 +1,16 @@ // This file was copied from edx/frontend-component-header-edx. import React from 'react'; import PropTypes from 'prop-types'; -import { injectIntl } from '@edx/frontend-platform/i18n'; +import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; // Local Components import { Menu, MenuTrigger, MenuContent } from './Menu'; import Avatar from './Avatar'; import { LinkedLogo, Logo } from './Logo'; +// i18n +import messages from './Header.messages'; + // Assets import { CaretIcon } from './Icons'; @@ -56,13 +59,14 @@ class DesktopHeader extends React.Component { userMenu, avatar, username, + intl, } = this.props; return ( @@ -82,7 +86,7 @@ class DesktopHeader extends React.Component { logo, logoAltText, logoDestination, - courseTitleDestination, + intl, } = this.props; const logoProps = { src: logo, alt: logoAltText, href: logoDestination }; @@ -92,24 +96,15 @@ class DesktopHeader extends React.Component {
{logoDestination === null ? : } {/* This lockup HTML was copied from edx/frontend-app-learning/src/course-header/Header.jsx. */} - - {this.props.courseId} - + { this.props.courseLockUp }
) : null} -
+
{logoDestination === null ? : } + { this.props.courseLockUp }
@@ -141,6 +147,10 @@ MobileHeader.propTypes = { avatar: PropTypes.string, username: PropTypes.string, stickyOnMobile: PropTypes.bool, + courseLockUp: PropTypes.node.isRequired, + + // i18n + intl: intlShape.isRequired, }; MobileHeader.defaultProps = { @@ -152,7 +162,6 @@ MobileHeader.defaultProps = { avatar: null, username: null, stickyOnMobile: true, - }; export default injectIntl(MobileHeader); diff --git a/src/studio-header/__snapshots__/Header.test.jsx.snap b/src/studio-header/__snapshots__/Header.test.jsx.snap deleted file mode 100644 index 39d520ac2..000000000 --- a/src/studio-header/__snapshots__/Header.test.jsx.snap +++ /dev/null @@ -1,253 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`
renders correctly for authenticated users on desktop 1`] = ` -
- -
-`; - -exports[`
renders correctly for authenticated users on mobile 1`] = ` -
-
-
- -
-
-
- - Studio edX - -
-
- -
-
-`; diff --git a/src/studio-header/header.scss b/src/studio-header/header.scss index b8105bd6e..e63c58950 100644 --- a/src/studio-header/header.scss +++ b/src/studio-header/header.scss @@ -1,12 +1,115 @@ -// This SCSS was copied from edx/frontend-app-learning/src/index.scss. +// This SCSS was partly copied from edx/frontend-app-support-tools/src/support-header/index.scss. +$spacer: 1rem; +$blue: #007db8; +$white: #fff; + +@import './Menu/menu.scss'; + .course-title-lockup { - padding: 1rem 0; + @media only screen and (max-width : 768px) { + padding-left: 0.5rem; + max-width: 70%; + } + @media only screen and (min-width : 769px) { + padding: 0.5rem; padding-right: 1rem; border-right: 1px solid #e5e5e5; - min-width: 0; + } + overflow: hidden; span { + color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } + +.mobile-lockup { + max-width: 50%; +} + +.dropdown-item a { + text-decoration: none; +} + +.icon-button { + display: inline-flex; + line-height: 3rem; + background: transparent; + vertical-align: middle; + text-align: center; + border: none; + height: 3rem; + width: 3rem; + padding: .75rem; + justify-content: center; + align-items:center; + &:hover, &:focus { + background: rgba(0,0,0,.1); + } +} + +.site-header-mobile, +.site-header-desktop { + position: relative; + z-index: 1000; +} + +.site-header-mobile { + .nav-link { + text-decoration: none; + cursor: pointer; + } + img { + height: 1.5rem; + } +} + + +.site-header-desktop { + height: 3.75rem; + box-shadow: 0 1px 0 0 rgba(0,0,0,.1); + background: $white; + .nav-link { + text-decoration: none; + } + .logo { + display: block; + box-sizing: content-box; + position: relative; + top: -.05em; + height: 1.75rem; + padding: 1rem 0; + margin-right: 1rem; + img { + display: block; + height: 100%; + } + } + .main-nav { + flex-wrap: nowrap; + .nav-link { + padding: 1.125rem 1rem; + text-decoration: none; + font-weight: 500; + letter-spacing: .01em; + } + .nav-link:hover, + .nav-link:focus, + .nav-link.active, + .expanded .nav-link { + background: $component-active-bg; + color: $component-active-color; + } + .menu { + position: relative; + .menu-content { + border-top: solid 2px $component-active-bg; + box-shadow: 0 1px 2px rgba(0,0,0,.25); + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + padding: 1rem; + } + } + } +}