klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-22 14:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjust css

Browse Source
This commit is contained in:
Antoine Bartuccio 2024-08-21 14:37:02 +02:00 committed by Bartuccio Antoine
parent e7d04d9817
commit f54bf2b8af
2 changed files with 46 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
core/static/user/user_edit.scss
View File

@ -81,8 +81,8 @@
> img, > video {
width: 100% !important;
object-fit: contain;
height: auto;
object-fit: cover;
height: 100% !important;
max-height: 100%;
}
@ -98,23 +98,38 @@
&-edit {
display: flex;
flex-direction: column-reverse;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
> a {
margin-bottom: 15px;
}
> div {
max-width: 100%;
> input {
font-size: .8em;
font-weight: normal;
cursor: pointer;
}
> button {
min-width: 30%;
}
@media (min-width: 750px) {
height: auto;
align-items: center;
display: inline-flex;
overflow: hidden;
> input {
font-size: .6em;
}
}
}
> p {
margin-bottom: 0;
margin-bottom: 10px;
text-align: left !important;
min-height: 50px;
}

32
core/templates/core/user_edit.jinja
View File

@ -12,7 +12,6 @@
<div class="profile-picture" x-data="camera_{{ field_name }}" >
<div class="profile-picture-display" :aria-busy="loading" :class="{ 'camera-error': is_camera_error }">
<img
x-ref="img"
x-show="!is_camera_enabled && !is_camera_error"
:src="get_picture()"
alt="{%- trans -%}Profile{%- endtrans -%}" title="{%- trans -%}Profile{%- endtrans -%}"
@ -48,15 +47,17 @@
</div>
<div x-ref="form" class="profile-picture-edit">
{%- if form[field_name] -%}
<p>
{{ form[field_name].label }}
</p>
<div>
{{ form[field_name] }}
{%- if user.is_root and form.instance[field_name] -%}
<button class="btn btn-red" @click.prevent="window.open('{{ url('core:file_delete', file_id=form.instance[field_name].id, popup='') }}')">
<button class="btn btn-red" @click.prevent="window.open('{{ url('core:file_delete', file_id=form.instance[field_name].id, popup='') }}', '_self')">
{%- trans -%}Delete{%- endtrans -%}
</button>
{%- endif -%}
</div>
<p>
{{ form[field_name].label }}
</p>
{%- else -%}
<em>{% trans %}To edit your profile picture, ask a member of the AE{% endtrans %}</em>
{%- endif -%}
@ -67,17 +68,19 @@
Alpine.data("camera_{{ field_name }}", () => ({
can_edit_picture: false,
/* Those values are based on the unknwon.jpg file */
width: 417,
height: 434,
loading: false,
is_camera_enabled: false,
is_camera_error: false,
picture: null,
video: null,
img: null,
picture_form: null,
init() {
this.video = this.$refs.video;
this.img = this.$refs.img;
this.picture_form = this.$refs.form.getElementsByTagName("input");
if (this.picture_form.length > 0){
this.picture_form = this.picture_form[0];
@ -106,9 +109,9 @@
.then((stream) => {
this.loading = false;
this.is_camera_enabled = true;
this.video.width = this.img.width;
this.video.height = this.img.height;
this.video.srcObject = stream;
this.video.width = 320;
this.video.height = 240;
this.video.play();
})
.catch((err) => {
@ -121,6 +124,12 @@
let canvas = document.createElement("canvas")
const context = canvas.getContext("2d");
/* Create the image */
canvas.width = this.video.width;
canvas.height = this.video.height;
context.drawImage(this.video, 0, 0, canvas.width, canvas.height);
this.picture = canvas.toDataURL("image/png");
/* Stop camera */
this.video.pause()
this.video.srcObject.getTracks().forEach((track) => {
@ -129,11 +138,6 @@
}
});
canvas.width = this.video.width;
canvas.height = this.video.height;
context.drawImage(this.video, 0, 0, this.video.width, this.video.height);
this.picture = canvas.toDataURL("image/png");
canvas.toBlob((blob) => {
let file = new File(
[blob],