feat: add diagonal transition after the skill picker
This commit is contained in:
parent
adf87b62ed
commit
f2eccc9f55
GPG Key ID:
D75243CA236D825E
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue