S53527357 # Client - Incoming Issues #Mobile UX - messaging

frontend/angular/src/app/components/message-engine/message-engine.component.html

@@ -21,23 +21,23 @@
                 <div class="ui-g ui-fluid {{embedded ? '' : 'form' }}">
                     <div class="ui-g-12 ui-md-12">
                         <div class="ui-g-12 ui-md-12 messages-wrapper">
-                            <div class="ui-g ui-fluid" *ngFor="let message of jobApplication.Messages">
-                                <div class="ui-g-10 message-block" *ngIf="message.SentBy.ObjectID !== loggedInId">
-                                    <div class="ui-g-12 ui-md-1 name other {{embedded ? 'pad-5' : '' }}">
+                            <div class="ui-g ui-fluid top-div" *ngFor="let message of jobApplication.Messages">
+                                <div class="message-block other" *ngIf="message.SentBy.ObjectID !== loggedInId">
+                                    <div class="name {{embedded ? 'pad-5' : '' }}">
                                         <label>{{message.SentBy.Name[0]}}</label>
                                     </div>
-                                    <div class="ui-g-12 ui-md-11">
+                                    <div class="msg">
                                         <ng-container
                                             *ngTemplateOutlet="messageDisplay; context:{message: message}"></ng-container>
                                     </div>
                                 </div>
-                                <div class="ui-g-offset-2 ui-g-10 message-block"
+                                <div class="message-block owner"
                                      *ngIf="message.SentBy.ObjectID === loggedInId">
-                                    <div class="ui-g-10 ui-md-11">
+                                    <div class="msg">
                                         <ng-container
                                             *ngTemplateOutlet="messageDisplay; context:{message: message}"></ng-container>
                                     </div>
-                                    <div class="ui-g-12 ui-md-1 name owner {{embedded ? 'pad-5' : '' }}">
+                                    <div class="name {{embedded ? 'pad-5' : '' }}">
                                         <label>{{message.SentBy.Name[0]}}</label>
                                     </div>
                                 </div>
@@ -49,8 +49,8 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="ui-g-12 ui-fluid">
-                            <div class="ui-g-9 resizeable">
+                        <div class="ui-g-12 ui-fluid flex">
+                            <div class="msg-container resizeable">
                                 <p-editor #message [(ngModel)]="Message.MessageContent" name="MessageContent">
                                     <p-header>
                                         <span class="ql-formats">
@@ -64,7 +64,7 @@
                                     </p-header>
                                 </p-editor>
                             </div>
-                            <div class="ui-g-3">
+                            <div class="btn-container">
                                 <p-splitButton [class.non-embed]="!embedded" label="Send" icon="ui-icon-send"
                                                (onClick)="saveEngineApplicantView()"
                                                [disabled]="sendCriteria()"

frontend/angular/src/app/components/message-engine/message-engine.component.scss

@@ -75,6 +75,11 @@ a {
     }
 }
 
+.top-div {
+    display: flex;
+    flex-direction: column;
+}
+
 .message-block {
     background-color: white;
     border-radius: 20px;
@@ -83,26 +88,51 @@ a {
     border: solid 1px #dbdbdf;
     margin-top: 5px;
     padding-bottom: 0 !important;
+    display: flex;
+    width: 90%;
+
+    &.other {
+        justify-content: flex-start;
+        margin-right: 10%;
 
         .name {
-        height: 95%;
-        background: rgba(1, 1, 1, 0.1);
-        font-size: 2em;
+            margin-left: 5px;
+            border-top-left-radius: 12px;
+            border-bottom-left-radius: 12px;
+        }
+    }
 
     &.owner {
+        justify-content: flex-end;
+        margin-left: 10%;
+
+        .name {
+            margin-right: 5px;
             border-top-right-radius: 12px;
             border-bottom-right-radius: 12px;
         }
+    }
 
-        &.other {
-            border-top-left-radius: 12px;
-            border-bottom-left-radius: 12px;
+    .name {
+        background: rgba(1, 1, 1, 0.1);
+        font-size: 2em;
+        min-width: 60px;
+        margin-top: 5px;
+        margin-bottom: 5px;
+
+        label {
+            width: 100%;
+            margin: 0;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
     }
 
-    .initial {
-        width: 100%;
-        text-align: center;
+    .msg {
+        padding: 0.5em;
+        width: 87%;
     }
 
     .message-footer {
@@ -289,3 +319,16 @@ a {
     resize: both;
     overflow: auto;
 }
+
+.msg-container {
+    width: 100%;
+    margin-right: 10px;
+}
+
+.btn-container {
+    min-width: 160px;
+}
+
+.flex {
+    display: flex;
+}

frontend/angular/src/assets/css/custom.scss

@@ -309,7 +309,13 @@ body .ui-dropdown-panel .ui-dropdown-filter-container {
     bottom: 20px;
     right: 85px;
     background-image: url('../images/chat-icon.jpg');
-    background-repeat: round;
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+    background-position: center center;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
     cursor: pointer;
 }