andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Refactor components to simplify them

Browse source
This commit is contained in:
Andras Schmelczer 2022-09-21 14:40:44 +02:00
parent 3cf5b14913
commit 077ed9d3bf
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E
36 changed files with 202 additions and 216 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/page/timeline/timeline-element/timeline-element-parameters.ts Normal file
View file

@ -0,0 +1,13 @@
import { html } from '../../../types/html';
import { Image } from '../../basics/image/image';
import { Preview } from '../../basics/preview/preview';
import { Video } from '../../basics/video/video';
export interface TimelineElementParameters {
date: string;
figure: Image | Video | Preview;
title: string;
description: string;
more: Array<string>;
links: Array<html>;
}

14
src/page/timeline/timeline-element/timeline-element.html.ts
View file

@ -1,11 +1,11 @@
import info from '../../../../static/icons/info.svg';
import { titleToFragment } from '../../../helper/title-to-fragment';
import { html } from '../../../types/html';
import { TimelineElementParameters } from './timeline-element';
import { TimelineElementParameters } from './timeline-element-parameters';
import './timeline-element.scss';
export const generate = (
{ date, title, description, more }: TimelineElementParameters,
{ date, title, description, more, links }: TimelineElementParameters,
showMore: string
): html => `
<section id="${titleToFragment(title)}" class="timeline-element">
@ -22,7 +22,14 @@ export const generate = (
<p class="description">${description}</p>
${more ? '<div class="more"></div>' : ''}
${
more
? `
<div class="more">
${more.map((t) => `<p>${t}</p>`).join('\n')}
</div>`
: ''
}
<div class="buttons">
${
@ -32,6 +39,7 @@ export const generate = (
<p>${showMore}</p>
</div>`
}
${links.join('')}
</div>
</div>
</div>

39
src/page/timeline/timeline-element/timeline-element.scss
View file

@ -85,7 +85,6 @@
}
.card {
text-align: center;
box-shadow: var(--shadow);
border-radius: var(--border-radius);
z-index: 1;
@ -108,27 +107,31 @@
margin-top: var(--small-margin);
}
h2 > a {
@include sub-title-font();
text-decoration: none;
position: relative;
h2 {
text-align: center;
&:before {
content: '#';
position: absolute;
left: -0.5ch;
top: 0;
opacity: 0;
transform: translateX(-100%);
transition: opacity var(--transition-time);
}
> a {
@include sub-title-font();
text-decoration: none;
position: relative;
&:hover:before {
opacity: 0.5;
&:before {
content: '#';
position: absolute;
left: -0.5ch;
top: 0;
opacity: 0;
transform: translateX(-100%);
transition: opacity var(--transition-time);
}
&:hover:before {
opacity: 0.5;
}
}
}
& > p {
.description {
text-align: center;
}
@ -138,7 +141,7 @@
height: 0;
transition: height var(--transition-time);
.content p {
> p {
margin-top: var(--line-height);
}
}

19
src/page/timeline/timeline-element/timeline-element.ts
View file

@ -1,20 +1,8 @@
import { createElement } from '../../../helper/create-element';
import { Image } from '../../basics/image/image';
import { Preview } from '../../basics/preview/preview';
import { Video } from '../../basics/video/video';
import { PageContent } from '../../content/content';
import { PageElement } from '../../page-element';
import { TimelineElementParameters } from './timeline-element-parameters';
import { generate } from './timeline-element.html';
export interface TimelineElementParameters {
date: string;
figure: Image | Video | Preview;
title: string;
description: string;
more: Array<string>;
links: Array<PageElement>;
}
export class PageTimelineElement extends PageElement {
private isOpen = false;
private more: HTMLElement;
@ -25,17 +13,12 @@ export class PageTimelineElement extends PageElement {
private readonly showLess: string
) {
super(createElement(generate(timelineElement, showMore)));
const content = new PageContent(timelineElement.more);
this.children = [content];
this.isOpen = false;
this.more = this.query('.more');
this.more.appendChild(content.htmlRoot);
addEventListener('resize', this.handleResize.bind(this));
this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this));
this.attachElementByReplacing('.figure', timelineElement.figure);
timelineElement.links.forEach((l) => this.attachElementAsChildOf('.buttons', l));
this.isOpen = false;
}

6
src/page/timeline/timeline.ts
View file

@ -1,9 +1,7 @@
import { createElement } from '../../helper/create-element';
import { PageElement } from '../page-element';
import {
PageTimelineElement,
TimelineElementParameters,
} from './timeline-element/timeline-element';
import { PageTimelineElement } from './timeline-element/timeline-element';
import { TimelineElementParameters } from './timeline-element/timeline-element-parameters';
import { generate } from './timeline.html';
export class PageTimeline extends PageElement {