From 21b88a37fd7c01e1245f742aa9cdb5bdf6ada253 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:52:49 +0000 Subject: [PATCH] Replace profile.html --- .../application/templates/forum/profile.html | 190 ++++++++++++------ 1 file changed, 129 insertions(+), 61 deletions(-) diff --git a/frontend/application/templates/forum/profile.html b/frontend/application/templates/forum/profile.html index 68afac6..db2360e 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 -- GitLab