diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss index 7f90f256..1ee9592c 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss +++ b/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%; diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss index 83125ac5..1a631ff9 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss +++ b/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; diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.scss index ee814b3b..028f852d 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.scss +++ b/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; } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss index 06ff62ee..1515c400 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss +++ b/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; } } } -} \ No newline at end of file +} diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss index 6949d094..e16e86d5 100644 --- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_forms.scss +++ b/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; } diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss index c57aecca..698fb0ee 100644 --- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_icons.scss +++ b/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; diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html index dcfeef8a..48950867 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html @@ -34,8 +34,11 @@ -
-
{{ 'common.file.dropZoneForUpload' | translate }}
+
+
+ {{ 'common.file.dropZoneForUpload' | translate }} +
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss index d5a9ad54..8d0975cb 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss +++ b/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; + } + } + } }