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

feat: add diagonal transition after the skill picker

This commit is contained in:
Adrien Marquès 2022-10-06 17:19:00 +02:00
parent adf87b62ed
commit f2eccc9f55
Signed by: xdrm-brackets
GPG Key ID: D75243CA236D825E
2 changed files with 75 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/SkillPicker.vue
View File

@ -1,43 +1,47 @@
<template>
<div id='skill-picker'>
<div class='container'>
<div class='wrapper'>
<div class='container'>
<section class='categories'>
<SkillCard v-for='(t) of tags'
:key='t'
:active='t == tag'
:folder='t'
@pick='onTag(t, $event)'/>
</section>
<section class='categories'>
<SkillCard v-for='(t) of tags'
:key='t'
:active='t == tag'
:folder='t'
@pick='onTag(t, $event)'/>
</section>
<section class='skills'>
<SkillCard v-for='(id) of ids'
:key='id'
v-show='filtered.indexOf(id) >= 0'
:id='id'
:active='id == sel'
@pick='onPick(id, $event)'/>
</section>
<section class='skills'>
<SkillCard v-for='(id) of ids'
:key='id'
v-show='filtered.indexOf(id) >= 0'
:id='id'
:active='id == sel'
@pick='onPick(id, $event)'/>
</section>
<section class='details' v-if='details != null'>
<img :src='details.icon'/>
<h1 v-html='details.title'></h1>
<h2>Featured in <b>{{ details.projects.length }}</b> {{ details.projects.length > 1 ? 'projects' : 'project' }}</h2>
<h3>
<template v-for='(proj) of details.projects'>
<a :key='"pick-" + proj.name' href @click='$event.preventDefault(); scroll(proj.name.replaceAll(" ", "_"));'>
{{ proj.name }}
</a>
<span :key='proj.name'>, </span>
</template>
</h3>
<p v-html='details.text'></p>
</section>
<section class='details' v-if='details != null'>
<img :src='details.icon'/>
<h1 v-html='details.title'></h1>
<h2>Featured in <b>{{ details.projects.length }}</b> {{ details.projects.length > 1 ? 'projects' : 'project' }}</h2>
<h3>
<template v-for='(proj) of details.projects'>
<a :key='"pick-" + proj.name' href @click='$event.preventDefault(); scroll(proj.name.replaceAll(" ", "_"));'>
{{ proj.name }}
</a>
<span :key='proj.name'>, </span>
</template>
</h3>
<p v-html='details.text'></p>
</section>
</div>
<input type='button' v-show='this.sel != null' value='Browse projects' @click='browse()'/>
</div>
<input type='button' v-show='this.sel != null' value='Browse projects' @click='browse()'/>
<div class='spacer'></div>
</div>
</template>
@ -182,7 +186,8 @@
<style scoped lang="scss">
$page-margin: 3rem;
$bottom-space: 10vh;
$bottom-spacer: 15vh;
$bottom-margin: 10vh;
#skill-picker {
display: block;
@ -190,26 +195,45 @@
top: 0;
left: 0;
width: 100vw;
height: #{100vh + $bottom-space};
background: linear-gradient(0, #564ba4, #745cfc);
height: #{100vh + $bottom-spacer};
font-size: 1rem;
background: #202228;
.container {
display: flex;
.wrapper {
display: block;
position: relative;
width: calc( 100vw - #{2*$page-margin} );
height: calc( 100vh - #{2*$page-margin} );
margin: $page-margin;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #202228;
background: linear-gradient(0, #564ba4, #745cfc);
border-radius: 1em / 1em;
padding: $page-margin;
padding: 2em;
.container {
display: flex;
position: relative;
width: calc( 100vw - #{2*$page-margin} );
height: calc( 100vh - #{2*$page-margin} );
flex-flow: row nowrap;
background: #202228;
border-radius: 1em / 1em;
padding: 2em;
flex-flow: row nowrap;
}
}
.spacer {
display: block;
position: relative;
width: 100vw;
height: $bottom-margin;
background: linear-gradient(to bottom left, #564ba4 0%, #564ba4 49.5%, transparent 50%, transparent 100%);
}
}
@ -328,7 +352,7 @@
input {
display: block;
position: absolute;
top: calc( 100% - #{$bottom-space} - #{$page-margin} );
top: calc( 100% - #{$page-margin} );
left: 50%;
padding: .6em 2em;

10
src/components/Timeline.vue
View File

@ -175,7 +175,8 @@
width: 100%;
height: $header-height;
background: #564ba4;
background: #202228;
box-shadow: 0 0 1em transparent;
z-index: 500;
@ -184,7 +185,7 @@
left .2s ease-in-out,
width .2s ease-in-out,
border-radius .2s ease-in-out,
box-shadow .2s ease-in-out;
box-shadow .1s ease-in-out;
&.fixed {
position: fixed;
@ -192,10 +193,11 @@
width: calc( 100% - #{1*2rem} );
margin-top: 1rem;
background: #fff;
background: #564ba4;
// background: linear-gradient(to top right, #564ba4, #745cfc);
border-radius: 1rem / 1rem;
box-shadow: 0 .5em .5em darken(#202228, 5%);
box-shadow: 0 0 1em darken(#202228, 5%);
}
}