Icon + public profile section update on edit page

This commit is contained in:
Inga Kirschnick 2023-03-15 12:46:17 +01:00
parent 666397046d
commit 268d00ce72

View File

@ -65,20 +65,16 @@
<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">
<div class="row">
<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>
<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>
<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>
<br>
@ -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 %}