Adjust css

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

View File

@ -81,8 +81,8 @@
> img, > video { > img, > video {
width: 100% !important; width: 100% !important;
object-fit: contain; object-fit: cover;
height: auto; height: 100% !important;
max-height: 100%; max-height: 100%;
} }
@ -98,23 +98,38 @@
&-edit { &-edit {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
> a { > div {
margin-bottom: 15px; max-width: 100%;
}
> input {
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;
}
}
> input {
font-size: .8em;
font-weight: normal;
cursor: pointer;
} }
> p { > p {
margin-bottom: 0; margin-bottom: 10px;
text-align: left !important; text-align: left !important;
min-height: 50px; min-height: 50px;
} }

View File

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