김재현 / open-source-project-2017-02

Go to a project
Toggle navigation Toggle navigation pinning
김정은
9bd06312 1 parent 6bba7932

make coupon book and make navigation bar

Inline Side-by-side
Showing 7 changed files with 168 additions and 67 deletions
......@@ -6,7 +6,7 @@ ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
width: 15%;
background-color: #f1f1f1;
height: 100%;
position: fixed;
......@@ -17,7 +17,6 @@ ul.sidenav li a {
color: #000;
padding: 8px 16px;
text-decoration: none;
transition: 0.3s;
}
ul.sidenav li a.active {
background-color: #4caf50;
......@@ -27,19 +26,33 @@ ul.sidenav li a:hover:not(.active) {
background-color: #555;
color: #fff;
}
#title {
text-align: center;
width: 100%;
font-size: 50px;
padding-bottom: 30px;
}
#content {
margin-left: 25%;
padding: 1px 16px;
padding: 10px 16px;
height: 100%;
}
table {
display: block;
width: 70%;
height: 100%;
border-collapse: collapse;
text-align: center;
vertical-align: middle;
}
td {
vertical-align: middle;
text-align: center;
display: block;
border: 1px solid #ddd;
width: 10%;
height: 0%;
padding-bottom: 20%;
background-image: url("/images/stamp.jpg");
background-repeat: no-repeat;
background-position: center top;
}
.bold {
color: #ffc0cb;
......@@ -49,8 +62,26 @@ td {
color: #808080;
font-size: 8pt;
}
#map {
width: 100%;
height: 400px;
background-color: grey;
#show {
width: 15%;
display: inline-block;
float: left;
position: fixed;
overflow: auto;
}
#maintitle {
text-align: center;
background: #ffc0cb;
padding: 8px 16px;
margin-left: 15%;
}
#mynav {
display: block;
margin-left: -250px;
transition: all 0.4s ease-in-out 0s;
}
#mynav.open {
transition: all 0.4s ease-in-out 0s;
float: left;
margin-left: 0px;
}
......
body
a
color: gray;
......@@ -7,7 +10,7 @@ ul.sidenav
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
width: 15%;
background-color: #f1f1f1;
height: 100%;
position : fixed;
......@@ -18,7 +21,6 @@ ul.sidenav li a
color: #000;
padding: 8px 16px;
text-decoration: none;
transition: 0.3s;
ul.sidenav li a.active
......@@ -31,21 +33,33 @@ ul.sidenav li a:hover:not(.active)
color: white;
#title
text-align : center;
width : 100%
font-size : 50px;
padding-bottom : 30px;
#content
margin-left: 25%;
padding: 1px 16px;
padding: 10px 16px;
height: 100%;
table
display : block
width : 70%
height : 100%
width : 70%;
border-collapse: collapse;
text-align : center;
vertical-align : middle;
td
vertical-align: middle;
text-align : center;
display : block
border: 1px solid #ddd;
width : 10%;
height : 0%;
padding-bottom: 20%;
background-image : url("/images/stamp.jpg");
background-repeat: no-repeat;
background-position: center top;
.bold
color : pink;
......@@ -53,3 +67,25 @@ td
.small
color : grey;
font-size : 8pt;
#show
width: 15%;
display : inline-block;
float : left;
position : fixed;
overflow : auto;
#maintitle
text-align : center;
background : pink;
padding: 8px 16px;
margin-left : 15%;
#mynav
display: block;
margin-left: -250px;
transition:all 0.4s ease-in-out 0s;
#mynav.open
transition:all 0.4s ease-in-out 0s;
float:left;
margin-left : 0px;
......
......@@ -20,6 +20,9 @@ router.get('/home', function(req,res,next){
res.render('main', {title: '맛집견문록'});
});
router.get('/mybook', function(req, res, next){
var rows = new Array();
......@@ -35,15 +38,24 @@ router.get('/mybook', function(req, res, next){
var temp5 = {name : "와장창창", place : "윌집앞"}
var temp6 = {name : "맛있는 짜장면", place : "너네집앞"}
var temp4 = {name : "네모네모 오징어", place : "영등포경찰서"}
var temp7 = {name : "스타벅스", place : "서울특별시 영등포구 여의도동"}
rows.push(temp1);
rows.push(temp2);
rows.push(temp3);
rows.push(temp4);
rows.push(temp5);
// rows.push(temp3);
// rows.push(temp4);
// rows.push(temp5);
rows.push(temp6);
rows.push(temp7);
res.render('mybook', {title: '견문록 보기', rows : rows});
});
router.get('/test', function(req, res, next){
res.render('test', {title: 'test'});
});
module.exports = router;
......
......@@ -10,11 +10,18 @@
<script>
$(document).ready(function() {
$('.sidenav').hide();
$('#show').click(function() {
$('.sidenav').slideToggle("fast");
//$('.sidenav').slideToggle("fast");
$this = $(this);
$nav = $('#mynav');
$nav.toggleClass('open');
});
});
......@@ -24,22 +31,22 @@
<div id ="menu">
<div id ="show">clickmenu</div>
<div id ="maintitle">맛집견문록</div>
<ul class="sidenav">
<li><a class="active" href="home">home</a></li>
<li><a href="map">맛집도장찍기</a></li>
<li><a href="mybook">견문록확인</a></li>
</ul>
<div id ="mynav">
<ul class="sidenav">
<li><a class="active" href="home">home</a></li>
<li><a href="map">맛집도장찍기</a></li>
<li><a href="mybook">견문록확인</a></li>
</ul>
</div>
<div id = "header"> </div>
<div id= "title"></div>
<div id ="content">
<h1><%= title %></h1>
......
......@@ -9,11 +9,14 @@
<script>
$(document).ready(function() {
$('.sidenav').hide();
// $('.sidenav').hide();
$('#show').click(function() {
$('.sidenav').slideToggle("fast");
//$('.sidenav').slideToggle("fast");
$this = $(this);
$nav = $('#mynav');
$nav.toggleClass('open');
});
});
......@@ -22,22 +25,20 @@
<div id ="show">clickmenu</div>
<div id ="maintitle">맛집견문록</div>
<div id ="menu">
<div id ="show">clickmenu</div>
<div id ="mynav">
<ul class="sidenav">
<li><a class="active" href="home">home</a></li>
<li><a href="map">맛집도장찍기</a></li>
<li><a href="mybook">견문록확인</a></li>
</ul>
</div>
</div>
<div id = "header"> </div>
<div id = "title"> </div>
<div id ="content">
......
......@@ -9,11 +9,14 @@
<script>
$(document).ready(function() {
$('.sidenav').hide();
//$('.sidenav').hide();
$('#show').click(function() {
$('.sidenav').slideToggle("fast");
//$('.sidenav').slideToggle("fast");
$this = $(this);
$nav = $('#mynav');
$nav.toggleClass('open');
});
});
......@@ -22,55 +25,65 @@
<div id ="show">clickmenu</div>
<div id ="maintitle">맛집견문록</div>
<div id ="menu">
<div id ="show">clickmenu</div>
<div id ="mynav">
<ul class="sidenav">
<li><a class="active" href="home">home</a></li>
<li><a href="map">맛집도장찍기</a></li>
<li><a href="mybook">견문록확인</a></li>
</ul>
</div>
</div>
<div id = "title">
ㅇㅇㅇ님의 맛집 견문록<br/>
<div id = "header"> </div>
</div>
<div id ="content">
<table border="1">
<table border="1">
<%
for(var i=0; i<rows.length; i++)
{
<%
for( var i=0; i<rows.length; i++)
{
var oneItem = rows[i];
%>
for( var j = 0; j<3; j++){
num = i * 3 + j;
var item = rows[num];
<%if(i==0){ %>
<tr>
<td><p class="bold"><%=i%>:a <%=oneItem.name%></p>
<p class="small"><%=oneItem.place%></p></td>
%>
<tr>
<td><p class="bold"><%=num%> : <%=item.name%></p>
<%} else if (i%3==0){%>
</tr>
<tr>
<td><p class="bold"><%=i%>:b <%=oneItem.name%></p>
<p class="small"><%=oneItem.place%></p></td>
<p class="small"><%=item.place%></p></td>
<%}else if(i%3!=0 && i!=rows.length-1){%>
<% } %>
<td><p class="bold"><%=i%>:c <%=oneItem.name%></p>
<p class="small"><%=oneItem.place%></p></td>
</tr>
<%}else{%>
<td><p class="bold"><%=i%>:c <%=oneItem.name%></p>
<p class="small"><%=oneItem.place%></p></td></tr>
<%
}
%>
</table>
<%}}%>
</table>
......@@ -83,6 +96,7 @@
</body>
</html>
......