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

Compare commits

base: xdrm-brackets:8801b8c02024ae96081c727792e26577dd2b12e4
Branches Tags
xdrm-brackets:master
xdrm-brackets:search-engine
xdrm-brackets:feature/yellow
..
compare: xdrm-brackets:97c2c312d030d1aaff3902d0130a5bc8665082e6
Branches Tags
xdrm-brackets:search-engine
xdrm-brackets:feature/yellow
xdrm-brackets:master

2 Commits
8801b8c020 ... 97c2c312d0

Author SHA1 Message Date
Adrien Marquès 97c2c312d0
feat: create timeline continuity line and re-layout with grid 2022-10-11 11:26:20 +02:00
Adrien Marquès 525b451b6a
fix: line svg uses rem for scaling 2022-10-11 10:28:07 +02:00
6 changed files with 200 additions and 87 deletions
Show Stats Expand all files Collapse all files

2
src/assets/home/line.svg
View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg width="41.72mm" height="1e3mm" version="1.1" viewBox="0 0 41.72 1e3" xmlns="http://www.w3.org/2000/svg"> <svg width="41.72mm" height="1e3mm" version="1.1" viewBox="0 0 41.72 1e3" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-97.866 -2.5065)"> <g transform="translate(-97.866 -2.5065)">
<path d="m118.71 2.5069 0.0164 20.649c0.0165 9.7177-20.331 9.1678-20.331 20.348v48.444c0 11.18 20.348 10.63 20.331 20.015l-0.0165 890.54" fill="none" stroke="#fff" stroke-width="1.0583"/> <path d="m118.71 2.5069 0.0164 20.649c0.0165 9.7177-20.331 9.1678-20.331 20.348v48.444c0 11.18 20.348 10.63 20.331 20.015l-0.0165 890.54" fill="none" stroke="#fff" style='stroke-width: .1rem'/>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 396 B

After

Width:  |  Height:  |  Size: 402 B

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

261
src/components/Timeline.vue
View File

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