c3lf/c3lf-system-3
7
0
Fork 0
Code Issues 52 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

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

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

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

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

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

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