이승윤 / OpenSource-MyCookBook

Go to a project
Toggle navigation Toggle navigation pinning
이승윤
f754021d 1 parent 71e2ebad

style: Category Detail 뷰 스타일 추가

Inline Side-by-side
Showing 1 changed file with 61 additions and 54 deletions
<% include ../includes/header.ejs %>
<div class="panel panel-default">
<div class="panel-heading">
　<%=product.title%>
</div>
<div style="padding-bottom: 10px">
<br>　　작성일 :
　<h2 style="padding-left: 30px;"><%=product.title%></h2>
<div style="padding-bottom: 10px;">　　
작성일 :
<%=product.getDate.year%> -
<%=product.getDate.month%> -
<%=product.getDate.day%>
</div>
<div style="padding-left: 30px">
설명 : <%=product.description%>
</div>
<hr/>
</div>
<div>
<% var count=0; %>
　　※ 보유중인 영상<br><br>
<% if (items.length != 0) { %>
<ul class="list-group" style="padding-left: 30px; padding-bottom: 30px;">
<li class="list-group-item list-group-item-info" aria-current="true">보유중인 영상</li>
<% for (var i in items[0]) { %>
<div>
　　<%=items[0][i]%>
</div>
<%count++;};%>
<li class="list-group-item"><%=items[0][i].title%> <a href="/categori/products/detail/delete/<%=items[0][i].id%>" style="position: absolute; right: 1%;" class="btn btn-danger btn-sm" onclick="return confirm('삭제하시겠습니까?')">삭제</a></li>
<%count++;};%>
</ul>
<%};%>
</div>
<div>
<br>　　설명 : <%=product.description%><br><br>
</div>
<form method="get" action="">
<div class="input-group">
<input type="text" class="form-control" placeholder="검색 키워드를 입력하세요!" name="keyword" autocomplete='off'>
<span class="input-group-btn">
<button class="btn btn-secondary" type="submit">찾기</button>
</span>
</div>
</form>
<form method="post" action="">
<% for (var i in videos) { %>
<div style="float:left;
padding: 15px;
">
<input type="checkbox" name="videoNum" style="
position: absolute;
margin-top: 5px;
margin-left: 5px;
z-index: 4;
zoom:3.0;
" value="<%=videos[i].id + '///' + videos[i].title +'///'+ videos[i].categori +'///'+ videos[i].video_id +'///'+ videos[i].urls%>"/>
<div id="<%=videos[i].id%>" vid="<%=videos[i].video_id%>">
</div>
<button style="margin-left: 30px; margin-bottom: 10px;" class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
영상 추가하기
</button>
<div class="collapse show" id="collapseExample" style="padding-left: 30px;">
<div class="card card-body">
<form method="get" action="">
<div class="input-group" style="padding-left: 10px;">
<input type="text" class="form-control" placeholder="검색 키워드를 입력하세요!" name="keyword" autocomplete='off'>
<span class="input-group-btn">
<button class="btn btn-secondary" type="submit">찾기</button>
</span>
</div>
<%};%>
<button class="btn btn-primary" style="margin-top: 10px; margin-left: 15px;" >영상담기</button>
</form>
</form>
<form method="post" action="">
<% for (var i in videos) { %>
<div style="float:left;
padding: 15px;
">
<input type="checkbox" name="videoNum" style="
position: absolute;
margin-top: 5px;
margin-left: 5px;
z-index: 4;
zoom:3.0;
"
value="<%=videos[i].id + '///' + videos[i].title +'///'+ videos[i].categori +'///'+ videos[i].video_id +'///'+ videos[i].urls%>" />
<div id="<%=videos[i].id%>" vid="<%=videos[i].video_id%>">
</div>
</div>
<%};%>
<button class="btn btn-primary" style="margin-top: 10px; margin-left: 10px;">영상담기</button>
</form>
</div>
</div>
<div class="panel-body">
<div>
<hr />
</div>
</div>
</div>
<a href="/categori/products" class="btn btn-default">목록으로</a>
<a href="/categori/products/edit/<%=product._id%>" class="btn btn-primary">수정</a>
<div style="padding-bottom: 30px;">
<a href="/categori/products" class="btn btn-dark">목록으로</a>
<a href="/categori/products/edit/<%=product._id%>" class="btn btn-primary">수정</a>
</div>
<% include ../includes/footer.ejs %>
<script>
(function(){
// 영상 메모 구현 파트(아직 미구현)
$(document).ready(function() {
$('#commentForm').submit(function(){
var $contentVal = $(this).children('textarea[name=content]').val();
......@@ -88,6 +105,7 @@
});
})();
</script>
<script>
$(document).on('click' , '.comment_delete' , function(){
if(confirm('삭제하시겠습니까?')){ //확인창 예 눌렀을 시만 진행
......@@ -107,18 +125,7 @@ $(document).on('click' , '.comment_delete' , function(){
}
});
</script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
var $masonry_container = $('#masonry_container');
$masonry_container.imagesLoaded(function () {
$masonry_container.masonry({
itemSelector: '.masonry-grid',
columnWidth: 270
});
});
</script>
<script>
var tag = document.createElement('script');
......@@ -137,8 +144,8 @@ $(document).on('click' , '.comment_delete' , function(){
function onYouTubeIframeAPIReady() {
for (var i = 0; i < videoIds.length; i++) {
player = new YT.Player(players[i], {
height: '300',
width: '500',
height: '360',
width: '640',
videoId: videoIds[i],
events: {
// 'onReady': onPlayerReady,
......