From ec468d9311ef7b6bfa0e7dc171b3d64b059fd8a2 Mon Sep 17 00:00:00 2001
From: "Saravanan, Mukesh (PG/T - Comp Sci & Elec Eng)" <ks01855@surrey.ac.uk>
Date: Sat, 29 Apr 2023 09:53:24 +0000
Subject: [PATCH] Replace post.html
---
.../application/templates/forum/post.html | 245 +++++++++++++-----
1 file changed, 174 insertions(+), 71 deletions(-)
diff --git a/frontend/application/templates/forum/post.html b/frontend/application/templates/forum/post.html
index 03df2e6..79b12d7 100644
--- a/frontend/application/templates/forum/post.html
+++ b/frontend/application/templates/forum/post.html
@@ -1,109 +1,212 @@
{# application/templates/forum/post.html #}
-<a class="btn btn--link" href="{{ url_for('frontend.get_posts') }}">Home</a>
+< <a class="home-btn" href="{{ url_for('frontend.get_posts') }}">Home</a>
{% from 'macros.html' import displayField %}
<br>
<br>
-<div>
- {% with messages = get_flashed_messages(with_categories=true) %}
- {% if messages %}
- <ul>
- {% for category, message in messages %}
- <li class="{{ category }}">{{ message }}</li>
- {% endfor %}
- </ul>
- {% endif %}
- {% endwith %}
-</div>
- <section class="row latest">
+<div class="row latest">
- <!-- START posts -->
-
+ <!-- START posts -->
+<div class="col-md-8 offset-md-2">
+ <div class="post-container">
<div class="tile tile--wide">
-
<div class="tile__content">
- <div class="tile__author">
- <img class="rounded-circle" width="45" src="images/users/{{ owner_image }}">
- <h2 class="tile__title"><a href="{{ url_for('frontend.display_user', user_id=post.user_id) }}">{{ post['user_name'] }}</a></h2>
- </div>
-
+ <div class="tile__author">
+ <img class="rounded-circle" width="45" src="images/users/{{ owner_image }}">
+ <h2 class="tile__title"><a href="{{ url_for('frontend.display_user', user_id=post.user_id) }}">{{ post['user_name'] }}</a></h2>
+ </div>
<div class="tile__header">
{{ post['title'] }}
</div>
-
<div class="tile__text">
<p>{{ post['content'] | safe }}</p>
</div>
-
{% if post['image_url'] != '' %}
<img class="post-image" src="images/{{ post['image_url'] }}">
{% endif %}
-
<p class="tile__date">{{ post['date_added'] }}</p>
-
- {% if current_user_id == post['user_id'] %}
- <div class="tile__buttons">
- <a class="tile__btn" href="{{ url_for('frontend.delete_post', post_id=post.id) }}">Delete Post</a>
- {% endif %}
- </div>
-
+ {% if current_user_id == post['user_id'] %}
+ <div class="tile__buttons">
+ <a class="tile__btn" href="{{ url_for('frontend.delete_post', post_id=post.id) }}">Delete Post</a>
</div>
-
+ {% endif %}
</div>
-
</div>
-
<!-- END posts -->
<!-- START comments -->
- {% block title %} COMMENTS {% endblock %}
- {% if comments %}
-
- {% for comment,image in comments %}
-
- <div class="comment__author">
+ <div class="comment-container" style="overflow-y: auto; height: 300px;>
+ <h3 class="comment__title">COMMENTS</h3>
+ {% if comments %}
+ {% for comment, image in comments %}
+ <div class="comment__box{% if current_user_id == comment['user_id'] %} comment__box--self{% else %} comment__box--other{% endif %}">
+ <div class="comment__author">
+ <div class="comment__bubble{% if current_user_id == comment['user_id'] %} comment__bubble--self{% endif %}">
+ <div class="comment__avatar{% if current_user_id == comment['user_id'] %} comment__avatar--self{% endif %}">
+ {% if current_user_id != comment['user_id'] %}
<img class="rounded-circle" width="45" src="images/users/{{ image }}">
- <p class="comment__title">{{ comment['user_name']}}</p>
- </div>
-
- <div class="comment__text">
- <p>{{ comment['content'] | safe }}</p>
- </div>
-
- <div class="comment__header">
- <p class="tile__date">{{ comment['date_added'] }}</p>
- </div>
-
- {% if current_user_id == comment['user_id'] %}
- <div class="tile__buttons">
- <a class="tile__btn" href="{{ url_for('frontend.delete_comment', post_id=post.id, comment_id=comment.id) }}">Delete Comment</a>
+ {% endif %}
</div>
+ {% if current_user_id != comment['user_id'] %}
+ <p class="comment__name">{{ comment['user_name']}}</p>
{% endif %}
-
+ <p class="comment__text">{{ comment['content'] | safe }}</p>
+ <div class="comment__date">
+ <span>{{ comment['date_added'] }}</span>
+ {% if current_user_id == comment['user_id'] %}
+ <a class="comment__btn" href="{{ url_for('frontend.delete_comment', post_id=post.id, comment_id=comment.id) }}">Delete Comment</a>
+ {% endif %}
</div>
-
</div>
-
</div>
-
+ </div>
{% endfor %}
+ {% endif %}
+ <div class="comment__form-container">
+ <form class="comment__form" action="" method="POST">
+ {{ form.csrf_token }}
+ {{ displayField(form.content, 'Type comment here...') }}
+ <button class="btn btn--solid post-btn" type="submit">SUBMIT</button>
+ </form>
+ {{ ckeditor.load(pkg_type="basic") }}
+ {{ ckeditor.config(name='content') }}
+ </div>
+ </div>
+ </div>
+</div>
- {% endif %}
-
- <form class="comment__form" action="" method="POST">
-
- {{ form.csrf_token }}
-
- {{ displayField(form.content, 'Type comment here...') }}
-
- <button class="btn btn--solid post-btn" type="submit">SUBMIT</button>
- </form>
+<!-- END comments -->
- {{ ckeditor.load(pkg_type="basic") }}
- {{ ckeditor.config(name='content') }}
- <!-- END comments -->
+
+</div>
+<style>
+ .latest {
+ padding: 40px 0;
+}
+
+.tile {
+ background-color: #fff;
+ border-radius: 5px;
+ box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+ padding: 40px;
+ position: relative;
+ overflow: hidden;
+ transition: all .3s ease-in-out;
+}
+.tile:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+.tile__author {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+}
+.tile__author img {
+ margin-right: 15px;
+}
+.tile__header {
+ font-size: 28px;
+ font-weight: 700;
+ margin-bottom: 20px;
+}
+.tile__text {
+ font-size: 18px;
+ line-height: 1.5;
+ margin-bottom: 20px;
+}
+.post-image {
+ max-width: 100%;
+ margin-bottom: 20px;
+}
+.tile__date {
+ font-size: 14px;
+ color: #a9a9a9;
+ margin-bottom: 10px;
+}
+.comment__box {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ margin-bottom: 20px;
+}
+.comment__box--self {
+ flex-direction: row-reverse;
+}
+.comment__box--other {
+ flex-direction: row;
+}
+.comment__avatar {
+ margin-bottom: 5px;
+ margin-right: 10px;
+ vertical-align: middle;
+}
+.comment__avatar img {
+ border-radius: 50%;
+}
+.comment__bubble {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ background-color: #61b8f2;
+ padding: 10px;
+ border-radius: 10px;
+ font-size: 16px;
+ line-height: 0;
+ max-width: 100%;
+ position: relative;
+}
+.comment__bubble--self {
+ align-items: flex-end;
+ background-color: #dcf8c6;
+}
+.comment__name {
+ font-weight: 700;
+ margin-bottom: 5px;
+}
+.comment__text {
+ margin: 0;
+}
+.comment__date {
+ margin-top: 0px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 14px;
+ color: #666;
+ margin-bottom: 0;
+}
+.comment__form {
+ display: flex;
+ flex-direction: column;
+ margin-top: 40px;
+ margin-bottom: 60px;
+}
+.post-btn {
+ background-color: #4CAF50;
+ border: none;
+ color: white;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 16px;
+ transition: all 0.3s ease;
+ margin-left: auto;
+}
+.post-btn:hover {
+ background-color: #3e8e41;
+}
+.home-btn {
+ background-color: #2196F3;
+ color: white;
+ padding: 10px;
+ border: none;
+ border-radius: 5px;
+ font-size: 16px;
+ cursor: pointer;
+ margin-bottom: 20px;
--
GitLab