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

improve html and css for collapse-button

Browse Source
This commit is contained in:
Alina Beck 2019-10-15 15:07:30 +03:00
parent 6318ced7a0
commit 597ca3029f
1 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
webapp/components/Comment/Comment.vue
View File

@ -43,12 +43,15 @@
/>
</div>
<div v-else>
<content-viewer :content="commentContent" class="padding-left text-align-left" />
<span v-if="isLongComment" class="show-more-or-less">
<a class="padding-left" @click="isCollapsed = !isCollapsed">
{{ isCollapsed ? $t('comment.show.more') : $t('comment.show.less') }}
</a>
</span>
<content-viewer :content="commentContent" class="comment-content" />
<button
v-if="isLongComment"
type="button"
class="collapse-button"
@click="isCollapsed = !isCollapsed"
>
{{ isCollapsed ? $t('comment.show.more') : $t('comment.show.less') }}
</button>
</div>
<ds-space margin-bottom="small" />
</ds-card>
@ -172,11 +175,24 @@ export default {
}
</script>
<style lang="scss" scoped>
.collapse-button {
// TODO: move this to css resets
font-family: inherit;
font-size: inherit;
border: none;
background-color: transparent;
float: right;
padding: 0 16px 16px 16px;
color: $color-primary;
cursor: pointer;
}
.float-right {
float: right;
}
.padding-left {
.comment-content {
padding-left: 40px;
}