diff --git a/src/helper/title-to-fragment.ts b/src/helper/title-to-fragment.ts new file mode 100644 index 0000000..48b951b --- /dev/null +++ b/src/helper/title-to-fragment.ts @@ -0,0 +1,2 @@ +export const titleToFragment = (title: string): string => + encodeURIComponent(title.toLocaleLowerCase().replace(/\W+/g, '-')); diff --git a/src/page/timeline/timeline-element/timeline-element.html.ts b/src/page/timeline/timeline-element/timeline-element.html.ts index 29d7908..5534dc5 100644 --- a/src/page/timeline/timeline-element/timeline-element.html.ts +++ b/src/page/timeline/timeline-element/timeline-element.html.ts @@ -2,14 +2,13 @@ import info from '../../../../static/icons/info.svg'; import './timeline-element.scss'; import { html } from '../../../types/html'; import { TimelineElementParameters } from './timeline-element'; +import { titleToFragment } from '../../../helper/title-to-fragment'; export const generate = ( - { date, title, more }: TimelineElementParameters, + { date, title, description, more }: TimelineElementParameters, showMore: string -): html => { - const id = titleToFragment(title); - return ` -
+): html => ` +

${date}

@@ -17,25 +16,24 @@ export const generate = (
-

${title}

-

+

+ ${title} +

+ +

${description}

+ ${more ? '
' : ''} +
${ - more - ? ` -
+ more && + `
${info}

${showMore}

` - : '' }
`; -}; - -const titleToFragment = (title: string): string => - encodeURIComponent(title.toLocaleLowerCase().replace(/\W+/g, '-')); diff --git a/src/page/timeline/timeline-element/timeline-element.ts b/src/page/timeline/timeline-element/timeline-element.ts index 894e9a2..74277fb 100644 --- a/src/page/timeline/timeline-element/timeline-element.ts +++ b/src/page/timeline/timeline-element/timeline-element.ts @@ -34,7 +34,6 @@ export class PageTimelineElement extends PageElement { this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this)); this.attachElementByReplacing('.figure', timelineElement.figure); - this.query('.description').innerText = timelineElement.description; timelineElement.links.forEach((l) => this.attachElementAsChildOf('.buttons', l)); this.isOpen = false; @@ -53,17 +52,17 @@ export class PageTimelineElement extends PageElement { } private openMore() { - const deltaHeight = this.more!.scrollHeight; - this.more!.style.height = `${deltaHeight.toString()}px`; + const deltaHeight = this.more.scrollHeight; + this.more.style.height = `${deltaHeight.toString()}px`; } private closeMore() { - this.more!.style.height = '0'; + this.more.style.height = '0'; } private handleResize() { if (this.isOpen) { - this.more!.style.height = 'auto'; + this.more.style.height = 'auto'; this.openMore.bind(this); } }