77 lines
3.5 KiB
Twig
77 lines
3.5 KiB
Twig
{% extends '@mio/settings/master.twig' %}
|
|
|
|
{% block settings_content %}
|
|
<form
|
|
class="settings__images"
|
|
method="post"
|
|
action="?m=images"
|
|
enctype="multipart/form-data">
|
|
<input type="hidden"
|
|
name="MAX_FILE_SIZE"
|
|
value="{{ avatar_max_filesize }}">
|
|
<input type="hidden"
|
|
name="csrf"
|
|
value="{{ csrf_token() }}">
|
|
|
|
<div class="settings__images__sections">
|
|
<div class="settings__images__requirements">
|
|
<ul class="settings__images__requirements__list">
|
|
<li class="settings__images__requirement settings__images__requirement--header">Guidelines</li>
|
|
<li class="settings__images__requirement">Keep things sane and suitable for all ages.</li>
|
|
<li class="settings__images__requirement">Image may not exceed the <strong>{{ avatar_max_filesize|byte_symbol(true) }}</strong> filesize limit.</li>
|
|
<li class="settings__images__requirement settings__images__requirement--header">Avatar</li>
|
|
<li class="settings__images__requirement">May not be larger than <strong>{{ avatar_max_width }}x{{ avatar_max_height }}</strong>.</li>
|
|
<li class="settings__images__requirement">Will be centre cropped to be <strong>200x200</strong>.</li>
|
|
<li class="settings__images__requirement">Animated gif images are allowed.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings__avatar">
|
|
<label class="settings__avatar__label">
|
|
<div
|
|
class="avatar settings__avatar__preview"
|
|
id="avatar-preview"
|
|
style="background-image:url('/profile.php?u={{ avatar_user_id }}&m=avatar')"></div>
|
|
<input
|
|
class="settings__avatar__input"
|
|
accept="image/png,image/jpeg,image/gif"
|
|
type="file"
|
|
name="avatar[file]"
|
|
id="avatar-selection">
|
|
<div class="settings__avatar__name" id="avatar-name">
|
|
Click to select a file!
|
|
</div>
|
|
</label>
|
|
|
|
<div class="settings__avatar__buttons">
|
|
<button
|
|
class="settings__avatar__button"
|
|
name="avatar[mode]"
|
|
value="upload">
|
|
Upload
|
|
</button>
|
|
<button
|
|
class="settings__avatar__button settings__avatar__button--delete{{ user_has_avatar ? '' : ' settings__avatar__button--disabled' }}"
|
|
{{ user_has_avatar ? '' : 'disabled' }}
|
|
name="avatar[mode]"
|
|
value="delete">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<script>
|
|
function updateAvatarPreview(name, url, previewEl, nameEl) {
|
|
url = url || "/profile.php?u={{ avatar_user_id }}&m=avatar";
|
|
previewEl = previewEl || document.getElementById('avatar-preview');
|
|
nameEl = nameEl || document.getElementById('avatar-name');
|
|
previewEl.style.backgroundImage = 'url(\'' + url + '\')';
|
|
nameEl.textContent = name;
|
|
}
|
|
|
|
document.getElementById('avatar-selection').addEventListener('change', function (ev) {
|
|
updateAvatarPreview(ev.target.files[0].name, URL.createObjectURL(ev.target.files[0]));
|
|
});
|
|
</script>
|
|
{% endblock %}
|