From 268d00ce72190d0a9e68c6cc5c19fdd0f7d68d3f Mon Sep 17 00:00:00 2001
From: Inga Kirschnick <inga.kirschnick@uni-bielefeld.de>
Date: Wed, 15 Mar 2023 12:46:17 +0100
Subject: [PATCH] Icon + public profile section update on edit page
---
app/templates/users/edit_profile.html.j2 | 38 ++++++++++++++++--------
1 file changed, 25 insertions(+), 13 deletions(-)
diff --git a/app/templates/users/edit_profile.html.j2 b/app/templates/users/edit_profile.html.j2
index fc03909a..1da2f377 100644
--- a/app/templates/users/edit_profile.html.j2
+++ b/app/templates/users/edit_profile.html.j2
@@ -65,19 +65,15 @@
<div class="collapsible-body">
<form method="POST" enctype="multipart/form-data">
{{ edit_public_profile_information_form.hidden_tag() }}
- <div class="row">
- <div class="col s10 m4">
- <img src="{{ url_for('.profile_avatar', user_id=user.id) }}" alt="user-image" class="circle responsive-img" id="avatar">
- </div>
- </div>
<div class="row">
- <div class="col s3 m2">
- <div class="center-align">
- <a class="btn-floating red waves-effect waves-light modal-trigger" style="margin-top:15px;" href="#delete-avatar-modal"><i class="material-icons">delete</i></a>
- </div>
+ <div class="col s12 m2">
+ <img src="{{ url_for('.profile_avatar', user_id=user.id) }}" alt="user-image" class="circle responsive-img" id="avatar">
</div>
- <div class="col s9 m8">
+ <div class="col s12 m6">
{{ wtf.render_field(edit_public_profile_information_form.avatar, accept='image/jpeg, image/png, image/gif', placeholder='Choose an image file', id='avatar-upload') }}
+ </div>
+ <div class="col s12 m1">
+ <a class="btn-floating red waves-effect waves-light modal-trigger" style="margin-top:15px;" href="#delete-avatar-modal"><i class="material-icons">delete</i></a>
</div>
</div>
<p></p>
@@ -107,7 +103,7 @@
<div class="col s8" style="margin-top: 22.8px;">
<ul class="collapsible">
<li>
- <div class="collapsible-header">
+ <div class="collapsible-header" style="justify-content: space-between;">
<span>Notification Settings</span>
<i class="caret material-icons">keyboard_arrow_right</i>
</div>
@@ -122,7 +118,7 @@
</div>
</li>
<li>
- <div class="collapsible-header">
+ <div class="collapsible-header" style="justify-content: space-between;">
<span>Change Password</span>
<i class="caret material-icons right">keyboard_arrow_right</i>
</div>
@@ -139,7 +135,7 @@
</div>
</li>
<li>
- <div class="collapsible-header">
+ <div class="collapsible-header" style="justify-content: space-between;">
<span>Delete Account</span>
<i class="caret material-icons right">keyboard_arrow_right</i>
</div>
@@ -227,5 +223,21 @@ document.querySelector('#delete-user-button').addEventListener('click', (event)
Requests.users.entity.delete(currentUserId)
.then((response) => {window.location.href = '/';});
});
+
+document.querySelectorAll('.collapsible').forEach((collapsible) => {
+ M.Collapsible.init(
+ collapsible,
+ {
+ onOpenStart: (event) => {
+ let caret = event.querySelector('.caret');
+ caret.innerHTML = 'keyboard_arrow_down';
+ },
+ onCloseStart: (event) => {
+ let caret = event.querySelector('.caret');
+ caret.innerHTML = 'keyboard_arrow_right';
+ }
+ });
+});
+
</script>
{% endblock scripts %}
--
GitLab