Skip to content

Commit

Permalink
style(ui): improve button styles and layout
Browse files Browse the repository at this point in the history 
Signed-off-by: ramprasathmk <[email protected]>
  • Loading branch information
@ramprasathmk
ramprasathmk committed Nov 27, 2024
1 parent 281c077 commit c67566a
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 39 deletions.
47 changes: 38 additions & 9 deletions views/edit.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,44 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Poem</title>
<link rel="stylesheet" href="/styles.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Edit Poem</h1>
<form action="/poems/<%= poem._id %>" method="POST">
<input type="text" name="title" placeholder="Title" value="<%= poem.title %>" required>
<textarea name="body" placeholder="Poem" required><%= poem.body %></textarea>
<input type="text" name="author" placeholder="Author" value="<%= poem.author %>" required>
<button type="submit">Update Poem</button>
</form>
<body class="light-theme">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Poet App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="/">Home</a>
<a class="nav-link" href="/poems">Poems</a>
</div>
</div>
</div>
</nav>
<div class="container mt-4">
<h1>Edit Poem</h1>
<form action="/poems/<%= poem._id %>" method="POST">
<div class="form-group">
<label for="title">Title</label>
<input type="text" id="title" name="title" class="form-control" placeholder="Title" value="<%= poem.title %>" required>
</div>
<div class="form-group">
<label for="body">Poem</label>
<textarea id="body" name="body" class="form-control" placeholder="Poem" required><%= poem.body %></textarea>
</div>
<div class="form-group">
<label for="author">Author</label>
<input type="text" id="author" name="author" class="form-control" placeholder="Author" value="<%= poem.author %>" required>
</div>
<button type="submit" class="btn btn-primary">Update Poem</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
</body>
</html>
93 changes: 63 additions & 30 deletions views/search.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,71 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Results</title>
<link rel="stylesheet" href="/styles.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.poem-item {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
margin-bottom: 15px;
}
.author {
color: teal;
}
</style>
</head>
<body>
<h1>Search Results for "<%= query %>"</h1>
<h2 align="center">Search by Titles</h2>
<ul>
<% poemsByTitle.forEach(poem => { %>
<li>
<h2><%= poem.title %></h2>
<p><%= poem.body %></p>
<p>By <%= poem.author %></p>
<a href="/poems/<%= poem._id %>/edit">Edit</a>
<form action="/poems/<%= poem._id %>/delete" method="POST">
<button type="submit">Delete</button>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Poet App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="/">Home</a>
<a class="nav-link" href="/poems">Poems</a>
</div>
<form class="form-inline ml-auto" action="/search" method="GET">
<input class="form-control mr-sm-2" type="search" name="query" placeholder="Title or Author" aria-label="Search" required style="width: 400px;">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</li>
<% }) %>
</ul>

<h2 align="center">Search by Authors</h2>
<ul>
<% poemsByAuthor.forEach(poem => { %>
<li>
<h2><%= poem.title %></h2>
<p><%= poem.body %></p>
<p>By <%= poem.author %></p>
<a href="/poems/<%= poem._id %>/edit">Edit</a>
<form action="/poems/<%= poem._id %>/delete" method="POST">
<button type="submit">Delete</button>
</form>
</li>
<% }) %>
</ul>
</div>
</div>
</nav>
<div class="container mt-4">
<h1 class="mb-4">Search Results for "<%= query %>"</h1>
<h2>Search by Titles</h2>
<div class="list-group mb-4">
<% poemsByTitle.forEach(poem => { %>
<div class="poem-item list-group-item">
<h3><%= poem.title %></h3>
<p><%= poem.body %></p>
<p class="author">By <%= poem.author %></p>
<a href="/poems/<%= poem._id %>/edit" class="btn btn-outline-secondary">Edit</a>
<form action="/poems/<%= poem._id %>/delete" method="POST" class="d-inline">
<button type="submit" class="btn btn-outline-danger">Delete</button>
</form>
</div>
<% }) %>
</div>
<h2>Search by Authors</h2>
<div class="list-group">
<% poemsByAuthor.forEach(poem => { %>
<div class="poem-item list-group-item">
<h3><%= poem.title %></h3>
<p><%= poem.body %></p>
<p class="author">By <%= poem.author %></p>
<a href="/poems/<%= poem._id %>/edit" class="btn btn-outline-secondary">Edit</a>
<form action="/poems/<%= poem._id %>/delete" method="POST" class="d-inline">
<button type="submit" class="btn btn-outline-danger">Delete</button>
</form>
</div>
<% }) %>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

0 comments on commit c67566a

Please sign in to comment.