KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix Code Climate issues with Conversation View (#103)

Browse source
This commit is contained in:
Nishant Samel 2019-10-08 01:06:01 +05:30 committed by Nithin David Thomas
parent 0daeeb1361
commit 59db1de1dc
1 changed files with 71 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
app/javascript/src/assets/scss/widgets/_conversation-view.scss
View file

@ -11,15 +11,15 @@
} }
.status--filter { .status--filter {
float: right;
width: auto;
font-size: $font-size-mini;
@include padding($zero null $zero $space-normal); @include padding($zero null $zero $space-normal);
@include border-light; @include border-light;
@include round-corner; @include round-corner;
@include margin($space-smaller $space-slab $zero $zero); @include margin($space-smaller $space-slab $zero $zero);
background-color: $color-background; background-color: $color-background;
float: right;
font-size: $font-size-mini;
height: $space-medium; height: $space-medium;
width: auto;
} }
} }
@ -42,7 +42,7 @@
@include background-gray; @include background-gray;
@include margin(0); @include margin(0);
@include border-normal-left; @include border-normal-left;
.current-chat{ .current-chat {
@include flex; @include flex;
@include full-height; @include full-height;
@include flex-direction(column); @include flex-direction(column);
@ -53,16 +53,18 @@
@include flex-direction(column); @include flex-direction(column);
@include flex-align(center, middle); @include flex-align(center, middle);
img { img {
width: 10rem;
@include margin($space-normal); @include margin($space-normal);
width: 10rem;
} }
span { span {
text-align: center;
font-size: $font-size-small; font-size: $font-size-small;
font-weight: $font-weight-medium; font-weight: $font-weight-medium;
text-align: center;
} }
} }
} }
.conv-empty-state { .conv-empty-state {
@include flex; @include flex;
@include full-height; @include full-height;
@ -76,9 +78,9 @@
@include flex-weight(1); @include flex-weight(1);
@include flex-direction(column); @include flex-direction(column);
@include margin($zero); @include margin($zero);
overflow-y: scroll; // Firefox flexbox fix
// FIrefox flexbox fix
height: 100%; height: 100%;
overflow-y: scroll;
> li { > li {
@include flex; @include flex;
@ -95,21 +97,22 @@
&.unread--toast { &.unread--toast {
span { span {
margin: $space-one auto;
padding: $space-smaller $space-two;
font-size: $font-size-mini;
font-weight: $font-weight-medium;
@include elegant-card; @include elegant-card;
@include round-corner; @include round-corner;
background: $color-woot; background: $color-woot;
color: $color-white; color: $color-white;
font-size: $font-size-mini;
font-weight: $font-weight-medium;
margin: $space-one auto;
padding: $space-smaller $space-two;
} }
} }
.bubble { .bubble {
text-align: left;
max-width: 50rem; max-width: 50rem;
text-align: left;
word-wrap: break-word; word-wrap: break-word;
.aplayer { .aplayer {
box-shadow: none; box-shadow: none;
font-family: inherit; font-family: inherit;
@ -119,14 +122,15 @@
&.left { &.left {
.bubble { .bubble {
background: $white; background: $white;
color: $color-heading;
margin-right: auto;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
color: $color-heading;
margin-right: auto;
} }
&+.right { +.right {
margin-top: $space-one; margin-top: $space-one;
.bubble { .bubble {
border-top-right-radius: $space-small; border-top-right-radius: $space-small;
} }
@ -138,32 +142,34 @@
@include flex-align(right, null); @include flex-align(right, null);
.wrap { .wrap {
text-align: right;
margin-right: $space-small; margin-right: $space-small;
text-align: right;
} }
.bubble { .bubble {
margin-left: auto;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
margin-left: auto;
&.is-private { &.is-private {
background: lighten($warning-color, 32%); background: lighten($warning-color, 32%);
color: $color-heading; color: $color-heading;
position: relative;
padding-right: $space-large; padding-right: $space-large;
position: relative;
&:before { &::before {
position: absolute;
top: $space-smaller + $space-micro;
right: $space-one;
bottom: 0; bottom: 0;
color: $medium-gray; color: $medium-gray;
position: absolute;
right: $space-one;
top: $space-smaller + $space-micro;
} }
} }
} }
&+.left { +.left {
margin-top: $space-one; margin-top: $space-one;
.bubble { .bubble {
border-top-left-radius: $space-small; border-top-left-radius: $space-small;
} }
@ -181,39 +187,41 @@
} }
.sender--thumbnail { .sender--thumbnail {
width: $space-slab;
height: $space-slab;
@include round-corner(); @include round-corner();
height: $space-slab;
margin-right: $space-one; margin-right: $space-one;
margin-top: $space-micro; margin-top: $space-micro;
width: $space-slab;
} }
.activity-wrap { .activity-wrap {
@include flex; @include flex;
@include margin($space-small auto); @include margin($space-small auto);
@include padding($space-smaller $space-normal); @include padding($space-smaller $space-normal);
@include flex-align($x: center, $y: null); @include flex-align($x: center, $y: null);
font-size: $font-size-small;
background: lighten($warning-color, 32%); background: lighten($warning-color, 32%);
border-radius: $space-smaller; border-radius: $space-smaller;
font-size: $font-size-small;
p { p {
margin-bottom: $zero;
color: $color-heading; color: $color-heading;
margin-bottom: $zero;
.ion-person { .ion-person {
margin-right: $space-small;
font-size: $font-size-default;
top: $space-micro;
position: relative;
color: $color-body; color: $color-body;
font-size: $font-size-default;
margin-right: $space-small;
position: relative;
top: $space-micro;
} }
.message-text__wrap { .message-text__wrap {
position: relative; position: relative;
} }
.message-text { .message-text {
&:after { &::after {
content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"; content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
display: inline; display: inline;
} }
} }
@ -228,23 +236,25 @@
@include padding($space-smaller $space-one); @include padding($space-smaller $space-one);
@include margin($zero); @include margin($zero);
background: #c7e3ff; background: #c7e3ff;
color: $color-heading;
border-radius: $space-small; border-radius: $space-small;
box-shadow: 0 .5px .5px rgba(0, 0, 0, .05);
color: $color-heading;
font-size: $font-size-small; font-size: $font-size-small;
box-shadow: 0 0.5px 0.5px rgba(0,0,0,0.05);
position: relative; position: relative;
.icon { .icon {
bottom: $space-smaller;
position: absolute; position: absolute;
right: $space-small; right: $space-small;
bottom: $space-smaller;
} }
.message-text__wrap { .message-text__wrap {
position: relative; position: relative;
} }
.message-text { .message-text {
&:after { &::after {
content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"; content: ' \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
display: inline; display: inline;
} }
} }
@ -254,40 +264,48 @@
margin-top: -$space-two; margin-top: -$space-two;
} }
} }
.image { .image {
@include flex; @include flex;
@include justify-content(center); @include justify-content(center);
@include align-items(flex-end); @include align-items(flex-end);
text-align: center; text-align: center;
img { img {
@include padding($space-small);
max-height: 30rem; max-height: 30rem;
max-width: 20rem; max-width: 20rem;
@include padding($space-small);
} }
.time { .time {
white-space: nowrap;
margin-left: -$space-large; margin-left: -$space-large;
white-space: nowrap;
} }
.modal-image { .modal-image {
max-width: 80%;
max-height: 80%; max-height: 80%;
max-width: 80%;
} }
} }
.map { .map {
@include flex; @include flex;
flex-direction: column; flex-direction: column;
text-align: right; text-align: right;
img { img {
@include padding($space-small);
max-height: 30rem; max-height: 30rem;
max-width: 20rem; max-width: 20rem;
@include padding($space-small);
} }
.time { .time {
white-space: nowrap;
margin-top: -$space-two;
margin-left: -$space-smaller;
@include padding($space-small); @include padding($space-small);
margin-left: -$space-smaller;
margin-top: -$space-two;
white-space: nowrap;
} }
.locname { .locname {
font-weight: $font-weight-medium; font-weight: $font-weight-medium;
padding: $space-smaller; padding: $space-smaller;
@ -296,15 +314,15 @@
} }
.time { .time {
margin-left: $space-slab;
text-align: right;
font-size: $font-size-micro;
color: $color-gray;
position: absolute;
bottom: -$space-micro; bottom: -$space-micro;
right: -$space-micro; color: $color-gray;
font-style: italic;
float: right; float: right;
font-size: $font-size-micro;
font-style: italic;
margin-left: $space-slab;
position: absolute;
right: -$space-micro;
text-align: right;
} }
} }
} }