Skip to content

Commit cbf7e2f

Browse files
ankushduttankushdutt
committed
Improve styling
1 parent 15fda13 commit cbf7e2f

File tree

6 files changed

+158
-169
lines changed

6 files changed

+158
-169
lines changed

‎public/stylesheets/style.css‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
/* github.com/plasticneko */
2-
/* bulma css framework by jeremy thomas (github.com/jgthms | bulma.io) */
3-
4-
/* input select */
1+
body{
2+
background: aliceblue;
3+
}
54
.input:focus, .textarea:focus, input[type]:focus, .button:focus {
65
border: 1px solid #4a4a4a;
76
outline: none !important;
@@ -125,17 +124,17 @@ a.nav-item:hover, a.nav-item:active, a.nav-item:link, a.nav-item:visited {
125124
width: 2px;
126125
}
127126

128-
/* Track */
129-
::-webkit-scrollbar-track {
130-
background: #f1f1f1;
131-
}
132-
133-
/* Handle */
134-
::-webkit-scrollbar-thumb {
135-
background: #868;
136-
}
137-
138-
/* Handle on hover */
139-
::-webkit-scrollbar-thumb:hover {
140-
background: #555;
141-
}
127+
/* Track */
128+
::-webkit-scrollbar-track {
129+
background: #f1f1f1;
130+
}
131+
132+
/* Handle */
133+
::-webkit-scrollbar-thumb {
134+
background: rgb(21, 18, 44);
135+
}
136+
137+
/* Handle on hover */
138+
::-webkit-scrollbar-thumb:hover {
139+
background: #555;
140+
}

‎routes/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,15 @@ router.post("/register", function(req, res){
3333

3434
router.post("/login", passport.authenticate("local",
3535
{
36-
successRedirect: "/",
36+
successRedirect: "back",
3737
failureRedirect: "/"
3838
}),function(req, res){
3939
})
4040

4141
router.get("/logout", function(req, res){
4242
req.logout() //just remember this...
4343
// req.flash("success", "Logged you out!")
44-
res.redirect("/")
44+
res.redirect("back")
4545
})
4646

4747
module.exports = router

‎views/blogs/info.ejs‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,28 @@
22
<div class="main-content">
33
<div class="container">
44
<div class="columns is-centered is-multiline has-text-centered">
5-
<div class="column is-8">
5+
<div class="column is-6">
66
<h3 class="title is-3"><b><%=blog.title%></b></h3>
7+
<h6 class="subtitle is-6" style="padding-top: 10px;">Posted by <b><%=blog.author.username%></b> on April 7th 2017 at 9:33pm</h6>
78
<hr>
8-
<img src="<%=blog.image%>" alt="">
9-
<h4 class="title is-4 is-spaced"><%=blog.body%></h4>
10-
<h6 class="subtitle is-6" style="padding-top: 10px;">Posted by <em><%=blog.author.username%></em> on April 7th 2017 at 9:33pm</h6>
9+
<!-- <img src="<%=blog.image%>" alt=""> -->
10+
<p style="text-align:justify"><%=blog.body%></p>
1111
</div>
1212
</div>
1313
</div>
1414
</div>
1515
<center>
16-
<hr width="66%">
16+
<%if(currentUser && blog.author.id.equals(currentUser._id)) {%>
17+
<hr width="43%">
1718
<span style="display: inline-flex;">
18-
<form action="/">
19-
<button class="button is-primary" style="margin-right: 500px;">All Blogs</button>
19+
<form action="/blog/<%=blog._id%>/edit/">
20+
<button class="button is-warning is-outlined" style="margin-right: 50px;">Edit</button>
21+
</form>
22+
<form action="/blog/<%=blog._id%>?_method=DELETE" method="POST">
23+
<button class="button is-danger is-outlined">Delete</button>
2024
</form>
21-
<%if(currentUser && blog.author.id.equals(currentUser._id)) {%>
22-
<form action="/blog/<%=blog._id%>/edit/">
23-
<button class="button is-warning is-outlined" style="margin-right: 50px;">Edit</button>
24-
</form>
25-
<form action="/blog/<%=blog._id%>?_method=DELETE" method="POST">
26-
<button class="button is-danger is-outlined">Delete</button>
27-
</form>
28-
<%}%>
2925
</span>
26+
<%}%>
3027
</center>
3128

3229
<hr/>

‎views/home.ejs‎

Lines changed: 1 addition & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,12 @@
11
<%- include('partials/header') %>
2-
<div class="modal animated fadeIn" id="regmodal">
3-
<div class="modal-background"></div>
4-
<!-- ----------------------------------------
5-
SIGN UP AND LOGIN FORM----------------
6-
---------------------------------------- -->
7-
<div class="modal-content" style="width: 30%;">
8-
<form action="/register" method="POST">
9-
<div class="card" style="padding-top: 20px; border-radius: 10px;">
10-
<div class="card-content">
11-
<!-- --EDIT CODE FOR SIGN UP/LOGIN FORM HERE--- -->
12-
<div class="field">
13-
<label class="label">Username</label>
14-
<div class="control">
15-
<input class="input" type="text" name="username" placeholder="Username">
16-
</div>
17-
</div>
18-
19-
<div class="field">
20-
<label class="label">Password</label>
21-
<div class="control">
22-
<input class="input" type="password" name="password" placeholder="Password">
23-
</div>
24-
</div>
25-
</div>
26-
<footer class="card-footer">
27-
<p class="card-footer-item">
28-
<button formaction="/login" class="button is-primary is-outlined btn-grad" style="width: 100%;">Login</button>
29-
</p>
30-
<p class="card-footer-item">
31-
<button class="button is-primary is-outlined" style="width: 100%;">Sign Up</button>
32-
</p>
33-
</footer>
34-
</div>
35-
</form>
36-
</div>
37-
<button class="modal-close is-large" aria-label="close"></button>
38-
</div>
39-
40-
<!-- -----------------------------------
41-
HOMEPAGE COPIED FROM GITHUB-------------
42-
----------------------------------- --->
43-
<div class="header-wrapper">
44-
<section class="hero-top">
45-
<div class="header">
46-
<!-- navigation links -->
47-
<div class="header-nav">
48-
<nav class="nav">
49-
<div class="nav-center">
50-
<a class="nav-item" href="/">
51-
<b>Home</b>
52-
</a>
53-
<%if(!currentUser){%>
54-
<a class="nav-item" id="regbutton">
55-
<b>Sign-Up/Login</b>
56-
</a>
57-
<%} else{%>
58-
<a class="nav-item" href="/blogs/new">
59-
<b>New Blog</b>
60-
</a>
61-
<a class="nav-item" href="/logout">
62-
<b>Sign Out</b>
63-
</a>
64-
<a class="nav-item -end">
65-
<b>Welcome <%=currentUser.username%></b>
66-
</a>
67-
<%}%>
68-
</div>
69-
</nav>
70-
</div>
71-
<!-- end of navigation links -->
72-
<!-- header titles -->
73-
<div class="header-title">
74-
<section class="hero is-medium has-text-centered">
75-
<div class="hero-body">
76-
<div class="container">
77-
<h1 class="title is-1">Ankush Dutt</h1>
78-
<h3 class="subtitle is-3">The Daily Awesome</h3>
79-
</div>
80-
</div>
81-
</section>
82-
</div>
83-
<!-- end of header titles -->
84-
</div>
85-
</section>
86-
</div>
87-
<!-- end of header -->
88-
89-
<!-- main body content -->
902
<div class="main-content">
913
<div class="container">
924
<div class="columns is-centered is-multiline has-text-centered">
935
<div class="column is-8">
946
<% blogs.forEach(function(blog) { %>
957
<h3 class="title is-3"><b><a href="/blog/<%=blog._id %>" class="has-text-dark"><%=blog.title%></a></b></h3>
968
<!-- <h4 class="title is-4 is-spaced"><%=blog.body%></h4> -->
97-
<h6 class="subtitle is-6" style="padding-top: 10px;">Posted by <b><em><%=blog.author.username%></em></b> on April 7th 2017 at 9:33pm</h6>
9+
<h6 class="subtitle is-6" style="padding-top: 10px;">Posted by <b><%=blog.author.username%></b> on April 7th 2017 at 9:33pm</h6>
9810
<hr/>
9911
<%})%>
10012
<!-- pagingation -->
@@ -107,48 +19,4 @@ HOMEPAGE COPIED FROM GITHUB-------------
10719
</div>
10820
</div>
10921
</div>
110-
<!-- end of main content -->
111-
112-
<!-- footer -->
113-
<div class="footer">
114-
<div class="container">
115-
<div class="has-text-centered">
116-
<!-- nav icons -->
117-
<div class="nav-center">
118-
<a class="nav-item">
119-
<span class="icon">
120-
<i class="fa fa-twitter"></i>
121-
</span>
122-
</a>
123-
<a class="nav-item">
124-
<span class="icon">
125-
<i class="fa fa-facebook"></i>
126-
</span>
127-
</a>
128-
<a class="nav-item">
129-
<span class="icon">
130-
<i class="fa fa-github"></i>
131-
</span>
132-
</a>
133-
</div>
134-
<!-- end of nav icons -->
135-
</div>
136-
</div>
137-
</div>
138-
<!-- -----------------------------------
139-
JAVASCRIPT------------------------------
140-
----------------------------------- --->
141-
<script>
142-
var button = document.getElementById("regbutton")
143-
var modal = document.getElementById("regmodal")
144-
var closebtn = document.getElementsByClassName("modal-close")[0]
145-
146-
button.onclick = function() {
147-
regmodal.classList.toggle("is-active")
148-
}
149-
150-
closebtn.onclick = function(){
151-
regmodal.classList.toggle("is-active")
152-
}
153-
</script>
15422
<%- include('partials/footer') %>

‎views/partials/footer.ejs‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,29 @@
1+
<!-- footer -->
2+
<div class="footer" style="background: rgb(77, 78, 88);">
3+
<div class="container">
4+
<div class="has-text-centered">
5+
<!-- nav icons -->
6+
<div class="nav-center">
7+
<a class="nav-item">
8+
<span class="icon">
9+
<i class="fa fa-twitter"></i>
10+
</span>
11+
</a>
12+
<a class="nav-item">
13+
<span class="icon">
14+
<i class="fa fa-facebook"></i>
15+
</span>
16+
</a>
17+
<a class="nav-item">
18+
<span class="icon">
19+
<i class="fa fa-github"></i>
20+
</span>
21+
</a>
22+
</div>
23+
<!-- end of nav icons -->
24+
</div>
25+
</div>
26+
</div>
127

228
</body>
329
</html>

‎views/partials/header.ejs‎

Lines changed: 100 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,103 @@
1010
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
1111
<!-- end of styles and fonts -->
1212
</head>
13-
<body>
13+
<body>
14+
<div class="header-wrapper">
15+
<section class="hero-top">
16+
<div class="header">
17+
<!-- navigation links -->
18+
<div class="header-nav">
19+
<nav class="nav">
20+
<div class="nav-center">
21+
<a class="nav-item" href="/">
22+
<b>Home</b>
23+
</a>
24+
<%if(!currentUser){%>
25+
<a class="nav-item" id="regbutton">
26+
<b>Sign-Up/Login</b>
27+
</a>
28+
<%} else{%>
29+
<a class="nav-item" href="/blogs/new">
30+
<b>New Blog</b>
31+
</a>
32+
<a class="nav-item" href="/logout">
33+
<b>Sign Out</b>
34+
</a>
35+
<a class="nav-item -end">
36+
<b>Welcome <%=currentUser.username%></b>
37+
</a>
38+
<%}%>
39+
</div>
40+
</nav>
41+
</div>
42+
<!-- end of navigation links -->
43+
<!-- header titles -->
44+
<div class="header-title">
45+
<section class="hero is-medium has-text-centered">
46+
<div class="hero-body">
47+
<div class="container">
48+
<h1 class="title is-1">Ankush Dutt</h1>
49+
<h3 class="subtitle is-3">The Daily Awesome</h3>
50+
</div>
51+
</div>
52+
</section>
53+
</div>
54+
<!-- end of header titles -->
55+
</div>
56+
</section>
57+
</div>
58+
<!-- ------------------------------------MODAL---- -->
59+
<div class="modal animated fadeInDown" id="regmodal">
60+
<div class="modal-background"></div>
61+
<!-- ----------------------------------------
62+
SIGN UP AND LOGIN FORM----------------
63+
---------------------------------------- -->
64+
<div class="modal-content" style="width: 30%;">
65+
<form action="/register" method="POST">
66+
<div class="card" style="padding-top: 20px; border-radius: 10px;">
67+
<div class="card-content">
68+
<!-- --EDIT CODE FOR SIGN UP/LOGIN FORM HERE--- -->
69+
<div class="field">
70+
<label class="label">Username</label>
71+
<div class="control">
72+
<input class="input" type="text" name="username" placeholder="Username">
73+
</div>
74+
</div>
75+
76+
<div class="field">
77+
<label class="label">Password</label>
78+
<div class="control">
79+
<input class="input" type="password" name="password" placeholder="Password">
80+
</div>
81+
</div>
82+
</div>
83+
<footer class="card-footer">
84+
<p class="card-footer-item">
85+
<button formaction="/login" class="button is-primary is-outlined btn-grad" style="width: 100%;">Login</button>
86+
</p>
87+
<p class="card-footer-item">
88+
<button class="button is-primary is-outlined" style="width: 100%;">Sign Up</button>
89+
</p>
90+
</footer>
91+
</div>
92+
</form>
93+
</div>
94+
<button class="modal-close is-large" aria-label="close"></button>
95+
</div>
96+
97+
<!-- -----------------------------------
98+
JAVASCRIPT------------------------------
99+
----------------------------------- --->
100+
<script>
101+
var button = document.getElementById("regbutton")
102+
var modal = document.getElementById("regmodal")
103+
var closebtn = document.getElementsByClassName("modal-close")[0]
104+
105+
button.onclick = function() {
106+
regmodal.classList.toggle("is-active")
107+
}
108+
109+
closebtn.onclick = function(){
110+
regmodal.classList.toggle("is-active")
111+
}
112+
</script>

0 commit comments

Comments
 (0)