scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-01 11:37:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjust space between message bubbles in widget (#309)

Browse Source
This commit is contained in:
Nithin David Thomas
2019-11-27 11:45:33 +05:30
committed by Pranav Raj S
parent ded8f33fc8
commit 7c65142fcd
3 changed files with 72 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/javascript/widget/components/UserMessage.vue
View File

@@ -22,34 +22,36 @@ export default {
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
<style lang="scss">
@import '~widget/assets/scss/variables.scss';
.conversation-wrap {
.user-message {
align-items: flex-end;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin: 0 $space-smaller $space-micro auto;
max-width: 85%;
text-align: right;
.user-message {
align-items: flex-end;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin: 0 $space-smaller $space-micro auto;
text-align: right;
& + .user-message {
margin-bottom: $space-micro;
.chat-bubble {
border-top-right-radius: $space-smaller;
& + .user-message {
margin-bottom: $space-micro;
.chat-bubble {
border-top-right-radius: $space-smaller;
}
.user-avatar {
visibility: hidden;
}
.agent-name {
display: none;
}
}
.user-avatar {
visibility: hidden;
& + .agent-message {
margin-top: $space-normal;
}
.agent-name {
display: none;
.message-wrap {
margin-right: $space-small;
}
}
& + .agent-message {
margin-bottom: $space-normal;
}
.message-wrap {
margin-right: $space-small;
}
}
</style>