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

Update features

Browse source
This commit is contained in:
schmelczerandras 2020-11-18 23:31:26 +01:00
parent f66f052d7e
commit 4d7d15c3c7
34 changed files with 482 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,34 +1,35 @@
import { TimelineElement } from '../../../types/portfolio';
import info from '../../../static/icons/info.svg';
import './timeline-element.scss';
import { html } from '../../../types/html';
export const generate = (
{ date, title, more }: TimelineElement,
showMore: string,
showLess: string
showMore: string
): html => `
<section class="timeline-element">
<div class="line-container">
<div class="line"></div>
<p class="date">${date}</p>
<section class="timeline-element">
<div class="line-container">
<div class="line"></div>
<p class="date">${date}</p>
</div>
<div class="card">
<div class="figure"></div>
<div class="lower">
<h2>${title}</h2>
<div class="description"></div>
${more ? '<div class="more"></div>' : ''}
<div class="buttons">
${
more
? `
<div class="info-button">
<div class="svgContainer">${info}</div>
<p>${showMore}</p>
</div>`
: ''
}
</div>
<div class="card">
<h2>${title}</h2>
<div class="figure"></div>
<div class="description"></div>
${
more
? `
<div class="more"></div>
<div class="buttons">
<a tabindex="0" class="show-more">${showMore}</a>
<a tabindex="0" class="show-less">${showLess}</a>
</div>
`
: ''
}
<div class="link"></div>
</div>
</section>
</div>
</div>
</section>
`;

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

@ -91,46 +91,75 @@ section.timeline-element {
background-color: var(--card-color);
}
& > *:not(:first-child) {
margin-top: var(--line-height);
img,
video,
iframe {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.content {
margin-top: 0;
}
$border-width: 1px;
h2 {
@include sub-title-font();
}
& > p {
font-style: italic;
text-align: center;
}
.more {
overflow: hidden;
height: 0;
transition: height var(--transition-time);
}
.buttons {
position: relative;
margin-top: var(--line-height);
.show-more,
.show-less {
transition: opacity var(--transition-time);
.lower {
& > * {
padding: 0 var(--normal-margin);
margin-top: var(--small-margin);
}
.show-more {
opacity: 1;
h2 {
@include sub-title-font();
}
.show-less {
@include absolute-center();
opacity: 0;
visibility: hidden;
& > p {
text-align: center;
}
.more {
overflow: hidden;
margin: 0;
height: 0;
transition: height var(--transition-time);
.content p {
margin-top: var(--line-height);
}
}
.buttons {
display: flex;
justify-content: center;
border-top: $border-width solid var(--normal-text-color);
margin: 0;
padding: 0;
margin-top: var(--small-margin);
.info-button {
@include image-button(var(--icon-size));
.svgContainer {
position: relative;
margin: auto;
@include square(var(--icon-size));
svg {
stroke: var(--normal-text-color);
}
}
p {
padding-bottom: var(--small-margin);
font-size: 0.9rem;
font-style: italic;
}
}
& > * {
flex: 1;
padding-top: var(--small-margin);
&:not(:last-child) {
border-right: $border-width solid var(--normal-text-color);
}
}
}
}
}

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

@ -8,13 +8,15 @@ import { OnBodyDimensionsChangedEvent } from '../../../events/concrete-events/on
export class PageTimelineElement extends PageElement {
private isOpen: boolean;
private more: HTMLElement;
private showMore: string;
private showLess: string;
public constructor(
timelineElement: TimelineElement,
showMore: string,
showLess: string
) {
const root = createElement(generate(timelineElement, showMore, showLess));
const root = createElement(generate(timelineElement, showMore));
if (timelineElement.more) {
const content = new PageContent(timelineElement.more);
@ -23,30 +25,25 @@ export class PageTimelineElement extends PageElement {
this.isOpen = false;
this.more = root.querySelector('.more');
this.more.appendChild(content.htmlRoot);
window.addEventListener('resize', this.handleResize.bind(this));
root
.querySelector('.buttons')
.addEventListener('click', this.toggleOpen.bind(this));
addEventListener('resize', this.handleResize.bind(this));
this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this));
} else super(root);
this.attachElementByReplacing('.figure', timelineElement.figure);
this.attachElementByReplacing('.description', timelineElement.description);
timelineElement.links.forEach(l => this.attachElementAsChildOf('.buttons', l));
if (timelineElement.link) {
this.attachElementByReplacing('.link', timelineElement.link);
}
this.showMore = showMore;
this.showLess = showLess;
}
private toggleOpen() {
const showMore = this.query('.show-more') as HTMLElement;
const showLess = this.query('.show-less') as HTMLElement;
if (this.isOpen) {
PageTimelineElement.show(showMore);
PageTimelineElement.hide(showLess);
this.query('.info-button p').innerText = this.showMore;
this.closeMore();
} else {
PageTimelineElement.show(showLess);
PageTimelineElement.hide(showMore);
this.query('.info-button p').innerText = this.showLess;
this.openMore();
}

2
src/page/timeline/timeline.html.ts
View file

@ -2,5 +2,5 @@ import './timeline.scss';
import { html } from '../../types/html';
export const generate = (): html => `
<div id="timeline"></div>
<div id="timeline"></div>
`;

9
src/page/timeline/timeline.scss
View file

@ -1,10 +1,7 @@
@use '../../style/mixins' as *;
div#timeline {
@include on-large-screen {
// workaround for IE
& > :first-child {
margin-top: var(--large-margin);
}
@include on-large-screen {
div#timeline > :first-child {
margin-top: var(--large-margin);
}
}