xdrm-brackets
/
xdrm.io
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: create timeline continuity line and re-layout with grid

This commit is contained in:
Adrien Marquès 2022-10-11 11:26:20 +02:00
parent 525b451b6a
commit 97c2c312d0
Signed by: xdrm-brackets
GPG Key ID: D75243CA236D825E
5 changed files with 199 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/timeline/joint-start.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24.399mm" height="7.6165mm" version="1.1" viewBox="0 0 24.399 7.6165" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-115.97 -188.99)">
<path d="m122.35 188.99c0 4.3726 11.131 3.333 11.131 7.6165" fill="none" stroke="#2e2e32" stroke-width=".8"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 326 B

6
src/assets/timeline/joint-stop.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24.399mm" height="7.6165mm" version="1.1" viewBox="0 0 24.399 7.6165" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-115.97 -188.99)">
<path d="m133.54 188.99c0 4.3726-10.693 3.333-10.693 7.6165" fill="none" stroke="#2e2e32" stroke-width=".8"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 326 B

6
src/assets/timeline/joint.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24.399mm" height="7.6165mm" version="1.1" viewBox="0 0 24.399 7.6165" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-115.97 -188.99)">
<path d="m122.35 188.99c0 4.3726 11.131 3.333 11.131 7.6165" fill="none" stroke="#2e2e32" stroke-width=".8"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 326 B

6
src/assets/timeline/line.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1mm" height="4.2333mm" version="1.1" viewBox="0 0 1 4.2333" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-124.76,-160.47)">
<path d="m125.26 160.47v4.2333" fill="none" stroke="#2e2e32"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 269 B

255
src/components/Timeline.vue
View File

@ -4,40 +4,68 @@
<div id='search-header' ref='header'>
</div>
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="col4"></div>
<div class="col5"></div>
<template class='project' v-for='(proj) of projects'>
<div :key="'spacer-'+proj.name" class='spacer' />
<!-- id is used for navigation -->
<div :key="'start-'+proj.name" class='start' :id='"project-" + proj.name.replaceAll(" ", "_")'>
{{ proj.started_at | short_date }}
</div>
<img :key="'name-icon-'+proj.name" class='name-icon' src='../assets/timeline/project.svg'/>
<div :key="'name-icon-'+proj.name" class='name-icon'>
<img src='../assets/timeline/project.svg' />
</div>
<div :key="'name-'+proj.name" class='name'>
Created <b>{{ proj.name }}</b> <span>{{ proj.started_at | date_diff }} ago</span>
</div>
<img :key="'skill-icon-'+proj.name" class='skill-icon' src='../assets/timeline/skills.svg' />
<div :key="'col1-'+proj.name" class="col1"></div>
<div :key="'col2-'+proj.name" class="col2"></div>
<div :key="'col3-'+proj.name" class="col3"></div>
<div :key="'col4-'+proj.name" class="col4"></div>
<div :key="'col5-'+proj.name" class="col5"></div>
<div :key="'joint-start-'+proj.name" class='joint-start' />
<div :key="'skill-icon-'+proj.name" class='skill-icon'>
<img src='../assets/timeline/skills.svg' />
</div>
<div :key="'skillset-'+proj.name" class='skillset'>
<SkillCard v-for='(id) of proj.skills' :key='"timeline-" + proj.name + "-" + id' :id='id' :active='id == skill' @pick='$emit("pick", id)'/>
</div>
<img :key="'desc-icon-'+proj.name" class='desc-icon' src='../assets/timeline/info.svg' />
<div :key="'desc-icon-'+proj.name" class='desc-icon'>
<img src='../assets/timeline/info.svg' />
</div>
<div :key="'desc-'+proj.name" class='desc' v-html='proj.info'></div>
<template v-if='proj.source != null'>
<img :key="'src-icon-'+proj.name" class='src-icon' src='../assets/timeline/src.svg' />
<div :key="'src-icon-'+proj.name" class='src-icon'>
<img src='../assets/timeline/src.svg' />
</div>
<div :key="'src-'+proj.name" class='src' >
Hosted at <a :href='proj.source.link'>{{ proj.source.name }}</a> <span>({{ proj.commits }} commits)</span>
</div>
</template>
<template v-if='proj.doc != null'>
<img :key="'doc-icon-'+proj.name" class='doc-icon' src='../assets/timeline/doc.svg' />
<div :key="'doc-icon-'+proj.name" class='doc-icon'>
<img src='../assets/timeline/doc.svg' />
</div>
<div :key="'doc-'+proj.name" class='doc'>
Documentation at <a :href='proj.doc.link'>{{ proj.doc.name }}</a>
</div>
</template>
<img :key="'end-icon-'+proj.name" class='end-icon' src='../assets/timeline/activity.svg' />
<div :key="'end-icon-'+proj.name" class='end-icon'>
<img src='../assets/timeline/activity.svg' />
</div>
<div :key="'end-'+proj.name" class='end'>
<template v-if='proj.stopped_at != null'>
Project stopped in {{ proj.stopped_at | short_date }} <span>{{ proj.stopped_at | date_diff }} ago</span>
@ -46,6 +74,8 @@
Project still active
</template>
</div>
<div :key="'joint-stop-'+proj.name" class='joint-stop' />
</template>
</div>
@ -162,10 +192,11 @@
<style scoped lang="scss">
@import '../global';
$icon-width: 2.3rem;
$icon-size: 2.7rem;
$space-width: 1rem;
$bg-color: #202228;
$header-height: 6rem;
$joint-height: 2rem;
#search-header {
display: block;
@ -207,102 +238,140 @@
width: 100vw;
// min-height: 100vh;
grid-template-columns: auto $icon-width $icon-width $space-width auto;
grid-gap: .5em;
grid-template-columns: auto $icon-size $icon-size $space-width auto;
grid-gap: 0;
color: #fff;
font-size: 1.6rem;
font-weight: 400;
color: #fff;
background: $bg-color;
padding: 0 5rem;
padding-top: #{$header-height + 2rem};
.start { grid-column: 1 / 2; }
// /**DEBUG**/.col1{ grid-column: 1; height: 1rem; background: red; }
// /**DEBUG**/.col2{ grid-column: 2; height: 1rem; background: blue; }
// /**DEBUG**/.col3{ grid-column: 3; height: 1rem; background: yellow; }
// /**DEBUG**/.col4{ grid-column: 4; height: 1rem; background: green; }
// /**DEBUG**/.col5{ grid-column: 5; height: 1rem; background: orange; }
// line 1
.spacer { grid-column: 2; };
// line 2
.start { grid-column: 1; }
.name-icon { grid-column: 2; }
.name { grid-column: 3 / 6; }
.skillset, .desc, .src, .doc, .end {
grid-column: 5 / 6;
}
.name-icon { grid-column: 2 / 3; }
.skill-icon, .desc-icon, .src-icon, .doc-icon, .end-icon {
grid-column: 3 / 4;
}
.skill-icon, .desc-icon, .src-icon, .doc-icon, .end-icon {
// line 3 (line junction)
.joint-start { grid-column: 2 / 4; }
// line 4
.skill-icon { grid-column: 3; }
.skillset { grid-column: 5; margin-bottom: 2rem; }
// line 5
.desc-icon { grid-column: 3; }
.desc { grid-column: 5; margin-bottom: 2rem; }
// line 6
.src-icon { grid-column: 3; }
.src { grid-column: 5; margin-bottom: 2rem; }
// line 7
.doc-icon { grid-column: 3; }
.doc { grid-column: 5; margin-bottom: 2rem; }
// line 8
.end-icon { grid-column: 3; }
.end { grid-column: 5; }
// line 9 (junction stop)
.joint-stop { grid-column: 2 / 4; }
.skill-icon, .name-icon, .desc-icon, .src-icon, .doc-icon, .end-icon, .src-icon, .doc-icon, .end-icon {
justify-self: center;
display: flex;
position: relative;
width: #{$icon-width + .1rem};
height: #{$icon-width + .1rem};
margin-top: .1rem;
width: $icon-size;
background: $bg-color;
}
.src-icon, .doc-icon, .end-icon {
position: relative;
width: #{$icon-width + .1rem};
height: #{$icon-width + .1rem};
margin-top: .1rem;
background: url('../assets/timeline/line.svg');
background-repeat: repeat-y;
background-position: center;
background-size: .2rem auto;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
img {
width: #{$icon-size - 2*.1rem};
height: #{$icon-size - 2*.1rem};
padding: .1rem;
background: $bg-color;
}
}
// line 1
.spacer {
height: 5rem;
background: url('../assets/timeline/line.svg');
background-repeat: repeat-y;
background-position: center;
background-size: .2rem auto;
}
// line 2
.start {
align-self: center;
justify-self: end;
font-size: .8em;
color: #535359;
padding-top: .3em;
justify-self: flex-end;
margin-right: 1rem;
}
.name-icon {
position: relative;
width: #{$icon-width + .2rem};
height: #{$icon-width + .2rem};
padding-top: -.2rem;
background: $bg-color;
}
.name, .end {
color: #999999;
b {
color: #745cfc;
font-weight: 500;
}
span {
position: relative;
font-size: .8em;
color: #4d4d4d;
margin-left: .5em;
&:before {
content: '';
display: inline-block;
position: relative;
margin-bottom: .15em;
margin-right: .5em;
width: .3em;
height: .3em;
background: #606060;
border-radius: 50% / 50%;
}
}
}
.name {
margin-bottom: 1em;
align-self: center;
margin-left: 1rem;
color: #999999;
}
// line 3
.joint-start {
height: $joint-height;
background: url('../assets/timeline/joint-start.svg');
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
.joint-stop {
height: $joint-height;
background: red;
background: url('../assets/timeline/joint-stop.svg');
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
.skillset {
display: flex;
@ -361,17 +430,37 @@
}
}
.src, .doc {
.src, .doc, .end {
color: #999999;
}
b {
color: #745cfc;
font-weight: 500;
}
span {
margin-left: .5em;
color: #4d4d4d;
}
}
position: relative;
.end {
margin-bottom: 2em;
font-size: .8em;
color: #4d4d4d;
margin-left: .5em;
&:before {
content: '';
display: inline-block;
position: relative;
margin-bottom: .15em;
margin-right: .5em;
width: .3em;
height: .3em;
background: #606060;
border-radius: 50% / 50%;
}
}
}