Skip to content

Commit 65a4ead

Browse files
juanpms2juanpms2
authored
Merge pull request #280 from deletidev/feature/#268-CV-monochrome-force-Create-about-me-section
Closed #268
2 parents 2863e72 + 3db4781 commit 65a4ead

File tree

18 files changed

+177
-73
lines changed

18 files changed

+177
-73
lines changed

‎export-samples/html/cv-monochrome-force.html‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
min-width: 428px;
107107
display: flex;
108108
flex-direction: column;
109-
min-height: 100dvh;
109+
min-height: 100svh;
110110
position: relative;
111111
}
112112

@@ -116,6 +116,7 @@
116116
max-width: 1024px;
117117
margin-left: auto;
118118
margin-right: auto;
119+
width: 100%;
119120
}
120121
.title {
121122
font-size: var(--fs-xl);
@@ -671,6 +672,10 @@
671672
.column {
672673
display: none;
673674
}
675+
.main {
676+
flex-grow: 1;
677+
}
678+
674679
@media screen and (min-width: 834px) {
675680
.main {
676681
display: grid;
@@ -1032,13 +1037,18 @@ <h2 class="title">Educación</h2>
10321037

10331038
if (window.innerWidth > 834) {
10341039
// Mueve los elementos a las columnas correspondientes
1035-
columnLeft.appendChild(aboutMe);
1036-
columnLeft.appendChild(experience);
1037-
columnRight.appendChild(myLinks);
1038-
columnRight.appendChild(languages);
1039-
columnRight.appendChild(hardSkills);
1040-
columnRight.appendChild(softSkills);
1041-
columnRight.appendChild(education);
1040+
aboutMe && columnLeft.appendChild(aboutMe);
1041+
experience && columnLeft.appendChild(experience);
1042+
myLinks && columnRight.appendChild(myLinks);
1043+
languages && columnRight.appendChild(languages);
1044+
hardSkills && columnRight.appendChild(hardSkills);
1045+
softSkills && columnRight.appendChild(softSkills);
1046+
education && columnRight.appendChild(education);
1047+
1048+
// Comprueba que haya contenido en la colummna izquierda por el grid
1049+
if (columnLeft.children.length === 0) {
1050+
columnLeft.style.display = 'none';
1051+
}
10421052

10431053
if (avatar) {
10441054
background.classList.add('background--image');
@@ -1048,13 +1058,13 @@ <h2 class="title">Educación</h2>
10481058
}
10491059
} else {
10501060
// Mueve los elementos al contenedor
1051-
main.appendChild(myLinks);
1052-
main.appendChild(aboutMe);
1053-
main.appendChild(languages);
1054-
main.appendChild(hardSkills);
1055-
main.appendChild(softSkills);
1056-
main.appendChild(experience);
1057-
main.appendChild(education);
1061+
myLinks && main.appendChild(myLinks);
1062+
aboutMe && main.appendChild(aboutMe);
1063+
languages && main.appendChild(languages);
1064+
hardSkills && main.appendChild(hardSkills);
1065+
softSkills && main.appendChild(softSkills);
1066+
experience && main.appendChild(experience);
1067+
education && main.appendChild(education);
10581068
}
10591069
}
10601070

‎packages/manfred2html/src/engine/cv-monochrome-force/html-parts/about-me-section/about-me-section.ejs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<%_ if (profile.description && profile.description !== 'undefined' ) { -%>
2+
<section class="section about">
3+
<h2 class="title"><%- labels.ABOUT_ME_HEADING %></h2>
4+
<p><%= profile.description %></p>
5+
</section>
6+
<%_ } -%>

‎packages/manfred2html/src/engine/cv-monochrome-force/html-parts/about-me-section/about-me-section.part.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import ejs from 'ejs';
2+
import { ProfileSectionVm, mapFromMacCvToProfileSectionVm } from '@lemoncode/manfred-common/profile-section';
3+
import { ISO_SPANISH_LANGUAGE } from '@/engine/engine.const';
4+
import { ManfredAwesomicCV, Settings, Language } from '@/model';
5+
import { getLabels } from './labels';
6+
import aboutMeSection from './about-me-section.ejs?raw';
7+
8+
export const generateAboutMeSection = (cv: ManfredAwesomicCV, settings: Settings): string => {
9+
const profileSectionVm = mapFromMacCvToProfileSectionVm(cv);
10+
11+
return generateAboutMeSectionInner(profileSectionVm, settings.language);
12+
};
13+
14+
const generateAboutMeSectionInner = (
15+
profileSectionVm: ProfileSectionVm,
16+
language: Language = ISO_SPANISH_LANGUAGE
17+
): string => {
18+
const rootObject = {
19+
profile: profileSectionVm,
20+
labels: getLabels(language),
21+
};
22+
return ejs.render(aboutMeSection, rootObject);
23+
};

‎packages/manfred2html/src/engine/cv-monochrome-force/html-parts/about-me-section/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './about-me-section.part';

‎packages/manfred2html/src/engine/cv-monochrome-force/html-parts/about-me-section/labels/about-me-english-labels.const.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { AboutMeLabels } from './about-me-labels.model';
2+
3+
export const englishAboutMeLabels: AboutMeLabels = {
4+
ABOUT_ME_HEADING: 'About me',
5+
};

‎packages/manfred2html/src/engine/cv-monochrome-force/html-parts/about-me-section/labels/about-me-labels.model.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export interface AboutMeLabels {
2+
ABOUT_ME_HEADING: string;
3+
}

‎packages/manfred2html/src/engine/cv-monochrome-force/html-parts/about-me-section/labels/about-me-spanish-labels.const.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { AboutMeLabels } from './about-me-labels.model';
2+
3+
export const spanishAboutMeLabels: AboutMeLabels = {
4+
ABOUT_ME_HEADING: 'Sobre mí',
5+
};

‎packages/manfred2html/src/engine/cv-monochrome-force/html-parts/about-me-section/labels/index.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Language } from '@/model';
2+
import { AboutMeLabels } from './about-me-labels.model';
3+
import { spanishAboutMeLabels } from './about-me-spanish-labels.const';
4+
import { englishAboutMeLabels } from './about-me-english-labels.const';
5+
6+
export const getLabels = (language: Language): AboutMeLabels => {
7+
switch (language) {
8+
case 'es':
9+
return spanishAboutMeLabels;
10+
case 'en':
11+
return englishAboutMeLabels;
12+
default:
13+
throw new Error(`Language not supported: ${language}`);
14+
}
15+
};

‎packages/manfred2html/src/engine/cv-monochrome-force/html-parts/html-document-end/html-document-end.ejs‎

Lines changed: 62 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,74 @@
1-
<script>
2-
// Selecciona un elemento del DOM
3-
const elementInDOM = selector => document.querySelector(selector);
1+
<script>
2+
// Selecciona un elemento del DOM
3+
const elementInDOM = selector => document.querySelector(selector);
44
5-
// Selecciona un elemento del DOM y comprueba que exista
6-
const elementReady = selector => {
7-
const element = elementInDOM(selector);
8-
if (element && element instanceof HTMLElement) {
9-
return element;
10-
}
11-
console.log(new Error(`Element with id ${selector} not found in DOM`));
12-
return null;
13-
};
5+
// Selecciona un elemento del DOM y comprueba que exista
6+
const elementReady = selector => {
7+
const element = elementInDOM(selector);
8+
if (element && element instanceof HTMLElement) {
9+
return element;
10+
}
11+
console.log(new Error(`Element with id ${selector} not found in DOM`));
12+
return null;
13+
};
1414
15-
// media query event handler (mobile)
16-
function handleResize() {
17-
// Selecciona los elementos y comprueba que existan
18-
const main = elementInDOM('.main');
19-
const aboutMe = elementInDOM('.about');
20-
const experience = elementInDOM('.experiencies');
21-
const myLinks = elementInDOM('.links');
22-
const languages = elementInDOM('.languages');
23-
const hardSkills = elementInDOM('.hard-skills');
24-
const softSkills = elementInDOM('.soft-skills');
25-
const education = elementInDOM('.educations');
26-
const avatar = elementInDOM('.header__avatar');
27-
const background = elementInDOM('.background');
28-
const footer = elementInDOM('.footer');
15+
// media query event handler (mobile)
16+
function handleResize() {
17+
// Selecciona los elementos y comprueba que existan
18+
const main = elementInDOM('.main');
19+
const aboutMe = elementInDOM('.about');
20+
const experience = elementInDOM('.experiencies');
21+
const myLinks = elementInDOM('.links');
22+
const languages = elementInDOM('.languages');
23+
const hardSkills = elementInDOM('.hard-skills');
24+
const softSkills = elementInDOM('.soft-skills');
25+
const education = elementInDOM('.educations');
26+
const avatar = elementInDOM('.header__avatar');
27+
const background = elementInDOM('.background');
28+
const footer = elementInDOM('.footer');
2929
30-
// Selecciona las columnas y comprueba que existan
31-
const columnLeft = elementInDOM('.column-left');
32-
const columnRight = elementInDOM('.column-right');
30+
// Selecciona las columnas y comprueba que existan
31+
const columnLeft = elementInDOM('.column-left');
32+
const columnRight = elementInDOM('.column-right');
3333
34-
if (window.innerWidth > 834) {
35-
// Mueve los elementos a las columnas correspondientes
36-
columnLeft.appendChild(aboutMe);
37-
columnLeft.appendChild(experience);
38-
columnRight.appendChild(myLinks);
39-
columnRight.appendChild(languages);
40-
columnRight.appendChild(hardSkills);
41-
columnRight.appendChild(softSkills);
42-
columnRight.appendChild(education);
34+
if (window.innerWidth > 834) {
35+
// Mueve los elementos a las columnas correspondientes
36+
aboutMe && columnLeft.appendChild(aboutMe);
37+
experience && columnLeft.appendChild(experience);
38+
myLinks && columnRight.appendChild(myLinks);
39+
languages && columnRight.appendChild(languages);
40+
hardSkills && columnRight.appendChild(hardSkills);
41+
softSkills && columnRight.appendChild(softSkills);
42+
education && columnRight.appendChild(education);
43+
44+
// Comprueba que haya contenido en la colummna izquierda por el grid
45+
if (columnLeft.children.length === 0) {
46+
columnLeft.style.display = 'none';
47+
}
4348
44-
if (avatar) {
45-
background.classList.add('background--image');
46-
footer.classList.add('footer--image');
47-
} else {
48-
background.classList.remove('background--image');
49-
}
49+
if (avatar) {
50+
background.classList.add('background--image');
51+
footer.classList.add('footer--image');
5052
} else {
51-
// Mueve los elementos al contenedor
52-
main.appendChild(myLinks);
53-
main.appendChild(aboutMe);
54-
main.appendChild(languages);
55-
main.appendChild(hardSkills);
56-
main.appendChild(softSkills);
57-
main.appendChild(experience);
58-
main.appendChild(education);
53+
background.classList.remove('background--image');
5954
}
55+
} else {
56+
// Mueve los elementos al contenedor
57+
myLinks && main.appendChild(myLinks);
58+
aboutMe && main.appendChild(aboutMe);
59+
languages && main.appendChild(languages);
60+
hardSkills && main.appendChild(hardSkills);
61+
softSkills && main.appendChild(softSkills);
62+
experience && main.appendChild(experience);
63+
education && main.appendChild(education);
6064
}
65+
}
6166
62-
// Se ejecuta cuando la página cambia de tamaño
63-
window.addEventListener('resize', handleResize);
67+
// Se ejecuta cuando la página cambia de tamaño
68+
window.addEventListener('resize', handleResize);
6469
65-
// Se ejecuta cuando la página está cargada
66-
document.addEventListener('DOMContentLoaded', handleResize);
67-
</script>
70+
// Se ejecuta cuando la página está cargada
71+
document.addEventListener('DOMContentLoaded', handleResize);
72+
</script>
6873
</body>
6974
</html>

‎packages/manfred2html/src/engine/cv-monochrome-force/html-parts/html-document-start/html-document-start.ejs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,13 +106,14 @@
106106
min-width: 428px;
107107
display: flex;
108108
flex-direction: column;
109-
min-height: 100dvh;
109+
min-height: 100svh;
110110
position: relative;
111111
}
112112
113113
/* utility */
114114
.container {
115115
padding: var(--space-16);
116+
width: 100%;
116117
max-width: 1024px;
117118
margin-left: auto;
118119
margin-right: auto;
@@ -671,6 +672,9 @@
671672
.column {
672673
display: none;
673674
}
675+
.main {
676+
flex-grow: 1;
677+
}
674678
@media screen and (min-width: 834px) {
675679
.main {
676680
display: grid;

0 commit comments

Comments
 (0)