-
-
Index: arms/html/armsDetailExceptTemplate/assets/css/detail.css
===================================================================
diff -u -raf07cf3f1f250f2ef906f3fb03819f8de2bf5bfc -r40ac54c92b986c784ae988b4e6338a0bedeea318
--- arms/html/armsDetailExceptTemplate/assets/css/detail.css (.../detail.css) (revision af07cf3f1f250f2ef906f3fb03819f8de2bf5bfc)
+++ arms/html/armsDetailExceptTemplate/assets/css/detail.css (.../detail.css) (revision 40ac54c92b986c784ae988b4e6338a0bedeea318)
@@ -95,6 +95,65 @@
}
/* QnA 게시판 관련 CSS */
+.footer-chat {
+ width: calc(65% - 66px);
+ height: 80px;
+ display:flex;
+ align-items: center;
+ position:absolute;
+ bottom: 0;
+ background-color: transparent;
+ border-top: 2px solid #EEE;
+
+ }
+
+ .chat .footer-chat .icon {
+ margin-left: 30px;
+ color:#C0C0C0;
+ font-size: 14pt;
+ }
+
+ .chat .footer-chat .send {
+ color:#fff;
+ background-color: #4f6ebd;
+ position: absolute;
+ right: 50px;
+ padding: 12px 12px 12px 12px;
+ border-radius: 50px;
+ font-size: 14pt;
+ }
+
+ .chat .footer-chat .name {
+ margin: 0 0 0 20px;
+ text-transform: uppercase;
+ font-family:'Montserrat', sans-serif;
+ font-size: 13pt;
+ color:#515151;
+ }
+
+ .chat .footer-chat .right {
+ position: absolute;
+ right: 40px;
+ }
+
+.date-separator {
+ text-align: center;
+ width: 180px;
+ margin: 10px auto;
+ padding: 6px;
+ font-size: 15px;
+ background-color: #f2f2f2;
+ border-radius: 15px;
+}
+
+.chat-message-body.on-left {
+ float: right;
+}
+
+.chat-message-body.on-right {
+ float: left;
+}
+
.chat-btn {
display: inline-block;
-webkit-box-sizing: content-box;
@@ -127,6 +186,7 @@
.user-id {
color: #3264bf;
font-weight: bolder;
+ font-size:16px;
text-decoration: none;
}
@@ -153,7 +213,7 @@
margin-left: .3em;
}
.box .icon, .box .big-text {
- margin-top: 15px;
+ /*margin-top: 15px;*/
font-size: 36px;
line-height: 36px;
height: 36px;
@@ -216,9 +276,9 @@
position: relative;
z-index: 1;
text-align: center;
- width: 53px;
+ width: 80px;
height: 53px;
- line-height: 53px;
+ line-height: 10px;
vertical-align: middle;
-webkit-border-radius: 53px;
-moz-border-radius: 53px;
@@ -251,30 +311,18 @@
}
.chat-message-body {
- margin-left: 63px;
- padding: 8px 10px;
- background: #dedede;
- position: relative;
- border-left: 3px solid #666;
- -webkit-border-radius: 1px;
- -moz-border-radius: 1px;
- -ms-border-radius: 1px;
- -o-border-radius: 1px;
- border-radius: 1px;
+ background-color: #f6f6f6;
+ padding: 15px;
+ border-radius: 12px;
}
.chat-message-body.on-left {
margin-left: 0;
- margin-right: 63px;
border-left: none;
- border-right: 3px solid #666;
- background: #e9ecef;
+ /*border-right: 3px solid #666;*/
+ background: #e3effd;
+ padding: 10px 20px;
}
-.chat-message-body.on-left .arrow {
- left: auto;
- right: -7px;
- border-right: none;
- border-left: 5px solid #666;
-}
+
.chat-message-body.on-left .sender {
text-align: right;
display: inline-block;
@@ -283,20 +331,13 @@
.chat-message-body.on-left .text {
text-align: right;
+ color:black;
}
-
-.chat-message-body .arrow {
- display: block;
- position: absolute;
- top: 21px;
- left: -7px;
- width: 0;
- height: 0;
- border-top: 5px solid transparent;
- border-bottom: 5px solid transparent;
- border-right: 5px solid #666;
+.chat-message-body .text p{
+ margin-bottom: 0rem;
}
+
@font-face {
font-family: 'FontAwesome';
src: url("../../../../../reference/light-blue/css/fonts/font-awesome/fontawesome-webfont.eot?v=4.0.3");
@@ -509,6 +550,9 @@
padding: 8px;
font-size: 15px;
border: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.dropdown {
position: relative;
@@ -562,6 +606,60 @@
}
/* 게시글 생성 부분 */
+.edit-comment-button:hover{
+ background:#0d6efd;
+ color: #fff;
+}
+
+.chat-container {
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ padding: 10px;
+ display: flex;
+ width: 100%;
+ align-items: center;
+}
+
+.chat-input {
+ flex: 1;
+ display: flex;
+ border-radius: 5px;
+}
+
+#comment-contents {
+ flex: 1;
+ border: none;
+ outline: none;
+ resize: none;
+ overflow-y: hidden;
+ padding: 5px;
+ line-height: 1.5;
+}
+
+#req_comment_save_btn {
+ background: #0678e3;
+ color: #fff;
+ border-radius: 0.5rem;
+}
+
+
+button {
+ padding: 8px 12px;
+ background-color: #007BFF;
+ color: #fff;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ flex: 0;
+ display: flex;
+ height:40px;
+}
+button i {
+ vertical-align: middle;
+}
+
.box {
position: relative;
border-radius: 3px;
@@ -668,13 +766,13 @@
user-select: none;
}
-#comment-contents {
+/*#comment-contents {
width: 100%;
font-size: 14px;
line-height: 18px;
border: 1px solid rgb(221, 221, 221);
padding: 10px;
-}
+}*/
/*--------------------------------------------------------------
# 헤더 (계정 정보)
Index: arms/js/detail.js
===================================================================
diff -u -rda7abfa398ae0b2e748c257cc2b515e00dddc7d1 -r40ac54c92b986c784ae988b4e6338a0bedeea318
--- arms/js/detail.js (.../detail.js) (revision da7abfa398ae0b2e748c257cc2b515e00dddc7d1)
+++ arms/js/detail.js (.../detail.js) (revision 40ac54c92b986c784ae988b4e6338a0bedeea318)
@@ -1174,7 +1174,9 @@
}
data.response.forEach(function(comment) {
- var commentHtml = createReqCommentList(comment);
+ var result = createReqCommentList(comment,previousDate);
+ var commentHtml = result.$newHtml;
+ previousDate = result.date;
$chatMessages.append(commentHtml);
});
@@ -1248,66 +1250,82 @@
$chatMessages.append($noDataHtml);
}
-function createReqCommentList(comment) {
+function createReqCommentList(comment, previousDate) {
var c_id = comment.c_id;
var sender = comment.c_req_comment_sender;
- var date = dateFormat(comment.c_req_comment_date);
+
+ var fullDate = dateFormat(comment.c_req_comment_date);
+ var date = fullDate.split(' - ')[1]; // "1:51 AM"
+ //var date = dateFormat(comment.c_req_comment_date);
var title = comment.c_title;
var req_comment_contents = comment.c_req_comment_contents.replace(/\n/g, '
');
var contents = `
` + req_comment_contents +`
`;
var $newHtml;
+ var showDateSeparator = fullDate.split(' - ')[0] !== previousDate;
+ var dateSeparator = showDateSeparator ? `
` : '';
+
/* 로그인한 사용자 일 경우 우측으로 아닐 경우 좌측으로 보이게 하기 */
var iconPosition = (sender !== userName) ? 'left' : 'right';
- var position = (sender !== userName) ? '' : 'on-left';
+ var position = (sender !== userName) ? 'on-right' : 'on-left';
var personIcon = (sender !== userName) ? 'bi-person-fill' : 'bi-person';
var buttonsHtml = '';
if (sender === userName) {
buttonsHtml = `
`;
+
+
+
+
+
+