make coupon book and make navigation bar

김정은
Commit 9bd06312f4fb72fdda64b585f26a4137052c4771 9bd06312 1 parent 6bba7932
Showing 7 changed files with 155 additions and 54 deletions
public/images/stamp.jpg
public/stylesheets/style.css
public/stylesheets/style.styl
routes/index.js
views/main.ejs
views/map.ejs
views/mybook.ejs
--- a/public/images/stamp.jpg 0 → 100644
View file @9bd0631
+++ b/public/images/stamp.jpg 0 → 100644
View file @9bd0631
--- a/public/stylesheets/style.css
View file @9bd0631
+++ b/public/stylesheets/style.css
View file @9bd0631
@@ -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 {
+#show {
-  width: 100%;
+  width: 15%;
-  height: 400px;
+  display: inline-block;
-  background-color: grey;
+  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;
 }
--- a/public/stylesheets/style.styl
View file @9bd0631
+++ b/public/stylesheets/style.styl
View file @9bd0631
 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%;
-    width : 70%
+    border-collapse: collapse;
-    height : 100%
+    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;
--- a/routes/index.js
View file @9bd0631
+++ b/routes/index.js
View file @9bd0631
@@ -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(temp3);
-  rows.push(temp4);
+//  rows.push(temp4);
-  rows.push(temp5);
+//  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;
--- a/views/main.ejs
View file @9bd0631
+++ b/views/main.ejs
View file @9bd0631
@@ -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>
+      <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>
--- a/views/map.ejs
View file @9bd0631
+++ b/views/map.ejs
View file @9bd0631
@@ -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 ="menu">
   <div id ="show">clickmenu</div>
+  <div id ="maintitle">맛집견문록</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"> </div>
-
-
-    <div id = "header"> </div>
     <div id ="content">
--- a/views/mybook.ejs
View file @9bd0631
+++ b/views/mybook.ejs
View file @9bd0631
@@ -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,24 @@
-
-    <div id ="menu">
   <div id ="show">clickmenu</div>
+  <div id ="maintitle">맛집견문록</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">
@@ -45,31 +50,39 @@
       <%
-                        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>
-                      %>
+     <%} else if (i%3==0){%>
+              </tr>
                    <tr>
-                          <td><p class="bold"><%=num%> : <%=item.name%></p>
+                     <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>
@@ -83,6 +96,7 @@
+
   </body>
 </html>