Agile611/the-example-app-nodejs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add styles for hover and visited for table of contents

Browse Source 
* Add styles for hover and visited for table of contents

* Add cookie based handling of visited table of content links
This commit is contained in:
Robert Linde
2017-10-04 11:39:53 +02:00
committed by Benedikt Rötsch
parent c7d0860eda
commit 58d7e87325
4 changed files with 54 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/stylesheets/global/table-of-contents.css
View File

@@ -42,5 +42,23 @@
left: calc(var(--toc-gap-left) * 2 * -1);
}
}
&:hover {
font-family: var(--font-medium);
color: var(--color-text-default);
}
&.visited {
position:relative;
&:before,
&:after {
position: absolute;
top: 0;
}
&:after {
content: '👁';
left: calc(var(--toc-gap-left) * 2 * -1);
}
}
}
}

20
public/stylesheets/style.css
View File

@@ -1218,6 +1218,26 @@ display: flex;
left: -22px;
}
.table-of-contents__link:hover {
font-family: 'robotomedium', Helvetica, sans-serif;
color: #2a3039;
}
.table-of-contents__link.visited {
position:relative;
}
.table-of-contents__link.visited:before,
.table-of-contents__link.visited:after {
position: absolute;
top: 0;
}
.table-of-contents__link.visited:after {
content: '👁';
left: -22px;
}
.sidebar-menu {}
.sidebar-menu__list {

16
routes/courses.js
View File

@@ -31,9 +31,15 @@ router.get('/:slug', catchErrors(async function (req, res, next) {
const lessons = course.fields.lessons
const lessonIndex = lessons.findIndex((lesson) => lesson.fields.slug === req.params.lslug)
const lesson = lessons[lessonIndex]
res.render('course', {title: course.fields.title, course, lesson, lessons, lessonIndex})
const cookie = req.cookies.visitedLessons
let visitedLessons = cookie || []
visitedLessons.push(course.sys.id)
visitedLessons = [...new Set(visitedLessons)]
res.cookie('visitedLessons', visitedLessons, { maxAge: 900000, httpOnly: true })
res.render('course', {title: course.fields.title, course, lesson, lessons, lessonIndex, visitedLessons})
}))
/* GET course lesson detail. */
router.get('/:cslug/lessons/:lslug', catchErrors(async function (req, res, next) {
let course = await getCourse(req.params.cslug, req.query.locale, req.query.api)
@@ -41,12 +47,18 @@ router.get('/:cslug/lessons/:lslug', catchErrors(async function (req, res, next)
const lessonIndex = lessons.findIndex((lesson) => lesson.fields.slug === req.params.lslug)
const lesson = lessons[lessonIndex]
const nextLesson = lessons[lessonIndex + 1] || null
const cookie = req.cookies.visitedLessons
let visitedLessons = cookie || []
visitedLessons.push(lesson.sys.id)
visitedLessons = [...new Set(visitedLessons)]
res.cookie('visitedLessons', visitedLessons, { maxAge: 900000, httpOnly: true })
res.render('course', {
title: `${course.fields.title} | ${lesson.fields.title}`,
course,
lesson,
lessons,
nextLesson
nextLesson,
visitedLessons
})
}))

4
views/course.pug
View File

@@ -11,11 +11,11 @@ block content
.table-of-contents
.table-of-contents__list
.table-of-contents__item
a.table-of-contents__link.active(href=`/courses/${course.fields.slug}`) Course overview
a.table-of-contents__link(href=`/courses/${course.fields.slug}` class=(currentPath.endsWith(course.fields.slug) ? 'active' : '') class=(visitedLessons.includes(course.sys.id) ? 'visited' : '')) Course overview
each l in course.fields.lessons
if l.fields
.table-of-contents__item
a.table-of-contents__link(href=`/courses/${course.fields.slug}/lessons/${l.fields.slug}${queryString}`) #{l.fields.title}
a.table-of-contents__link(href=`/courses/${course.fields.slug}/lessons/${l.fields.slug}${queryString}` class=(currentPath.endsWith(l.fields.slug) ? 'active' : '') class=(visitedLessons.includes(l.sys.id) ? 'visited' : '')) #{l.fields.title}
section.layout-sidebar__content
if lesson
+lesson(lesson, course, nextLesson)