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

10
src/components/Timeline.vue
View File

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