diff --git a/i18n/messages.en.js b/i18n/messages.en.js
index 4f55fb4d..ff7cf89d 100644
--- a/i18n/messages.en.js
+++ b/i18n/messages.en.js
@@ -35,14 +35,6 @@ module.exports = {
back_to_top_label: 'To page top',
},
bankIdAlertText: `Please note that Students not located in Sweden may have problems attending a course at KTH.
You could meet obstacles if you're required to pay fees or if you do not have a Swedish Mobile BankID. `,
- breadCrumbLabels: {
- breadcrumbs: 'Breadcrumbs',
- university: 'KTH',
- student: 'Student at KTH',
- directory: 'Course and programme directory',
- aboutCourse: 'About course',
- aboutCourseMemos: 'About course memo',
- },
courseLabels: {
label_course_description: 'Introduction to course',
label_course_information: 'Course information, including syllabus',
diff --git a/i18n/messages.se.js b/i18n/messages.se.js
index be3a9ac9..65c03050 100644
--- a/i18n/messages.se.js
+++ b/i18n/messages.se.js
@@ -37,14 +37,6 @@ module.exports = {
},
bankIdAlertText:
'Du behöver ett KTH-konto för att läsa en kurs på KTH, kontot aktiveras med Mobilt BankID eller genom att besöka KTH:s campus. Det enda sättet att starta en kurs utan att besöka campus, är om du har Mobilt BankID.',
- breadCrumbLabels: {
- breadcrumbs: 'Brödsmulor',
- university: 'KTH',
- student: 'Student på KTH',
- directory: 'Kurs- och programkatalogen',
- aboutCourse: 'Om kursen',
- aboutCourseMemos: 'Om kurs-PM',
- },
courseLabels: {
label_course_description: 'Introducerande beskrivning av kursen',
label_course_information: 'Kursinformation inklusive kursplan',
diff --git a/public/css/kursinfo-web.scss b/public/css/kursinfo-web.scss
index 6d9f40a9..66952d20 100644
--- a/public/css/kursinfo-web.scss
+++ b/public/css/kursinfo-web.scss
@@ -38,7 +38,12 @@ $red: #e01f28;
}
.container.articleNavigation {
- padding: 15px 15px 0 !important;
+ padding: 0 15px 0 30px !important;
+
+ #breadcrumbs .breadcrumb {
+ padding-top: 15px;
+ padding-bottom: 24px;
+ }
}
@media (max-width: 991.98px) {
@@ -47,11 +52,6 @@ $red: #e01f28;
}
}
-.breadcrumb {
- background-color: transparent;
- padding: 0.75rem 1rem;
-}
-
.course-header {
margin-bottom: 16px;
}
diff --git a/public/js/app/pages/CoursePage.jsx b/public/js/app/pages/CoursePage.jsx
index c62055d0..ab8a73a0 100644
--- a/public/js/app/pages/CoursePage.jsx
+++ b/public/js/app/pages/CoursePage.jsx
@@ -1,11 +1,11 @@
/* eslint-disable react/no-danger */
import React, { useEffect } from 'react'
-import { Row, Col, Alert, Breadcrumb, BreadcrumbItem } from 'reactstrap'
+import { Row, Col, Alert } from 'reactstrap'
import i18n from '../../../../i18n'
import { INFORM_IF_IMPORTANT_INFO_IS_MISSING, FORSKARUTB_URL, SYLLABUS_URL } from '../util/constants'
-import { breadcrumbLinks, aboutCourseLink } from '../util/links'
+import { aboutCourseLink } from '../util/links'
import RoundInformationOneCol from '../components/RoundInformationOneCol'
import CourseTitle from '../components/CourseTitle'
@@ -19,24 +19,6 @@ import BankIdAlert from '../components/BankIdAlert'
const aboutCourseStr = (translate, courseCode = '') => `${translate.site_name} ${courseCode}`
-const Breadcrumbs = ({ translation, language, courseCode }) => (
-
-
- {translation.breadCrumbLabels.university}
-
-
- {translation.breadCrumbLabels.student}
-
-
- {translation.breadCrumbLabels.directory}
-
-
- {`${translation.breadCrumbLabels.aboutCourse} ${courseCode}`}
-
-
-)
function CoursePage() {
const [context, setWebContext] = useWebContext()
// const context = React.useMemo(() => webContext, [webContext])
@@ -129,9 +111,6 @@ function CoursePage() {
return (
-
-
-
diff --git a/public/js/app/util/links.js b/public/js/app/util/links.js
index 5f8868d3..def3876f 100644
--- a/public/js/app/util/links.js
+++ b/public/js/app/util/links.js
@@ -1,18 +1,8 @@
-const breadcrumbLinks = {
- university: { en: '/en', sv: '/' },
- student: { en: '/en/student', sv: '/student' },
- directory: {
- en: '/student/kurser/kurser-inom-program?l=en',
- sv: '/student/kurser/kurser-inom-program',
- },
-}
-
function aboutCourseLink(courseCode, language) {
const languageParameter = language === 'en' ? '?l=en' : ''
return `/student/kurser/kurs/${courseCode}${languageParameter}`
}
module.exports = {
- breadcrumbLinks,
aboutCourseLink,
}
diff --git a/server/controllers/courseCtrl.js b/server/controllers/courseCtrl.js
index 966c04c1..47757ebe 100644
--- a/server/controllers/courseCtrl.js
+++ b/server/controllers/courseCtrl.js
@@ -12,6 +12,7 @@ const browserConfig = require('../configuration').browser
const serverConfig = require('../configuration').server
const paths = require('../server').getPaths()
const api = require('../api')
+const { createBreadcrumbs } = require('../utils/breadcrumbUtil')
const { getServerSideFunctions } = require('../utils/serverSideRendering')
const { createServerSideContext } = require('../ssr-context/createServerSideContext')
@@ -615,6 +616,8 @@ async function getIndex(req, res, next) {
context: webContext,
})
+ const breadcrumbsList = createBreadcrumbs(lang, courseCode)
+
res.render('course/index', {
compressedData,
instrumentationKey: serverConfig?.appInsights?.instrumentationKey,
@@ -626,6 +629,7 @@ async function getIndex(req, res, next) {
? 'KTH kursinformation för ' + courseCode.toUpperCase()
: 'KTH course information ' + courseCode.toUpperCase(),
klaroAnalyticsConsentCookie,
+ breadcrumbsList,
})
} catch (err) {
const excludedStatusCodes = [403, 404]
diff --git a/server/utils/breadcrumbUtil.js b/server/utils/breadcrumbUtil.js
new file mode 100644
index 00000000..4369a5ae
--- /dev/null
+++ b/server/utils/breadcrumbUtil.js
@@ -0,0 +1,37 @@
+// Logic is based on old Breadcrumb component in kth-reactstrap: https://github.com/KTH/kth-reactstrap/blob/master/src/components/utbildningsinfo/Breadcrumbs.js
+// Be aware that this entire file is replicated in multiple apps, so changes here should probably be synced to the other apps.
+// See https://confluence.sys.kth.se/confluence/x/6wYJDQ for more information.
+const baseItems = {
+ university: {
+ en: { url: '/en', label: 'KTH' },
+ sv: { url: '/', label: 'KTH' },
+ },
+ student: {
+ en: { url: '/en/student', label: 'Student at KTH' },
+ sv: { url: '/student', label: 'Student på KTH' },
+ },
+ directory: {
+ en: { url: '/student/kurser/kurser-inom-program?l=en', label: 'Course and programme directory' },
+ sv: { url: '/student/kurser/kurser-inom-program', label: 'Kurs- och programkatalogen' },
+ },
+}
+
+function createAboutCourseItem(language, courseCode) {
+ const label = language === 'en' ? 'About course' : 'Om kursen'
+ return {
+ label: `${label} ${courseCode}`,
+ url: `/student/kurser/kurs/${courseCode.toUpperCase()}?l=${language}`,
+ }
+}
+
+function createBreadcrumbs(language, courseCode) {
+ const items = [baseItems.university[language], baseItems.student[language], baseItems.directory[language]]
+ if (courseCode) {
+ items.push(createAboutCourseItem(language, courseCode))
+ }
+ return items
+}
+
+module.exports = {
+ createBreadcrumbs,
+}
diff --git a/server/views/helpers/index.js b/server/views/helpers/index.js
index 346ab4ae..038bac9b 100644
--- a/server/views/helpers/index.js
+++ b/server/views/helpers/index.js
@@ -1,6 +1,7 @@
'use strict'
const registerHeaderContentHelper = require('@kth/kth-node-web-common/lib/handlebars/helpers/headerContent')
+const { registerBreadcrumbHelper } = require('@kth/kth-node-web-common/lib/handlebars/helpers/breadcrumbs')
const log = require('@kth/log')
const config = require('../../configuration').server
const packageFile = require('../../../package.json')
@@ -32,6 +33,7 @@ registerHeaderContentHelper({
* packaged helpers in https://github.com/KTH/kth-node-web-common/tree/master/lib/handlebars/helpers
* Those only need to be required. Docs embedded in source.
*/
+registerBreadcrumbHelper()
require('@kth/kth-node-web-common/lib/handlebars/helpers/contentedit')
const i18n = require('../../../i18n')
diff --git a/server/views/partials/kthHeader.handlebars b/server/views/partials/kthHeader.handlebars
index bd52d616..798651cb 100644
--- a/server/views/partials/kthHeader.handlebars
+++ b/server/views/partials/kthHeader.handlebars
@@ -34,5 +34,11 @@
+
+
+ {{breadcrumbs breadcrumbsList lang}}
+
+