336 lines
8 KiB
Vue
336 lines
8 KiB
Vue
|
<template>
|
||
|
|
<ol class="timeline">
|
||
|
|
<li class="timeline-item">
|
||
|
|
<span class="timeline-item-icon | faded-icon">
|
||
|
|
<font-awesome-icon icon="pen"/>
|
||
|
|
</span>
|
||
|
|
<div class="timeline-item-description">
|
||
|
|
<i class="avatar | small">
|
||
|
|
<font-awesome-icon icon="user"/>
|
||
|
|
</i>
|
||
|
|
<span><a href="#">Luna Bonifacio</a> has changed <a href="#">2 attributes</a> on <time
|
||
|
|
datetime="21-01-2021">Jan 21, 2021</time></span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="timeline-item">
|
||
|
|
<span class="timeline-item-icon | faded-icon">
|
||
|
|
<font-awesome-icon icon="check"/>
|
||
|
|
</span>
|
||
|
|
<div class="timeline-item-description">
|
||
|
|
<i class="avatar | small">
|
||
|
|
<font-awesome-icon icon="user"/>
|
||
|
|
</i>
|
||
|
|
<span><a href="#">Yoan Almedia</a> moved <a href="#">Eric Lubin</a> to <a href="#">📚 Technical Test</a> on <time
|
||
|
|
datetime="20-01-2021">Jan 20, 2021</time></span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="timeline-item | extra-space">
|
||
|
|
<span class="timeline-item-icon | filled-icon">
|
||
|
|
<font-awesome-icon icon="envelope"/>
|
||
|
|
</span>
|
||
|
|
<div class="timeline-item-wrapper">
|
||
|
|
<div class="timeline-item-description">
|
||
|
|
<i class="avatar | small">
|
||
|
|
<font-awesome-icon icon="user"/>
|
||
|
|
</i>
|
||
|
|
<span><a href="#">Yoan Almedia</a> commented on <time
|
||
|
|
datetime="20-01-2021">Jan 20, 2021</time></span>
|
||
|
|
</div>
|
||
|
|
<div class="comment">
|
||
|
|
<p>I've sent him the assignment we discussed recently, he is coming back to us this week. Regarding
|
||
|
|
to our last call, I really enjoyed talking to him and so far he has the profile we are looking
|
||
|
|
for. Can't wait to see his technical test, I'll keep you posted and we'll debrief it all
|
||
|
|
together!😊</p>
|
||
|
|
<button class="button">👏 2</button>
|
||
|
|
<button class="button | square">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
||
|
|
<path fill="none" d="M0 0h24v24H0z"/>
|
||
|
|
<path fill="currentColor"
|
||
|
|
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM7 12a5 5 0 0 0 10 0h-2a3 3 0 0 1-6 0H7z"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<button class="show-replies">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-forward"
|
||
|
|
width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
|
||
|
|
stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||
|
|
<path d="M15 11l4 4l-4 4m4 -4h-11a4 4 0 0 1 0 -8h1"/>
|
||
|
|
</svg>
|
||
|
|
Show 3 replies
|
||
|
|
<span class="avatar-list">
|
||
|
|
<i class="avatar | small">
|
||
|
|
<font-awesome-icon icon="user"/>
|
||
|
|
</i>
|
||
|
|
<i class="avatar | small">
|
||
|
|
<font-awesome-icon icon="user"/>
|
||
|
|
</i>
|
||
|
|
<i class="avatar | small">
|
||
|
|
<font-awesome-icon icon="user"/>
|
||
|
|
</i>
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="timeline-item">
|
||
|
|
<span class="timeline-item-icon | faded-icon">
|
||
|
|
<font-awesome-icon icon="comment"/>
|
||
|
|
</span>
|
||
|
|
<div class="new-comment">
|
||
|
|
<input type="text" placeholder="Add a comment..."/>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Timeline',
|
||
|
|
props: {
|
||
|
|
timeline: {
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
*,
|
||
|
|
*:before,
|
||
|
|
*:after {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--c-grey-100: #f4f6f8;
|
||
|
|
--c-grey-200: #e3e3e3;
|
||
|
|
--c-grey-300: #b2b2b2;
|
||
|
|
--c-grey-400: #7b7b7b;
|
||
|
|
--c-grey-500: #3d3d3d;
|
||
|
|
|
||
|
|
--c-blue-500: #688afd;
|
||
|
|
}
|
||
|
|
|
||
|
|
button,
|
||
|
|
input,
|
||
|
|
select,
|
||
|
|
textarea {
|
||
|
|
font: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
img {
|
||
|
|
display: block;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* End basic CSS override */
|
||
|
|
|
||
|
|
.timeline {
|
||
|
|
width: 85%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 32px 0 32px 32px;
|
||
|
|
border-left: 2px solid var(--c-grey-200);
|
||
|
|
font-size: 1.125rem;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline-item {
|
||
|
|
display: flex;
|
||
|
|
gap: 24px;
|
||
|
|
|
||
|
|
& + * {
|
||
|
|
margin-top: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
& + .extra-space {
|
||
|
|
margin-top: 48px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.new-comment {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
input {
|
||
|
|
border: 1px solid var(--c-grey-200);
|
||
|
|
border-radius: 6px;
|
||
|
|
height: 48px;
|
||
|
|
padding: 0 16px;
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
&::placeholder {
|
||
|
|
color: var(--c-grey-300);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
border-color: var(--c-grey-300);
|
||
|
|
outline: 0; /* Don't actually do this */
|
||
|
|
box-shadow: 0 0 0 4px var(--c-grey-100);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline-item-icon {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-left: -57px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
svg {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.faded-icon {
|
||
|
|
background-color: var(--c-grey-100);
|
||
|
|
color: var(--c-grey-400);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.filled-icon {
|
||
|
|
background-color: var(--c-blue-500);
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline-item-description {
|
||
|
|
display: flex;
|
||
|
|
padding-top: 6px;
|
||
|
|
gap: 8px;
|
||
|
|
color: var(--c-grey-400);
|
||
|
|
|
||
|
|
img {
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
/*color: var(--c-grey-500);*/
|
||
|
|
font-weight: 500;
|
||
|
|
text-decoration: none;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
outline: 0; /* Don't actually do this */
|
||
|
|
color: var(--c-blue-500);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 50%;
|
||
|
|
overflow: hidden;
|
||
|
|
aspect-ratio: 1 / 1;
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
|
||
|
|
&.small {
|
||
|
|
width: 28px;
|
||
|
|
height: 28px;
|
||
|
|
}
|
||
|
|
|
||
|
|
img {
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.comment {
|
||
|
|
margin-top: 12px;
|
||
|
|
/*color: var(--c-grey-500);*/
|
||
|
|
border: 1px solid var(--c-grey-200);
|
||
|
|
background: var(--dark);
|
||
|
|
border-radius: 6px;
|
||
|
|
padding: 16px;
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button {
|
||
|
|
border: 0;
|
||
|
|
display: inline-flex;
|
||
|
|
vertical-align: middle;
|
||
|
|
margin-right: 4px;
|
||
|
|
margin-top: 12px;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 1rem;
|
||
|
|
height: 32px;
|
||
|
|
padding: 0 8px;
|
||
|
|
background-color: var(--c-grey-100);
|
||
|
|
flex-shrink: 0;
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 99em;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: var(--c-grey-200);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.square {
|
||
|
|
border-radius: 50%;
|
||
|
|
color: var(--c-grey-400);
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
padding: 0;
|
||
|
|
|
||
|
|
svg {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: var(--c-grey-200);
|
||
|
|
color: var(--c-grey-500);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.show-replies {
|
||
|
|
color: var(--c-grey-300);
|
||
|
|
background-color: transparent;
|
||
|
|
border: 0;
|
||
|
|
padding: 0;
|
||
|
|
margin-top: 16px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
font-size: 1rem;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
svg {
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
color: var(--c-grey-200);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-list {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
& > * {
|
||
|
|
position: relative;
|
||
|
|
box-shadow: 0 0 0 2px #fff;
|
||
|
|
background: var(--dark);
|
||
|
|
margin-right: -8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|