여기까지읽음& 알림메시지 수정
This commit is contained in:
khk
parent
40e787ff1e
commit
0a3abc9b0a
|
|
@ -81,7 +81,7 @@
|
|||
flex-flow: row;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
padding: 10px 0 6px;
|
||||
line-height: 24px;
|
||||
color: #222222;
|
||||
|
|
|
|||
|
|
@ -236,6 +236,9 @@ $daesang-grey: (
|
|||
.border-accent-color {
|
||||
border: 1px solid mat-color($accent);
|
||||
}
|
||||
.stroke-accent-darkest {
|
||||
stroke: mat-color($accent, 800);
|
||||
}
|
||||
.border-warn-color {
|
||||
border: mat-color($warn);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<div class="event-main">
|
||||
<div class="event-header">
|
||||
<div class="event-header bg-accent-darkest">
|
||||
{{ message.sentMessageJson.title }}
|
||||
</div>
|
||||
<ul class="event-info">
|
||||
<li class="event-title">
|
||||
<li class="event-sender bg-accent-brightest text-accent-darkest">
|
||||
<span class="bg-accent-dark"> 발송인</span>
|
||||
{{ message.sentMessageJson.sendName }}
|
||||
</li>
|
||||
<li class="event-time bg-accent-brightest text-accent-darkest">
|
||||
<span class="bg-accent-dark">발송시간</span>
|
||||
{{ message.sentMessageJson.postDate | ucapDate: 'YYYY.MM.DD a hh:mm' }}
|
||||
</li>
|
||||
<li class="event-content">
|
||||
{{ message.sentMessageJson.content }}
|
||||
</li>
|
||||
<li class="event-date">
|
||||
<span>발송인</span>{{ message.sentMessageJson.sendName }}
|
||||
</li>
|
||||
<li class="event-time">
|
||||
<span>발송시간</span
|
||||
>{{ message.sentMessageJson.postDate | ucapDate: 'YYYY.MM.DD a hh:mm' }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- <div class="btn-box">
|
||||
<button mat-button (click)="onClickSave()">상세보기</button>
|
||||
</div> -->
|
||||
|
|
|
|||
|
|
@ -3,30 +3,43 @@
|
|||
text-align: left;
|
||||
.event-header {
|
||||
padding: 10px;
|
||||
background-color: #efefef;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin: 6px 6px 2px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.event-info {
|
||||
padding: 10px 14px;
|
||||
margin: 0 4px;
|
||||
line-height: 1.6em;
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
&.event-title {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
&.event-date,
|
||||
&.event-sender,
|
||||
&.event-time {
|
||||
color: #666666;
|
||||
padding: 4px 10px;
|
||||
border-bottom: 1px dotted #dddddd;
|
||||
span {
|
||||
width: 80px;
|
||||
padding: 2px 6px;
|
||||
margin-right: 10px;
|
||||
border-radius: 100px;
|
||||
line-height: 20px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
font-size: 0.96em;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
padding: 2px 6px;
|
||||
background-color: #efefef;
|
||||
margin-right: 10px;
|
||||
&.event-content {
|
||||
padding: 10px;
|
||||
color: #444444;
|
||||
font-weight: normal;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="read-here">
|
||||
<span class="line"></span>
|
||||
<div class="read-here bg-warn-color">
|
||||
<!--<span class="line"></span>-->
|
||||
<span>여기까지 읽었습니다.</span>
|
||||
<span class="line"></span>
|
||||
<!--<span class="line"></span>-->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,17 +2,9 @@
|
|||
display: flex;
|
||||
align-content: center;
|
||||
flex-flow: row;
|
||||
.line {
|
||||
height: 1px;
|
||||
background-color: #cccccc;
|
||||
width: 40%;
|
||||
flex: 1 1 auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.date {
|
||||
width: 160px;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
//background-color: rgba(0, 0, 0, 0.4);
|
||||
padding: 4px 10px;
|
||||
color: #ffffff;
|
||||
border-radius: 100px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,135 +1,3 @@
|
|||
/*.chat-messages {
|
||||
position: relative;
|
||||
padding: 16px 40px;
|
||||
|
||||
.message-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
padding: 0 16px 4px 16px;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: -32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
max-width: 100%;
|
||||
|
||||
.message {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
margin-top: 8px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.contact {
|
||||
.bubble {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
|
||||
.time {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.first-of-group {
|
||||
.bubble {
|
||||
border-top-left-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.last-of-group {
|
||||
.bubble {
|
||||
border-bottom-left-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.me {
|
||||
padding-left: 40px;
|
||||
|
||||
.avatar {
|
||||
order: 2;
|
||||
margin: 0 0 0 16px;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
margin-left: auto;
|
||||
|
||||
border-top-left-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
|
||||
.time {
|
||||
justify-content: flex-end;
|
||||
right: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.first-of-group {
|
||||
.bubble {
|
||||
border-top-right-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.last-of-group {
|
||||
.bubble {
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.contact + .me,
|
||||
&.me + .contact {
|
||||
padding-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&.first-of-group {
|
||||
.bubble {
|
||||
border-top-left-radius: 20px;
|
||||
padding-top: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
&.last-of-group {
|
||||
.bubble {
|
||||
border-bottom-left-radius: 20px;
|
||||
padding-bottom: 13px;
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
$otherBox-line: #cccccc;
|
||||
$otherBox-bg: #ffffff;
|
||||
$meBox-line: #cccccc;
|
||||
|
|
@ -141,12 +9,12 @@ $meBox-bg: #ffffff;
|
|||
flex-direction: column;
|
||||
}
|
||||
.information-msg {
|
||||
width: 100%;
|
||||
/* width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
margin: 10px 0;*/
|
||||
}
|
||||
|
||||
.message-row {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user