diff --git a/frontend/application/templates/_messages.html b/frontend/application/templates/_messages.html
index fd55a380f4bdf5a1e2c66af4a859cdb5adc3bbf1..1cc31eb6655453eb72ef9313539ad19f6f594dfe 100644
--- a/frontend/application/templates/_messages.html
+++ b/frontend/application/templates/_messages.html
@@ -1,11 +1,75 @@
-<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>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Flash Messages</title>
+ <style>
+ .flash-messages {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .flash-messages__list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+ .flash-messages__item {
+ margin: 0 0 10px;
+ padding: 15px;
+ border-radius: 5px;
+ font-size: 16px;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ }
+ .flash-messages__item--error {
+ background-color: #f44336;
+ border: 1px solid #f44336;
+ }
+ .flash-messages__item--warning {
+ background-color: #ff9800;
+ border: 1px solid #ff9800;
+ }
+ .flash-messages__item--success {
+ background-color: #4caf50;
+ border: 1px solid #4caf50;
+ }
+ .flash-messages__icon {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ margin-right: 10px;
+ border-radius: 50%;
+ }
+ .flash-messages__icon--error {
+ background-color: #f44336;
+ }
+ .flash-messages__icon--warning {
+ background-color: #ff9800;
+ }
+ .flash-messages__icon--success {
+ background-color: #4caf50;
+ }
+ .flash-messages__text {
+ color: #fff;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="flash-messages">
+ {% with messages = get_flashed_messages(with_categories=true) %}
+ {% if messages %}
+ <ul class="flash-messages__list">
+ {% for category, message in messages %}
+ <li class="flash-messages__item flash-messages__item--{{ category }}">
+ <span class="flash-messages__icon"></span>
+ <span class="flash-messages__text">{{ message }}</span>
+ </li>
+ {% endfor %}
+ </ul>
+ {% endif %}
+ {% endwith %}
+ </div>
+ </body>
+</html>
diff --git a/frontend/application/templates/forum/index.html b/frontend/application/templates/forum/index.html
index 3438f947a6f8fa453948e203c91d6cd5b73fe4de..dadd9a6b7c2bd4e0a30a2982330f9de43886ce3f 100644
--- a/frontend/application/templates/forum/index.html
+++ b/frontend/application/templates/forum/index.html
@@ -3,70 +3,82 @@
{% block pageContent%}
+<style>
+ body {
+ background-color: #f8f9fa;
+ color: #212529;
+ }
+
+ .card-header {
+ background-color: #c6e2ff;
+ color: white;
+ }
+
+ .nav-link.active {
+ background-color: #6c757d;
+ color: white;
+ }
+</style>
+
<div>
-
-
-</div>
+</div>
- <div class="col-md-6 gedf-main">
- <div class="card gedf-card">
- <div class="card-header">
- <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
- <li class="nav-item">
- <a class="nav-link active" id="posts-tab" data-toggle="tab" href="#posts" role="tab" aria-controls="posts" aria-selected="true">Start a discussion</a>
- </li>
- </ul>
- </div>
- <div class="card-body">
- <div class="tab-content" id="myTabContent">
- <div class="tab-pane fade show active" id="posts" role="tabpanel" aria-labelledby="posts-tab">
- <div class="form-group">
- <label class="sr-only" for="message">post</label>
- <a class="btn btn--link" href="{{ url_for('frontend.create_post') }}">New Post</a>
- </div>
+<div class="col-md-6 gedf-main">
+ <div class="card gedf-card">
+ <div class="card-header">
+ <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
+ <li class="nav-item">
+ <a class="nav-link active" id="posts-tab" data-toggle="tab" href="#posts" role="tab" aria-controls="posts" aria-selected="true">Start a discussion</a>
+ </li>
+ </ul>
+ </div>
+ <div class="card-body">
+ <div class="tab-content" id="myTabContent">
+ <div class="tab-pane fade show active" id="posts" role="tabpanel" aria-labelledby="posts-tab">
+ <div class="form-group">
+ <label class="sr-only" for="message">post</label>
+ <a class="btn btn--link" href="{{ url_for('frontend.create_post') }}">New Post</a>
</div>
</div>
-
</div>
</div>
- {% for post,image in data %}
- <div class="card gedf-card">
- <div class="card-header">
+ </div>
+ {% for post,image in data %}
+ <div class="card gedf-card">
+ <div class="card-header">
<div class="d-flex justify-content-between align-items-center">
- <div class="d-flex justify-content-between align-items-center">
- <div class="mr-2">
- <img class="rounded-circle" width="45" src="images/users/{{ image }}">
- </div>
- <div class="ml-2">
- <div class="h5 m-0"><a href="{{ url_for('frontend.display_user', user_id=post.user_id) }}">{{ post['user_name'] }}</a></div>
+ <div class="d-flex justify-content-between align-items-center">
+ <div class="mr-2">
+ <img class="rounded-circle" width="45" src="images/users/{{ image }}">
+ </div>
+ <div class="ml-2">
+ <div class="h5 m-0"><a href="{{ url_for('frontend.display_user', user_id=post.user_id) }}">{{ post['user_name'] }}</a></div>
+ </div>
</div>
- </div>
- <div>
- <div class="dropdown">
+ <div>
+ <div class="dropdown">
+ </div>
</div>
- </div>
</div>
- </div>
- <div class="card-body">
+ </div>
+ <div class="card-body">
<div class="text-muted h7 mb-2"> <i class="fa fa-clock-o"></i>{{ post['date_added']}}</div>
<a class="card-link" href="{{ url_for('frontend.display_post', post_id=post.id) }}">
- <h5 class="card-title">{{ post['title'] }}</h5>
+ <h5 class="card-title">{{ post['title'] }}</h5>
</a>
+ {% if post['image_url'] != '' %}
+ <img class="post-image" src="static/images/{{ post['image_url'] }}">
+ {% endif %}
<p class="card-text">{{ post.content | safe }}</p>
- </div>
- <div class="card-footer">
+
+ </div>
+ <div class="card-footer">
<a href="{{ url_for('frontend.display_post', post_id=post.id) }}" class="card-link"><i class="fa fa-comment"></i> Comment</a>
- </div>
</div>
- {% endfor %}
</div>
+{% endfor %}
+</div>
{% endblock %}
-
-
-
-
-
-
diff --git a/frontend/application/templates/forum/post.html b/frontend/application/templates/forum/post.html
index 03df2e60b8478f05057080d47bdfd2b4d0996071..79b12d7bed989ea1245df2aeb763e9d7998e278f 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;
diff --git a/frontend/application/templates/forum/profile.html b/frontend/application/templates/forum/profile.html
index 68afac69d84d7dbad9407e0dc4511ca6a9877060..db2360e3d61004610e1336a3092d4c78b128216b 100644
--- a/frontend/application/templates/forum/profile.html
+++ b/frontend/application/templates/forum/profile.html
@@ -1,66 +1,134 @@
-<a class="btn btn--link" href="{{ url_for('frontend.get_posts') }}">Home</a>
-<br>
-<br>
+ <!DOCTYPE html>
+<html>
+ <head>
+ <title>Login Page</title>
+ <style>
+ .container {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ max-width: 800px;
+ margin: 0 auto;
+ }
+ .profile {
+ width: 300px;
+ padding: 20px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ margin-bottom: 20px;
+ }
+ .posts {
+ width: calc(100% - 320px);
+ height: 500px;
+ overflow-y: scroll;
+ padding-left: 20px;
+ }
+ .post {
+ margin-bottom: 20px;
+ padding: 20px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ }
+ .post-title {
+ margin-top: 0;
+ font-weight: bold;
+ }
+ .post-content {
+ margin-bottom: 0;
+ }
+ .form-input {
+ margin-bottom: 10px;
+ }
+ .form-input input,
+ .form-input select {
+ display: block;
+ width: 80%;
+ padding: 10px;
+ font-size: 16px;
+ border-radius: 5px;
+ border: 1px solid #ccc;
+ }
+ .form-input label {
+ display: block;
+ font-weight: bold;
+ margin-bottom: 5px;
+ }
+ .form-submit {
+ background-color: #2196F3;
+ color: white;
+ padding: 10px;
+ border: none;
+ border-radius: 5px;
+ font-size: 16px;
+ cursor: pointer;
+ }
+ .home-btn {
+ background-color: #2196F3;
+ color: white;
+ padding: 10px;
+ border: none;
+ border-radius: 5px;
+ font-size: 16px;
+ cursor: pointer;
+ margin-bottom: 20px;
+ }
+ .profile {
+ width: 45%;
+ margin-right: 20px;
+ }
+ }
-<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>
-
-<form action="{{ url_for('frontend.display_currentuser') }}" method="POST", enctype="multipart/form-data">
+ </style>
+ </head>
- {{ form.csrf_token }}
-
- <img class="rounded-circle" width="100" src="images/users/{{session['user'].image_url }}">
- <br>
- <input type="file" id="image" name="image" placeholder="Upload new profile picture">
- <br>
- <br>
- {{user['first_name']}}
- <br>
- <input type="text" id="first_name" name="first_name" placeholder="Enter modified first name">
- <br>
- <br>
- {{user['last_name']}}
- <br>
- <input type="text" id="last_name" name="last_name" placeholder="Enter modified last name">
- <br>
- <br>
- {{user['email']}}
- <br>
- <br>
- {{user['phone_number']}}
- <br>
- <input type="text" id="phone_number" name="phone_number" placeholder="Enter modified phone number">
+ <a class="home-btn" href="{{ url_for('frontend.get_posts') }}">Home</a>
<br>
<br>
- {{user['user_role']}}
- {% if user['user_role'] == 'student' %}
- <br>
- <select id="user_role" name="user_role">
- <option value=""></option>
- <option value="graduate">Graduate</option>
- </select>
- {% endif %}
- <br>
- <br>
- <input type="submit" value="Update">
-</form>
-
-{% block title %}YOUR POSTS{% endblock %}
-
-{% for post in posts %}
-
- <div class="h4 m-0"><a href="{{ url_for('frontend.display_post', post_id=post.id) }}">{{ post['title'] }}</a></div>
- <p class="card-text">{{ post.content | safe }}</p>
-
-{% endfor %}
-
+ <div class="container">
+ <div class="profile">
+ <img class="rounded-circle" width="100" src="images/users/{{session['user'].image_url }}">
+ <h2>{{user['first_name']}} {{user['last_name']}}</h2>
+ <p>{{user['email']}}</p>
+ <p>{{user['phone_number']}}</p>
+ <p>{{user['user_role']}}</p>
+ <form action="{{ url_for('frontend.display_currentuser') }}" method="POST" enctype="multipart/formdata">
+{{ form.csrf_token }}
+<div class="form-input">
+<input type="file" id="image" name="image" placeholder="Upload new profile picture">
+</div>
+<div class="form-input">
+<label for="first_name">First Name:</label>
+<input type="text" id="first_name" name="first_name" value="{{user['first_name']}}">
+</div>
+<div class="form-input">
+<label for="last_name">Last Name:</label>
+<input type="text" id="last_name" name="last_name" value="{{user['last_name']}}">
+</div>
+<div class="form-input">
+<label for="phone_number">Phone Number:</label>
+<input type="text" id="phone_number" name="phone_number" value="{{user['phone_number']}}">
+</div>
+{% if user['user_role'] == 'student' %}
+<div class="form-input">
+<label for="user_role">User Role:</label>
+<select id="user_role" name="user_role">
+<option value=""></option>
+<option value="graduate">Graduate</option>
+</select>
+</div>
+{% endif %}
+<input class="form-submit" type="submit" value="Update">
+</form>
+</div> <div class="posts" style="flex-grow: 1;">
+ <h2>YOUR POSTS</h2>
+ {% for post in posts %}
+ <div class="post">
+ <h3 class="post-title"><a href="{{ url_for('frontend.display_post', post_id=post.id) }}">{{ post['title'] }}</a></h3>
+ <p class="post-content">{{ post.content | safe }}</p>
+ </div>
+ {% endfor %}
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/application/templates/forum/user.html b/frontend/application/templates/forum/user.html
index 9b0de10f4da4380c5a2e39e704c4c43776eaad22..f4d3b4ee2d5e633dab220731d1e859e8a2fd34e3 100644
--- a/frontend/application/templates/forum/user.html
+++ b/frontend/application/templates/forum/user.html
@@ -1,28 +1,44 @@
-<a class="btn btn--link" href="{{ url_for('frontend.get_posts') }}">Home</a>
-<br>
-<br>
-<img class="rounded-circle" width="100" src="images/users/{{ image }}">
-<br>
-<br>
-{{name}}
-<br>
-{{email}}
-<br>
-{{role}}
-<br>
-<br>
-
-{% block title %}POSTS OF THE USER{% endblock %}
-
-{% for post in posts %}
- <div class="h4 m-0"><a href="{{ url_for('frontend.display_post', post_id=post.id) }}">{{ post['title'] }}</a></div>
- <p class="card-text">{{ post.content | safe }}</p>
- <br>
-
-{% endfor %}
-
-
-
-
-
-
+<head>
+<style>
+ .home-btn {
+ background-color: #2196F3;
+ color: white;
+ padding: 10px;
+ border: none;
+ border-radius: 5px;
+ font-size: 16px;
+ cursor: pointer;
+ margin-bottom: 20px;
+</style>
+</head>
+{% extends "base.html" %}
+
+{% block content %}
+ <div class="container">
+ <div class="row">
+ <div class="col-md-4">
+ <a class="home-btn" href="{{ url_for('frontend.get_posts') }}">Home</a>
+ <br><br>
+ <img class="rounded-circle" width="100" src="images/users/{{ image }}">
+ <br><br>
+ <div class="h5">{{ name }}</div>
+ <div>{{ email }}</div>
+ <div>{{ role }}</div>
+ </div>
+ <div class="col-md-8">
+ <h2>POSTS OF THE USER</h2>
+ <div style="height: 1500px; overflow-y: scroll;">
+ {% for post in posts %}
+ <div class="card">
+ <div class="card-body">
+ <h4 class="card-title"><a href="{{ url_for('frontend.display_post', post_id=post.id) }}">{{ post['title'] }}</a></h4>
+ <p class="card-text">{{ post.content | safe }}</p>
+ </div>
+ </div>
+ <br>
+ {% endfor %}
+ </div>
+ </div>
+ </div>
+ </div>
+{% endblock %}
diff --git a/frontend/application/templates/navbar.html b/frontend/application/templates/navbar.html
index fca276562ebca11b4658312bf2238a2456739b9c..91216b749c7fa777c45e3ba757542a0f512775ab 100644
--- a/frontend/application/templates/navbar.html
+++ b/frontend/application/templates/navbar.html
@@ -1,17 +1,78 @@
-<nav class="navbar navbar-light bg-white">
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ .navbar-brand {
+ font-size: 2rem;
+ font-weight: bold;
+ }
+
+ .navbar-collapse {
+ justify-content: flex-end;
+ }
+
+ .navbar-nav li a {
+ font-size: 1.2rem;
+ font-weight: bold;
+ color: #555;
+ }
+
+ .navbar-nav li a:hover {
+ color: #000;
+ }
+
+ .form-inline input[type="text"] {
+ font-size: 1.2rem;
+ padding: 5px 10px;
+ border-radius: 20px;
+ }
+
+ .btn-outline-success {
+ color: #fff;
+ background-color: #2a72bc;
+ }
+
+ .btn-outline-success:hover {
+ background-color: #218838;
+ border-color: #1e7e34;
+ }
+
+ .navbar-toggler-icon {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+ }
+
+ .navbar-toggler {
+ border: none;
+ background-color: transparent;
+ }
+
+ /* Center the search bar */
+ .navbar-collapse form {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ </style>
+</head>
+<body>
+ <nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
- <ul class="nav navbar-nav">
- <li><a href="{{ url_for('frontend.get_posts') }}" class="navbar-brand">SurreySocial</a></li>
- </ul>
- <form action="{{ url_for('frontend.search') }}" method="POST">
- <input type="text" id="keywords" name="keywords" placeholder="Search content keywords
- ">
- <ul class="nav navbar-nav">
- <li><a class="btn btn--link" href="{{ url_for('frontend.search') }}">Search</a></li>
+ <a class="navbar-brand" href="{{ url_for('frontend.get_posts') }}">SurreySocial</a>
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarNav">
+ <ul class="navbar-nav ml-auto">
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('frontend.logout') }}">Logout</a>
+ </li>
</ul>
- </form>
- <ul class="nav navbar-nav pull-right">
- <li><a class="btn btn--link" href="{{ url_for('frontend.logout') }}">Logout</a></li>
- </ul>
+ <form class="form-inline my-2 my-lg-0" action="{{ url_for('frontend.search') }}" method="POST">
+ <input class="form-control mr-sm-2" type="text" id="keywords" name="keywords" placeholder="Search content keywords">
+ <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+ </form>
+ </div>
</div>
-</nav>
+ </nav>
+</body>
+</html>
diff --git a/frontend/application/templates/sidebar.html b/frontend/application/templates/sidebar.html
index 5a514cceb9d81b487c85618fd95bd67c079fc23a..a95be73a38ccab0e300a99e3f75857fe37c4206f 100644
--- a/frontend/application/templates/sidebar.html
+++ b/frontend/application/templates/sidebar.html
@@ -1,24 +1,52 @@
+<head>
+ <style>
+ .card{
+ background-color: #f5f5f5;
+ border: 1px solid #ddd;
+ }
+ .rounded-circle{
+ float:left;
+ margin-right:10px;
+ }
+ .h7 text-muted{
+ color: #666;
+ }
+ .h7{
+ color: #555;
+ }
+ .title__category{
+ color: #555;
+ font-weight: bold;
+ }
+ .btn btn--link{
+ color: #007bff;
+ text-decoration:none;
+ }
+ </style>
+</head>
+
+<body>
<div class="col-md-3">
<div class="card">
<div class="card-body">
- <img class="rounded-circle" width="45" src="images/users/{{ session['user'].image_url }}">
- <div class="h5"><a href="{{ url_for('frontend.display_currentuser') }}">{{ session['user'].full_name }}</a></div>
- <div class="h7 text-muted">{{session['user'].email}}</div>
- <div class="h7">{{session['user'].user_role}} at University of Surrey
- </div>
+ <img class="rounded-circle" width="45" src="images/users/{{ session['user'].image_url }}" >
+ <div class="h5" style="color: #007bff;"><a href="{{ url_for('frontend.display_currentuser') }}" style="text-decoration:none;">{{ session['user'].full_name }}</a></div>
+ <div class="h7 text-muted" >{{session['user'].email}}</div>
+ <div class="h7" >{{session['user'].user_role}} at University of Surrey</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="h6 text-muted">Categories</div>
<ul class="category-menu">
- <p class="title__category">{{category}}</p>
+ <p class="title__category" >{{category}}</p>
{% for category in categories %}
<li class="tile__category">
- <a class="btn btn--link" href="{{ url_for('frontend.categories', category=category) }}">{{category}}</a>
+ <a class="btn btn--link" href="{{ url_for('frontend.categories', category=category) }}" >{{category}}</a>
</li>
{% endfor %}
</ul>
</li>
</ul>
</div>
-</div>
\ No newline at end of file
+</div>
+</body>
\ No newline at end of file