화면사이즈 변경에 따른 미디어쿼리 적용 진행중
This commit is contained in:
khk
parent
00e6df85d1
commit
f00028f2b0
|
|
@ -1,3 +1,5 @@
|
|||
$tablet-s-width: 768px;
|
||||
|
||||
@mixin ellipsis($row) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -31,6 +33,9 @@
|
|||
border: 1px solid #cccccc;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
|
||||
display: none;
|
||||
}
|
||||
.select-file {
|
||||
color: #212121;
|
||||
border-bottom: 1px dotted #dddddd;
|
||||
|
|
@ -63,6 +68,9 @@
|
|||
display: flex;
|
||||
padding: 0 10px;
|
||||
height: calc(100% - 450px);
|
||||
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
|
||||
height: calc(100% - 160px);
|
||||
}
|
||||
overflow-y: auto;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
|
@ -87,7 +95,7 @@
|
|||
dd {
|
||||
.btn-download {
|
||||
margin-left: auto;
|
||||
height:40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
$listH-row2: 60px;
|
||||
$tablet-s-width: 768px;
|
||||
|
||||
@mixin ellipsis($row) {
|
||||
overflow: hidden;
|
||||
|
|
@ -32,6 +33,9 @@ $listH-row2: 60px;
|
|||
margin: 10px;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 4px;
|
||||
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
|
||||
display: none;
|
||||
}
|
||||
.select-filed {
|
||||
height: calc(100% - 50px);
|
||||
overflow-y: auto;
|
||||
|
|
@ -138,6 +142,9 @@ $listH-row2: 60px;
|
|||
.table-box {
|
||||
height: calc(100% - 440px);
|
||||
overflow-y: auto;
|
||||
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
|
||||
height: calc(100% - 146px);
|
||||
}
|
||||
th {
|
||||
font-size: 1em;
|
||||
color: #333333;
|
||||
|
|
@ -157,10 +164,11 @@ $listH-row2: 60px;
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer-fix {
|
||||
::ng-deep .footer-fix {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 160px;
|
||||
min-height: 40px;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
|
@ -176,6 +184,11 @@ $listH-row2: 60px;
|
|||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
.mat-paginator-page-size {
|
||||
@media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-form-field-appearance-legacy {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@charset 'utf-8';
|
||||
|
||||
$win-min-w: 700px;
|
||||
$win-min-h: 600px;
|
||||
html {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
|
@ -8,8 +9,10 @@ body {
|
|||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 1160px;
|
||||
min-height: 800px;
|
||||
/*min-width: 1160px;
|
||||
min-height: 800px;*/
|
||||
min-width: $win-min-w;
|
||||
min-height: $win-min-h;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
(click)="onClickTranslation()"
|
||||
matTooltip="{{ 'chat.btnTranslate' | translate }}"
|
||||
>
|
||||
<!--<mat-icon>g_translate</mat-icon>-->
|
||||
<!--<mat-icon>g_translate</mat-icon>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
|
|
@ -45,6 +45,42 @@
|
|||
<path
|
||||
d="M7.41 9l2.24 2.24-.83 2L6 10.4l-3.3 3.3-1.4-1.42L4.58 9l-.88-.88c-.53-.53-1-1.3-1.3-2.12h2.2c.15.28.33.53.51.7l.89.9.88-.88C7.48 6.1 8 4.84 8 4H0V2h5V0h2v2h5v2h-2c0 1.37-.74 3.15-1.7 4.12L7.4 9zm3.84 8L10 20H8l5-12h2l5 12h-2l-1.25-3h-5.5zm.83-2h3.84L14 10.4 12.08 15z"
|
||||
/>
|
||||
</svg>-->
|
||||
<svg
|
||||
id="레이어_1"
|
||||
data-name="레이어 1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16.35 14.72"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M6.78,7.42H3.2V3.5H4.28V4.66H5.72V3.51H6.78V5H8.13V3H9.22V8.6H8.13V5.89H6.78Zm2.6,2.17v.86H4.21V8.06H5.3V9.59ZM5.72,5.49H4.28V6.56H5.72Z"
|
||||
transform="translate(-1.83 -3)"
|
||||
/>
|
||||
<path
|
||||
d="M16.8,3V7.49H15.71v-1H14.07a2.08,2.08,0,0,1-1.52.63,1.88,1.88,0,1,1,0-3.76A2,2,0,0,1,14.07,4h1.64V3ZM13.52,5.27a.9.9,0,0,0-1-.94.9.9,0,0,0-1,.94,1,1,0,0,0,1.93,0ZM11.64,7.83H16.8v2.76H15.71V8.69H11.64Zm4.07-2.16V4.89h-1.2a1.53,1.53,0,0,1,0,.38,1.81,1.81,0,0,1,0,.4Z"
|
||||
transform="translate(-1.83 -3)"
|
||||
/>
|
||||
<path
|
||||
d="M3.11,13.82H1.83v-.75H5.32v.75H4v3.82H3.11Z"
|
||||
transform="translate(-1.83 -3)"
|
||||
/>
|
||||
<path
|
||||
d="M5.69,14.18h.74l.06.61h0a1.19,1.19,0,0,1,1-.7,1.08,1.08,0,0,1,.41.07L7.75,15a1,1,0,0,0-.36-.06.92.92,0,0,0-.8.68v2.07h-.9Z"
|
||||
transform="translate(-1.83 -3)"
|
||||
/>
|
||||
<path
|
||||
d="M8,16.7c0-.74.6-1.13,2-1.28a.54.54,0,0,0-.59-.6,1.91,1.91,0,0,0-.95.33l-.33-.6a2.74,2.74,0,0,1,1.45-.46c.88,0,1.33.53,1.33,1.53v2h-.74l-.07-.37h0a1.66,1.66,0,0,1-1,.45A1,1,0,0,1,8,16.7Zm2,0V16c-.84.12-1.12.34-1.12.65s.19.39.45.39A.92.92,0,0,0,10,16.67Z"
|
||||
transform="translate(-1.83 -3)"
|
||||
/>
|
||||
<path
|
||||
d="M11.85,14.18h.74l.06.45h0a1.64,1.64,0,0,1,1.13-.54c.75,0,1.07.52,1.07,1.39v2.16H14V15.59c0-.53-.15-.72-.49-.72a1,1,0,0,0-.72.39v2.38h-.9Z"
|
||||
transform="translate(-1.83 -3)"
|
||||
/>
|
||||
<path
|
||||
d="M15.48,17.23l.41-.56a1.51,1.51,0,0,0,.93.37c.35,0,.5-.15.5-.36s-.36-.38-.72-.52-1-.43-1-1,.51-1.06,1.29-1.06a1.93,1.93,0,0,1,1.18.43l-.41.55a1.3,1.3,0,0,0-.75-.3c-.31,0-.45.14-.45.33s.34.35.7.49,1,.4,1,1-.47,1.09-1.37,1.09A2.14,2.14,0,0,1,15.48,17.23Z"
|
||||
transform="translate(-1.83 -3)"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,41 @@
|
|||
@charset 'utf-8';
|
||||
|
||||
$tablet-l-width: 1024px;
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
padding: 10px 30px 20px;
|
||||
padding: 0 2vw 2vh;
|
||||
.add-option {
|
||||
display: inline-flex;
|
||||
margin-right: 20px;
|
||||
justify-items: center;
|
||||
width: 80px;
|
||||
justify-content: space-between;
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
&:hover {
|
||||
color: #333333;
|
||||
background-color: #efefef;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: normal;
|
||||
|
||||
.mat-icon {
|
||||
font-size: 20px;
|
||||
color: rgb(0, 0, 0, 0.87);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
color: rgb(0, 0, 0, 0.6);
|
||||
background-color: #efefef;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: #666666;
|
||||
fill: rgb(0, 0, 0, 0.87);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -45,6 +50,9 @@ textarea[name='message'] {
|
|||
}
|
||||
::ng-deep .send-message-button {
|
||||
margin-left: 20px;
|
||||
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.mat-button-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -82,113 +82,115 @@
|
|||
></ucap-ui-imaage> -->
|
||||
</div>
|
||||
|
||||
<div class="message-main">
|
||||
<div class="chat-name">
|
||||
{{ senderName }}
|
||||
<div class="message-main-container">
|
||||
<div class="message-main">
|
||||
<div class="chat-name">
|
||||
{{ senderName }}
|
||||
</div>
|
||||
|
||||
<div class="bubble">
|
||||
<ng-container
|
||||
class="bubble"
|
||||
*ngIf="message.type !== EventType.NotificationForTimerRoom"
|
||||
[ngSwitch]="message.type"
|
||||
>
|
||||
<ucap-chat-message-box-mass
|
||||
*ngSwitchCase="EventType.MassText"
|
||||
[message]="message"
|
||||
(massDetail)="onMassDetail($event)"
|
||||
(contextmenu)="onContextMenu($event, message)"
|
||||
>
|
||||
</ucap-chat-message-box-mass>
|
||||
<ucap-chat-message-box-file
|
||||
*ngSwitchCase="EventType.File"
|
||||
[eventInfoStatus]="eventInfoStatus"
|
||||
[message]="message"
|
||||
(save)="onSave($event)"
|
||||
(fileViewer)="onFileViewer($event)"
|
||||
(contextmenu)="onContextMenu($event, message)"
|
||||
>
|
||||
</ucap-chat-message-box-file>
|
||||
<ucap-chat-message-box-sticker
|
||||
*ngSwitchCase="EventType.Sticker"
|
||||
[message]="message"
|
||||
(contextmenu)="onContextMenu($event, message)"
|
||||
>
|
||||
</ucap-chat-message-box-sticker>
|
||||
<ucap-chat-message-box-recall
|
||||
*ngSwitchCase="EventType.RecalledMessage"
|
||||
></ucap-chat-message-box-recall>
|
||||
<ucap-chat-message-box-text
|
||||
*ngSwitchCase="EventType.Character"
|
||||
[message]="message"
|
||||
(contextmenu)="onContextMenu($event, message)"
|
||||
>
|
||||
</ucap-chat-message-box-text>
|
||||
<ucap-chat-message-box-schedule
|
||||
*ngSwitchCase="EventType.Plan"
|
||||
[message]="message"
|
||||
(contextmenu)="onContextMenu($event, message)"
|
||||
>
|
||||
</ucap-chat-message-box-schedule>
|
||||
<ucap-chat-message-box-translation
|
||||
*ngSwitchCase="EventType.Translation"
|
||||
[message]="message"
|
||||
[translationSimpleview]="translationSimpleview"
|
||||
[isMe]="mine"
|
||||
(contextMenu)="onContextMenu($event, message)"
|
||||
class="information-msg"
|
||||
></ucap-chat-message-box-translation>
|
||||
<ucap-chat-message-box-mass-translation
|
||||
*ngSwitchCase="EventType.MassTranslation"
|
||||
class="information-msg"
|
||||
[message]="message"
|
||||
[translationSimpleview]="translationSimpleview"
|
||||
[isMe]="mine"
|
||||
(contextMenu)="onContextMenu($event, message)"
|
||||
(massTranslationDetail)="onMassTranslationDetail($event)"
|
||||
>
|
||||
</ucap-chat-message-box-mass-translation>
|
||||
<ucap-chat-message-box-video-conference
|
||||
*ngSwitchCase="EventType.VideoConference"
|
||||
[message]="message"
|
||||
>
|
||||
</ucap-chat-message-box-video-conference>
|
||||
|
||||
<ucap-chat-message-box-allim
|
||||
*ngSwitchCase="EventType.AllimTms"
|
||||
[message]="message"
|
||||
class="information-msg"
|
||||
>
|
||||
</ucap-chat-message-box-allim>
|
||||
<ucap-chat-message-box-allim
|
||||
*ngSwitchCase="EventType.AllimElephant"
|
||||
[message]="message"
|
||||
class="information-msg"
|
||||
>
|
||||
</ucap-chat-message-box-allim>
|
||||
|
||||
<div *ngSwitchDefault>
|
||||
<!--
|
||||
notice
|
||||
<ucap-chat-message-box-notice></ucap-chat-message-box-notice>
|
||||
|
||||
<div class="message">
|
||||
{{ message.sentMessage }}
|
||||
</div> -->
|
||||
{{ message.type }} / {{ message.sentMessage }}
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bubble">
|
||||
<ng-container
|
||||
class="bubble"
|
||||
*ngIf="message.type !== EventType.NotificationForTimerRoom"
|
||||
[ngSwitch]="message.type"
|
||||
>
|
||||
<ucap-chat-message-box-mass
|
||||
*ngSwitchCase="EventType.MassText"
|
||||
[message]="message"
|
||||
(massDetail)="onMassDetail($event)"
|
||||
(contextmenu)="onContextMenu($event, message)"
|
||||
>
|
||||
</ucap-chat-message-box-mass>
|
||||
<ucap-chat-message-box-file
|
||||
*ngSwitchCase="EventType.File"
|
||||
[eventInfoStatus]="eventInfoStatus"
|
||||
[message]="message"
|
||||
(save)="onSave($event)"
|
||||
(fileViewer)="onFileViewer($event)"
|
||||
(contextmenu)="onContextMenu($event, message)"
|
||||
>
|
||||
</ucap-chat-message-box-file>
|
||||
<ucap-chat-message-box-sticker
|
||||
*ngSwitchCase="EventType.Sticker"
|
||||
[message]="message"
|
||||
(contextmenu)="onContextMenu($event, message)"
|
||||
>
|
||||
</ucap-chat-message-box-sticker>
|
||||
<ucap-chat-message-box-recall
|
||||
*ngSwitchCase="EventType.RecalledMessage"
|
||||
></ucap-chat-message-box-recall>
|
||||
<ucap-chat-message-box-text
|
||||
*ngSwitchCase="EventType.Character"
|
||||
[message]="message"
|
||||
(contextmenu)="onContextMenu($event, message)"
|
||||
>
|
||||
</ucap-chat-message-box-text>
|
||||
<ucap-chat-message-box-schedule
|
||||
*ngSwitchCase="EventType.Plan"
|
||||
[message]="message"
|
||||
(contextmenu)="onContextMenu($event, message)"
|
||||
>
|
||||
</ucap-chat-message-box-schedule>
|
||||
<ucap-chat-message-box-translation
|
||||
*ngSwitchCase="EventType.Translation"
|
||||
[message]="message"
|
||||
[translationSimpleview]="translationSimpleview"
|
||||
[isMe]="mine"
|
||||
(contextMenu)="onContextMenu($event, message)"
|
||||
class="information-msg"
|
||||
></ucap-chat-message-box-translation>
|
||||
<ucap-chat-message-box-mass-translation
|
||||
*ngSwitchCase="EventType.MassTranslation"
|
||||
class="information-msg"
|
||||
[message]="message"
|
||||
[translationSimpleview]="translationSimpleview"
|
||||
[isMe]="mine"
|
||||
(contextMenu)="onContextMenu($event, message)"
|
||||
(massTranslationDetail)="onMassTranslationDetail($event)"
|
||||
>
|
||||
</ucap-chat-message-box-mass-translation>
|
||||
<ucap-chat-message-box-video-conference
|
||||
*ngSwitchCase="EventType.VideoConference"
|
||||
[message]="message"
|
||||
>
|
||||
</ucap-chat-message-box-video-conference>
|
||||
|
||||
<ucap-chat-message-box-allim
|
||||
*ngSwitchCase="EventType.AllimTms"
|
||||
[message]="message"
|
||||
class="information-msg"
|
||||
>
|
||||
</ucap-chat-message-box-allim>
|
||||
<ucap-chat-message-box-allim
|
||||
*ngSwitchCase="EventType.AllimElephant"
|
||||
[message]="message"
|
||||
class="information-msg"
|
||||
>
|
||||
</ucap-chat-message-box-allim>
|
||||
|
||||
<div *ngSwitchDefault>
|
||||
<!--
|
||||
notice
|
||||
<ucap-chat-message-box-notice></ucap-chat-message-box-notice>
|
||||
|
||||
<div class="message">
|
||||
{{ message.sentMessage }}
|
||||
</div> -->
|
||||
{{ message.type }} / {{ message.sentMessage }}
|
||||
</div>
|
||||
</ng-container>
|
||||
<div class="time secondary-text">
|
||||
<ul>
|
||||
<li *ngIf="unreadCount" class="unread">{{ unreadCount }}</li>
|
||||
<li>
|
||||
{{ message.sendDate | ucapDate: 'a hh:mm' }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="time secondary-text">
|
||||
<ul>
|
||||
<li *ngIf="unreadCount">{{ unreadCount }}</li>
|
||||
<li>
|
||||
{{ message.sendDate | ucapDate: 'a hh:mm' }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,8 @@ $otherBox-line: #cccccc;
|
|||
$otherBox-bg: #ffffff;
|
||||
$meBox-line: #cccccc;
|
||||
$meBox-bg: #ffffff;
|
||||
|
||||
.chat-messages {
|
||||
padding: 30px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
$tablet-l-width: 1024px;
|
||||
$mob-l-width: 640px;
|
||||
.information-msg {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -34,11 +30,11 @@ $meBox-bg: #ffffff;
|
|||
flex: 0 0 auto;
|
||||
&.thumbnail-mask {
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 50px;
|
||||
width: 40px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -56,88 +52,105 @@ $meBox-bg: #ffffff;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-main {
|
||||
margin-left: 20px;
|
||||
margin-right: 10px;
|
||||
.message-main-container {
|
||||
display: Flex;
|
||||
flex-flow: row;
|
||||
margin-left: 10px;
|
||||
max-width: 80%;
|
||||
.chat-name {
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
margin-bottom: 6px;
|
||||
@media screen and (max-width: #{$mob-l-width}),
|
||||
(max-height: 600px) {
|
||||
flex-flow: column;
|
||||
}
|
||||
.bubble {
|
||||
border-radius: 0 10px 10px 10px;
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
.message-main {
|
||||
margin-right: 6px;
|
||||
max-width: calc(100% - 60px);
|
||||
@media screen and (max-width: #{$mob-l-width}),
|
||||
(max-height: 600px) {
|
||||
flex-flow: column;
|
||||
max-width: 100%;
|
||||
}
|
||||
.chat-name {
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.bubble {
|
||||
border-radius: 0 10px 10px 10px;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
.secondary-text {
|
||||
align-self: flex-end;
|
||||
font-size: 11px;
|
||||
color: #666666;
|
||||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.me {
|
||||
.secondary-text {
|
||||
text-align: end;
|
||||
align-self: flex-end;
|
||||
font-size: 0.84em;
|
||||
color: #666666;
|
||||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
@media screen and (max-width: #{$mob-l-width}), (max-height: 600px) {
|
||||
flex-flow: row;
|
||||
align-self: flex-start;
|
||||
ul {
|
||||
display: flex;
|
||||
flex-flow: row-reverse;
|
||||
justify-items: flex-end;
|
||||
margin-top: 4px;
|
||||
li {
|
||||
display: inline-flex;
|
||||
&.unread {
|
||||
padding: 0px 6px;
|
||||
margin-left: 10px;
|
||||
border-radius: 30px;
|
||||
background-color: #666666;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.highlight {
|
||||
.bubble {
|
||||
color: red;
|
||||
&.me {
|
||||
.message-main-container {
|
||||
display: Flex;
|
||||
flex-flow: row;
|
||||
margin-left: 0px;
|
||||
margin-right: 10px;
|
||||
@media screen and (max-width: #{$tablet-l-width}),
|
||||
(max-height: 800px) {
|
||||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.highlight {
|
||||
.bubble {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*.message-row.me > .bubble {
|
||||
border: 1px solid $meBox-line;
|
||||
background-color: $meBox-bg;
|
||||
}*/
|
||||
.message-row.me {
|
||||
.profile-img {
|
||||
display: none;
|
||||
}
|
||||
.chat-name {
|
||||
display: none;
|
||||
}
|
||||
.message-main {
|
||||
text-align: right;
|
||||
margin-left: 10px;
|
||||
margin-right: 20px;
|
||||
.bubble {
|
||||
border-radius: 10px 10px 0 10px;
|
||||
.message-main-container {
|
||||
.chat-name {
|
||||
display: none;
|
||||
}
|
||||
/* & .bubble:before {
|
||||
content: '';
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
border-left: 6px solid $meBox-line;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid $meBox-line;
|
||||
border-bottom: 6px solid transparent;
|
||||
left: initial;
|
||||
right: -12px;
|
||||
top: 4px;
|
||||
.message-main {
|
||||
text-align: right;
|
||||
margin-left: 6px;
|
||||
margin-right: 0;
|
||||
.bubble {
|
||||
border-radius: 10px 10px 0 10px;
|
||||
}
|
||||
}
|
||||
.secondary-text {
|
||||
text-align: end;
|
||||
@media screen and (max-width: #{$mob-l-width}), (max-height: 600px) {
|
||||
flex-flow: column;
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
& .bubble:after {
|
||||
content: '';
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
border-left: 6px solid $meBox-bg;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid $meBox-bg;
|
||||
border-bottom: 6px solid transparent;
|
||||
left: initial;
|
||||
right: -10px;
|
||||
top: 5px;
|
||||
}*/
|
||||
}
|
||||
}
|
||||
.bubble-main {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
$tablet-s-width: 768px;
|
||||
.bubble-main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -62,7 +63,7 @@
|
|||
float: left;
|
||||
line-height: 1.6em;
|
||||
.file-name {
|
||||
font-size: 14px;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
|
@ -84,6 +85,7 @@
|
|||
display: flex;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
ul {
|
||||
width: 100%;
|
||||
li {
|
||||
|
|
@ -92,15 +94,21 @@
|
|||
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%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
&.expired {
|
||||
|
|
|
|||
|
|
@ -4,11 +4,12 @@
|
|||
flex-flow: row;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
padding: 4px 20px;
|
||||
padding: 6px 20px;
|
||||
color: #ffffff;
|
||||
border-radius: 100px;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
margin: 10px 0 20px;
|
||||
font-size: 0.84em;
|
||||
font-size: 0.9em;
|
||||
line-height:1.2em
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.bubble-main {
|
||||
padding: 14px;
|
||||
text-align:left;
|
||||
display:flex;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon-recall{
|
||||
.icon-recall {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: inline-flex;
|
||||
|
|
@ -12,14 +12,14 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 6px;
|
||||
i{
|
||||
color:#ffffff;
|
||||
font-size:20px;
|
||||
i {
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
padding-left: 2px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
.recall-msg{
|
||||
color:#999999;
|
||||
.recall-msg {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,16 @@ $otherBox-line: #cccccc;
|
|||
$otherBox-bg: #ffffff;
|
||||
$meBox-line: #cccccc;
|
||||
$meBox-bg: #ffffff;
|
||||
$tablet-l-width: 1024px;
|
||||
|
||||
.chat-messages {
|
||||
padding: 30px 40px;
|
||||
padding: 2vh 2vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
@media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.information-msg {
|
||||
width: 100%;
|
||||
|
|
@ -38,35 +43,23 @@ $meBox-bg: #ffffff;
|
|||
}
|
||||
}
|
||||
}
|
||||
&.me {
|
||||
.chat-row {
|
||||
flex-direction: row-reverse;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
.profile-info {
|
||||
flex-direction: row-reverse;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.message-main-container {
|
||||
.message-main {
|
||||
margin-left: 20px;
|
||||
margin-right: 10px;
|
||||
.chat-name {
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.bubble {
|
||||
border-radius: 0 10px 10px 10px;
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-main {
|
||||
margin-left: 20px;
|
||||
margin-right: 10px;
|
||||
max-width: 80%;
|
||||
.chat-name {
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.bubble {
|
||||
border-radius: 0 10px 10px 10px;
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
.secondary-text {
|
||||
|
|
@ -76,11 +69,6 @@ $meBox-bg: #ffffff;
|
|||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.me {
|
||||
.secondary-text {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
&.searched {
|
||||
.bubble {
|
||||
color: red;
|
||||
|
|
@ -88,52 +76,35 @@ $meBox-bg: #ffffff;
|
|||
}
|
||||
}
|
||||
|
||||
/*.message-row.me > .bubble {
|
||||
border: 1px solid $meBox-line;
|
||||
background-color: $meBox-bg;
|
||||
}*/
|
||||
.message-row.me {
|
||||
.profile-img {
|
||||
display: none;
|
||||
}
|
||||
.chat-name {
|
||||
display: none;
|
||||
}
|
||||
.message-main {
|
||||
text-align: right;
|
||||
margin-left: 10px;
|
||||
margin-right: 20px;
|
||||
.bubble {
|
||||
border-radius: 10px 10px 0 10px;
|
||||
.message-row {
|
||||
&.me {
|
||||
.chat-row {
|
||||
flex-direction: row-reverse;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
.profile-img {
|
||||
display: none;
|
||||
}
|
||||
.message-main-container {
|
||||
.chat-name {
|
||||
display: none;
|
||||
}
|
||||
.message-main {
|
||||
text-align: right;
|
||||
margin-left: 10px;
|
||||
margin-right: 20px;
|
||||
.bubble {
|
||||
border-radius: 10px 10px 0 10px;
|
||||
}
|
||||
}
|
||||
.secondary-text {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* & .bubble:before {
|
||||
content: '';
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
border-left: 6px solid $meBox-line;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid $meBox-line;
|
||||
border-bottom: 6px solid transparent;
|
||||
left: initial;
|
||||
right: -12px;
|
||||
top: 4px;
|
||||
}
|
||||
& .bubble:after {
|
||||
content: '';
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
border-left: 6px solid $meBox-bg;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid $meBox-bg;
|
||||
border-bottom: 6px solid transparent;
|
||||
left: initial;
|
||||
right: -10px;
|
||||
top: 5px;
|
||||
}*/
|
||||
}
|
||||
}
|
||||
|
||||
.bubble-main {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
|
|
@ -142,7 +113,6 @@ $meBox-bg: #ffffff;
|
|||
::ng-deep .view-previous {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
//background-color: rgba(0, 0, 0, 0.4);
|
||||
color: #ffffff;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// CONFIGURATION
|
||||
$icon-container-size: 70px; // the size of the icons
|
||||
$icon-container-size: 60px; // the size of the icons
|
||||
$icon-edge-color: ''; // the default edge color of the icon
|
||||
$font-size: 38; // the font size of the text incapsulated inside the svg icon relative to the 200px height of the original svg
|
||||
$font-family: 'Myriad, Tahoma-Bold, sans-serif'; // the font size of the text incapsulated inside the svg icon relative to the 200px height of the original svg
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user