--- a/src_js/iconolab-bundle/src/components/editor/Comment.vue Wed Mar 01 15:46:18 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Comment.vue Wed Mar 01 17:18:53 2017 +0100
@@ -1,16 +1,18 @@
<template>
- <div v-on:mouseover="hover = true" v-on:mouseleave="hover = false" class="comment" v-bind:style="{ marginLeft: (level * 15) + 'px' }">
+ <div v-on:mouseover="hover = true" v-on:mouseleave="hover = false" class="comment" v-bind:class="commentClass">
<div class="comment-body">
<strong class="comment-author">{{ username }}</strong>
<div class="comment-content" v-html="commentFormatted"></div>
</div>
<div class="comment-footer">
- <span v-show="!hover || !allowThread" class="comment-date">{{ dateFormatted }}</span>
- <comment-form v-show="hover"
- v-if="allowThread"
- v-bind:annotation="annotation"
- v-bind:reply-to="id"></comment-form>
+ <span class="comment-date">{{ dateFormatted }}</span>
</div>
+
+ <comment-form v-show="hover"
+ v-if="allowThread"
+ v-bind:annotation="annotation"
+ v-bind:reply-to="id">
+ </comment-form>
</div>
</template>
@@ -40,6 +42,15 @@
}
},
computed: {
+ commentClass: function(){
+ var c = [];
+
+ if (this.level > 0) {
+ c = [ "comment-thread" ]
+ }
+
+ return c;
+ },
dateFormatted: function () {
var date = moment(this.date); //.format("HH:mm DD/MM/YYYY");
@@ -57,9 +68,17 @@
<style scoped>
.comment {
font-size: 12px;
- padding: 5px 0;
+ padding: 10px 0;
border-bottom: 1px solid #ccc;
}
+
+.comment-thread {
+ border-bottom-width: 0px;
+ border-left: 3px solid #ccc;
+ padding-left: 10px;
+ margin-left: 10px;
+}
+
.comment-author {
float: left;
margin-right: 4px;
@@ -68,7 +87,7 @@
}
.comment-footer {
- margin-top: 5px;
+ margin-top: 0px;
color: #ccc;
}
</style>