Skip to content

Commit cbac836

Browse files
nooobcodernooobcoder
committed
Post UI design complete
1 parent db47ab2 commit cbac836

File tree

11 files changed

+673
-164
lines changed

11 files changed

+673
-164
lines changed

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 3001
3+
}

‎header.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
font-weight: 600;
1212
color: #2d37ff;
1313
}
14-
14+
#logo_container {
15+
cursor: pointer;
16+
}
1517
#header_logo_tag {
1618
font-family: "Dancing Script", sans-serif;
1719
font-weight: 400;

‎html/bloglist/js/bloglist.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
// Take user to the homepage when he clicks on the site logo.
2+
const bindLogoToHomepage = () => {
3+
const logo = document.getElementById("logo_container");
4+
logo.addEventListener("click", () => {
5+
window.location.href = "/";
6+
});
7+
};
8+
bindLogoToHomepage();
9+
110
var deletePostModal = document.getElementById("deletePostModal");
211
var signUpModal = document.getElementById("signUpModal");
312
var signInModal = document.getElementById("signInModal");

‎html/posts/css/post.css

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
html,
2+
body {
3+
height: 100%;
4+
}
5+
6+
body {
7+
background-size: cover;
8+
-webkit-background-size: cover;
9+
-moz-background-size: cover;
10+
-o-background-size: cover;
11+
}
12+
13+
/* The Modal (background) */
14+
.modal {
15+
display: none; /* Hidden by default */
16+
position: fixed; /* Stay in place */
17+
z-index: 1; /* Sit on top */
18+
left: 0;
19+
top: 0;
20+
width: 100%; /* Full width */
21+
height: 100%; /* Full height */
22+
overflow: auto; /* Enable scroll if needed */
23+
background-color: rgb(0, 0, 0); /* Fallback color */
24+
background-color: rgba(0, 0, 0, 0.7); /* Black w/ opacity */
25+
}
26+
27+
/* Modal Content/Box */
28+
.modal-content {
29+
background-color: #fefefe;
30+
margin: 5% auto; /* 15% from the top and centered */
31+
padding: 20px;
32+
border: 1px solid #888;
33+
width: 40%; /* Could be more or less, depending on screen size */
34+
}
35+
36+
/* The Close Button */
37+
.close {
38+
color: #818181;
39+
float: right;
40+
font-size: 40px;
41+
font-weight: bolder;
42+
}
43+
44+
.close:hover,
45+
.close:focus {
46+
color: black;
47+
text-decoration: none;
48+
cursor: pointer;
49+
}
50+
51+
.modal_header {
52+
font-family: "Roboto Condensed";
53+
font-size: 20px;
54+
text-align: center;
55+
}
56+
57+
.input_container {
58+
margin: 20px 0px;
59+
font-family: "Roboto Condensed";
60+
}
61+
62+
.input_container label {
63+
font-weight: bold;
64+
}
65+
66+
#compose_post_title {
67+
width: 50%;
68+
}
69+
70+
.input_container input {
71+
margin-top: 5px;
72+
background-color: #f1f1f1;
73+
padding: 5px 15px;
74+
width: 100%;
75+
box-sizing: border-box;
76+
-webkit-box-sizing: border-box;
77+
-moz-box-sizing: border-box;
78+
border: none;
79+
height: 40px;
80+
}
81+
82+
.input_container textarea {
83+
margin-top: 5px;
84+
background-color: #f1f1f1;
85+
padding: 5px 15px;
86+
width: 100%;
87+
font-family: inherit;
88+
font-size: inherit;
89+
box-sizing: border-box;
90+
-webkit-box-sizing: border-box;
91+
-moz-box-sizing: border-box;
92+
border: none;
93+
height: 200px;
94+
}
95+
96+
.sign_in_modal_footer {
97+
margin-top: 30px;
98+
font-family: sans-serif;
99+
font-weight: bold;
100+
text-align: center;
101+
}
102+
103+
#btn_sign_up_submit,
104+
#btn_sign_in_submit {
105+
background-color: #5eb762;
106+
width: 100%;
107+
color: white;
108+
box-sizing: border-box;
109+
font-size: 15px;
110+
-webkit-box-sizing: border-box;
111+
-moz-box-sizing: border-box;
112+
height: 40px;
113+
cursor: pointer;
114+
border: none;
115+
}
116+
117+
#btn_create_post_submit {
118+
background-color: #5eb762;
119+
width: 15%;
120+
color: white;
121+
margin: 0 auto;
122+
display: block;
123+
box-sizing: border-box;
124+
font-size: 15px;
125+
-webkit-box-sizing: border-box;
126+
-moz-box-sizing: border-box;
127+
height: 35px;
128+
cursor: pointer;
129+
border: none;
130+
}
131+
132+
#post_container {
133+
display: flex;
134+
margin: 10px 50px;
135+
justify-content: space-between;
136+
flex-direction: column;
137+
}
138+
139+
#post_heading {
140+
align-self: center;
141+
font-family: "Roboto Condensed", sans-serif;
142+
}
143+
144+
#author_edit_post {
145+
align-items: center;
146+
display: flex;
147+
justify-content: space-between;
148+
}
149+
150+
#btn_edit_post {
151+
background-color: #e33864;
152+
color: white;
153+
border: none;
154+
padding: 10px;
155+
box-shadow: 0px 10px 12px 1px #f0b3c3;
156+
-webkit-box-shadow: 0px 10px 12px 1px #f0b3c3;
157+
-moz-box-shadow: 0px 10px 12px 1px #f0b3c3;
158+
}
159+
160+
.btn_to_left {
161+
background-color: #e33864;
162+
color: white;
163+
border: none;
164+
margin-top: 10px;
165+
padding: 10px;
166+
align-self: flex-start;
167+
width: 10%;
168+
margin-bottom: 10px;
169+
border-radius: 3px;
170+
box-shadow: 0px 10px 12px 1px #f0b3c3;
171+
-webkit-box-shadow: 0px 10px 12px 1px #f0b3c3;
172+
-moz-box-shadow: 0px 10px 12px 1px #f0b3c3;
173+
}
174+
175+
#author_name {
176+
font-family: "Dancing Script", sans-serif;
177+
}
178+
179+
#post_body {
180+
font-family: "Slabo 27px";
181+
text-align: justify;
182+
font-size: large;
183+
text-justify: inter-word;
184+
}
185+
186+
#like_counter {
187+
font-family: monospace;
188+
margin-bottom: 30px;
189+
}
190+
191+
#comment_composer {
192+
align-self: flex-start;
193+
font-family: "Courier New", Courier, monospace;
194+
}
195+
196+
#post_comments {
197+
list-style-type: none;
198+
margin-bottom: 10px;
199+
background-color: silver;
200+
padding: 30px 20px 20px 20px;
201+
}
202+
.comment {
203+
background-color: white;
204+
margin-bottom: 10px;
205+
padding: 15px 8px;
206+
}

‎html/posts/js/post.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// Take user to the homepage when he clicks on the site logo.
2+
const bindLogoToHomepage = () => {
3+
const logo = document.getElementById("logo_container");
4+
logo.addEventListener("click", () => {
5+
window.location.href = "/";
6+
});
7+
};
8+
bindLogoToHomepage();
9+
10+
var signUpModal = document.getElementById("signUpModal");
11+
var signInModal = document.getElementById("signInModal");
12+
13+
const showSignUpModal = () => {
14+
signUpModal.style.display = "block";
15+
};
16+
17+
const showSignInModal = () => {
18+
signInModal.style.display = "block";
19+
};
20+
21+
const raiseSignUp = () => {
22+
signInModal.style.display = "none";
23+
showSignUpModal();
24+
};
25+
26+
const span = document.getElementsByClassName("close");
27+
for (const close of span) {
28+
close.onclick = function () {
29+
signUpModal.style.display = "none";
30+
signInModal.style.display = "none";
31+
};
32+
}
33+
34+
// When the user clicks anywhere outside of the modal, close it
35+
window.onclick = function (event) {
36+
if (event.target == signUpModal) {
37+
signUpModal.style.display = "none";
38+
} else if (event.target == signInModal) {
39+
signInModal.style.display = "none";
40+
}
41+
};
42+
43+
signUpModal.style.display = "none";
44+
signInModal.style.display = "none";
45+
46+
const likesCount = 0;
47+
const describeLikes = () => {
48+
const likeTag = document.getElementById("like_counter");
49+
likesCount === 0
50+
? (likeTag.innerText = "Be the first one to like this!")
51+
: "";
52+
likesCount += 1;
53+
};
54+
describeLikes();

‎html/posts/post.css

Whitespace-only changes.

0 commit comments

Comments
 (0)