Showing
2 changed files
with
17 additions
and
16 deletions
1 | <% include ./includes/header.ejs %> | 1 | <% include ./includes/header.ejs %> |
2 | <div style="background-color:lavenderblush;"> | 2 | <div style="background-color:lavenderblush;"> |
3 | - <% var count = 0; %> | 3 | + <h2 style="padding: 30px;">Categories</h2> |
4 | + <% var count = 0; var collapseCount = 'less';%> | ||
4 | <center> | 5 | <center> |
6 | + <div class="accordion w-85" id="accordionExample" style="padding-bottom: 20px;"> | ||
5 | <% for (var i in video) { %> | 7 | <% for (var i in video) { %> |
6 | - <div style ="color:gray; font-weight:bold; font-size:2.0em; margin-left: 30px; padding-top: 30px"> | 8 | + <div class="accordion-item" style="margin: 20px;"> |
7 | - <div style="width: 100%; | 9 | + <h2 class="accordion-header" id="<%=video[i].category.title%>"> |
8 | - max-width: 7rem; | 10 | + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#<%=collapseCount%>" |
9 | - height: 0.25rem; | 11 | + aria-expanded="true" aria-controls="<%=collapseCount%>" style ="padding-top: 30px"> |
10 | - background-color: #2c3e50; | ||
11 | - border-radius: 1rem; | ||
12 | - border-color: #2c3e50 !important;"></div> | ||
13 | <%=video[i].category.title%> | 12 | <%=video[i].category.title%> |
14 | - <div style="width: 100%; | 13 | + </button> |
15 | - max-width: 7rem; | 14 | + </h2> |
16 | - height: 0.25rem; | 15 | + <div id="<%=collapseCount%>" data-bs-parent="#accordionExample" class="accordion-collapse collapse" aria-labelledby="<%=video[i].category.title%>"> |
17 | - background-color: #2c3e50; | 16 | + <div class="accordion-body"> |
18 | - border-radius: 1rem; | ||
19 | - border-color: #2c3e50 !important;"></div> | ||
20 | - </div> | ||
21 | <% for (var j in video[i].videos) { %> | 17 | <% for (var j in video[i].videos) { %> |
22 | <div class="card" style="width: 55rem; margin-bottom: 15px; margin-top: 15px;"> | 18 | <div class="card" style="width: 55rem; margin-bottom: 15px; margin-top: 15px;"> |
23 | <div class="card-top" id="<%=count%>" vid="<%=video[i].videos[j].video_id%>" style="margin: 30px;"> | 19 | <div class="card-top" id="<%=count%>" vid="<%=video[i].videos[j].video_id%>" style="margin: 30px;"> |
... | @@ -29,7 +25,12 @@ | ... | @@ -29,7 +25,12 @@ |
29 | </div> | 25 | </div> |
30 | </div> | 26 | </div> |
31 | <%count++;}; %> | 27 | <%count++;}; %> |
28 | + </div> | ||
29 | + </div> | ||
30 | + </div> | ||
31 | + <%collapseCount = collapseCount+ "le";%> | ||
32 | <%};%> | 32 | <%};%> |
33 | + </div> | ||
33 | </center> | 34 | </center> |
34 | </div> | 35 | </div> |
35 | 36 | ... | ... |
... | @@ -29,7 +29,7 @@ | ... | @@ -29,7 +29,7 @@ |
29 | <li class="nav-item"> | 29 | <li class="nav-item"> |
30 | <a class="nav-link" href="/">Home</a> | 30 | <a class="nav-link" href="/">Home</a> |
31 | </li> | 31 | </li> |
32 | - <li class="nav-item"><a class="nav-link" href="/categori/products">Categori</a></li> | 32 | + <li class="nav-item"><a class="nav-link" href="/categori/products">Category</a></li> |
33 | <% if(isLogin){%> | 33 | <% if(isLogin){%> |
34 | <li class="nav-item"><a class="nav-link" href="/accounts/logout" onclick="return confirm('로그아웃 하시겠습니까?')">LOGOUT</a></li> | 34 | <li class="nav-item"><a class="nav-link" href="/accounts/logout" onclick="return confirm('로그아웃 하시겠습니까?')">LOGOUT</a></li> |
35 | <%}else{%> | 35 | <%}else{%> | ... | ... |
-
Please register or login to post a comment