ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

대화방 - minSize 적용시 오류 수정

Browse Source
This commit is contained in:
khk 2020-01-28 11:21:03 +09:00
parent e9c82df114
commit c652c00db1
4 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss
View File

@ -56,10 +56,12 @@ $tablet-s-width: 768px;
display: Flex; display: Flex;
flex-flow: row; flex-flow: row;
margin-left: 10px; margin-left: 10px;
max-width: 80%; width: 80%;
@media screen and (max-width: #{$tablet-s-width}), @media screen and (max-width: #{$tablet-s-width}),
(max-height: 600px) { (max-height: 600px) {
flex-flow: column; flex-flow: column;
max-width: 80%;
width: unset;
} }
.message-main { .message-main {
margin-right: 6px; margin-right: 6px;
@ -123,8 +125,8 @@ $tablet-s-width: 768px;
flex-flow: row-reverse; flex-flow: row-reverse;
margin-left: 0px; margin-left: 0px;
margin-right: 10px; margin-right: 10px;
@media screen and (max-width: #{$tablet-l-width}), @media screen and (max-width: #{$tablet-s-width}),
(max-height: 800px) { (max-height: 600px) {
flex-flow: column; flex-flow: column;
} }
} }
@ -144,6 +146,8 @@ $tablet-s-width: 768px;
display: none; display: none;
} }
.message-main { .message-main {
display: flex;
justify-content: flex-end;
text-align: right; text-align: right;
margin-left: 6px; margin-left: 6px;
margin-right: 0; margin-right: 0;

1
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.scss
View File

@ -1,7 +1,6 @@
.translation-main { .translation-main {
flex-direction: column; flex-direction: column;
text-align: left; text-align: left;
.original { .original {
padding: 10px; padding: 10px;
} }

20
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video-conference.component.html
View File

@ -21,24 +21,24 @@
</div> </div>
<ul class="event-info"> <ul class="event-info">
<li class="event-date bg-accent-brightest"> <li class="event-date bg-accent-brightest">
<span class="text-accent-darkest">{{ <label class="text-accent-darkest">{{
'chat.event.videoConferenceRegister' | translate 'chat.event.videoConferenceRegister' | translate
}}</span }}</label
>{{ message.sentMessageJson.register }} ><span>{{ message.sentMessageJson.register }}</span>
</li> </li>
<li class="event-time bg-accent-brightest"> <li class="event-time bg-accent-brightest">
<span class="text-accent-darkest">{{ <label class="text-accent-darkest">{{
'chat.event.videoConferenceAttendee' | translate 'chat.event.videoConferenceAttendee' | translate
}}</span }}</label
>{{ message.sentMessageJson.attendee }} ><span>{{ message.sentMessageJson.attendee }}</span>
</li> </li>
<li class="event-time bg-accent-brightest"> <li class="event-time bg-accent-brightest">
<span class="text-accent-darkest">{{ <label class="text-accent-darkest">{{
'chat.event.videoConferenceDate' | translate 'chat.event.videoConferenceDate' | translate
}}</span }}</label
>{{ ><span>{{
message.sentMessageJson.startDate | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm' message.sentMessageJson.startDate | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
}} }}</span>
</li> </li>
<li class="event-content"> <li class="event-content">
{{ message.sentMessageJson.title }} {{ message.sentMessageJson.title }}

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

@ -3,7 +3,7 @@
text-align: left; text-align: left;
padding: 4px; padding: 4px;
.event-header { .event-header {
padding: 10px; padding: 8px 10px;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
@ -29,8 +29,15 @@
&.event-time { &.event-time {
padding: 4px 10px; padding: 4px 10px;
border-bottom: 1px dotted #dddddd; border-bottom: 1px dotted #dddddd;
display: flex;
label {
margin-right: 10px;
flex: 0 0 auto;
font-size: 0.96em;
font-weight: 600;
width: 40px;
}
span { span {
width: 60px;
padding: 1px 6px; padding: 1px 6px;
margin-right: 6px; margin-right: 6px;
border-radius: 100px; border-radius: 100px;
@ -39,7 +46,7 @@
justify-content: center; justify-content: center;
font-size: 0.96em; font-size: 0.96em;
margin-bottom: 2px; margin-bottom: 2px;
color: #777777; color: #444444;
} }
} }
&.event-content { &.event-content {
@ -53,11 +60,10 @@
.btn-box { .btn-box {
width: 100%; width: 100%;
height: 40px;
border-top: 1px solid #dddddd;
display: flex; display: flex;
width: 100%; width: 100%;
text-align: center; text-align: center;
padding-top: 4px;
ul { ul {
width: 100%; width: 100%;
li { li {
@ -67,7 +73,7 @@
text-align: center; text-align: center;
align-items: center; align-items: center;
font-size: 13px; font-size: 13px;
border-right: 1px solid #dddddd; border-right: 1px solid rgb(255, 255, 255, 0.6);
&:last-child { &:last-child {
border-right: none; border-right: none;
} }