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

29
webapp/components/Comment.vue
View File

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