mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-10 00:03:24 +00:00
Adjust css
This commit is contained in:
parent
e7d04d9817
commit
f54bf2b8af
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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],
|
||||||
|
Loading…
Reference in New Issue
Block a user