임태민 / Mapmory

Go to a project
Toggle navigation Toggle navigation pinning
임태민
76f4ecd8 1 parent e167fc17

Update project 

- FE 업데이트 했습니다.
Inline Side-by-side
Showing 13 changed files with 458 additions and 219 deletions
1 body { 1 body {
2 background-color:whitesmoke; 2 background-color:whitesmoke;
3 } 3 }
4 + .mb-3 {
5 + font-family: 'Archivo', sans-serif;
6 + }
4 .h1 { 7 .h1 {
5 font-family: 'PT Serif', serif; 8 font-family: 'PT Serif', serif;
6 } 9 }
...@@ -38,9 +41,9 @@ body { ...@@ -38,9 +41,9 @@ body {
38 } 41 }
39 42
40 43
41 -.mb-3{ 44 +/* .mb-3{
42 background-color:tan; 45 background-color:tan;
43 -} 46 +} */
44 47
45 48
46 49
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,18 +2,40 @@ ...@@ -2,18 +2,40 @@
2 <html> 2 <html>
3 <head> 3 <head>
4 <%- include('../partials/head') %> 4 <%- include('../partials/head') %>
5 + <style>
6 + #login {
7 + font-family: 'Archivo', sans-serif;
8 + /* font-family: 'PT Serif', serif; */
9 + font-size:3rem;
10 + font-weight: bold;
11 + }
12 +
13 + div#login_wrapper{
14 + border: 20px transparent white;
15 + padding: 5px 20px;
16 + position: absolute;
17 + top: 50%;
18 + left: 50%;
19 + width: 450px; height: 250px;
20 + margin-left: -220px;
21 + margin-top: -170px;
22 +
23 + display: flex; flex-direction:column; justify-content:center; align-items: center;
24 + }
25 +
26 + </style>
5 </head> 27 </head>
6 <body> 28 <body>
7 <%- include('../partials/nav') %> 29 <%- include('../partials/nav') %>
8 30
9 <div class="container"> 31 <div class="container">
10 - 32 + <div id="login_wrapper">
11 - <h3 class="mb-3">Login</h3> 33 + <h3 class="mb-3" id="login">Login</h3>
12 34
13 <form class="user-form" action="/login" method="post"> 35 <form class="user-form" action="/login" method="post">
14 36
15 <div class="form-group row"> 37 <div class="form-group row">
16 - <label for="username" class="col-sm-3 col-form-label">Username</label> 38 + <label for="username" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Username</label>
17 <div class="col-sm-9"> 39 <div class="col-sm-9">
18 <input type="text" id="username" name="username" value="<%= username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>"> 40 <input type="text" id="username" name="username" value="<%= username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>">
19 <% if(errors.username){ %> 41 <% if(errors.username){ %>
...@@ -23,7 +45,7 @@ ...@@ -23,7 +45,7 @@
23 </div> 45 </div>
24 46
25 <div class="form-group row"> 47 <div class="form-group row">
26 - <label for="password" class="col-sm-3 col-form-label">Password</label> 48 + <label for="password" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Password</label>
27 <div class="col-sm-9"> 49 <div class="col-sm-9">
28 <input type="password" id="password" name="password" value="" class="form-control <%= (errors.password)?'is-invalid':'' %>"> 50 <input type="password" id="password" name="password" value="" class="form-control <%= (errors.password)?'is-invalid':'' %>">
29 <% if(errors.password){ %> 51 <% if(errors.password){ %>
...@@ -36,12 +58,14 @@ ...@@ -36,12 +58,14 @@
36 <div class="invalid-feedback d-block"><%= errors.login %></div> 58 <div class="invalid-feedback d-block"><%= errors.login %></div>
37 <% } %> 59 <% } %>
38 60
39 - <div class="mt-3"> 61 + <div class="mt-3" style="float:right">
40 - <input class="btn btn-primary" type="submit" value="Submit"> 62 + <input class="btn btn-outline-primary" type="submit" value="Submit">
41 </div> 63 </div>
42 -
43 </form> 64 </form>
44 65
66 + </div>
67 +
68 +
45 </div> 69 </div>
46 </body> 70 </body>
47 </html> 71 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
5 <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> 5 <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
6 <style type="text/css"> 6 <style type="text/css">
7 #map { 7 #map {
8 - height: 100%; 8 + height: 50%;
9 } 9 }
10 10
11 html, 11 html,
...@@ -28,6 +28,61 @@ ...@@ -28,6 +28,61 @@
28 line-height: 30px; 28 line-height: 30px;
29 padding-left: 10px; 29 padding-left: 10px;
30 } 30 }
31 +
32 + .button-wrapper{
33 + display: inline-block;
34 + border: none;
35 + }
36 +
37 + .button {
38 + background: #fff;
39 + border: none;
40 + padding: 2px;
41 + cursor: pointer;
42 + display: block;
43 + position: relative;
44 + overflow: hidden;
45 + transition: all .35s ease-in-out .35s;
46 + margin: 0 auto;
47 + width: 120px;
48 + text-align: center;
49 + }
50 +
51 + .button:hover{
52 + background: #36B4C7;
53 + color: #fff;
54 + transition: all .35s ease-in-out .35s;
55 + }
56 + .button:after {
57 + bottom: -100%;
58 + right: -100%;
59 + content: "";
60 + width: 100%;
61 + height: 100%;
62 + position: absolute;
63 + background: #36B4C7;
64 + transition: all .35s ease-in-out .5s;
65 + }
66 + .button:hover:after {
67 + right: 0;
68 + bottom: 0;
69 + transition: all ease-in-out .35s;
70 + }
71 + .button:before {
72 + top: -100%;
73 + left: -100%;
74 + content: "";
75 + width: 100%;
76 + height: 100%;
77 + position: absolute;
78 + background: #36B4C7;
79 + transition: all .35s ease-in-out .5s;
80 + }
81 + .button:hover:before {
82 + left: 0;
83 + top: 0;
84 + transition: all ease-in-out .35s;
85 + }
31 </style> 86 </style>
32 <script> 87 <script>
33 // initMap은 처음 map을 켰을 때 화면을 생성하는 함수. 88 // initMap은 처음 map을 켰을 때 화면을 생성하는 함수.
...@@ -65,9 +120,17 @@ ...@@ -65,9 +120,17 @@
65 </head> 120 </head>
66 <body> 121 <body>
67 <div id="floating-panel"> 122 <div id="floating-panel">
68 - <input id="submit" type="button" value="find location" /> 123 + <div class="light-button button-wrapper">
124 + <input class="button" id="submit" type="button" value="Find Location"/>
125 + </div>
126 +
127 + </div>
128 + <div class="container mb-3" id="map"></div>
129 +
130 + <!-- <div id="floating-panel">
131 + <input id="submit" type="button" value="Find Location" />
69 </div> 132 </div>
70 - <div id="map"></div> 133 + <div id="map" class="container mb-3"></div> -->
71 134
72 <!-- Async script executes immediately and must be after any DOM elements used in callback. --> 135 <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
73 <script 136 <script
......
...@@ -10,6 +10,9 @@ ...@@ -10,6 +10,9 @@
10 <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> 10 <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
11 <link rel="preconnect" href="https://fonts.gstatic.com"> 11 <link rel="preconnect" href="https://fonts.gstatic.com">
12 <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital@1&display=swap" rel="stylesheet"> 12 <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital@1&display=swap" rel="stylesheet">
13 +<link rel="preconnect" href="https://fonts.gstatic.com">
14 +<link href="https://fonts.googleapis.com/css2?family=Archivo&family=Gothic+A1:wght@500;600&display=swap" rel="stylesheet">
15 +
13 <!-- my css --> 16 <!-- my css -->
14 <link rel="stylesheet" href="/css/master.css"> 17 <link rel="stylesheet" href="/css/master.css">
15 18
......
1 <!-- <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3"> --> 1 <!-- <nav class="navbar navbar-expand-sm navbar-light bg-light mb-3"> -->
2 <nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3"> 2 <nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3">
3 <div class="container"> 3 <div class="container">
4 - <div class="navbar-brand">Mapmory</div> 4 + <div class="navbar-brand" style="font-weight: bold;">Mapmory</div>
5 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"> 5 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
6 <span class="navbar-toggler-icon"></span> 6 <span class="navbar-toggler-icon"></span>
7 </button> 7 </button>
8 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 8 <div class="collapse navbar-collapse" id="navbarSupportedContent">
9 <ul class="navbar-nav"> 9 <ul class="navbar-nav">
10 <li class="nav-item"><a href="/" class="nav-link">Home</a></li> 10 <li class="nav-item"><a href="/" class="nav-link">Home</a></li>
11 - <li class="nav-item"><a href="/about" class="nav-link">About</a></li> 11 + <!-- <li class="nav-item"><a href="/about" class="nav-link">About</a></li> -->
12 <li class="nav-item"><a href="/posts" class="nav-link">Memory</a></li> 12 <li class="nav-item"><a href="/posts" class="nav-link">Memory</a></li>
13 </ul> 13 </ul>
14 14
......
...@@ -10,9 +10,11 @@ ...@@ -10,9 +10,11 @@
10 <title>Geocoding Service</title> 10 <title>Geocoding Service</title>
11 <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> 11 <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
12 12
13 + <link rel="stylesheet" href="/css/mouse.scss">
14 +
13 <style type="text/css"> 15 <style type="text/css">
14 #map { 16 #map {
15 - height: 100%; 17 + height: 50%;
16 } 18 }
17 19
18 html, 20 html,
...@@ -35,6 +37,61 @@ ...@@ -35,6 +37,61 @@
35 line-height: 30px; 37 line-height: 30px;
36 padding-left: 10px; 38 padding-left: 10px;
37 } 39 }
40 +
41 + .button-wrapper{
42 + display: inline-block;
43 + border: none;
44 + }
45 +
46 + .button {
47 + background: #fff;
48 + border: none;
49 + padding: 2px;
50 + cursor: pointer;
51 + display: block;
52 + position: relative;
53 + overflow: hidden;
54 + transition: all .35s ease-in-out .35s;
55 + margin: 0 auto;
56 + width: 120px;
57 + text-align: center;
58 + }
59 +
60 + .button:hover{
61 + background: #36B4C7;
62 + color: #fff;
63 + transition: all .35s ease-in-out .35s;
64 + }
65 + .button:after {
66 + bottom: -100%;
67 + right: -100%;
68 + content: "";
69 + width: 100%;
70 + height: 100%;
71 + position: absolute;
72 + background: #36B4C7;
73 + transition: all .35s ease-in-out .5s;
74 + }
75 + .button:hover:after {
76 + right: 0;
77 + bottom: 0;
78 + transition: all ease-in-out .35s;
79 + }
80 + .button:before {
81 + top: -100%;
82 + left: -100%;
83 + content: "";
84 + width: 100%;
85 + height: 100%;
86 + position: absolute;
87 + background: #36B4C7;
88 + transition: all .35s ease-in-out .5s;
89 + }
90 + .button:hover:before {
91 + left: 0;
92 + top: 0;
93 + transition: all ease-in-out .35s;
94 + }
38 </style> 95 </style>
39 <script> 96 <script>
40 // initMap은 처음 map을 켰을 때 화면을 생성하는 함수. 97 // initMap은 처음 map을 켰을 때 화면을 생성하는 함수.
...@@ -74,7 +131,10 @@ ...@@ -74,7 +131,10 @@
74 131
75 132
76 <div id="floating-panel"> 133 <div id="floating-panel">
77 - <input id="submit" type="button" value="find location" /> 134 + <div class="light-button button-wrapper">
135 + <input class="button" id="submit" type="button" value="Find Location"/>
136 + </div>
137 +
78 </div> 138 </div>
79 <div class="container mb-3" id="map"></div> 139 <div class="container mb-3" id="map"></div>
80 140
...@@ -84,5 +144,6 @@ ...@@ -84,5 +144,6 @@
84 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK6K4iDdo9cKQdrNoOJaaYg29nEG0BIjw&callback=initMap&libraries=&v=weekly" 144 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK6K4iDdo9cKQdrNoOJaaYg29nEG0BIjw&callback=initMap&libraries=&v=weekly"
85 async 145 async
86 ></script> 146 ></script>
147 +
87 </body> 148 </body>
88 </html> 149 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
5 </head> 5 </head>
6 <body> 6 <body>
7 <%- include('../partials/nav') %> 7 <%- include('../partials/nav') %>
8 + <%- include('../partials/gmap') %>
8 9
9 <div class="container mb-3"> 10 <div class="container mb-3">
10 11
...@@ -36,7 +37,7 @@ ...@@ -36,7 +37,7 @@
36 </div> 37 </div>
37 38
38 <div class="form-group"> 39 <div class="form-group">
39 - <label for="body">Body</label> 40 + <label for="body">Content</label>
40 <textarea id="body" name="body" rows="5" class="form-control <%= (errors.body)?'is-invalid':''%>"><%= post.body %></textarea> 41 <textarea id="body" name="body" rows="5" class="form-control <%= (errors.body)?'is-invalid':''%>"><%= post.body %></textarea>
41 <% if(errors.body){ %> 42 <% if(errors.body){ %>
42 <span class="invalid-feedback"><%= errors.body.message %></span> 43 <span class="invalid-feedback"><%= errors.body.message %></span>
...@@ -49,14 +50,14 @@ ...@@ -49,14 +50,14 @@
49 </div> 50 </div>
50 <% } %> 51 <% } %>
51 52
52 - <div> 53 + <div style="float:right">
53 - <a class="btn btn-primary" href="/posts/<%= post._id %>">Back</a> 54 + <a class="btn btn-outline-secondary" href="/posts/<%= post._id %>">Back</a>
54 - <button type="submit" class="btn btn-primary">Submit</button> 55 + <button type="submit" class="btn btn-outline-primary">Submit</button>
55 </div> 56 </div>
56 57
57 </form> 58 </form>
58 59
59 </div> 60 </div>
60 - <%- include('../partials/gmap') %> 61 +
61 </body> 62 </body>
62 </html> 63 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,53 +2,60 @@ ...@@ -2,53 +2,60 @@
2 <html> 2 <html>
3 <head> 3 <head>
4 <%- include('../partials/head') %> 4 <%- include('../partials/head') %>
5 +
5 </head> 6 </head>
6 <body> 7 <body>
7 <%- include('../partials/nav') %> 8 <%- include('../partials/nav') %>
8 9
9 <div class="container mb-3"> 10 <div class="container mb-3">
11 + <div>
12 + <h2 class="mb-3" style="font-weight: bold; font-style:italic; float:left;">Memory</h2>
10 13
11 - <h2 class="mb-3">Board</h2> 14 + <div style="float:right">
12 - 15 + <% if(isAuthenticated){ %>
13 - <table class="board-table table table-sm border-bottom"> 16 + <a class="btn btn-outline-primary" href="/posts/new">Write Memory</a>
14 -
15 - <thead class="thead-light">
16 - <tr>
17 - <th scope="col">Title</th>
18 - <th scope="col" class="author">Author</th>
19 - <th scope="col" class="date">Date</th>
20 - </tr>
21 - </thead>
22 -
23 - <tbody>
24 - <% if(posts == null || posts.length == 0){ %>
25 - <tr>
26 - <td colspan=2> EMPTY </td>
27 - </tr>
28 <% } %> 17 <% } %>
29 - <% posts.forEach(function(post) { %> 18 + </div>
30 - <tr> 19 +
31 - <td> 20 + <!-- <table class="board-table table table-sm border-bottom"> -->
32 - <a href="/posts/<%= post._id %>"><div class="ellipsis"><%= post.title %></div></a> 21 + <table class="table table-hover table-light">
33 - </td> 22 + <thead>
34 - <td class="author"> 23 + <tr class="table-dark">
35 - <div class="ellipsis"><%= post.author ? post.author.username : "" %></div> 24 + <th scope="col">Title</th>
36 - </td> 25 + <th scope="col" class="author">Author</th>
37 - <td class="date"> 26 + <th scope="col" class="date">Date</th>
38 - <span data-date="<%= post.createdAt %>"><%= post.createdAt %></span>
39 - </td>
40 </tr> 27 </tr>
41 - <% }) %> 28 + </thead>
42 - </tbody> 29 +
30 + <tbody>
31 + <% if(posts == null || posts.length == 0){ %>
32 + <tr>
33 + <td colspan=2> EMPTY </td>
34 + </tr>
35 + <% } %>
36 + <% posts.forEach(function(post) { %>
37 + <tr>
38 + <td>
39 + <a href="/posts/<%= post._id %>" style="color:black; font-weight: bold;"><div class="ellipsis"><%= post.title %></div></a>
40 + </td>
41 + <td class="author">
42 + <div class="ellipsis"><%= post.author ? post.author.username : "" %></div>
43 + </td>
44 + <td class="date">
45 + <span data-date="<%= post.createdAt %>"><%= post.createdAt %></span>
46 + </td>
47 + </tr>
48 + <% }) %>
49 + </tbody>
50 +
51 + </table>
43 52
44 - </table>
45 -
46 - <div>
47 - <% if(isAuthenticated){ %>
48 - <a class="btn btn-primary" href="/posts/new">New</a>
49 - <% } %>
50 </div> 53 </div>
51 54
55 +
56 +
57 +
58 +
52 </div> 59 </div>
53 </body> 60 </body>
54 </html> 61 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
5 </head> 5 </head>
6 <body> 6 <body>
7 <%- include('../partials/nav') %> 7 <%- include('../partials/nav') %>
8 + <%- include('../partials/gmap') %>
8 9
9 <div class="container mb-3"> 10 <div class="container mb-3">
10 11
...@@ -19,7 +20,7 @@ ...@@ -19,7 +20,7 @@
19 <form action="/posts" method="post"> 20 <form action="/posts" method="post">
20 21
21 <div class="form-group"> 22 <div class="form-group">
22 - <label for="title">Title</label> 23 + <label for="title" style="font-weight:bold">Title</label>
23 <input type="text" id="title" name="title" value="<%= post.title %>" class="form-control <%= (errors.title)?'is-invalid':'' %>"> 24 <input type="text" id="title" name="title" value="<%= post.title %>" class="form-control <%= (errors.title)?'is-invalid':'' %>">
24 <% if(errors.title){ %> 25 <% if(errors.title){ %>
25 <span class="invalid-feedback"><%= errors.title.message %></span> 26 <span class="invalid-feedback"><%= errors.title.message %></span>
...@@ -27,7 +28,7 @@ ...@@ -27,7 +28,7 @@
27 </div> 28 </div>
28 29
29 <div class="form-group"> 30 <div class="form-group">
30 - <label for="address">address</label> 31 + <label for="address" style="font-weight:bold">Address</label>
31 <input type="text" id="address" name="address" value="<%= post.address %>" class="form-control <%= (errors.address)?'is-invalid':'' %>"> 32 <input type="text" id="address" name="address" value="<%= post.address %>" class="form-control <%= (errors.address)?'is-invalid':'' %>">
32 <% if(errors.address){ %> 33 <% if(errors.address){ %>
33 <span class="invalid-feedback"><%= errors.address.message %></span> 34 <span class="invalid-feedback"><%= errors.address.message %></span>
...@@ -35,6 +36,7 @@ ...@@ -35,6 +36,7 @@
35 </div> 36 </div>
36 37
37 <div class="form-group"> 38 <div class="form-group">
39 + <label for="body" style="font-weight:bold">Content</label>
38 <textarea id="body" name="body" rows="5" class="form-control <%= (errors.body)?'is-invalid':''%>"><%= post.body %></textarea> 40 <textarea id="body" name="body" rows="5" class="form-control <%= (errors.body)?'is-invalid':''%>"><%= post.body %></textarea>
39 <% if(errors.body){ %> 41 <% if(errors.body){ %>
40 <span class="invalid-feedback"><%= errors.body.message %></span> 42 <span class="invalid-feedback"><%= errors.body.message %></span>
...@@ -47,13 +49,13 @@ ...@@ -47,13 +49,13 @@
47 </div> 49 </div>
48 <% } %> 50 <% } %>
49 51
50 - <div> 52 + <div style="float:right">
51 - <a class="btn btn-primary" href="/posts">Back</a> 53 + <a class="btn btn-outline-secondary" href="/posts">Back</a>
52 - <button type="submit" class="btn btn-primary">Submit</button> 54 + <button type="submit" class="btn btn-outline-primary">Submit</button>
53 </div> 55 </div>
54 56
55 </form> 57 </form>
56 </div> 58 </div>
57 - <%- include('../partials/gmap') %> 59 +
58 </body> 60 </body>
59 </html> 61 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -13,16 +13,16 @@ ...@@ -13,16 +13,16 @@
13 <ol class="breadcrumb p-1 pl-2 pr-2"> 13 <ol class="breadcrumb p-1 pl-2 pr-2">
14 <li class="breadcrumb-item"><a href="/">Home</a></li> 14 <li class="breadcrumb-item"><a href="/">Home</a></li>
15 <li class="breadcrumb-item"><a href="/posts">Board</a></li> 15 <li class="breadcrumb-item"><a href="/posts">Board</a></li>
16 - <li class="breadcrumb-item active" aria-current="page"><%= post.address %></li> 16 + <li class="breadcrumb-item active" aria-current="page"><%= post.title %></li>
17 </ol> 17 </ol>
18 </nav> 18 </nav>
19 19
20 <div class="card"> 20 <div class="card">
21 - <h5 class="card-header p-2"><%= post.title %></h5> 21 + <h5 class="card-header p-2" style="font-weight: bold; font-family: 'Archivo', sans-serif;"><%= post.title %></h5>
22 <div class="row"> <!-- 1 --> 22 <div class="row"> <!-- 1 -->
23 23
24 <div class="col-md-7 col-lg-8 col-xl-9 order-sm-2 order-md-1"> <!-- 1 --> 24 <div class="col-md-7 col-lg-8 col-xl-9 order-sm-2 order-md-1"> <!-- 1 -->
25 - <div class="post-body p-2"><%= post.body %></div> 25 + <div class="post-body p-2" style="font-family: 'Archivo', sans-serif;"><%= post.body %></div>
26 </div> 26 </div>
27 27
28 <div class="col-md-5 col-lg-4 col-xl-3 order-sm-1 order-md-2"> <!-- 1 --> 28 <div class="col-md-5 col-lg-4 col-xl-3 order-sm-1 order-md-2"> <!-- 1 -->
...@@ -40,12 +40,12 @@ ...@@ -40,12 +40,12 @@
40 </div> 40 </div>
41 </div> 41 </div>
42 42
43 - <div class="mt-3"> 43 + <div class="mt-3" style="float:right">
44 - <a class="btn btn-primary" href="/posts">Back</a> 44 + <a class="btn btn-outline-secondary" href="/posts">Back</a>
45 <% if(isAuthenticated && post.author && currentUser.id == post.author.id){ %> <!-- 1 --> 45 <% if(isAuthenticated && post.author && currentUser.id == post.author.id){ %> <!-- 1 -->
46 - <a class="btn btn-primary" href="/posts/<%= post._id %>/edit">Edit</a> 46 + <a class="btn btn-outline-primary" href="/posts/<%= post._id %>/edit">Edit</a>
47 <form action="/posts/<%= post._id %>?_method=delete" method="post" class="d-inline"> 47 <form action="/posts/<%= post._id %>?_method=delete" method="post" class="d-inline">
48 - <a class="btn btn-primary" href="javascript:void(0)" onclick="confirm('Do you want to delete this?')?this.parentElement.submit():null;">Delete</a> 48 + <a class="btn btn-outline-primary" href="javascript:void(0)" onclick="confirm('Do you want to delete this?')?this.parentElement.submit():null;">Delete</a>
49 </form> 49 </form>
50 <% } %> 50 <% } %>
51 </div> 51 </div>
......
...@@ -2,95 +2,120 @@ ...@@ -2,95 +2,120 @@
2 <html> 2 <html>
3 <head> 3 <head>
4 <%- include('../partials/head') %> 4 <%- include('../partials/head') %>
5 + <style>
6 + #edit {
7 + font-family: 'Archivo', sans-serif;
8 + /* font-family: 'PT Serif', serif; */
9 + font-size:3rem;
10 + font-weight: bold;
11 + margin-bottom: 20px;
12 + }
13 +
14 + div#edit_wrapper{
15 + border: 20px transparent white;
16 + padding: 5px 20px;
17 + position: absolute;
18 + top: 50%;
19 + left: 50%;
20 + width: 450px; height: 250px;
21 + margin-left: -220px;
22 + margin-top: -170px;
23 +
24 + display: flex; flex-direction:column; justify-content:center; align-items: center;
25 + }
26 + </style>
5 </head> 27 </head>
6 <body> 28 <body>
7 <%- include('../partials/nav') %> 29 <%- include('../partials/nav') %>
8 30
9 <div class="container mb-3"> 31 <div class="container mb-3">
32 + <div id="edit_wrapper">
33 + <h3 class="mb-3" id="edit">Edit User</h3>
10 34
11 - <h3 class="mb-3">Edit User</h3> 35 + <form action="/users/<%= username %>?_method=put" method="post"> <!-- 1 -->
12 -
13 - <form action="/users/<%= username %>?_method=put" method="post"> <!-- 1 -->
14 36
15 - <div class="form-group row"> 37 + <div class="form-group row">
16 - <label for="currentPassword" class="col-sm-3 col-form-label">Current Password*</label> 38 + <label for="currentPassword" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Current Password*</label>
17 - <div class="col-sm-9 col-sm-offset-3"> 39 + <div class="col-sm-9 col-sm-offset-3">
18 - <input type="password" id="currentPassword" name="currentPassword" value="" class="form-control <%= (errors.currentPassword)?'is-invalid':'' %>"> <!-- 2 --> 40 + <input type="password" id="currentPassword" name="currentPassword" value="" class="form-control <%= (errors.currentPassword)?'is-invalid':'' %>"> <!-- 2 -->
19 - <% if(errors.currentPassword){ %> <!-- 3 --> 41 + <% if(errors.currentPassword){ %> <!-- 3 -->
20 - <span class="invalid-feedback"><%= errors.currentPassword.message %></span> 42 + <span class="invalid-feedback"><%= errors.currentPassword.message %></span>
21 - <% } %> 43 + <% } %>
44 + </div>
22 </div> 45 </div>
23 - </div>
24 46
25 - <hr></hr> 47 + <hr></hr>
26 48
27 - <div class="form-group row"> 49 + <div class="form-group row">
28 - <label for="username" class="col-sm-3 col-form-label">Username*</label> 50 + <label for="username" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Username*</label>
29 - <div class="col-sm-9"> 51 + <div class="col-sm-9">
30 - <input type="text" id="username" name="username" value="<%= user.username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>"> <!-- 2 --> 52 + <input type="text" id="username" name="username" value="<%= user.username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>"> <!-- 2 -->
31 - <% if(errors.username){ %> <!-- 3 --> 53 + <% if(errors.username){ %> <!-- 3 -->
32 - <span class="invalid-feedback"><%= errors.username.message %></span> 54 + <span class="invalid-feedback"><%= errors.username.message %></span>
33 - <% } %> 55 + <% } %>
56 + </div>
34 </div> 57 </div>
35 - </div> 58 +
36 - 59 + <div class="form-group row">
37 - <div class="form-group row"> 60 + <label for="name" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Name*</label>
38 - <label for="name" class="col-sm-3 col-form-label">Name*</label> 61 + <div class="col-sm-9">
39 - <div class="col-sm-9"> 62 + <input type="text" id="name" name="name" value="<%= user.name %>" class="form-control <%= (errors.name)?'is-invalid':'' %>"> <!-- 2 -->
40 - <input type="text" id="name" name="name" value="<%= user.name %>" class="form-control <%= (errors.name)?'is-invalid':'' %>"> <!-- 2 --> 63 + <% if(errors.name){ %> <!-- 3 -->
41 - <% if(errors.name){ %> <!-- 3 --> 64 + <span class="invalid-feedback"><%= errors.name.message %></span>
42 - <span class="invalid-feedback"><%= errors.name.message %></span> 65 + <% } %>
43 - <% } %> 66 + </div>
44 - </div>
45 - </div>
46 -
47 - <div class="form-group row">
48 - <label for="email" class="col-sm-3 col-form-label">Email</label>
49 - <div class="col-sm-9">
50 - <input type="text" id="email" name="email" value="<%= user.email %>" class="form-control <%= (errors.email)?'is-invalid':'' %>"> <!-- 2 -->
51 - <% if(errors.email){ %> <!-- 3 -->
52 - <span class="invalid-feedback"><%= errors.email.message %></span>
53 - <% } %>
54 </div> 67 </div>
55 - </div> 68 +
56 - 69 + <div class="form-group row">
57 - <div class="form-group row"> 70 + <label for="email" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Email</label>
58 - <label for="newPassword" class="col-sm-3 col-form-label">New Password</label> 71 + <div class="col-sm-9">
59 - <div class="col-sm-9 col-sm-offset-3"> 72 + <input type="text" id="email" name="email" value="<%= user.email %>" class="form-control <%= (errors.email)?'is-invalid':'' %>"> <!-- 2 -->
60 - <input type="password" id="newPassword" name="newPassword" value="" class="form-control <%= (errors.newPassword)?'is-invalid':'' %>"> <!-- 2 --> 73 + <% if(errors.email){ %> <!-- 3 -->
61 - <% if(errors.newPassword){ %> <!-- 3 --> 74 + <span class="invalid-feedback"><%= errors.email.message %></span>
62 - <span class="invalid-feedback"><%= errors.newPassword.message %></span> 75 + <% } %>
63 - <% } %> 76 + </div>
64 </div> 77 </div>
65 - </div> 78 +
66 - 79 + <div class="form-group row">
67 - <div class="form-group row"> 80 + <label for="newPassword" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">New Password</label>
68 - <label for="passwordConfirmation" class="col-sm-3 col-form-label">Password Confirmation</label> 81 + <div class="col-sm-9 col-sm-offset-3">
69 - <div class="col-sm-9 col-sm-offset-3"> 82 + <input type="password" id="newPassword" name="newPassword" value="" class="form-control <%= (errors.newPassword)?'is-invalid':'' %>"> <!-- 2 -->
70 - <input type="password" id="passwordConfirmation" name="passwordConfirmation" value="" class="form-control <%= (errors.passwordConfirmation)?'is-invalid':'' %>"> <!-- 2 --> 83 + <% if(errors.newPassword){ %> <!-- 3 -->
71 - <% if(errors.passwordConfirmation){ %> <!-- 3 --> 84 + <span class="invalid-feedback"><%= errors.newPassword.message %></span>
72 - <span class="invalid-feedback"><%= errors.passwordConfirmation.message %></span> 85 + <% } %>
73 - <% } %> 86 + </div>
74 </div> 87 </div>
75 - </div>
76 88
77 - <p> 89 + <div class="form-group row">
78 - <small>*Required</small> 90 + <label for="passwordConfirmation" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Password Confirmation</label>
79 - </p> 91 + <div class="col-sm-9 col-sm-offset-3">
92 + <input type="password" id="passwordConfirmation" name="passwordConfirmation" value="" class="form-control <%= (errors.passwordConfirmation)?'is-invalid':'' %>"> <!-- 2 -->
93 + <% if(errors.passwordConfirmation){ %> <!-- 3 -->
94 + <span class="invalid-feedback"><%= errors.passwordConfirmation.message %></span>
95 + <% } %>
96 + </div>
97 + </div>
80 98
81 - <div class="buttons"> 99 + <p>
82 - <a class="btn btn-primary" href="/users/<%= user.username %>">Back</a> 100 + <small style="font-family: 'Archivo', sans-serif; color:red">*Required</small>
83 - <button type="submit" class="btn btn-primary">Submit</button> 101 + </p>
84 - </div>
85 102
86 - <% if(errors.unhandled){ %> <!-- 4 --> 103 + <div class="buttons" style="float:right; font-weight: bold; font-family: 'Archivo', sans-serif;">
87 - <div class="alert alert-danger"> 104 + <a class="btn btn-outline-secondary" href="/users/<%= user.username %>">Back</a>
88 - <%= errors.unhandled %> 105 + <button type="submit" class="btn btn-outline-primary">Submit</button>
89 </div> 106 </div>
90 - <% } %> 107 +
91 - 108 + <% if(errors.unhandled){ %> <!-- 4 -->
92 - 109 + <div class="alert alert-danger">
93 - </form> 110 + <%= errors.unhandled %>
111 + </div>
112 + <% } %>
113 +
114 +
115 + </form>
116 + </div>
117 +
118 +
94 119
95 </div> 120 </div>
96 </body> 121 </body>
......
...@@ -2,75 +2,100 @@ ...@@ -2,75 +2,100 @@
2 <html> 2 <html>
3 <head> 3 <head>
4 <%- include('../partials/head') %> 4 <%- include('../partials/head') %>
5 + <style>
6 + #new {
7 + font-family: 'Archivo', sans-serif;
8 + /* font-family: 'PT Serif', serif; */
9 + font-size:3rem;
10 + font-weight: bold;
11 + margin-bottom: 20px;
12 + }
13 +
14 + div#signup_wrapper{
15 + border: 20px transparent white;
16 + padding: 5px 20px;
17 + position: absolute;
18 + top: 50%;
19 + left: 50%;
20 + width: 450px; height: 250px;
21 + margin-left: -220px;
22 + margin-top: -170px;
23 +
24 + display: flex; flex-direction:column; justify-content:center; align-items: center;
25 + }
26 + </style>
5 </head> 27 </head>
6 <body> 28 <body>
7 <%- include('../partials/nav') %> 29 <%- include('../partials/nav') %>
8 30
9 <div class="container mb-3"> 31 <div class="container mb-3">
32 + <div id="signup_wrapper">
33 + <h3 class="contentBoxTop mb-3" id="new">New User</h3>
10 34
11 - <h3 class="contentBoxTop mb-3">New User</h3> 35 + <form action="/users" method="post">
12 36
13 - <form action="/users" method="post"> 37 + <div class="form-group row">
14 - 38 + <label for="username" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Username*</label>
15 - <div class="form-group row"> 39 + <div class="col-sm-9">
16 - <label for="username" class="col-sm-3 col-form-label">Username*</label> 40 + <input type="text" id="username" name="username" value="<%= user.username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>"> <!-- 1, 2 -->
17 - <div class="col-sm-9"> 41 + <% if(errors.username){ %> <!-- 3 -->
18 - <input type="text" id="username" name="username" value="<%= user.username %>" class="form-control <%= (errors.username)?'is-invalid':'' %>"> <!-- 1, 2 --> 42 + <span class="invalid-feedback"><%= errors.username.message %></span>
19 - <% if(errors.username){ %> <!-- 3 --> 43 + <% } %>
20 - <span class="invalid-feedback"><%= errors.username.message %></span> 44 + </div>
21 - <% } %>
22 </div> 45 </div>
23 - </div> 46 + <div class="form-group row">
24 - <div class="form-group row"> 47 + <label for="name" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Name*</label>
25 - <label for="name" class="col-sm-3 col-form-label">Name*</label> 48 + <div class="col-sm-9">
26 - <div class="col-sm-9"> 49 + <input type="text" id="name" name="name" value="<%= user.name %>" class="form-control <%= (errors.name)?'is-invalid':'' %>"> <!-- 1, 2 -->
27 - <input type="text" id="name" name="name" value="<%= user.name %>" class="form-control <%= (errors.name)?'is-invalid':'' %>"> <!-- 1, 2 --> 50 + <% if(errors.name){ %> <!-- 3 -->
28 - <% if(errors.name){ %> <!-- 3 --> 51 + <span class="invalid-feedback"><%= errors.name.message %></span>
29 - <span class="invalid-feedback"><%= errors.name.message %></span> 52 + <% } %>
30 - <% } %> 53 + </div>
31 </div> 54 </div>
32 - </div> 55 + <div class="form-group row">
33 - <div class="form-group row"> 56 + <label for="email" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Email</label>
34 - <label for="email" class="col-sm-3 col-form-label">Email</label> 57 + <div class="col-sm-9">
35 - <div class="col-sm-9"> 58 + <input type="text" id="email" name="email" value="<%= user.email %>" class="form-control <%= (errors.email)?'is-invalid':'' %>"> <!-- 1, 2 -->
36 - <input type="text" id="email" name="email" value="<%= user.email %>" class="form-control <%= (errors.email)?'is-invalid':'' %>"> <!-- 1, 2 --> 59 + <% if(errors.email){ %>
37 - <% if(errors.email){ %> 60 + <span class="invalid-feedback"><%= errors.email.message %></span>
38 - <span class="invalid-feedback"><%= errors.email.message %></span> 61 + <% } %>
39 - <% } %> 62 + </div>
40 </div> 63 </div>
41 - </div> 64 + <div class="form-group row">
42 - <div class="form-group row"> 65 + <label for="password" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Password*</label>
43 - <label for="password" class="col-sm-3 col-form-label">Password*</label> 66 + <div class="col-sm-9">
44 - <div class="col-sm-9"> 67 + <input type="password" id="password" name="password" value="" class="form-control <%= (errors.password)?'is-invalid':'' %>"> <!-- 1, 2 -->
45 - <input type="password" id="password" name="password" value="" class="form-control <%= (errors.password)?'is-invalid':'' %>"> <!-- 1, 2 --> 68 + <% if(errors.password){ %> <!-- 3 -->
46 - <% if(errors.password){ %> <!-- 3 --> 69 + <span class="invalid-feedback"><%= errors.password.message %></span>
47 - <span class="invalid-feedback"><%= errors.password.message %></span> 70 + <% } %>
48 - <% } %> 71 + </div>
49 </div> 72 </div>
50 - </div> 73 + <div class="form-group row">
51 - <div class="form-group row"> 74 + <label for="passwordConfirmation" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Password Confirmation*</label>
52 - <label for="passwordConfirmation" class="col-sm-3 col-form-label">Password Confirmation*</label> 75 + <div class="col-sm-9 col-sm-offset-3">
53 - <div class="col-sm-9 col-sm-offset-3"> 76 + <input type="password" id="passwordConfirmation" name="passwordConfirmation" value="" class="form-control <%= (errors.passwordConfirmation)?'is-invalid':'' %>"> <!-- 1, 2 -->
54 - <input type="password" id="passwordConfirmation" name="passwordConfirmation" value="" class="form-control <%= (errors.passwordConfirmation)?'is-invalid':'' %>"> <!-- 1, 2 --> 77 + <% if(errors.passwordConfirmation){ %> <!-- 3 -->
55 - <% if(errors.passwordConfirmation){ %> <!-- 3 --> 78 + <span class="invalid-feedback"><%= errors.passwordConfirmation.message %></span>
56 - <span class="invalid-feedback"><%= errors.passwordConfirmation.message %></span> 79 + <% } %>
57 - <% } %> 80 + </div>
58 </div> 81 </div>
59 - </div> 82 + <p>
60 - <p> 83 + <small style="font-family: 'Archivo', sans-serif; color:red;">*Required</small>
61 - <small>*Required</small> 84 + </p>
62 - </p> 85 +
86 + <% if(errors.unhandled){ %> <!-- 4 -->
87 + <div class="alert alert-danger">
88 + <%= errors.unhandled %>
89 + </div>
90 + <% } %>
63 91
64 - <% if(errors.unhandled){ %> <!-- 4 --> 92 + <div class="form-group" style="float:right">
65 - <div class="alert alert-danger"> 93 + <button type="submit" class="btn btn-outline-primary">Submit</button>
66 - <%= errors.unhandled %>
67 </div> 94 </div>
68 - <% } %> 95 + </form>
96 + </div>
69 97
70 - <div class="form-group"> 98 +
71 - <button type="submit" class="btn btn-primary">Submit</button>
72 - </div>
73 - </form>
74 99
75 </div> 100 </div>
76 </body> 101 </body>
......
...@@ -2,41 +2,66 @@ ...@@ -2,41 +2,66 @@
2 <html> 2 <html>
3 <head> 3 <head>
4 <%- include('../partials/head') %> 4 <%- include('../partials/head') %>
5 + <style>
6 + #show {
7 + font-family: 'Archivo', sans-serif;
8 + /* font-family: 'PT Serif', serif; */
9 + font-size:3rem;
10 + font-weight: bold;
11 + margin-bottom: 20px;
12 + }
13 +
14 + div#show_wrapper{
15 + border: 20px transparent white;
16 + padding: 5px 20px;
17 + position: absolute;
18 + top: 50%;
19 + left: 50%;
20 + width: 450px; height: 250px;
21 + margin-left: -220px;
22 + margin-top: -170px;
23 +
24 + display: flex; flex-direction:column; justify-content:center; align-items: center;
25 + }
26 + </style>
5 </head> 27 </head>
6 <body> 28 <body>
7 <%- include('../partials/nav') %> 29 <%- include('../partials/nav') %>
8 30
9 <div class="container mb-3"> 31 <div class="container mb-3">
32 + <div id="show_wrapper">
33 + <h3 class="contentBoxTop" id="show"><%= user.username %></h3>
10 34
11 - <h3 class="contentBoxTop"><%= user.username %></h3> 35 + <form class="user-form" action="/users" method="post">
12 - 36 + <fieldset disabled>
13 - <form class="user-form" action="/users" method="post"> 37 + <div class="form-group row">
14 - <fieldset disabled> 38 + <label for="name" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Name</label>
15 - <div class="form-group row"> 39 + <div class="col-sm-9">
16 - <label for="name" class="col-sm-3 col-form-label">Name</label> 40 + <input class="form-control" type="text" id="name" name="name" value="<%= user.name %>">
17 - <div class="col-sm-9"> 41 + </div>
18 - <input class="form-control" type="text" id="name" name="name" value="<%= user.name %>">
19 </div> 42 </div>
20 - </div> 43 + <div class="form-group row">
21 - <div class="form-group row"> 44 + <label for="email" class="col-sm-3 col-form-label" style="font-weight: bold; font-family: 'Archivo', sans-serif;">Email</label>
22 - <label for="email" class="col-sm-3 col-form-label">Email</label> 45 + <div class="col-sm-9">
23 - <div class="col-sm-9"> 46 + <input class="form-control" type="text" id="email" name="email" value="<%= user.email %>">
24 - <input class="form-control" type="text" id="email" name="email" value="<%= user.email %>"> 47 + </div>
25 </div> 48 </div>
26 - </div> 49 + </fieldset>
27 - </fieldset>
28 - </form>
29 -
30 - <div>
31 - <a class="btn btn-primary" href="/users">Back</a>
32 - <% if(isAuthenticated && currentUser.id == user.id){ %>
33 - <a class="btn btn-primary" href="/users/<%= user.username %>/edit">Edit</a>
34 - <% } %>
35 - <form action="/users/<%= user.username %>?_method=delete" method="post" class="d-inline">
36 - <a class="btn btn-primary" href="javascript:void(0)" onclick="confirm('Do you want to delete this?')?this.parentElement.submit():null;">Delete</a>
37 </form> 50 </form>
51 +
52 + <div>
53 + <a class="btn btn-outline-secondary" href="/">Back</a>
54 + <% if(isAuthenticated && currentUser.id == user.id){ %>
55 + <a class="btn btn-outline-primary" href="/users/<%= user.username %>/edit">Edit</a>
56 + <% } %>
57 + <form action="/users/<%= user.username %>?_method=delete" method="post" class="d-inline">
58 + <a class="btn btn-outline-primary" href="javascript:void(0)" onclick="confirm('Do you want to delete this?')?this.parentElement.submit():null;">Delete</a>
59 + </form>
60 + </div>
38 </div> 61 </div>
39 62
63 +
64 +
40 </div> 65 </div>
41 </body> 66 </body>
42 </html> 67 </html>
...\ No newline at end of file ...\ No newline at end of file
......