c3lf/c3lf-system-3
7
0
Fork 0
Code Issues 51 Pull requests Projects 2 Releases Wiki Activity Actions

stash

Browse source
This commit is contained in:
j3d1 2023-12-06 12:04:55 +01:00
parent 8fb058ee50
commit 6b1df14f92
3 changed files with 40 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
web/src/components/TimelineComment.vue
View file

@ -1,10 +1,17 @@
<template>
<div class="timeline-item-description">
<i class="avatar | small">
<font-awesome-icon icon="user"/>
</i>
<span><a href="#">$USER</a> commented <b>{{ item.comment }}</b> on <time
:datetime="item.timestamp">{{ item.timestamp }}</time></span>
<div class="timeline-item-wrapper">
<div class="timeline-item-description">
<i class="avatar | small">
<font-awesome-icon icon="user"/>
</i>
<span><a href="#">$USER</a> commented <b></b> on <time
:datetime="item.timestamp">{{ item.timestamp }}</time></span>
</div>
<div class="card bg-dark">
<div class="card-body">
<p>{{ item.comment }}</p>
</div>
</div>
</div>
</template>
@ -35,7 +42,7 @@ a {
display: flex;
padding-top: 6px;
gap: 8px;
color: var(--c-grey-400);
color: var(--gray);
img {
flex-shrink: 0;
@ -49,7 +56,7 @@ a {
&:hover,
&:focus {
outline: 0; /* Don't actually do this */
color: var(--c-blue-500);
color: var(--info);
}
}
}

42
web/src/components/TimelineMail.vue
View file

@ -5,18 +5,19 @@
<font-awesome-icon icon="user"/>
</i>
<span><a href="#">$USER</a> commented on <time
:datetime="item.timestamp">{{ item.timestamp }}</time></span>
:datetime="timestamp">{{ timestamp }}</time></span>
</div>
<div class="comment">
<p>{{ item.body }}</p>
<div class="card bg-dark">
<div class="card-header">
{{ item.subject }}
</div>
<div class="card-body">
<p><span v-html="body"></span></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>
<font-awesome-icon icon="user"/>
</button>
</div>
</div>
<button class="show-replies">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-forward"
@ -51,6 +52,15 @@ export default {
required: true
}
},
computed: {
'timestamp': function () {
return new Date(this.item.timestamp).toLocaleString();
},
'body': function () {
return this.item.body.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
}
}
};
</script>
@ -84,20 +94,14 @@ img {
&:hover,
&:focus {
outline: 0; /* Don't actually do this */
color: var(--gray);
color: var(--info);
}
}
}
.comment {
margin-top: 12px;
color: var(--light);
.card {
border: 1px solid var(--gray);
background: var(--dark);
border-radius: 6px;
padding: 16px;
font-size: 1rem;
}
.avatar {
@ -132,18 +136,19 @@ img {
font-size: 1rem;
height: 32px;
padding: 0 8px;
background-color: var(--dark);
background-color: var(--gray);
flex-shrink: 0;
cursor: pointer;
border-radius: 99em;
&:hover {
background-color: var(--gray);
background-color: var(--info);
}
&.square {
border-radius: 50%;
color: var(--gray);
background-color: var(--dark);
width: 32px;
height: 32px;
padding: 0;
@ -154,7 +159,6 @@ img {
}
&:hover {
background-color: var(--dark);
color: var(--info);
}
}

4
web/src/components/TimelineStateChange.vue
View file

@ -34,7 +34,7 @@ a {
display: flex;
padding-top: 6px;
gap: 8px;
color: var(--c-grey-400);
color: var(--gray);
img {
flex-shrink: 0;
@ -48,7 +48,7 @@ a {
&:hover,
&:focus {
outline: 0; /* Don't actually do this */
color: var(--c-blue-500);
color: var(--info);
}
}
}