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>
<div v-else> <div v-else>
<content-viewer :content="commentContent" class="padding-left text-align-left" /> <content-viewer :content="commentContent" class="comment-content" />
<span v-if="isLongComment" class="show-more-or-less"> <button
<a class="padding-left" @click="isCollapsed = !isCollapsed"> v-if="isLongComment"
{{ isCollapsed ? $t('comment.show.more') : $t('comment.show.less') }} type="button"
</a> class="collapse-button"
</span> @click="isCollapsed = !isCollapsed"
>
{{ isCollapsed ? $t('comment.show.more') : $t('comment.show.less') }}
</button>
</div> </div>
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
</ds-card> </ds-card>
@ -172,11 +175,24 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <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 {
float: right; float: right;
} }
.padding-left { .comment-content {
padding-left: 40px; padding-left: 40px;
} }