LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 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

2
app/javascript/widget/assets/scss/woot.scss
View File

@@ -1,8 +1,8 @@
@import 'reset';
@import 'variables'; @import 'variables';
@import 'buttons'; @import 'buttons';
@import 'mixins'; @import 'mixins';
@import 'forms'; @import 'forms';
@import 'reset';
html, html,
body { body {

10
app/javascript/widget/components/AgentMessage.vue
View File

@@ -31,18 +31,19 @@ export default {
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style lang="scss">
@import '~widget/assets/scss/variables.scss'; @import '~widget/assets/scss/variables.scss';
.conversation-wrap {
.agent-message { .agent-message {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-end; align-items: flex-end;
margin: 0 0 $space-micro $space-small; margin: 0 0 $space-micro $space-small;
max-width: 88%;
& + .agent-message { & + .agent-message {
margin-bottom: $space-micro; margin-bottom: $space-smaller;
.chat-bubble { .chat-bubble {
border-top-left-radius: $space-smaller; border-top-left-radius: $space-smaller;
@@ -58,7 +59,7 @@ export default {
} }
& + .user-message { & + .user-message {
margin-bottom: $space-normal; margin-top: $space-normal;
} }
.avatar-wrap { .avatar-wrap {
@@ -80,4 +81,5 @@ export default {
} }
} }
} }
}
</style> </style>

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

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