ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix show less link not working reliably

Browse Source 
- Add a span wrapping the show more/less links with a pointer cursor and
margin... it's now clear it should be clicked and reliable works
This commit is contained in:
mattwr18 2019-09-11 12:58:56 +02:00
parent 5273f8b9fa
commit 32849ae920
1 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
webapp/components/Comment.vue
View File

@ -41,15 +41,19 @@
v-show="comment.content !== comment.contentExcerpt && comment.content.length > 180"
style="text-align: right; margin-right: 20px; margin-top: -12px;"
>
<a v-if="isCollapsed" style="padding-left: 40px;" @click="isCollapsed = !isCollapsed">
<span class="show-more-or-less">
<a v-if="isCollapsed" class="padding-left" @click="isCollapsed = !isCollapsed">
{{ $t('comment.show.more') }}
</a>
</span>
</div>
<content-viewer v-if="!isCollapsed" v-html="comment.content" style="padding-left: 40px;" />
<content-viewer v-if="!isCollapsed" v-html="comment.content" class="padding-left" />
<div style="text-align: right; margin-right: 20px; margin-top: -12px;">
<a v-if="!isCollapsed" @click="isCollapsed = !isCollapsed" style="padding-left: 40px; ">
<span class="show-more-or-less">
<a v-if="!isCollapsed" @click="isCollapsed = !isCollapsed" class="padding-left">
{{ $t('comment.show.less') }}
</a>
</span>
</div>
</div>
<ds-space margin-bottom="small" />
@ -149,3 +153,14 @@ export default {
},
}
</script>
<style lang="scss" scoped>
.padding-left {
padding-left: 40px;
}
span.show-more-or-less {
display: block;
margin: 10px 20px;
cursor: pointer;
}
</style>