파일 드레그 가이드 문구 레이아웃 및 최소사이즈 대화방 컨텐츠 수정(반응형)

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss

@@ -126,7 +126,7 @@
 
     .file-drop-zone {
       position: absolute;
-      padding: 10px 10px 0 10px;
+      padding: 10px;
       background-color: rgb(54, 54, 54, 0.8);
       bottom: 0;
       width: 100%;

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss

@@ -1,4 +1,5 @@
 $tablet-s-width: 768px;
+
 .bubble-main {
   display: flex;
   flex-direction: row;

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.scss

@@ -6,10 +6,10 @@
   background-color: rgba(0, 0, 0, 0.4);
   padding: 6px 20px;
   color: #ffffff;
-  border-radius: 100px;
+  border-radius: 20px;
   justify-content: center;
   justify-items: center;
   margin: 10px 0 20px;
   font-size: 0.9em;
-  line-height:1.2em
+  line-height: 1.2em;
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss

@@ -1,11 +1,13 @@
+$tablet-s-width: 768px;
+
 .bubble-main {
-  display:flex;
+  display: flex;
   flex-direction: row;
   padding: 14px;
-  .file-thumbimg{
-    display:inline-flex;
+  .file-thumbimg {
+    display: inline-flex;
     img {
-      height:140px;
+      height: 140px;
       padding-right: 20px;
       background-repeat: no-repeat;
     }
@@ -15,8 +17,8 @@
     flex-direction: column;
     text-align: left;
     line-height: 1.6em;
-    min-width:100px;
-    margin-top:10px;
+    min-width: 100px;
+    margin-top: 10px;
     .file-name {
       font-size: 14px;
       font-weight: bold;
@@ -41,29 +43,35 @@
     width: 100%;
     li {
       width: 50%;
-      height:100%;
+      height: 100%;
       display: inline-block;
       text-align: center;
       align-items: center;
       font-size: 13px;
       border-right: 1px solid #dddddd;
+      @media screen and (max-width: #{$tablet-s-width}) {
+        width: 30%;
+      }
       &:last-child {
         border-right: none;
+        @media screen and (max-width: #{$tablet-s-width}) {
+          width: 70%;
+        }
       }
       .mat-button {
         width: 100%;
-        height:100%;
+        height: 100%;
         display: block;
       }
     }
-    &.expired{
-    li{
-      width:100%;
-      white-space: nowrap;
-      color:#999999;
-      align-items: center;
-      line-height:40px;
+    &.expired {
+      li {
+        width: 100%;
+        white-space: nowrap;
+        color: #999999;
+        align-items: center;
+        line-height: 40px;
       }
     }
   }
-}
+}

projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss

@@ -114,5 +114,5 @@ textarea {
 }
 
 .mat-error {
-  font-size: 0.8em;
+  font-size: 0.84em;
 }

projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss

@@ -34,6 +34,8 @@ mat-icon {
   border: none;
   width: 20px;
   height: 20px;
+  justify-items: center;
+  justify-content: center;
   i {
     font-family: 'material-outline-icons';
     font-size: 20px;

projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html

@@ -34,8 +34,11 @@
     </div>
   </div>
 
-  <div *ngIf="uploadItems" fxLayout="column">
-    <div>{{ 'common.file.dropZoneForUpload' | translate }}</div>
+  <div *ngIf="uploadItems" fxLayout="column" class="uploadItems">
+    <div class="msg-guide">
+      <span class="icon-img"><i class="mid mdi-arrow-expand-all"></i></span
+      >{{ 'common.file.dropZoneForUpload' | translate }}
+    </div>
     <div></div>
   </div>
 </div>

projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss

@@ -38,4 +38,18 @@
       padding: 6px 10px;
     }
   }
+  .uploadItems {
+    width: 100%;
+    font-size: 0.9em;
+    .msg-guide {
+      display: flex;
+      flex: row;
+      color: #ffffff;
+      justify-content: center;
+      align-items: center;
+      .icon-img {
+        margin-right: 6px;
+      }
+    }
+  }
 }