diff options
author | dartcafe <github@dartcafe.de> | 2020-01-05 16:54:24 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2020-01-05 16:54:24 +0300 |
commit | fa3a777db9dc935cd7f9710f7e2c7eca7ac0a86f (patch) | |
tree | e1608536540a662e10b35af938f3c5a0f67d7a97 /src/js/components/Comments/Comments.vue | |
parent | e131109ded75c69861b3f23e213a7c720e09febf (diff) |
smaller components and switch between views
Diffstat (limited to 'src/js/components/Comments/Comments.vue')
-rw-r--r-- | src/js/components/Comments/Comments.vue | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/src/js/components/Comments/Comments.vue b/src/js/components/Comments/Comments.vue new file mode 100644 index 00000000..25687667 --- /dev/null +++ b/src/js/components/Comments/Comments.vue @@ -0,0 +1,91 @@ +<!-- + - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de> + - + - @author René Gieling <github@dartcafe.de> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> + +<template> + <div> + <h2>{{ t('polls','Comments') }} </h2> + <CommentAdd /> + <transition-group v-if="countComments" name="fade" class="comments" + tag="ul"> + <li v-for="(comment) in sortedComments" :key="comment.id"> + <div class="comment-item"> + <user-div :user-id="comment.userId" /> + <div class="date"> + {{ moment(comment.dt).fromNow() }} + </div> + </div> + <div class="message wordwrap comment-content"> + {{ comment.comment }} + </div> + </li> + </transition-group> + <div v-else class="emptycontent"> + <div class="icon-comment" /> + <p> {{ t('polls', 'No comments yet. Be the first.') }}</p> + </div> + </div> +</template> + +<script> +import CommentAdd from './CommentAdd' +import { mapState, mapGetters } from 'vuex' + +export default { + name: 'Comments', + components: { + CommentAdd + }, + + computed: { + ...mapState({ + comments: state => state.comments + }), + ...mapGetters([ + 'countComments', + 'sortedComments' + ]) + } +} +</script> + +<style scoped lang="scss"> + + ul { + & > li { + margin-bottom: 30px; + & > .comment-item { + display: flex; + align-items: center; + + & > .date { + right: 0; + top: 5px; + opacity: 0.5; + } + } + & > .message { + margin-left: 44px; + flex: 1 1; + } + } + } +</style> |