java
/
bf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

퍼블리싱 - 커뮤니티 답글쓰기 버튼과 이미지 없는 프로필 사진, 임시 답글쓰기 UI 구현

Browse Source
dev_bert
정이솔 3 years ago
parent 06ef3d48b0
commit cf78e4f489
3 changed files with 83 additions and 12 deletions
Show Stats Download Patch File Download Diff File

31
src/main/webapp/m/css/style.css
Unescape View File

@ -15808,6 +15808,13 @@ main.sona_cont_measurement {
display: flex; display: flex;
} }
.community_view01 .profile_info .btn_reply{
font-size: 13px;
position: relative;
bottom: 0.1355rem;
cursor: pointer;
}
.community_view01 .like_shared_cont { .community_view01 .like_shared_cont {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -15908,6 +15915,30 @@ main.sona_cont_measurement {
border-radius: 15px; border-radius: 15px;
} }
.comment_input_cont .reply_cont{
width: 100%;
height: 1.3rem;
background-color: #FFEBCB;
position: absolute;
display: none;
justify-content: space-between;
align-items: center;
padding: 0 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
top: -1.3rem;
left: 0;
}
.comment_input_cont .active{
display: flex;
}
.comment_input_cont .reply_cont .reply_to{
font-size: 1rem;
color: rgba(0, 0, 0, 0.86);
}
.community_option { .community_option {
display: none; display: none;

61
src/main/webapp/m/html/community/13-5.커뮤니티-자유글-게시글상세.html
Unescape View File

@ -131,11 +131,15 @@
<!-- profile --> <!-- profile -->
<div class="profile_cont"> <div class="profile_cont">
<div class="profile_img"> <div class="profile_img">
<img src="../../img/community/community_writer_img.png" alt="프로필 사진"> <img src="../../img/community/person-fill.svg" alt="기본 프로필 사진">
</div> </div>
<div class="profile_info"> <div class="profile_info">
<p>닉네임</p> <p>닉네임</p>
<p>00:00</p> <div>
<p>00:00</p>
<p>&nbsp;&#183;&nbsp;</p>
<button class="btn_reply">답글쓰기</button>
</div>
</div> </div>
</div> </div>
<!-- option --> <!-- option -->
@ -159,7 +163,11 @@
</div> </div>
<div class="profile_info"> <div class="profile_info">
<p>닉네임</p> <p>닉네임</p>
<p>00:00</p> <div>
<p>00:00</p>
<p>&nbsp;&#183;&nbsp;</p>
<button class="btn_reply">답글쓰기</button>
</div>
</div> </div>
</div> </div>
<!-- option --> <!-- option -->
@ -183,7 +191,11 @@
</div> </div>
<div class="profile_info"> <div class="profile_info">
<p>닉네임</p> <p>닉네임</p>
<p>00:00</p> <div>
<p>00:00</p>
<p>&nbsp;&#183;&nbsp;</p>
<button class="btn_reply">답글쓰기</button>
</div>
</div> </div>
</div> </div>
<!-- option --> <!-- option -->
@ -207,7 +219,11 @@
</div> </div>
<div class="profile_info"> <div class="profile_info">
<p>닉네임</p> <p>닉네임</p>
<p>00:00</p> <div>
<p>00:00</p>
<p>&nbsp;&#183;&nbsp;</p>
<button class="btn_reply">답글쓰기</button>
</div>
</div> </div>
</div> </div>
<!-- option --> <!-- option -->
@ -231,7 +247,11 @@
</div> </div>
<div class="profile_info"> <div class="profile_info">
<p>닉네임</p> <p>닉네임</p>
<p>00:00</p> <div>
<p>00:00</p>
<p>&nbsp;&#183;&nbsp;</p>
<button class="btn_reply">답글쓰기</button>
</div>
</div> </div>
</div> </div>
<!-- option --> <!-- option -->
@ -251,11 +271,15 @@
<!-- profile --> <!-- profile -->
<div class="profile_cont"> <div class="profile_cont">
<div class="profile_img"> <div class="profile_img">
<img src="../../img/community/community_writer_img.png" alt="프로필 사진"> <img src="../../img/community/person-fill.svg" alt="기본 프로필 사진">
</div> </div>
<div class="profile_info"> <div class="profile_info">
<p>닉네임</p> <p>닉네임</p>
<p>00:00</p> <div>
<p>00:00</p>
<p>&nbsp;&#183;&nbsp;</p>
<button class="btn_reply">답글쓰기</button>
</div>
</div> </div>
</div> </div>
<!-- option --> <!-- option -->
@ -279,9 +303,15 @@
<!-- //wrap --> <!-- //wrap -->
<div class="comment_input_cont"> <div class="comment_input_cont">
<div class="reply_cont">
<div class="reply_to">
닉네임 님에게 답글쓰는 중
</div>
<button class="reply_del">
<img src="../../img/close_ico.png" alt="취소 버튼">
</button>
</div>
<div class="input"> <div class="input">
<label class="file_icon" for="image-upload"></label>
<input type="file" accept="image/*;capture=camera" id="image-upload" style="display:none;">
<textarea placeholder="댓글 남기기" onkeydown="resize(this)" onkeyup="resize(this)"></textarea> <textarea placeholder="댓글 남기기" onkeydown="resize(this)" onkeyup="resize(this)"></textarea>
</div> </div>
<div class="submit"> <div class="submit">
@ -333,12 +363,12 @@
<div class="content"> <div class="content">
<!-- 옵션 모달 --> <!-- 옵션 모달 -->
<ul> <ul>
<!-- <li> <li>
<a> <a>
<div class="copy_icon"></div> <div class="copy_icon"></div>
복사하기 복사하기
</a> </a>
</li> --> </li>
<li> <li>
<a> <a>
<div class="edit_icon"></div> <div class="edit_icon"></div>
@ -407,6 +437,13 @@
$(".modal_layer").on("click", function() { $(".modal_layer").on("click", function() {
$(".community_option").removeClass("open"); $(".community_option").removeClass("open");
}) })
$(".btn_reply").on("click", function() {
$(".reply_cont").addClass("active");
})
$(".reply_del").on("click", function() {
$(".reply_cont").removeClass("active");
})
}); });
var swiper = new Swiper('.swiper-container', { var swiper = new Swiper('.swiper-container', {
spaceBetween: 20, spaceBetween: 20,

3
src/main/webapp/m/img/community/person-fill.svg
Unescape View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#FFF" class="bi bi-person-fill" viewBox="-1 -1 18 18" style="background-color: #999;">
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 251 B

Write Preview
Loading…
Cancel
Save