Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved "Create Post" Page #113

Merged
merged 1 commit into from
Oct 31, 2024
Merged

Improved "Create Post" Page #113

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
323 changes: 116 additions & 207 deletions views/admin/add-post.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,224 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add a New Blog</title>
<style>
/* Base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Arial", sans-serif;
}

body {
background-color: #f7f7f7;
display: flex;
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add a New Blog</title>
<style>
.container {
max-width: 1300px;
margin: 0 auto;
padding: 0 10px;
}

button {
width: 100%;
padding: 14px;
background-color: #ff5f6d;
color: #fff;
border: none;
font-size: 1.2rem;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 20px;
}

button:hover {
background-color: #ff4e50;
}

/* New classes for styling */
.blog-form {
display: flex;
gap: 20px;
}

.main-container {
flex-grow: 1;
border-radius: 5px;
}

.message {
background-color: #f0a2a8;
color: #000000;
}

.prop-container {
border-radius: 5px;
display: flex;
flex-direction: column;
}

.image-placeholder {
background-color: #ffffff;
width: 100%;
height: 100px;
border: 0.5px dashed #ddd;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #999;
outline: 1px dashed #000;
}

/* Responsive styles */
@media (max-width: 768px) {
.blog-form {
flex-direction: column;
min-height: 100vh;
color: #333;
/* Stack elements vertically */
}

/* Navbar */
.navbar {
.main-container,
.prop-container {
width: 100%;
background-color: #fff;
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar h2 {
font-size: 24px;
font-weight: bold;
color: #333;
}

.navbar a {
text-decoration: none;
margin-left: 20px;
font-size: 16px;
color: #333;
font-weight: bold;
transition: color 0.3s ease;
}

.navbar a:hover {
color: #ff5f6d;
}

/* Content Wrapper */
.content-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px;
height: 100%;
width: 100%;
}

/* Left Side */
.content-left {
width: 50%;
}

.content-left h1 {
font-size: 3rem;
font-weight: bold;
color: #ff5f6d;
}

.content-left p {
font-size: 1.5rem;
color: #555;
margin-top: 20px;
}

/* Right Side (Form) */
.content-right {
width: 45%;
background-color: #fff;
padding: 40px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
animation: fadeInUp 1s ease-out;
}

.blog-form-container h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #333;
text-align: center;
}

.blog-form .form-group {
margin-bottom: 20px;
}

label {
display: block;
font-size: 1.2rem;
color: #333;
/* Full width on small screens */
margin-bottom: 10px;
}

input[type="text"],
textarea {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 1rem;
color: #555;
transition: border-color 0.3s;
}

input[type="text"]:focus,
textarea:focus {
border-color: #ff5f6d;
outline: none;
}

textarea {
resize: none;
/* Space between elements */
}

button {
width: 100%;
padding: 14px;
background-color: #ff5f6d;
color: #fff;
border: none;
border-radius: 8px;
font-size: 1.2rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
font-size: 1rem;
/* Smaller button text */
}

.image-placeholder {
height: 80px;
/* Adjust height for smaller screens */
}
}
</style>
</head>
<a href="/dashboard">&larr; Back</a>
<h1 style="margin: 0px">Add New Post</h1>
<hr>

<form class="blog-form" method="post" action="/add-post">
<div class="main-container">
<% if (typeof message !=='undefined' && message.errors && message.errors.length) { %>
<div class="message">
<% message.errors.forEach(err=> { %>
<p>
<%= err.msg %>
</p>
<% }); %>
</div>
<% } %>

button:hover {
background-color: #ff4e50;
}
<label for="blog-title"><b>Blog Title</b></label>
<input name="title" type="text" id="blog-title" placeholder="Enter your blog title..." />

/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
<label for="blog-content"><b>Blog Content</b></label>
<textarea id="blog-content" rows="10" name="body" placeholder="Write your blog content here..."></textarea>
</div>

/* Responsive */
@media screen and (max-width: 768px) {
.content-wrapper {
flex-direction: column;
padding: 20px;
}

.content-left,
.content-right {
width: 100%;
}

.content-left {
margin-bottom: 30px;
text-align: center;
}
}
</style>
</head>
<body>

<div class="content-wrapper">
<div class="content-left">
<h1>Create Your Masterpiece</h1>
<p>Share your thoughts and experiences with the world!</p>
</div>
<div class="prop-container">
<div>
<label for="author-name"><b>Author Name</b></label>
<input type="text" id="author-name" placeholder="Your name..." name="author" />
</div>

<div class="content-right">
<div class="blog-form-container">
<% if (typeof message !== 'undefined' && message.errors && message.errors.length) { %>
<div class="message" style="background-color: #f0a2a8; color: #000000;">
<% message.errors.forEach(err => { %>
<p><%= err.msg %></p>
<% }); %>
</div>
<% } %>
<h2>Add a New Blog</h2>
<form class="blog-form" method="post" action="/add-post">
<div class="form-group">
<label for="blog-title">Blog Title</label>
<input
name ="title"
type="text"
id="blog-title"
placeholder="Enter your blog title..."
/>
</div>
<div class="form-group">
<label for="author-name">Author Name</label>
<input type="text" id="author-name" placeholder="Your name..." name="author"/>
</div>
<div class="form-group">
<label for="blog-content">Blog Content</label>
<textarea
id="blog-content"
rows="10"
name="body"
placeholder="Write your blog content here..."
></textarea>
</div>
<button type="submit">Publish Blog</button>
</form>
</div>
<div>
<label for="author-name"><b>Blog Poster</b></label>
<div class="image-placeholder">
<p>Image Placeholder</p>
</div>
</div>
</body>
</html>

<button type="submit">Publish Blog</button>
</div>
</form>

</html>
Loading